Javascript toggle or if/Else on Adobe Edge Animate

Question

I use Adobe Edge Animate for simple animations at work. I couldn’t get one of them to work and I did a trick. Now I want to know how to do it right.

I have a button. When clicked, it should play on the timeline from start to finish. If clicked again, it should play backwards, from end to start.

I tried that:

var x=0;
if (x==0){
    sym.getSymbol("timeline").play('start');
    x=1;
} else {
    sym.getSymbol("timeline").playReverse('finish');
    x=0 ;
}

It doesn’t work. I don’t know where I went wrong. I ended up doing the following:

I created two Ivs, Symbol1 and Symbol2. They stand on top of each other. When the first one was clicked, it played on Timeline and disappeared (showing the lower div), so that the second symbol was clicked, giving play Reverse. After that the Symbol1 reappeared, restarting the process.

Code:

// Symbol2:
sym.getSymbol("timeline").play('start');
sym.$("symbol2").hide();

// Symbol1:
sym.getSymbol("timeline").playReverse('finish');
sym.$("symbol2").show();

How do you make it work? The second mode works but is double work (do this for a button is easy, I want to see do for twenty, which would turn 40, since there are two buttons for each part).

Link to the art

Answer 1

Unfortunately, I can’t test this code because I can’t make a jsfiddle to return the images you’re using on your server. However, this script should work:

Symbol.bindElementAction(compId, symbolName, "${Pimentao2}", "click", function(sym, e) {

if ($(this).attr('data-show')) {
    sym.getSymbol("Pimentao2").playReverse('volta');
    $(this).attr('data-show',false)
} else {
    sym.getSymbol("Pimentao2").play('vai');
    $(this).attr('data-show',false);
}
});

What you were doing wrong was that the variable x was being defined whenever there was a click, so x era at all times == 0.

Instead of defining a variable, what you have to do is define an attribute, in this case data-show. By clicking on the chili, he sees "does this element have a date-show?" (is it showing the date?) - if this is true, then he does the playReverse and withdrawing the element attribute, otherwise it does play and adds the attribute data-show to the element.

---

I don’t really know how Adobe Edge Animate works, but I suppose you can improve this selector to work for all buttons so you don’t have to repeat this function.

Something like Symbol.bindElementAction(compId, symbolName, "#Stage_info > div:not(.Stage_info_largura_id)", "click", - This selector says "All Ivs that are daughters of #Stage_info other than Stage_info_width"

Of course when using this selector you will have to change part of the function above, not to select the "Pepper2" by default, but select the item clicked.