44021

7/28/2019 44021

1/38

CIS 205Web Design &

Development

Flash

Chapter 4Creating Animations

7/28/2019 44021

2/38

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

7/28/2019 44021

3/38

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 (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

7/28/2019 44021

4/38

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 DataFiles 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 Toolspanel

5. Click Frame 2 on the carGo layer, insert a keyframe

6. Drag the top-right handle up to tilt the car up

7/28/2019 44021

5/38



(contd)7. Click Frame 3 on the carGo layer, insert a keyframe

8. Drag the top-right handle up to tilt the car up again


10. Drag the top-right handle up to tilt the car down


12. Drag the top-right handle up to tilt the car down again


14. Save and test the movie (click Control, TestMovie)

7/28/2019 44021

6/38


Add detail to the animation

1. Click the Zoom tool, then click the car2. Click the Line tool, set the Stroke color to black

3. 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 times

5. Press [Enter] to play the movie

6. Click View on the menu bar, point to Magnification,

click Fit in Window

7/28/2019 44021

7/38


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 lines

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

distance across the stage, as in Figure 6, p. 4-8

4. Insert a keyframe in Frame 8, click the Line tool and

draw a third line as in Figure 7 on p. 4-8

5. Click the Selection tool, drag a marquee around thecar and lines, drag the car and lines to the right edge

6. Insert a keyframe in Frame 9, then drag the car and

lines completely off the stage to the right

7. Play the movie by pressing [Enter]

7/28/2019 44021

8/38


Change the frame rate

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

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

stage

3. Click the Size button in the Property inspector

4. Type 6 in the Frame rate text box, click OK

5. Click Control on the menu bar, click Test Movie, close

the Flash player window6. Change the frame rate to 18 and test the movie

7. Change the frame rate to 12 and test the movie

8. Save your work

7/28/2019 44021

9/38

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

7/28/2019 44021

10/38

Lesson 2: Create Motion-Tweened Animations (2)


1. Start Flash, open the file fl4_2.fla where your DataFiles 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 themenu bar, Timeline, click Create Motion Tween

4. Insert a keyframe in Frame 20 on the carTurn layer

5. Click the Selection tool, select the car, drag the car tothe upper right corner of the stage


7. Click Frame 1, press the period [.] several times to see

how Flash has filled in the frames

7/28/2019 44021

11/38


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 stage5. Press [Enter] to play the movie

6. Save your work

7/28/2019 44021

12/38


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 layer

3. Display the Library panel (Window, Library if

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

4. Click a blank area of the stage to deselect the car

5. Click Frame 1 of the carTurn layer6. Press and hold [Shift], then click Frame 30 to select

the range of frames

7. Click Edit on the menu bar, point to Timeline, click

CopyMotion

7/28/2019 44021

13/38


Copy a motion-tweened animation (continued)

8. Click the blue car to select it

9. Click Edit on the menu bar, point to Timeline, click

Paste Motion Special

10. Deselect the Horizontal scale option and the Vertical

scale option (to prevent resizing the blue car), clickOK


12. Click Control on the menu bar, click Test Movie, closethe Flash player window

13. Click File on the menu bar, point to Publish Preview,

click Default to view the movie in a browser

14. Close the browser window

7/28/2019 44021

14/38


Copy a motion-tweened animation (continued)

15. Click Frame 1 of the blueCar layer

16. Drag the blue car to the right until it is directly below

the red car


18. 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

7/28/2019 44021

15/38

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 framethat needs improving, and change the object in that

frame

7/28/2019 44021

16/38

Lesson 3: Work with Motion Guides (2)

Working with the Property Inspector

These are the options provided by the Propertyinspector

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)

7/28/2019 44021

17/38


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 Window

4. Click Frame 1 on the carRoute layer, select the car

5. Click Insert on the menu bar, Timeline, click Create

Motion Tween6. Insert a keyframe in Frame 40 on the carRoute layer

7. Drag the car to the lower right corner of the stage


7/28/2019 44021

18/38


Add a motion guide to an animation

1. Click Frame 1 on the carRoute layer

2. Click Insert on the menu bar, point to Timeline, click

Motion Guide

3. Click Frame 1 on the Guide layer, click the Penciltool,click the Smoothoption, and draw a path as in Fig. 4-

19.

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

Guide layer

7/28/2019 44021

19/38


Add a motion guide to an animation (continued)


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

beginning of the path


7. If necessary, drag the tranformation point of the car

to the end of the path


7/28/2019 44021

20/38


Orient an object to the path

1. Play the movie again and notice the car doesnt turn

2. With the PI displayed, click Frame 1 on the carRoute

layer

3. Select the car, click the Orient to path check box inthe PI


7/28/2019 44021

21/38


Alter the path


2. 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 curve

4. 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

7/28/2019 44021

22/38


Accelerate an animated object

1. Play the movie and note the car speed is constant


3. Click the Ease list arrow in the PI, drag the slider to

100, then click a blank area outside the stage

4. Play the movie and notice the deceleration of the car


6. Click the Ease list arrow in the PI, drag the slider to-100, then click a blank area outside the stage

7. Play the movie and notice the acceleration of the car

8. Click Control on the menu bar, click Test Movie

7/28/2019 44021

23/38

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 Objects 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

7/28/2019 44021

24/38

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

7/28/2019 44021

25/38


Use motion tweening to resize an object

1. Open the carPath.fla movie


3. Click the Zoom tool then click the car

4. Select the car, click the Free Transform tool, click the Scale

option in the Options section of the Tools panel

5. Drag the upper-left corner handle inward until the car is about

half its original size

6. Change the view to Fit in Window

7. Click Frame 40 in the carRoute layer8. Select the car, click the Scale option button

9. Drag the upper-right corner handle outward until the car is

about twice its original size

10. Play the movie, save your work

7/28/2019 44021

26/38


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 layer

3. With the motorbike selected, click Insert, Timeline, Create

MotionTween

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

the times box

5. Insert a keyframe in Frame 20 on the motorBike layer


7/28/2019 44021

27/38


Use motion tweening to change the color of an object

1. Click Frame 20 on the motorBike layer

2. Click the Selection tool, then click the motorbike

3. Click the Color list arrow in the PI, click Advanced, and click the

Settings button

4. Change the value in the x R) + text box to 86 (86% red)

