This lesson will show you how to create rectangle animation with using this properties like color, transform rotate, width, height, x axis, y axis and timeline properties.

Rectangle Animation

STEP 1 : Select the rectangle tool STEP 2 : Draw a rectangle in the stage

Position And Size

STEP 3 : First we have to change rectangle size (select the rectangle). Before set the height value We have to “unlink the link between W and H” properties. STEP 4 : Now We will change rectangle width is 100 and height 100 STEP 5 : Change the x, y position in the place of position and size properties panel. I set x is 5px and y is 50px.

Color

STEP 6 : Properties panel have the individual section for color properties. Using this we can change the color of rectangle. I choosed green color value (rgba(17,175,22,1.00))

Toggle Pin

STEP 7 : Click on the toggle pin. It was located Timeline panel. See the below image for this action. STEP 8 : Now selet the time 0.04 from time panel. STEP 9 : Change the properties of rectangle How to display When time reach 0.04 sec. STEP 10: Changed the x axis value from “Position and Size” section of properties panel. Change x axis value 5px to 375px. STEP 11: Change rectangle color from green (rgba(17,175,22,1.00)) to red (rgba(245,60,77,1.00)). STEP 12: See the above image. Yellow arrow point the Green rectangle. White arrow point the red rectangle.

Create Animation

STEP 13: Now we will create rotating and color changing rectangle animation between Green and Red rectangle. STEP 14: Select 00:01.000 from timeline or enter value in timeline textbox. Then change the “rotate” style value is 45 in the “Transform” section of properties panel. STEP 15: Following step 14 We have to set following time and angle value 00:02.000 – 90 Rotate 00:03.000 – 135 Rotate 00:04.000 – 180 Rotate STEP 16: Click the play button or preview in browser to see the rotated rectangle animation.