Flash CS4: use Shape Hint

Shape Tween helps you transform objects from one form to another. In some cases, this transformation does not go smoothly as intended, ...

Shape Tween helps you transform objects from one form to another. In some cases, this transformation does not go as smoothly as you intended, you use Shape Hint to guide the transformation at your disposal.

images 1 of Flash CS4: use Shape Hint
Images 1 of Flash CS4: use Shape Hint

Practice Shape Tween and Shape Hint

In this lesson, you use Shape Tween to transform the rectangle into a star shape, then use Shape Hint to guide the transformation evenly and beautifully. The steps are as follows:

1. Switch back to the default workspace.

Click the Essentials area to reselect the default Flash workspace, then click Reset Essentials to restore this default workspace and start the exercise 10.

2. Create a new Flash Document.

3. Save a Flash Document.

Select FLASH CS4 ONLINE folder, then save this file as 010_shape_hint.fla (Save the reference form by right-clicking on the link and selecting " Save target as ")

4. Use the Rectangle Tool to draw a rectangle.

4.1 Click on the Rectangle Tool on the right toolbar:

images 2 of Flash CS4: use Shape Hint
Images 2 of Flash CS4: use Shape Hint

4.2 Click on the Stroke color box to select the border color for the rectangle:

images 3 of Flash CS4: use Shape Hint
Images 3 of Flash CS4: use Shape Hint

4.3 The color palette appears, and click on the box on the right with a red cross. This box is used to set the colorless value for the border, ie the drawn object will have no borders:

images 4 of Flash CS4: use Shape Hint
Images 4 of Flash CS4: use Shape Hint

4.4 Click on Fill color to select the color for the rectangle:

images 5 of Flash CS4: use Shape Hint
Images 5 of Flash CS4: use Shape Hint

4.5 The color palette appears, click the red box to select the color of the rectangle:

images 6 of Flash CS4: use Shape Hint
Images 6 of Flash CS4: use Shape Hint

4.6 Putting the mouse in the middle of the Stage , click on the upper left corner and drag to the lower right corner as shown:

images 7 of Flash CS4: use Shape Hint
Images 7 of Flash CS4: use Shape Hint

4.7 You get a red rectangle as follows:

images 8 of Flash CS4: use Shape Hint
Images 8 of Flash CS4: use Shape Hint

4.8 Click on the Selection Tool on the right toolbar:

images 9 of Flash CS4: use Shape Hint
Images 9 of Flash CS4: use Shape Hint

4.9 Click to select the rectangle just drawn. Once selected, the rectangle changes to tiny particles, while the four-dimensional arrow appears below the mouse:

images 10 of Flash CS4: use Shape Hint
Images 10 of Flash CS4: use Shape Hint

4.10 To center the rectangle on the Stage , first select Edit > Cut from the menu:

images 11 of Flash CS4: use Shape Hint
Images 11 of Flash CS4: use Shape Hint

Next select Edit > Paste in Center from the menu:

images 12 of Flash CS4: use Shape Hint
Images 12 of Flash CS4: use Shape Hint

You get the rectangle centered on the Stage as follows:

images 13 of Flash CS4: use Shape Hint
Images 13 of Flash CS4: use Shape Hint


5. Use the PolyStar Tool to draw the star shape.

5.1 Click on frame 24 of Layer 1 in Timeline :

images 14 of Flash CS4: use Shape Hint
Images 14 of Flash CS4: use Shape Hint

5.2 Select Insert > Timeline > Blank Keyframe from the menu (or press the shortcut F7 ) to add a white keyframe to the Stage:

images 15 of Flash CS4: use Shape Hint
Images 15 of Flash CS4: use Shape Hint

5.3 You get a white keyframe at frame 24 :

images 16 of Flash CS4: use Shape Hint
Images 16 of Flash CS4: use Shape Hint

Also on the Rectangle Stage is no longer available.

images 17 of Flash CS4: use Shape Hint
Images 17 of Flash CS4: use Shape Hint

You will use the PolyStar Tool to draw a star on the Stage.

5.4 Click on the Rectangle Tool on the right toolbar and hold down the mouse for a few seconds for the submenu to appear. Click on PolyStar Tool :

images 18 of Flash CS4: use Shape Hint
Images 18 of Flash CS4: use Shape Hint

5.5 Click on the Fill color box to select the color for the PolyStar Tool :

images 19 of Flash CS4: use Shape Hint
Images 19 of Flash CS4: use Shape Hint

5.6 The color palette appears, click the blue box to select the color for the PolyStar Tool :

images 20 of Flash CS4: use Shape Hint
Images 20 of Flash CS4: use Shape Hint

5.7 Click the Options button . of the PolyStar Tool:

images 21 of Flash CS4: use Shape Hint
Images 21 of Flash CS4: use Shape Hint

The Tool Settings dialog box appears:

images 22 of Flash CS4: use Shape Hint
Images 22 of Flash CS4: use Shape Hint

5.8 In the Style section, click for the drop-down menu and select star:

images 23 of Flash CS4: use Shape Hint
Images 23 of Flash CS4: use Shape Hint

5.9 Click the OK button to close the dialog box:

images 24 of Flash CS4: use Shape Hint
Images 24 of Flash CS4: use Shape Hint

5.10 Holding down the Shift key, hovering over the Stage and dragging a segment from the bottom up as shown:

images 25 of Flash CS4: use Shape Hint
Images 25 of Flash CS4: use Shape Hint

5.11 You obtain the blue star shape as follows:

images 26 of Flash CS4: use Shape Hint
Images 26 of Flash CS4: use Shape Hint

5.12 Click on the Selection Tool on the right toolbar:

images 27 of Flash CS4: use Shape Hint
Images 27 of Flash CS4: use Shape Hint

5.13 Click to select the star you just drawn. Once selected, the star turns into tiny particles, while a four-dimensional arrow appears below the mouse.

images 28 of Flash CS4: use Shape Hint
Images 28 of Flash CS4: use Shape Hint

5.14 To center the star on the Stage , first choose Edit > Cut from the menu:

images 29 of Flash CS4: use Shape Hint
Images 29 of Flash CS4: use Shape Hint

Next select Edit > Paste in Center from the menu:

images 30 of Flash CS4: use Shape Hint
Images 30 of Flash CS4: use Shape Hint

You get the center-aligned star as follows:

images 31 of Flash CS4: use Shape Hint
Images 31 of Flash CS4: use Shape Hint

(Continue)

5 | 1 Vote
« PREV : Mysterious graphic...
Flash CS4: Learn... : NEXT »