CIS 205—Web Design & Development

FlashChapter 4

Creating Animations

Chapter 4: Creating Animations

• Introduction– Animation can be extremely important for any web site

• How Does Animation Work?– Animation is a perception created by series of still

images (frames)– Frame rates of 10-12 frames per second (fps) are good

for animation (Flash uses 12 fps)

• Flash Animation– There are two kinds of Flash animation• Frame-by-frame• Tweened animations

Lesson 1: Create Frame-by-Frame Animations

• Understanding Frame-by-Frame Animations– Things to consider for frame animations• The number of different images (more realistic)• The number of frames in which an image appears• The movie frame rate (<10 is jerky, >30 is blurred)

– A keyframe signifies a change in the object• Each frame in a frame animation may need to be a keyframe

• Creating a Frame Animation– Select a frame for the animation to begin, insert a

keyframe, place the object on the stage– Select a frame for a change to occur, insert a keyframe,

then change the object or add a new one

Lesson 1: Create Frame-by-Frame Animations (2)• Create an in-place frame-by-frame animation

1. Start Flash, open the file fl4_1.fla where your Data Files are stored, then save the file as frameAn.fla

2. Verify that the Tools panel, Property inspector, and Library panel are the only open panels

3. On the menu bar, click View, point to Magnification, click Fit to Window

4. Click the Free Transform tool, then click the Rotate and Skew option in the Options section of the Tools panel

5. Click Frame 2 on the carGo layer, insert a keyframe6. Drag the top-right handle up to tilt the car up

Lesson 1: Create Frame-by-Frame Animations (3)• Create an in-place frame-by-frame animation

(cont’d)7. Click Frame 3 on the carGo layer, insert a keyframe8. Drag the top-right handle up to tilt the car up again9. Click Frame 4 on the carGo layer, insert a keyframe10. Drag the top-right handle up to tilt the car down11. Click Frame 5 on the carGo layer, insert a keyframe12. Drag the top-right handle up to tilt the car down again13. Click Frame 6 on the carGo layer, insert a keyframe14. Save and test the movie (click Control, Test Movie)

Lesson 1: Create Frame-by-Frame Animations (4)• Add detail to the animation

1. Click the Zoom tool, then click the car2. Click the Line tool, set the Stroke color to black3. Verify that Frame 6 is selected, then draw two lines as

in Figure 5 on p. 4-7.4. Click Frame 1 on the Timeline, then press the period

[.] five times5. Press [Enter] to play the movie6. Click View on the menu bar, point to Magnification,

click Fit in Window

Lesson 1: Create Frame-by-Frame Animations (4)• Create a moving frame animation

1. Insert a keyframe in Frame 7 on the carGo layer2. Click the Selection tool, drag a marquee around the

car and lines3. Drag the car and lines to the right about half the

distance across the stage, as in Figure 6, p. 4-84. Insert a keyframe in Frame 8, click the Line tool and

draw a third line as in Figure 7 on p. 4-85. Click the Selection tool, drag a marquee around the

car and lines, drag the car and lines to the right edge6. Insert a keyframe in Frame 9, then drag the car and

lines completely off the stage to the right7. Play the movie by pressing [Enter]

Lesson 1: Create Frame-by-Frame Animations (5)• Change the frame rate

1. Click Control on the menu bar, click Test Movie, close the Flash player window

2. Click the Selection tool, then click a blank area of the stage

3. Click the Size button in the Property inspector4. Type 6 in the Frame rate text box, click OK5. Click Control on the menu bar, click Test Movie, close

the Flash player window6. Change the frame rate to 18 and test the movie7. Change the frame rate to 12 and test the movie8. Save your work

Lesson 2: Create Motion-Tweened Animations• Understanding Motion Tweening– Frame-by-frame animations can be tedious– Tweening involves creating start and end frames and

letting Flash fill in the in-between frames– Framed animation have larger file sizes than tweened– Two types of tweened animations:• Shape: An object changes shape• Motion: An object moves while possibly changing size,

