Javascript toggle or if / else on Adobe Edge Animate

Question

Javascript toggle or if / else on Adobe Edge Animate

Navigation

#1 by (0 votes)

3

I use Adobe Edge Animate for simple animations at work. I could not make one of them work and I played a trick. Now I want to know how to do it right.

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

I tried this:

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

This does not work. I do not know where I went wrong. I ended up doing the following:

I created two divs, Symbol1 and Symbol2 . They stand on top of each other. When the first one was clicked, it gave play on the timeline and disappeared (showing the bottom div), so that the second symbol was clicked, giving play reverse. After that the Symbol1 would 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 it work? The second mode works but it's double work (doing this for a button is easy, I want to see it done for twenty, which would turn 40, since there are two buttons for each part).

Link to the art

javascript jquery if else jquery-animate

asked by anonymous 06.10.2015 / 00:57

1 answer

Modal window by clicking the info box link opened by a Google Maps marker Hibrid Web Application (MVC and Web API)

score 0 · Answer 1

Unfortunately, I can not test this code because I can not make a jsfiddle to return the images that you are 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 was that the variable x was being defined whenever there was a click, so x was always == 0 .

Instead of defining a variable, you have to define an attribute, in this case data-show . When you click on the bell pepper, it sees "this element has data-show?" (is it showing the date?) - if this is true, then it does playReverse and removes the element attribute, 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 do not 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 #Stage_info daughters other than Stage_info_large"

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