Animation Shape Hint in Flash CS4

Flash CS4 Animation

Tutorial by The Mixer from adobeflashtutorial

This time I will show you how to insert an animated Shape Hints, this tool is very useful because if the shape hints are placed in the correct position, the transformation does not warp in weird things with shape hints, lines follow a pattern of geometric transformation.

Sometimes when working with animations of geometric shapes they do not follow a logical transformation, because strange things are deformed in the process of transformation. This time I will show you how to insert an animated Shape Hints, this tool is very useful because if the shape hints are placed in the correct position, the transformation does not warp in weird things with shape hints, lines follow a pattern of geometric transformation.
To make a complicated explanation of this animation tutorial in its entirety will take place at the Scene, so no need to insert or create any kind of symbol, the same way you do not need to insert a single line of ActionScript code.

Step 1

Create a new document Ctrl. + N.
Select the option Type: Flash File (ActionScript 3.0) or Flash File (ActionScript 2.0).

Step 2

Now enter the Properties of the document, Ctrl. + J.
The document has Dimensions: 550 pixels width * 400 pixels height.
Use as background color #FFFFFF.
Frame rate: 24 fps.

Step 3

This step selects the geometry to draw the Scene of the document.
Select the tool PolyStar, then the properties option in the box click Options ...
Clicking this box will appear next Tool Settings panel.
In this panel select the following options. Style: polygon and Number of Sides: 3.

Step 4

With the properties is inserted to draw a geometric shape with 3 sides (triangle).
Open the properties panel and draw a triangle with the following dimensions: 390 pixels width * 390 pixels height.
Place the geometric figure in coordinates X: 80.0 Y: 5.0.
The colors are: stroke color #000000 and Fill color #FF9900.

Insert a Blank KeyFrame (F7) in position number 40 on the Timeline, this trick will not be anything drawn on the Scene.

Step 6

Repeat step 3 again, but now in the Tool Settings panel, replace the # 3 and change the Number of sides to 8.

Step 7

Placed in the frame # 40, proceed to draw the geometric shape of 8 sides.
In the PROPERTIES panel choose the following options.
Geometric figure size:  390 pixels width * 390 pixels height, put this figure in coordinates: X: 80.0 Y: 5.0.
The colors are: Stroke color #000000 y Fill color #FF9900.

This step will be inserted the animation.
Select a frame from 1 to 39, this time select the frame # 3.
Then click on Insert, then Shape Tween (Insert>> Shape Tween). This option is inserted with the animation.

Step 9

Now it's time to add shape hints to make the animation has a more logical move.
First select the frame # 1, then the following route Modify>> Shape>> Add Shape Hint or press the following keyboard combination Ctrl. + Shift + H.

Shape hints appear one by one in red and the order of the alphabet (a, b, c ...).
To make the animation you need to insert 6 shape hints a, b, c, d, e and f.
After only fit each of the shape hints in the positions shown in the picture.

Step 11

Select Frame # 40 here will appear in the same number of Shape hints so that the frame # 1 will also be red.
When you stack one by one the shape hints as shown in the picture these changed from red to green.
This step terminating the tutorial well done!

Press Ctrl. + Enter to view the animation, you have a different arrangement of shape hints and have a different animation. Suggestions and comments until the next tutorial.

View swf movie

Download File FLA