Adobe Edge Animate and variables, collect coins [EN]

To create an interactive environment in Edge Animate, we need to have some code. And one of the most important things are variables. To declare a variable, select your stage and click on “open actions” button near the title of your project (properties). Select “creationComplete” and add all the following code below:

sym.setVariable("varName", 0);

Where “varName” is your variable name. The number behind that is the start value of this variable.

When you have a coin you can collect, select the coin symbol and click on “open actions” in the properties window.
Add the following code:

// lets get the variable "varName" and put it into another variable named "Name"
var Name = sym.getVariable("varName");
// this is the important part, counting. Add 1 to the value of the variable "Name"
Name = Name + 1;

This code gets the variable name varName and puts it in a new var “Name”. After that we add a plus 1 to this variable, so we know that someone has clicked on the coin and that we can keep track of it.

sym.setVariable("varName", Name);
sym.$("TextField").html(Name);

We want to keep counting, so we have to put the 1 back in our global variable. After that we want to show the variable in a textfield. This textfield has an id “TextField”.

// when you have clicked on the coin, make it disappear with a fadeout
sym.$("coin").fadeOut(200);
 
// if we have clicked on 3 coins, show a symbol.
if (Name ==3){
sym.$("CongratsSymbol").show();
}

When the user has clicked on the coin, it has to disappear. That’s where we use the “fadeOut” function. The number between the brackets is how long the fade can take.

If the user has clicked on 3 coins, we want to show a symbol. So that’s where the check if the varName is 3 comes into place. Use the same code for the other 2 coins and be sure to use other id’s for the coins.

This is one way to do this, there could be others. If you have another way to do the same, please let me know.

3 Replies to “Adobe Edge Animate and variables, collect coins [EN]”

  1. // insert code to be run when the symbol is created here
    var aantalMunten = 0;

    //met deze aanroep start je een functie bij een click op een element dat de clas munt draagt!
    $(“.munt”).click( function (){
    //Hier staat de inhoud van deze functie
    //Met this geven we aan dat alleen het item dat aangeklikt is verwijderd wordt!
    this.remove();
    //Met aantalMunten++ geven we aan dat die de huidige waarde met 1 moet verhogen.
    aantalMunten++;
    //Met sym. roepen we het unieke element aan. Met text zeggen we dat de text die in dit element staat wordt vervangen met de inhoud van de var
    sym.$(“aantal”).text(aantalMunten);
    //Even testen of de waarde van aantalMunten 3 is
    if (aantalMunten == 3){
    //Als dit waar is mag het symbool element getoond worden. .hide voor onzichtbaar maken!
    sym.$(“gevondenTekst”).show();
    }
    })

  2. Dank je! Mooie elegante code zo! Deze code plaats je op de stage. Belangrijk is dan dat iedere munt als “class name”, munt heeft. Bij je properties, rechtsbovenin staat een kleine button met daarin een “s”.

  3. Hoi!
    Dank voor de uitleg en voorbeelden. Ik krijg mijn versie niet echt werkend. Is er een downloadable file waar in het bovenstaande werkt? Dan kan ik denk ik beter achterhalen wat er bij mij fout gaat. Thanx!

    Matthijs

Leave a Reply

Your email address will not be published. Required fields are marked *