In this tutorial we will see three different methods to restart an animation made with Adobe Edge Animate.
On this tutorial the topics discussed are:
- Timeline manage
- Mouse events on objects
- Adobe Edge API
INTRODUCTION
Edge Animate has two methods for managing the execution on the timeline:
play() and playReverse().
To have a more clear overview about the difference between the two methods,
you can find here below the result
The RESTART button, made using play(), restart the animation from the start,
the REWIND button, made using playReverse(), looks like the rewind of a tape.
HOW TO RESTART
Create an object on the stage, right click this and select “Open Actions for”, a new window will opens.
Inside the new window click on [+] button on the top left, a dropdown menu will opens.
Select the type of event that will trigger the restart, in this case “click”.
Now insert the restart code
sym.play(0);
HOW TO REWIND
Create an object on the stage, right click this and select “Open Actions for”, a new window will opens.
Inside the new window click on [+] button on the top left, a dropdown menu will opens.
Select the type of event that will trigger the restart, in this case “click”.
Now insert the rewind code
sym.playReverse(sym.getPosition());
To restart the animation when the cursor will be back to start point,
move the the timeline cursor to 0:00 and add an action to the frame clicking on “Insert trigger” button that you can find on the top left side of the timeline.
A new window will open, insert this code inside it
sym.play();HOW TO INFINITE LOOP
To have the animation restart when it ends, move the timeline cursor to the end frame of the animation and add an action to the frame clicking on “Insert trigger” button that you can find on the top left side of the timeline.
A new window will open, insert this code inside it
sym.play(0);As you probably noted the code is very similar to jQuery, correct! Edge Animate API are based on this javascript library.
You can find the complete list of current Edge Animate API on the official page: Edge Preview Resources Runtime API.
Hi Thanks for the tutorial. A clear explanation and very usefulI. I am a beginner with Edge and I hope you can tell me how you can start a animation by a click on a button. I have made a button (symbol) with the text ‘show me’) in Edge but can’t figure out to make it work. I guess it should be simple.
Kind regards,
Marcel
This should be enough: right-click on your symbol and choose “Open Actions for”, click on the button [+] that is on the top left of the new window and select the event “click” from the dropdown menu. Inside the window insert: sym.play();
But how if i have two symbols like this:
I have two symbol stars, one symbol stars is rotate 360 degree during 1 minutes. and another symbol do movement after another star rotate 360 degree. what i want is when the symbol star do movement, another star doesn’t stop the rotation.
How i can do that? is it possible to do that?
Yes, you have to make two different animations on each of the two objects, maybe this could help you more: Edge Animate Tutorial: Symbol Animation
Thank you very much.
The
sym.playReverse(sym.getPosition());
Was what I was stuck on, now I can complete my project with some sanity.
You Rock.
Have an awesome rest of the week.
Thank for your tutorial, it’s was short and helpful