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)
Create a background using a rectangle with dimensions 750 x 250 px, 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
Create the Sun using a rounded rectangle with dimensions 150 x 150 px and round on the four corners of 150 px, then transform it to a Symbol.
Name it “Sun”.
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.
Now the background animation is complete. To test click Play button (spacebar) and you would see a blue rectangle going lighter then back to dark.
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.
Now 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.
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