Edge Animate Tutorial: Symbol Animation

Edge Animate Tutorial: Symbol Animation

On this tutorial we will see how to use Adobe Edge Animate to animate a symbol:
in this specific case we will simulate a simplified Sun movement.

On this tutorial the topics discussed are:

  • Symbols creation
  • Symbols animation
  • Attributes editing (dimension, rotation, color)

STAGE CREATION

Adobe Edge Tutorial #1Create a new document having dimensions 750 x 250 pixels.

SYMBOLS CREATION

Adobe Edge Tutorial #2Create a background using a rectangle with dimensions 750 x 250 pixels, then make a Symbol using right click > “Convert to Symbol”.
Name it “Background”.

Position the object on the stage at the location
X 0 px and Y 0 px


Adobe Edge Tutorial #3Create the Sun using a rounded rectangle with dimensions 150 x 150 pixels and round on the four corners of 150 pixels, then transform it to a Symbol.
Name it “Sun”.

Position the object on the stage at location
X 0 px and Y 0 px.

BACKGROUND ANIMATION

Enter inside the “Background” symbol we made before.

The background animation will last 10 seconds and it involves the color of the rectangle.

Select second 0:00 on the timeline,
then select the rectangle and change its background color to #000033.

At this point click Toggle Pin (P) button and move the selector on second 5:00, then edit background color of the rectangle to #0099CC, after this click Toggle Pin (P) again.

The first half of the animation is done,
to finish the transition click Toggle Pin (P) button, move the timeline to 10:00, then change rectangle background color to #000033 and click Toggle Pin (P) again.

Adobe Edge Tutorial #4Now the background animation is complete. To test click Play button (spacebar) and you would see a blue rectangle going lighter then back to dark.

SUN ANIMATION

The sun animation is 10 seconds long and it involves dimension, position and rotation of our Symbol.

Enter inside the “Sun” Symbol we made before and change the color of the circle to #FF9900, then set the location to X -375px.

Exit from “Sun” Symbol selecting Stage on top left of the central panel,
then select the “Sun” Symbol.

Adobe Edge Tutorial #5Select 0:00 second on the timeline, then set “Sun” location to
X 300px and Y 250px.


Adobe Edge Tutorial #6Now click on Toggle Pin (P) button and move the cursor to 5:00 seconds,
change rotation to 90 deg,
location to X 338px, Y 212px,
scale to 50% / 50%,
after these edit click Toggle Pin (P) again.


Adobe Edge Tutorial #7The first half of our animation is done,
to ends the transitions click Toggle Pin (P), move the timeline cursor to 10:00,
change rotation to 180 deg,
location to X 300px, Y 250px,
scale to 100% / 100%
and click Toggle Pin (P) again.


Now our animation is complete.
To test that all is fine click on Play button (spacebar),
and you should get the result here below

4 comments on Edge Animate Tutorial: Symbol Animation

  1. Hello,
    Looking at your great tutorial, I’m wondering if you would have any suggestion on how to animate the background the same way but this time with a changing gradient….Edge doesn’t seem to make it easy for gradient manipulation…..
    Thanks,
    Serge

    1. Hello Serge, I’m sorry but I don’t have at this time an efficient method for animating gradient bakcgrounds but I’ll look into it for a solution 🙂

  2. Ricardo,
    I got it:
    retrieve your values from an array and use it this way for example:
    tempColor= this.defaultColors[this.i];
    sym.$(“Rectangle5”).css(‘background-image’,’-webkit-linear-gradient(bottom,’ + tempColor + ‘7%, rgb(255,89,0) 54%)’);
    sym.$(“Rectangle5”).css(‘background-image’,’-moz-linear-gradient(bottom,’ + tempColor + ‘7%, rgb(255,89,0) 54%)’);

    It works beautifully!!
    Serge

    1. Nice! The only limitation I think it’s that IE9 and previous don’t like CSS gradients at all (maybe using native filter “progid:DXImageTransform.Microsoft.gradient” could be a solution)

Leave a Reply

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