rotation, or color

– Tweening is done by • Setting a start keyframe and positioning an object• Insert (on the menu bar), Timeline, Create Motion Tween• Setting an end keyframe and positioning an object

Lesson 2: Create Motion-Tweened Animations (2)• Create an in-place frame-by-frame animation

1. Start Flash, open the file fl4_2.fla where your Data Files are stored, then save the file as carAn.fla

2. Click View on the menu bar, point to Magnification, click Fit in Window

3. Click Frame 1 on the carTurn layer, click Insert on the menu bar, Timeline, click Create Motion Tween

4. Insert a keyframe in Frame 20 on the carTurn layer5. Click the Selection tool, select the car, drag the car to

the upper right corner of the stage6. Press [Enter] to play the movie7. Click Frame 1, press the period [.] several times to see

how Flash has filled in the frames

Lesson 2: Create Motion-Tweened Animations (3)• Combine motion-tweened animations

1. Insert a keyframe in Frame 21 on the carTurn layer2. Select the car, click Modify on the menu bar, point to

Transform, click Rotate 90° CW (CW means clockwise)

3. Insert a keyframe in Frame 30 on the carTurn layer (a motion tween is automatically inserted because of the previous motion tween that was created)

4. Select the car, drag the car to the lower right corner of the stage

5. Press [Enter] to play the movie6. Save your work

Lesson 2: Create Motion-Tweened Animations (4)• Copy a motion-tweened animation

1. Insert a new layer (icon on the left, below the timelines), name it blueCar

2. Click Frame 1 of the blueCar layer3. Display the Library panel (Window, Library if

necessary), drag g_blueCar graphic to just off the stage on the left (see Figure 13, p. 4-14)

4. Click a blank area of the stage to deselect the car5. Click Frame 1 of the carTurn layer6. Press and hold [Shift], then click Frame 30 to select

the range of frames7. Click Edit on the menu bar, point to Timeline, click

Copy Motion

Lesson 2: Create Motion-Tweened Animations (5)• Copy a motion-tweened animation (continued)

8. Click the blue car to select it9. Click Edit on the menu bar, point to Timeline, click

Paste Motion Special10. Deselect the Horizontal scale option and the Vertical

scale option (to prevent resizing the blue car), click OK

11. Press [Enter] to play the movie12. Click Control on the menu bar, click Test Movie, close

the Flash player window13. Click File on the menu bar, point to Publish Preview,

click Default to view the movie in a browser14. Close the browser window

Lesson 2: Create Motion-Tweened Animations (6)• Copy a motion-tweened animation (continued)

15. Click Frame 1 of the blueCar layer16. Drag the blue car to the right until it is directly below

the red car17. Press [Enter] to play the movie18. Click the other keyframes on the blueCar layer and

reposition the blue car as desired to make the movie meet your requirements

19. Save your work

Lesson 3: Work with Motion Guides• Understanding Motion Guides– You can create a path that will guide moving objects– A motion guide layer is used to create the path– The moving object is on its own layer beneath the

motion guide layer– The object can be oriented to the path to make the

object rotate as it moves – To improve the animation, you can step through one

frame at a time, then insert a keyframe at the frame that needs improving, and change the object in that frame

Lesson 3: Work with Motion Guides (2)• Working with the Property Inspector– These are the options provided by the Property

inspector• Tween (Motion, Shape, or None)• Scale (making objects smaller or larger)• Ease (frame rate increases or decreases to change speeds)• Rotate (clockwise or counterclockwise)• Orient to path (orients the baseline of the object to the path)• Sync (ensures that the object loops properly)• Snap (attaches the object to the path)

Lesson 3: Work with Motion Guides (3)• Create an animation without a motion guide

1. Start Flash, open the file fl4_3.fla where your Data Files are stored, then save the file as carPath.fla

2. Verify the Tools panel and Property Inspector are displayed

3. Set the view to Fit in Window4. Click Frame 1 on the carRoute layer, select the car5. Click Insert on the menu bar, Timeline, click Create

