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)
Position the object on the stage at the location
X 0 px and Y 0 px
Position the object on the stage at location
X 0 px and Y 0 px.
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.
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.
The 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