Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create...

Macromedia Flash 8Revealed

CREATINGANIMATIONS

Chapter 4 2Creating Animations

Create frame-by-frame animations

Create motion-tweened animation

Work with motion guides

Create animation effects

Animate text

Chapter Lessons


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

Animation is made up of a series of still images

“Persistence of Vision” is the basis for frame rates in animations

Introduction


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

Introduction


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

Macromedia Flash Animation


Two animation methods– Frame-by-frame animation– Tweened Animation

Macromedia Flash Animation


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



FIGURE 1: Three images used in an animation



The greater the number of images, the less change needed in each image– Creating more realistic animation

Number of frames creates varied results– Fewer frames, jerky animation


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



Insert keyframe where you want change to occur

Change the object

“Onion skinning” helps placement of image series


In eachFrame, thecar is in adifferentposition

Figure 2: The first six frames of an animation



Create Motion-Tweened 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



Two types of tweening– Shape tweening

• A “morphing” effect• One object slowly turns into another

– Motion tweening • Used to animate objects which are

moved, resized, re-colored, or rotated


Keyframe for where the car starts

Keyframe for where the car ends

Figure 10: Sample motion-tweened animation



Select the starting frame– Insert a keyframe, if necessary

Position the object on the stage – Verify that it is selected

Choose the Create Motion Tween command– From the Timeline option on the

Insert menu



Insert a keyframe in the ending frame of the animation

Move the object and/or make changes to the object– Change the object’s size– Rotate the object


Things to RememberIf you change the position of the object, it will move in a direct line from start position to the end position

If you reshape an object in the ending keyframe, the object will slowly change from the starting keyframe to the ending


Things to RememberWhen you select an object and create a motion tween, Flash automatically creates a symbol

You can remove a motion tween animation by selecting a frame within the tween and using the Remove Tween command


Work with 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

Two ways to work with motion guides– Insert a guide layer, draw a path, then

create an animation and attach the animated object to the path

– Create an animation, insert a motion guide layer and draw a path, then attach animated object to the path



Second method described– Create a motion-tweened 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




Working with PropertiesTween – Specifies Motion, Shape, or None

Scale

– Tweens the size of an object

Ease

– Specifies the rate of change between tweened frames

• Ease values are between -100 (slow) and 100 (fast)


Working with PropertiesRotate– Specifies the number of times an object

rotates clockwise (CW) or counter clockwise (CCW)

Orient to path – Orients the baseline of the object to the

path


Working with Properties

Sync – Ensures that the object loops properly

Snap – Attaches the object to the path by its

registration point


Create Animation Effects

Resizing an object

Rotating an object

Changing the color of an object


Resizing an Object Using a Motion Tween


Rotating an Object Using a Motion Tween

Select the object in the start or end frame, then rotate with options– Rotate Tool option of Free Transform tool– Rotate clockwise or counter clockwise a

specified number of turns or degrees through Properties panel

– Stipulate an Ease value to cause the rotation to accelerate or decelerate


Changing an Object’s Color with Motion Tween

Numerous ways to change an object’s color over an animation’s time– Change the Tint of the object – Change the Alpha of the object – Change the Brightness of the object – Apply Advanced Effects


Using the Onion Skin Feature

Allows you to view an outline of objects in any number of frames

Helps in positioning animated objects on the stage– Turn Onion Skin feature on via the Icon

in the timeline– Use sliders to determine the range of

Onion Skin display


Combining Various Animation Effects

Combine motion-tween effects so they occur simultaneously during an animation

– Example: airplane object• Enter from offstage and perform a loop• Rotate the plane horizontally to create a

barrel roll effect• Grow smaller as it moves across the screen

to simulate the effect of plane speeding away


Creating Timeline EffectsYou can apply Timeline effects to the following objects:– Text – Graphics, including shapes, groups, and

graphic symbols – Bitmap images – Button symbols


Apply a Timeline Effect


Animate TextText 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 TextOnce 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


Chapter 4 TasksCreate frame-by-frame animations

Create motion-tweened animation

Work with motion guides

Create animation effects

Animate text

Date post:	29-Dec-2015
Category:	Documents
Upload:	letitia-stewart
View:	223 times
Download:	0 times

Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create...

Documents