Motion Tween6. Insert a keyframe in Frame 40 on the carRoute layer7. Drag the car to the lower right corner of the stage8. Press [Enter] to play the movie

Lesson 3: Work with Motion Guides (4)

• Add a motion guide to an animation1. Click Frame 1 on the carRoute layer2. Click Insert on the menu bar, point to Timeline, click

Motion Guide3. Click Frame 1 on the Guide layer, click the Pencil tool,

click the Smooth option, and draw a path as in Fig. 4-19.

4. Click the Selection tool and click the lock icon for the Guide layer

Lesson 3: Work with Motion Guides (5)

• Add a motion guide to an animation (continued)5. Click Frame 1 on the carRoute layer

a. If necessary, drag the tranformation point of the car to the beginning of the path

6. Click Frame 40 on the carRoute layer7. If necessary, drag the tranformation point of the car

to the end of the path 8. Press [Enter] to play the movie

Lesson 3: Work with Motion Guides (6)

• Orient an object to the path1. Play the movie again and notice the car doesn’t turn2. With the PI displayed, click Frame 1 on the carRoute

layer3. Select the car, click the Orient to path check box in

the PI4. Press [Enter] to play the movie

Lesson 3: Work with Motion Guides (7)

• Alter the path1. Click Frame 1 on the carRoute layer2. Click the Selection tool (if necessary)3. Click the Lock icon on the Guide layer to unlock the

layer, then point to the middle of the right curve4. When the pointer changes to an arc pointer, drag the

line to the left (see Fig. 4-21)5. Lock the Guide layer and play the movie

Lesson 3: Work with Motion Guides (8)

• Accelerate an animated object1. Play the movie and note the car speed is constant2. Click Frame 1 on the carRoute layer3. Click the Ease list arrow in the PI, drag the slider to

100, then click a blank area outside the stage4. Play the movie and notice the deceleration of the car5. Click Frame 1 on the carRoute layer6. Click the Ease list arrow in the PI, drag the slider to

-100, then click a blank area outside the stage7. Play the movie and notice the acceleration of the car8. Click Control on the menu bar, click Test Movie

Lesson 4: Create Animation Effects• Creating Motion Animation Effects– In addition to moving objects with motion tweening, you can

resize, rotate, and change color while it moves

• Resizing an Object Using a Motion Tween– You can select a starting frame, place an object on the stage,

create a motion tween, select an ending frame, place the object on the stage and resize it

• Rotating an Object Using a Motion Tween– There are many objects to make an object rotate or flip while it

moves, accelerates, and changes size

• Changing an Object’s Color– Color or brightness can gradually change during a motion tween

• Using the Onion Skin Feature– View an outline of an object in multiple frames for positioning

Lesson 4: Create Animation Effects (2)• Combining Various Animation Effects– All the above effects can be combined to create simulated reality

• Creating Timeline Effects– There are several prebuilt Timeline effects that can be applied to

text, graphics, and buttons (easier than doing manual animations)

• Adding an Effect to an Object– Select an object, click Insert, Timeline Effects, the select a

submenu and competing a dialog box for the desired effect

• Editing a Timeline Effect– Select the object then click Edit in the PI

• Deleting a Timeline Effect– Right-click an object to remove an effect

Lesson 4: Create Animation Effects (3)• Use motion tweening to resize an object

1. Open the carPath.fla movie2. Click Frame 1 on the carRoute layer3. Click the Zoom tool then click the car4. Select the car, click the Free Transform tool, click the Scale

option in the Options section of the Tools panel5. Drag the upper-left corner handle inward until the car is about

half its original size6. Change the view to Fit in Window7. Click Frame 40 in the carRoute layer8. Select the car, click the Scale option button9. Drag the upper-right corner handle outward until the car is

about twice its original size10. Play the movie, save your work

Lesson 4: Create Animation Effects (4)• Use motion tweening to rotate an object

