Upload
letitia-stewart
View
229
Download
0
Embed Size (px)
Citation preview
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
Chapter 4 3Creating Animations
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
Chapter 4 4Creating 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
Introduction
Chapter 4 5Creating Animations
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
Chapter 4 6Creating Animations
Two animation methods– Frame-by-frame animation– Tweened Animation
Macromedia Flash Animation
Chapter 4 7Creating Animations
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
Chapter 4 8Creating Animations
Understanding Frame-by-Frame Animations
FIGURE 1: Three images used in an animation
Chapter 4 9Creating Animations
Understanding Frame-by-Frame Animations
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
Chapter 4 10Creating Animations
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
Chapter 4 11Creating Animations
Creating Frame-by-Frame Animations
Insert keyframe where you want change to occur
Change the object
“Onion skinning” helps placement of image series
Chapter 4 12Creating Animations
In eachFrame, thecar is in adifferentposition
Figure 2: The first six frames of an animation
Creating Frame-by-Frame Animations
Chapter 4 13Creating Animations
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
Chapter 4 14Creating Animations
Create Motion-Tweened 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
Chapter 4 15Creating Animations
Keyframe for where the car starts
Keyframe for where the car ends
Figure 10: Sample motion-tweened animation
Chapter 4 16Creating Animations
Create 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
Chapter 4 17Creating Animations
Create Motion-Tweened Animation
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
Chapter 4 18Creating Animations
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
Chapter 4 19Creating Animations
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
Chapter 4 20Creating Animations
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
Chapter 4 21Creating Animations
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
Chapter 4 22Creating Animations
Creating Animation with Motion Guides
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
Chapter 4 23Creating Animations
Creating Animation with Motion Guides
– 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
Chapter 4 24Creating Animations
Creating Animation with Motion Guides
Chapter 4 25Creating Animations
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)
Chapter 4 26Creating Animations
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
Chapter 4 27Creating Animations
Working with Properties
Sync – Ensures that the object loops properly
Snap – Attaches the object to the path by its
registration point
Chapter 4 28Creating Animations
Create Animation Effects
Resizing an object
Rotating an object
Changing the color of an object
Chapter 4 29Creating Animations
Resizing an Object Using a Motion Tween
Chapter 4 30Creating Animations
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
Chapter 4 31Creating Animations
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
Chapter 4 32Creating Animations
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
Chapter 4 33Creating Animations
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
Chapter 4 34Creating Animations
Creating Timeline EffectsYou can apply Timeline effects to the following objects:– Text – Graphics, including shapes, groups, and
graphic symbols – Bitmap images – Button symbols
Chapter 4 35Creating Animations
Apply a Timeline Effect
Chapter 4 36Creating Animations
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
Chapter 4 37Creating Animations
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 38Creating Animations
Chapter 4 TasksCreate frame-by-frame animations
Create motion-tweened animation
Work with motion guides
Create animation effects
Animate text