5. Click OK

6. Click Frame 1 on the Timeline, then play the movie

7/28/2019 44021

28/38


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

change4. Play the movie and notice that the animation is not affected

5. Click the Onion Skin button and the Edit Multiple Frames

button to turn of these features

7/28/2019 44021

29/38


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 Apart

5. Click Insert on the menu bar, point to TimelineEffects, point to

Transform/Transition, click Transition

6. Click the Wipe check box to turn it off, click Update Preview

7. Click OK

8. Play the movie

7/28/2019 44021

30/38


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 panel

3. Click the Play button in the preview window of the Library

panel

7/28/2019 44021

31/38


Edit and remove a Timeline Effect

1. Display the PI

2. Click Frame 30 on the Timeline, click the Selection tool, then

click the car

3. Click the Edit button in the PI

4. Click the Out option button to change the direction

5. Drag the Motion Ease slider to the right (value 100)

6. Click Update Preview, click OK

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

8. Click Frame 1 on the Timeline9. Right-click the car, point to Timeline Effects, click Remove

Effect

10. Play the movie

7/28/2019 44021

32/38


Apply several Timeline Effects to one object

1. Click the Selection tool, drag a marquee around the car

2. Click Insert on the menu bar, point to TimelineEffects, point to

Transform/Transition, click Transform

3. Change the effect duration to 40 frames

4. Click the Change Position by list arrow, click Move to Position

5. Double-click 0 in the X Position text box, type 400

6. Double-click 0 in the Y Position text box, type 300

7. Click the Scale Lock button to unlock it

8. Double-click 100 in the Scale X % text box, type 509. Double-click 100 in the Scale Y % text box, type 50

10. Change the spin times to 3

11. Change the Motion Ease value to 100

12. Click Update Preview, click OK, play the movie, and save

7/28/2019 44021

33/38

Lesson 5: Animate Text

Animating Text

You can motion tween text block objects just like graphic objects

Select, copy, and paste frames

1. Open frameAn.fla (created earlier) and save it as textAn.fla

2. Change the view to Fit in Window

3. Click Frame 9 on the carGo layer, hold [Shift], click Frame 1 toselect all frames

4. Click Edit on the menu bar, point to Timeline, click Cut Frames

5. Click the Frame View icon (at the right end of the frame

numbers), click Small6. Click Frame 71 on the carGo layer

7. Click Edit on the menu bar, point to Timeline, click PasteFrames

8. Click Frame 1 of the carGo layer


Lesson 5: Animate Text (2)

7/28/2019 44021

34/38

Lesson 5: Animate Text (2) Create animated text

1. Insert a new layer and name it scrollText

2. 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 Roman

5. Click the Font Size list arrow, drag the slider to 20

6. Click the Text (fill) color swatch, click the blue color on the left

7. Type The Classic Car Club

8. Click the Selection tool, insert a keyframe in Frame 20 on the

scrollText layer

9. Drag the text block horizontally to the top center of the stage

10. Insert a keyfram in Frame 10, click the Tween list arrow in the PI,

click Motion

11. Click Frame 1 on the Timeline and play the movie


7/28/2019 44021

35/38

Lesson 5: Animate Text (3) Create rotating text

1. Insert a new layer and name it rotateText

2. 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 layer

6. 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


7/28/2019 44021

36/38

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

1. Insert a new layer,name it fadeinText, insert a keyframe at 40

2. Click the Text tool, position the pointer below the Annual textbox, aligned with the h in The, then type ROAD RALLY

3. Click Frame 40 on the fadeinText layer, click Insert, point to

Timeline, click Create Motion Tween

4. 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 panel

6. Drag the upper-left corner handle inward to make it smaller

7. Click the Color list arrow on the PI, click Alpha, click the Alpha %list arrow, drag the slider to 0

8. Click Frame 60, click the Selection tool, click the new textblock

9. Select Alpha in the Color list, drag the Alpha % slider to 100

10. Click Frame 70, right-click Frame 70, click Remove Tween,test


7/28/2019 44021

37/38

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

1. Insert a new layer,name it continue

2. 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 Continue

4. 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 black

8. Insert a keyframe in the Down frame, set the fill color to green

9. Insert a keyframe in the Hit frame, select the Rectangle tool,

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


7/28/2019 44021

38/38

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

1. Click Window on the menu bar, click Actions

2. Click the Selection tool, click the Click to continue button on thestage

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

b_continue button and button symbol appear in the lower-left

4. Click the Add a new item button, point to GlobalFunctions,point to TimelineControl, click play

5. Insert a new layer, name it stopmovie, insert a keyframe in

Frame 71 on that layer

6. Verify that stopmovie:71 is displayed in the lower-left corner7. Click the Add a new item button, point to GlobalFunctions,

point to TimelineControl, click stop

8. Click Control on the menu bar, click Test Movie, then click the

Cli k C i b h it k

Documents

44021