© 2010 Delmar, Cengage Learning Chapter 4: Creating Animation.

© 2010 Delmar, Cengage Learning

Chapter 4:

Creating Animation

© 2010 Delmar Cengage Learning

Chapter 4 Lessons

1. Create motion-tween animation

2. Create classic-tween animation

3. Create frame-by-frame animation

4. Create shape tween animations

5. Create movie clips

6. Animate text


Introduction

• Animation is an important part of a Web site in– E-commerce– Education– Entertainment


How Animation Works

• Animation is made up of a series of still images• “Persistence of Vision” is the basis for frame rates in

animations• Frames rates of 10-12 fps generally provide smooth

computer-based animation– Frame rates lower than 10-12 fps often result in

jerky images– Higher frame rates may result in blurred images

• Flash uses default frame rate of 12 fps


Flash Animation

• Animation is one of the most powerful features of Flash

• Basic animation is a simple process– Move an object around the stage– Change an object’s size, shape, color– Apply Special Effects, such as zooming,

fading, or a combination of effects


Flash Animation

• Two animation methods– Frame-by-frame animation– Tweened animation (motion, classic,

shape)


Understanding Motion Tween Animation• Motion tweening is less tedious than frame

animation– Create a Start and End frame – Flash creates the “in-between” frames

• Flash only stores the attributes that change from frame to frame, thus creating smaller file sizes than frame animation


Create Motion-Tweened Animation• Select the starting frame and layer

– Insert a keyframe, if necessary• Select the object on the stage • Choose the Create Motion Tween command

from the Insert menu• Select ending frame and make any changes

to the object


Tween Spans

• When you create a motion tween, a tween span appears on the timeline, indicated by the blue highlighted area

• By default, the number of frames in a tween span is equal to the number of frames in one second of the movie


Fig. 1: Sample Motion Tween Animation

Onion Skin feature turned on Tween span

Outline of the car position in each of the selected frames


Motion Path

• Motion path shows position changes on the Stage.

• Each symbol on the path corresponds to a frame on the Timeline and indicates the location of the object when the frame is played.

• A motion path can be altered by dragging a point on the path using the Selection and Sub-selection tools or by manipulating Bezier handles.


Fig. 2: Motion Path

Motion path with symbols corresponding to a frame in the Timeline and showing the location of the car when the frame is played


Property Keyframes

• A keyframe indicates a change in a Flash movie, such as the start or ending of an animation.

• Motion tween animations use property keyframes that are specific to each property such as:– position keyframe– color keyframe– rotation keyframe


Property Keyframes

• Only one object on the Stage can be animated in each tween span.

• You can have multiple motion tween animations playing at the same time, if they are on different layers.

• A motion tween is, in essence, an object animation because while several changes can be made in the object’s properties, only one object is animated for each motion tween.


Property Keyframes

• The types of objects that can be tweened include graphic, button, and movie clip symbols, as well as text fields.

• You can remove a motion tween animation by clicking the tween span on the Timeline and choosing Remove Tween from the Insert menu.


Fig. 4: Positioning the Car Object


Fig. 5: Change the End of the Tween Span

Drag pointer to here


Fig. 11: Changing the Width of the Object

Point here and drag the pointer to change the width


Fig. 15: Aligning the Car to the Path

Rotate the car to align with the path


Fig. 17: Dragging the Biker Symbol to the Stage

Drag g_biker symbol from the Library panel and position it on the Stage


Understanding Classic Tweens

• Classic tweens are similar to motion tweens in that you can create animations that change the properties of an object over time.

• Classic tweens are a bit more complex to create, however, they provide certain capabilities that some developers desire.


Understanding Classic Tweens

• A classic tween can have more than one instance of the object over the tween span.

• The process for creating a classic tween animation that moves an object is to select the starting frame and, if necessary, insert a keyframe.

• Next, insert a keyframe at the ending frame, and click anywhere on the layer between the keyframes.

• Then select classic tween from the Insert menu, select the ending frame, and move the object to the position you want it to be in the ending frame.


Understanding Motion Guides

• Creates a path that will guide moving objects around the stage in any direction

• Without Motion Guides, animations always travel in straight lines

• Animations are placed on their own layer beneath a motion guide layer


Creating Animation with Motion Guides• Create a classic tween animation• Select the layer the animation is on and insert a

motion guide layer• Draw a path using the Pen, Pencil, Line, Circle,

Rectangle, or Brush tools• Attach the object to the path by dragging the object

by its registration point to the beginning of the path in the first frame, and to the end of the path in the last frame


Fig. 28: Motion Guide Layer

Indented layer containing the classic tween animation that will follow the path created on the motion guide layer

Motion guide layer containing the path


Transformation Point

• Each symbol has a transformation point in the form of a circle (O) that is used to orient the object when it is being animated

• The transformation point is also the point that snaps to a motion guide– When attaching an object to a path, you can drag the

transformation point to the path– The default position for a transformation point is the center

of the object– You can reposition the transformation point while in the

symbol edit mode by dragging the transformation point to a different location in the object


Fig. 27: Motion Guide with Object Attached

Transformation point


Registration Point

• Objects also have a registration point (+) that is used to position the object on the stage using ActionScript code

• The transformation and registration points can overlap—this is displayed as a plus sign within a circle


Fig. 31: Dragging the Biker Layer to the Guide Layer

