Edge Animate Tutorial: Restart, Rewind and infinite Loop

Edge Animate Tutorial: Restart, Rewind and infinite Loop

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.

1. HOW TO RESTART

Adobe Edge Tutorial: Restart, Rewind and infinite Loop #1Create an object on the stage, right click this and select “Open Actions for”,
a new window will opens.


Adobe Edge Tutorial: Restart, Rewind and infinite Loop #2Inside 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”.


Adobe Edge Tutorial: Restart, Rewind and infinite Loop #3Now insert the restart code

sym.play(0);

The inserted code tells Edge Animate to execute the animation from the start (0:00 on the timeline).

2. HOW TO REWIND

Adobe Edge Tutorial: Restart, Rewind and infinite Loop #4Create an object on the stage, right click this and select “Open Actions for”,
a new window will opens.


Adobe Edge Tutorial: Restart, Rewind and infinite Loop #5Inside 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”.


Adobe Edge Tutorial: Restart, Rewind and infinite Loop #6Now insert the rewind code

sym.playReverse(sym.getPosition());

The inserted code tells Edge Animate to execute the animation from the current position going back to the start.


Adobe Edge Tutorial: Restart, Rewind and infinite Loop #7To 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();

Now Edge Animate will play the animation when the rewind reach 0:00.

3. HOW TO INFINITE LOOP

Adobe Edge Tutorial: Restart, Rewind and infinite Loop #8To 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);

Now when the animation reaches the end, it will restart from 0:00.


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: Adge Preview Resources Runtime API.

6 comments on Edge Animate Tutorial: Restart, Rewind and infinite Loop

  1. 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

    1. 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();

    2. 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?

  2. 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.

Leave a Reply

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