| |
|
How to Create Graphics: Create a Timeline Animation in Flash
|
|
|
|
|
Creating Graphics: Create a Timeline Animation |
TOP |
|
Macromedia Flash Basic 8
and Macromedia Flash Professional 8 provide powerful tools for creating
animation. Most simple animation in Flash is done using a process known
as
tweening. Tweening is short
for "in between" and refers to filling in the frames between two
keyframes so that a graphic displayed in the first keyframe changes into
the graphic displayed in the second keyframe.
There are two types of
tweening that you can create in Flash--a motion tween and a shape tween.
The main difference between motion tweening and shape tweening is that
motion tweening operates on grouped objects or symbols, and shape
tweening is used with objects that are not symbols and are ungrouped.
First, you'll open the
start file for the lesson and set up your workspace to use an optimal
layout for taking lessons.
-
To open your start file, in
Flash select File > Open and navigate to the file:
-
In Windows, browse to
boot drive\Program Files\Macromedia\Flash 8\Samples and
Tutorials\Tutorial Assets\Creating Graphics\Timeline Animation and
double-click animation_start.fla.
-
On the Macintosh, browse to
Macintosh HD/Applications\Macromedia Flash 8/Samples and
Tutorials/Tutorial Assets/Creating Graphics/Timeline Animation and
double-click animation_start.fla.
NOTE The Timeline
Animation folder contains completed versions of lesson FLA files for
your reference.
-
Select File > Save As and
save the document with a new name, in the same folder, to preserve the
original start file.
-
Select Window > Workspace
Layout > Default to modify your workspace for taking lessons.
-
In the Stage View pop-up
menu, in the upper-right side of the Timeline, select Show Frame to view
both the Stage and the workspace.
-
If necessary, drag the
lower edge of the Timeline (Window > Timeline) down to enlarge the
Timeline view.
You can also use the scroll
bar to scroll through the layers.
|
|
Create a motion tween |
#TOP |
|
You create a motion tween by defining properties for an instance, a grouped object, or
text in a starting keyframe, and then changing the object's
properties in a subsequent keyframe.
Flash creates the
animation from one keyframe to the next in the frames between the
keyframes.
To create a motion
tween, you'll take an instance of a tire symbol and make it appear
to bounce.
-
In the Timeline
(Window > Timeline), double-click the Layer 1 title and type
TireAnim. Press Enter (Windows) or Return (Macintosh) to rename
the layer.
-
With the TireAnim
layer still selected, drag the Tire movie clip from the Library
window (Window > Library) to the Stage, positioning it above the
tire shadow.
-
Use the Selection
tool to reposition the tire, if necessary.
-
With the Selection
tool still selected, in the TireAnim layer, select Frame 30. Then
press F6 to insert a keyframe.
-
Select Frame 15 and
press F6 to add another keyframe.
-
With the playhead
still on Frame 15, press Shift to move the tire in a straight
line, and drag the tire up.
-
In the TireAnim
layer, select any frame between Frames 2 and 14. In the Property
inspector, select Motion from the Tween pop-up menu.
An arrow appears in
the Timeline between the two keyframes.
-
Select any frame
between Frames 16 and 29. Again, use the Tween pop-up menu in the
Property inspector to select Motion.
-
Select File > Save to
save your changes.
|
|
|
With shape tweening,
you specify attributes for a shape in one keyframe, and then modify
the shape or draw another shape in a subsequent keyframe. As with
motion tweening, Flash creates the animation in the frames between
the keyframes.
You'll now set up a
tween for the tire's shadow so that as the tire bounces, the shadow
moves and fades.
-
Click the ShadowAnim
layer to select it.
-
Select Frame 30 and
press F6 to insert a keyframe; then select Frame 15 and press F6 to
insert a keyframe.
-
With the playhead on
Frame 15, select the Selection tool. Drag the tire shadow slightly
up and to the right.
-
With Frame 15 still
selected, select the Eyedropper tool in the Tools panel, and then
click the shadow object.
-
If the Color Mixer is
not already open, select Window > Color Mixer to open it, and change
the Alpha value from 25% to 10%.
-
Click the pop-up menu
control in the upper-right side of the Color Mixer and select Close
Panel.
-
Select any frame
between Frames 2 and 14 on the ShadowAnim layer. In the Property
inspector, select Shape from the Tween pop-up menu.
-
On the ShadowAnim
layer, select any frame between Frames 16 and 29. Again, use the
Tween pop-up menu in the Property inspector to select Shape.
|
|
Copy and paste keyframes in an animation |
TOP |
|
For the tire to look
realistic as it bounces, it should compress slightly on each bounce.
You can create this effect by transforming the shape of the tire in
Frame 1 of the animation, and copying that frame in Frame 30.
-
With the Selection
tool, select Frame 1 of the TireAnim layer. Then press F6 to add a
keyframe.
A new keyframe is added
and the playhead moves to Frame 2.
-
Select Frame 1 of the
TireAnim layer again.
-
In the Tools panel,
select the Free Transform tool.
The tire is selected,
and transform handles appear around it.
-
Select the
transformation center point (the small circle near the center of the
movie clip) and drag it to the bottom of the tire.
The center point snaps
to the lower-middle transform handle.
-
On the Stage, drag the
upper-middle transform handle down to slightly compress the tire
shape.
If necessary, drag the
tire to align it over the shadow. To view the positioning, drag the
playhead over Frames 1 and 2.
-
Save your file.
NOTE Always save
your document before attempting to manipulate tweens, including
copying, cutting, and pasting frames. If you make an error, you can
revert to your saved document.
-
Right-click (Windows)
or Control-click (Macintosh) Frame 1 of the TireAnim layer and
select Copy Frames from the context menu.
-
Select Frame 29 of the
TireAnim layer and press F6 to insert a keyframe.
-
In Frame 30 of the
TireAnim layer, right-click (Windows) or Control-click (Macintosh)
and select Paste Frames from the context menu.
-
Select Control > Test
Movie to view the animation.
-
Close the SWF file
window to return to the authoring environment.
|
|
Change the speed of the animation |
TOP |
|
|
When you tested the
animation, you might have noticed that the tire bounces rather slowly.
You can change the speed of an animation by changing the number of
frames that play per second, and by setting positive and negative
easing values, which determine the rate of acceleration
and deceleration.
|
|
Change the frames per second speed |
TOP |
|
|
The frame rate,
measured in frames per second (fps) is the speed at which the
animation plays. By default, Flash animations play at a rate of 12
fps, which is ideal for web animation.
Sometimes,
however, it's desirable to change the fps rate. You'll now change
the frame rate to 36 frames per second, which will make the tire
appear to bounce more rapidly.
-
Click the Stage, away
from any objects.
-
In the Property
inspector, type 36 in the Frame Rate text box.
The frame rate applies
to the entire Flash document, not just to an animation within
the document.
|
|
Change the acceleration and deceleration |
TOP |
|
|
By default, tweened
frames play at a constant speed. With easing, you can create a more
realistic rate of acceleration and deceleration. Positive values
begin the tween rapidly and decelerate the tween toward the end of
the animation. Negative values begin the tween slowly and accelerate
the tween toward the end of the animation. You'll now add both
positive and negative easing values to your animation.
-
On the TireAnim layer,
select any frame between Frames 2 and 14. Then in the Property
inspector, in the Ease text box, type 100. Press Enter (Windows) or
Return (Macintosh).
-
On the same layer,
select any frame between Frames 16 and 29. Then in the Ease text
box, type -100. Press Enter or Return.
-
On the ShadowAnim
layer, select any frame between Frames 2 and 14. Then in the Ease
text box, type 100. Press Enter or Return.
-
In the same layer,
select any frame between Frames 16 and 29. Then in the Ease text
box, type -100. Press Enter or Return.
|
|
|
|
You'll test your
document to view the animation and see if it works as expected.
-
Save your document and
select Control > Test Movie.
-
When you finish viewing
the animation, close the SWF file window.
|
|
|
|
Congratulations on
learning how to animate objects in Flash. In just a few minutes,
you learned how to accomplish the following tasks:
-
Create an animation
using motion tweening.
-
Create an animation
using shape tweening.
-
Copy and paste
keyframes in an animation.
-
Change the speed of
an animation.
You can also use
Timeline effects to quickly add animation effects to text,
graphics, images, and symbols.
|
|
|
|