1. Open fl4_4.fla, save it as mBikeRotate, select Fit in Window, and play the movie

2. Click Frame 10 on the motorBike layer3. With the motorbike selected, click Insert, Timeline, Create

Motion Tween4. Click the Rotate list arrow in the PI, click CCW, and enter 1 in

the times box5. Insert a keyframe in Frame 20 on the motorBike layer6. Play the movie, save your work

Lesson 4: Create Animation Effects (5)• Use motion tweening to change the color of an object

1. Click Frame 20 on the motorBike layer2. Click the Selection tool, then click the motorbike3. Click the Color list arrow in the PI, click Advanced, and click

the Settings button4. Change the value in the x R) + text box to 86 (86% red)5. Click OK6. Click Frame 1 on the Timeline, then play the movie

Lesson 4: Create Animation Effects (6)• Display the Onion Skin feature

1. Click Frame 1 on the motorBike layer, then click the Onion Skin button on the Timeline (at the bottom, below Frame 5)

2. Click the Edit Multiple Frames button on the Timeline (below about Frame 8)

3. Drag the End Onion Skin slider on the Timeline to Frame 22 (the right side of the slider is just to the left of Frame 5) Note: You can view the onion skin outlines, select a frame that you want to change, make it a keyframe, then implement the change

4. Play the movie and notice that the animation is not affected5. Click the Onion Skin button and the Edit Multiple Frames

button to turn of these features

Lesson 4: Create Animation Effects (7)• Create a Timeline Effect

1. Open fl4_5.fla and save it as carEffects, change view to Fit in Window

2. Click Window in the menu bar, click Library to display the Library panel

3. Click the Selection tool, drag the g_car graphic from the Library panel to the upper-left corner of the stage

4. Click Modify on the menu bar, click Break Apart5. Click Insert on the menu bar, point to Timeline Effects, point

to Transform/Transition, click Transition6. Click the Wipe check box to turn it off, click Update Preview7. Click OK8. Play the movie

Lesson 4: Create Animation Effects (8)• View a Timeline Effect in the Library

1. Double-click the Effects Folder button in the Library panel, click effectSymbol to see a preview

2. Click the Transition 1 symbol in the Library panel3. Click the Play button in the preview window of the Library

panel

Lesson 4: Create Animation Effects (9)• Edit and remove a Timeline Effect

1. Display the PI2. Click Frame 30 on the Timeline, click the Selection tool, then

click the car3. Click the Edit button in the PI4. Click the Out option button to change the direction5. Drag the Motion Ease slider to the right (value 100)6. Click Update Preview, click OK7. Click Frame 1 on the Timeline, play the movie8. Click Frame 1 on the Timeline9. Right-click the car, point to Timeline Effects, click Remove

Effect10. Play the movie

Lesson 4: Create Animation Effects (10)• Apply several Timeline Effects to one object

1. Click the Selection tool, drag a marquee around the car2. Click Insert on the menu bar, point to Timeline Effects, point

to Transform/Transition, click Transform3. Change the effect duration to 40 frames4. Click the Change Position by list arrow, click Move to Position5. Double-click 0 in the X Position text box, type 4006. Double-click 0 in the Y Position text box, type 3007. Click the Scale Lock button to unlock it8. Double-click 100 in the Scale X % text box, type 509. Double-click 100 in the Scale Y % text box, type 5010. Change the spin times to 311. Change the Motion Ease value to 10012. Click Update Preview, click OK, play the movie, and save

Lesson 5: Animate Text• Animating Text– You can motion tween text block objects just like graphic objects

• Select, copy, and paste frames1. Open frameAn.fla (created earlier) and save it as textAn.fla2. Change the view to Fit in Window3. Click Frame 9 on the carGo layer, hold [Shift], click Frame 1 to

select all frames4. Click Edit on the menu bar, point to Timeline, click Cut Frames5. Click the Frame View icon (at the right end of the frame

numbers), click Small6. Click Frame 71 on the carGo layer7. Click Edit on the menu bar, point to Timeline, click Paste Frames8. Click Frame 1 of the carGo layer9. Play the movie, save your work

