XP
Tutorial 3
Creating Animations
XP
Elements of Animation
• Layers are used to organize the content of your document.
• A guide layer is a special type of layer that may be used to
align objects on other layers to the objects on the guide
layer.
• A mask layer contains a graphic object through which the
content of a masked layer shows.
– A masked layer is below the mask layer.
• Frames contain the content for an animation and represent
a particular instant in time.
• A keyframe is a frame that represents a change in the
content from the previous frame.
New Perspectives on
Macromedia Flash MX 2004
2
XP
The Timeline
• The Timeline, which appears above the Stage in
the Flash program window, is used to control and
coordinate the timing of the animation by
determining how and when the frames for each
layer are displayed.
• Refer to Figure 3-4 in your textbook for the
Elements of the Timeline.
New Perspectives on
Macromedia Flash MX 2004
3
XP
The Timeline
New Perspectives on
Macromedia Flash MX 2004
4
XP
The Playhead
• The playhead indicates which frame is currently
being displayed.
• The playhead is represented in the Timeline by a
red rectangle with a red vertical line below it.
New Perspectives on
Macromedia Flash MX 2004
5
XP
Changing the View of the Timeline
• Tiny, Small, Normal, Medium, and
Large
• Tinted Frames
• Preview
• Preview in Context
New Perspectives on
Macromedia Flash MX 2004
6
XP
Organizing Layers Using the Timeline
• To select a layer you click it in the Timeline.
• To delete a layer, you select it and then click the
Delete Layer button at the bottom of the Timeline.
• To add more layers, you can click the Insert Layer
button on the Timeline.
• Layer Properties
New Perspectives on
Macromedia Flash MX 2004
7
XP
Layer Folders
• A layer folder is a container in the Timeline in which you
can place layers.
Layer folder
Layers inside
folder
New Perspectives on
Macromedia Flash MX 2004
8
XP
Scenes and Multiple Timelines
• Scenes provide a way to break up a long or complex
document into smaller sections that are more manageable.
• Scenes can be added, deleted, and moved using the Scene
Panel
New Perspectives on
Macromedia Flash MX 2004
9
XP
Multiple Scenes in One Document
New Perspectives on
Macromedia Flash MX 2004
10
XP
Creating Animation
• With frame-by-frame animation, you create the
content for each individual frame.
• With tweened animation, you create the content
for the beginning and ending frames, and Flash
creates the content for the in-between frames.
– Quicker and easier to create
New Perspectives on
Macromedia Flash MX 2004
11
XP
Timeline Effect Dialog Box
New Perspectives on
Macromedia Flash MX 2004
12
XP
Adding a Timeline Effect
• Draw a marquee around the objects to which you
wish to apply the timeline effect.
• Click Insert on the menu bar, point to Timeline
Effects, and then select the effect you wish to
apply.
• Apply your settings in the dialog box, and then
click the OK button.
New Perspectives on
Macromedia Flash MX 2004
13
XP
Frame-by-Frame Animation
• If your animation is to have 15 frames, you have
to create the content for each of the 15 frames.
• Some of the content can be the same from one
frame to the next, but other content can be slightly
modified, to give the appearance of motion.
• For each place in the animation where you need an
object to change, you add a keyframe.
• Once all keyframes are added, you can test the
animation.
New Perspectives on
Macromedia Flash MX 2004
14
XP
Frame-by-Frame Animation
New Perspectives on
Macromedia Flash MX 2004
15
XP
Testing a Document’s Animation
• Once you create a document with animation, you
need to test it to make sure it works correctly.
• Scrubbing is testing the animation by dragging
the playhead with the mouse pointer back and
forth through the frames.
New Perspectives on
Macromedia Flash MX 2004
16
XP
Testing a Document’s Animation
• To test the document’s animation within the program
window, click Control on the menu bar, and then click
Play.
• To test a few frames of animation, scrub by dragging the
playhead along the Timeline header.
• To test the animation in a Flash Player plug-in window,
click Control on the menu bar, and then click Test Movie.
• To test the animation in a Web page, click File on the menu
bar, point to Publish Preview, and click Default - (HTML).
New Perspectives on
Macromedia Flash MX 2004
17
XP
Tweened Animation
• You do not have as much control with tweened
animation as you do with frame-by-frame
animation.
• Motion tweening can be used to create an
animation where the object changes its position,
rotates, scales in size, or even changes in color.
• Shape tweening is used to change a shape into
another shape over time
New Perspectives on
Macromedia Flash MX 2004
18
XP
Motion Tweening
• In order for an object to be animated using motion
tweening, the object must be a symbol.
• If you have more than one object, Flash groups
them and tries to animate them together.
• If an object is not to be part of a motion tween,
then it should be placed on a separate layer.
New Perspectives on
Macromedia Flash MX 2004
19
XP
Motion Tweening
New Perspectives on
Macromedia Flash MX 2004
20
XP
Graphic Symbol Animations
• You create a graphic symbol animation the same
way you create a movie clip animation.
• Once a graphic symbol animation is created,
instances of the symbol can be created on the
Stage in the same way you create instances of
movie clip symbols.
• You can specify whether you want the instance’s
animation to play continuously, play only once, or
play only one frame.
New Perspectives on
Macromedia Flash MX 2004
21
XP
Graphic Symbol Animations
Graphic instance properties in the Property Inspector
Graphic instance play options
New Perspectives on
Macromedia Flash MX 2004
22
XP
Copying Animation
• Click the name of the layer in the Timeline to
select the frames in the animation you wish to
copy.
• Click Edit on the menu bar, point to Timeline,
and then click Copy Frames.
• Insert a new layer, name it, and then select it in the
Timeline.
• Click Edit on the menu bar, point to Timeline,
and then click Paste Frames.
New Perspectives on
Macromedia Flash MX 2004
23
XP
Repositioning Frames within a Layer
• Click and drag the mouse pointers through the
frames you wish to reposition.
• Once you have selected the frames, release the
mouse button to complete the selection.
• Drag the selected frames so that the first frame
starts where you would like.
• Drag the playhead back to the first frame and
press the Enter key.
New Perspectives on
Macromedia Flash MX 2004
24
XP
Inserting Graphic Symbol Instances
and Changing their Starting Frame
• Insert a new layer, name it, and then select it.
• While still in this layer, drag two instances of the
symbol from the Library pane onto the Stage.
• Select one instance of the symbol. In the Property
inspector, change the value in the First text box to
the new starting frame.
• Click an empty area of the Stage and then press
the Enter key to test the animation.
New Perspectives on
Macromedia Flash MX 2004
25
XP
Testing the Entire Document’s Scenes
• Click Control on the menu bar and then click Test
Movie.
• When you are finished viewing the animation,
click File on the menu bar, and click Close.
• Don’t forget to save your work.
New Perspectives on
Macromedia Flash MX 2004
26