macromedia flash 8 revealed creating animations. chapter 4 2 creating animations create...
TRANSCRIPT
![Page 1: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/1.jpg)
Macromedia Flash 8Revealed
CREATINGANIMATIONS
![Page 2: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/2.jpg)
Chapter 4 2Creating Animations
Create frame-by-frame animations
Create motion-tweened animation
Work with motion guides
Create animation effects
Animate text
Chapter Lessons
![Page 3: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/3.jpg)
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
![Page 4: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/4.jpg)
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
![Page 5: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/5.jpg)
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
![Page 6: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/6.jpg)
Chapter 4 6Creating Animations
Two animation methods– Frame-by-frame animation– Tweened Animation
Macromedia Flash Animation
![Page 7: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/7.jpg)
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
![Page 8: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/8.jpg)
Chapter 4 8Creating Animations
Understanding Frame-by-Frame Animations
FIGURE 1: Three images used in an animation
![Page 9: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/9.jpg)
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
![Page 10: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/10.jpg)
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
![Page 11: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/11.jpg)
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
![Page 12: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/12.jpg)
Chapter 4 12Creating Animations
In eachFrame, thecar is in adifferentposition
Figure 2: The first six frames of an animation
Creating Frame-by-Frame Animations
![Page 13: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/13.jpg)
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
![Page 14: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/14.jpg)
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
![Page 15: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/15.jpg)
Chapter 4 15Creating Animations
Keyframe for where the car starts
Keyframe for where the car ends
Figure 10: Sample motion-tweened animation
![Page 16: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/16.jpg)
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
![Page 17: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/17.jpg)
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
![Page 18: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/18.jpg)
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
![Page 19: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/19.jpg)
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
![Page 20: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/20.jpg)
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
![Page 21: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/21.jpg)
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
![Page 22: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/22.jpg)
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
![Page 23: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/23.jpg)
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
![Page 24: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/24.jpg)
Chapter 4 24Creating Animations
Creating Animation with Motion Guides
![Page 25: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/25.jpg)
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)
![Page 26: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/26.jpg)
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
![Page 27: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/27.jpg)
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
![Page 28: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/28.jpg)
Chapter 4 28Creating Animations
Create Animation Effects
Resizing an object
Rotating an object
Changing the color of an object
![Page 29: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/29.jpg)
Chapter 4 29Creating Animations
Resizing an Object Using a Motion Tween
![Page 30: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/30.jpg)
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
![Page 31: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/31.jpg)
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
![Page 32: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/32.jpg)
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
![Page 33: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/33.jpg)
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
![Page 34: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/34.jpg)
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
![Page 35: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/35.jpg)
Chapter 4 35Creating Animations
Apply a Timeline Effect
![Page 36: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/36.jpg)
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
![Page 37: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/37.jpg)
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
![Page 38: Macromedia Flash 8 Revealed CREATING ANIMATIONS. Chapter 4 2 Creating Animations Create frame-by-frame animations Create motion-tweened animation Work](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649e7c5503460f94b7ee7e/html5/thumbnails/38.jpg)
Chapter 4 38Creating Animations
Chapter 4 TasksCreate frame-by-frame animations
Create motion-tweened animation
Work with motion guides
Create animation effects
Animate text