Lesson 5: Animate Text (2)• Create animated text

1. Insert a new layer and name it scrollText2. Click Frame 1 on the scrollText layer (make sure PI is displayed)3. Click the Text tool (T) , click the pointer in the extreme upper

left corner or the workspace (outside the stage)4. Click the Font list arrow on the PI, click Times New Roman5. Click the Font Size list arrow, drag the slider to 206. Click the Text (fill) color swatch, click the blue color on the left7. Type The Classic Car Club8. Click the Selection tool, insert a keyframe in Frame 20 on the

scrollText layer9. Drag the text block horizontally to the top center of the stage10. Insert a keyfram in Frame 10, click the Tween list arrow in the

PI, click Motion11. Click Frame 1 on the Timeline and play the movie

Lesson 5: Animate Text (3)• Create rotating text

1. Insert a new layer and name it rotateText2. Insert a keyframe in Frame 21 on the rotateText layer3. Click the Text tool, click the pointer about 1 cm below the ‘a’ in

‘Classic’4. Click the Align Left button in the PI, click the Font Size list arrow

on the PI, enter 24, type Annual5. Click the Selection tool, insert a keyframe in Frame 40 of the

rotateText layer6. Click Frame 30 (any frame between 21 and 40), click the Tween

list arrow on the PI, click Motion7. Click Frame 21 on the rotateText layer, click the Rotate list

arrow in the PI, click CW, type 2 in the times text box, click anywhere on the stage

8. Click Frame 1 on the Timeline, play the movie

Lesson 5: Animate Text (4)• Resize and fade in text

1. Insert a new layer, name it fadeinText, insert a keyframe at 402. Click the Text tool, position the pointer below the Annual text

box, aligned with the ‘h’ in ‘The’, then type ROAD RALLY3. Click Frame 40 on the fadeinText layer, click Insert, point to

Timeline, click Create Motion Tween4. Insert a keyframe in Frame 60 on the fadeinText layer5. Click Frame 40 on the fadeinText layer, select the Free Transform

tool, click the Scale button in the Options section of Tools panel6. Drag the upper-left corner handle inward to make it smaller7. Click the Color list arrow on the PI, click Alpha, click the Alpha %

list arrow, drag the slider to 08. Click Frame 60, click the Selection tool, click the new text block9. Select Alpha in the Color list, drag the Alpha % slider to 10010. Click Frame 70, right-click Frame 70, click Remove Tween, test

Lesson 5: Animate Text (5)• Make a text block into a button

1. Insert a new layer, name it continue2. Insert a keyframe in Frame 71 on the continue layer3. Click the Text tool, click below the back wheel of the car, type

Click to Continue4. Drag the pointer over the text to select it, click the Font Size list

arrow in the PI, drag the slider to 12, click the Selection tool5. Click the text block, click Modify on the menu bar, click Convert

to Symbol, type b_continue for the name, click the Button option button, click OK

6. Click the Selection tool, double-click the text block7. Insert a keyframe in the Over frame, set the fill color to black8. Insert a keyframe in the Down frame, set the fill color to green9. Insert a keyframe in the Hit frame, select the Rectangle tool,

draw a rectangle just covering the text block, click Scene 1

Lesson 5: Animate Text (6)• Add an action to the button

1. Click Window on the menu bar, click Actions2. Click the Selection tool, click the Click to continue button on the

stage3. Verify that the Script Assist button is turned off and the

b_continue button and button symbol appear in the lower-left4. Click the Add a new item button, point to Global Functions,

point to Timeline Control, click play5. Insert a new layer, name it stopmovie, insert a keyframe in

Frame 71 on that layer6. Verify that stopmovie:71 is displayed in the lower-left corner7. Click the Add a new item button, point to Global Functions,

point to Timeline Control, click stop8. Click Control on the menu bar, click Test Movie, then click the

Click to Continue button when it appears; save your work