Drag biker layer up to but not above the Guide layer


Understanding Frame-by-Frame Animations

• Created by specifying an object that is to appear in each frame of a sequence of frames

• Useful when you want to change individual parts of an image

• Depending on complexity, animation can require a lot of time to produce


Fig. 35: Images Used in an Animation


Understanding Frame-by-Frame Animations

• When creating frame-by-frame animation, consider the following:– The number of different images– The number of frames in which each

image will appear– The movie frame rate


Creating Frame-by-Frame Animations• Select the beginning frame of the animation• Insert a keyframe on the layer in frame

– A keyframe signifies a change in an object• Place the object on the stage


Using the Onion Skin Feature

• Turning on the Onion Skin feature allows you to view an outline of the object(s) in any number of frames.

• This can help in positioning animated objects on the Stage.


Fig. 36: Frame-by-Frame Animation

The 3 objects placed on top of each other on the Stage each in its own frame on the Timeline

Onion Skin feature is turned on so that all of the objects in

frames 1-3 are viewable even though the playhead is

on frame 1


Fig. 40: Moving Houses Layer below Stickfig Layer


Fig. 46: Adding Stickfig3 as the Final Object


Shape Tweening

• Allows you to have an animation change the shape of an object to any form you desire, and you can include two objects in the animation with two different shapes.

• As with motion tweening, you can use shape tweening to change other properties of an object, such as the color, location, and size.


Using Shape Tweening to Create a Morphing Effect• Morphing involves changing one object into

another, sometimes unrelated, object.• The viewer sees the transformation as a

series of incremental changes. • In Flash, the first object appears on the

Stage and changes into the second object as the movie plays.


Shape Tweening

• Shape tweening can be applied only to editable graphics.

• You can shape tween more than one object at a time as long as all the objects are on the same layer.

• You can use shape tweening to move an object in a straight line, but other options, such as rotating an object, are not available.


Shape Tweening

• You can use the settings in the Properties panel to set options (such as the ease value, which causes acceleration or deceleration) for a shape tween.

• Shape hints can be used to control more complex shape changes.


Properties Panel Options

• Adjust the rate of change between frames to create a more natural appearance– Between -1 and -100 will begin the tween

gradually and accelerate– Between 1 and 100, begin the tween

rapidly and then decelerate– By default, the rate of change is set to 0,

which causes a constant rate of change between frames


Properties Panel Options

• Choose a blend option– Distributive for smoother, irregular shapes– Angular preserves corners and straight

lines– Flash defaults to Distributive option


Fig. 47: Properties Panel Options


Shape Hints

• Control the shape’s transition appearance during animation.

• Allow you to specify a location on the beginning object that corresponds to a location on the ending object.


Fig. 48: Two Shape Animations with and without Shape Hints

Middle frame of the morph animation without shape hints

Middle frame of the morph animation with shape hints


Fig. 49: The Reshaped Object

Drag up from here


Fig. 50: Positioning the Car Instance on the Stage

Transformation point appears when the mouse is released

Line up both cars so it appears that there is only one car; use the spokes on the wheels to help you know when the two objects are aligned


Fig. 51: Setting the Ease Value of the Morph


Fig. 52: Positioning a Shape Hint


Fig. 53: Adding Shape Hints


Fig. 54: Matching Shape Hints


Understanding Movie Clip Symbols

• Creates complex types of animation• A movie within a movie• Retains independent timeline when you

insert an instance of symbol into a movie– This allows you to nest a movie clip that is

running one animation within another animation or in a scene on the main Timeline.

• Keeps going even if main timeline stops


Understanding Movie Clip Symbols

• Movie clips help to organize the different reusable pieces of a movie and provide for smaller movie file sizes.

• Only one movie clip symbol needs to be stored in the Library panel while an unlimited number of instances of the symbol can be used in the Flash document.


Fig. 55: Nesting a Movie Clip

The movie clip of a wheel that has been

animated to rotate shown in the edit

window

Timeline in the edit window used to create the animation of the rotating wheel

The animation of a car moving with the

wheels placed on the car

Main Timeline used to create the animation of the moving car


Fig. 59: Increasing the Tween Span on the Timeline

Movie clips symbol in edit window

Movie clip symbol Timeline

Drag the tween span to frame 48


Animate Text

• Text can be animated like other objects– Resize, rotate, reposition, and change the

colors– Create a motion-tween to move text as

you would an object– Specify a rotation


Animate Text

• Once you create a motion animation using a text block, the text block becomes a symbol– Cannot edit individual characters– Can edit the symbol as a whole


Fig. 63: Selecting a Range of Frames

Click frame 9 firstHold [Shift] and click frame 1 to select the

range of frames


Fig. 66: Positioning the Text Block

This will be the position of the text block at the end of the animation


Fig. 68: Resizing the Tween Span

Drag to here Start here


Fig. 71: Adding a Button


Fig. 73: Adding a Play Action


Chapter 4 Summary

1. Create motion-tween animation

2. Create classic-tween animation

3. Create frame-by-frame animation

4. Create shape tween animations

5. Create movie clips

6. Animate text

© 2010 Delmar, Cengage Learning Chapter 4: Creating Animation.

Documents

frame animation slide

motiontween animation

animation works animation

animation methods frame

motiontweened animation

classictween animation

starting frame

motion tween animations