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 made a workaround. Now I want to know how to do it right.

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

I tried this:

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

It does not work. I don't know where I went wrong. I ended up doing the following:

I created two divs, Symbol1 and Symbol2 . They are on top of each other. When the first one was clicked, it played the timeline and disappeared (showing the bottom div), so the second symbol was clicked, giving play reverse. After that Symbol1 reappear, restarting the process.

Code:

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

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

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

link to art

Answer:

Unfortunately, I can't test this code because I can't make a jsfiddle that returns 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 set whenever there was a click, so x was always == 0 .

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


I'm not sure 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.

Anything like Symbol.bindElementAction(compId, symbolName, "#Stage_info > div:not(.Stage_info_largura_id)", "click", – This selector says "All divs that are children of #Stage_info other than Stage_info_width"

Of course, when using this selector you'll have to change part of the above function, to not select "Pimentão2" by default, but select the clicked item.

Scroll to Top