The Web Warrior Guide to
Web Design Technologies
Chapter 8
Flash: Part II
Objectives
• Learn how frames and layers are used in a
document’s Timeline to create animations
• Learn how symbols are stored in a document’s
library
• Create animations including frame-by-frame and
tweened animations
• Create a mask layer and a motion guide layer
• Create buttons with simple actions and sounds
Using the Timeline, Frames, and
Layers
Using the Timeline, Frames, and
Layers
• The Timeline is used to control and coordinate the
frames and layers that make up a Flash document
• A frame represents a particular instant in time and
contains the content of the Stage at that instant
– each frame may contain different images or different states of
the same image
– each frame is displayed in succession, creating the appearance
of movement
– keyframes contain content that has changed from a previous
frame
– the frame rate determines how many frames are displayed each
second
Using the Timeline, Frames, and
Layers
• Layers are used to organize the various
graphic objects such as shapes, lines, and
text that are part of a document
– each row within the Timeline represents one
layer
– each document starts with one layer
• more layers may be added as needed
• modifying the content on one layer will not affect
the content on other layers
Using the Timeline, Frames, and
Layers
• To extend the length of an animation you
add more frames to a layer
• Playhead
– the playhead moves along the Timeline
header indicating which frame is currently
being displayed
• Scrubbing
– testing an animation by dragging the playhead
back and forth through the frames
Using the Timeline to Test an
Animation
• Document vs. Movie
– a document is the file you edit to create the
animation; it is saved as a .FLA file
– a movie is a published document; it is saved
as a .SWF file and played by the Flash Player
plug-in
– the Flash Player comes installed with most
new computers and can also be downloaded
from the Macromedia Web site
Using the Timeline to Test an
Animation
• Other elements of the Timeline
– Eye column: display or hide the contents of a
layer
– Lock column: lock or unlock a layer; the
contents of a locked layer cannot be changed
– Outline column: display the contents of a layer
in an outline format
Using the Timeline to Test an
Animation
Understanding Symbols and the
Library
• A symbol is a graphic element with special properties
• Symbols are used to create certain types of animations
and to add interactive elements to a document; there are
three types of symbols
– Movie clip symbols
• contain their own Timeline and operate independently of the
Timeline of the document in which they appear
– Graphic symbols
• can be either static images or animated images
• they operate in sync with the Timeline of the document in which
they appear
– Button symbols
• have their own four-frame Timeline
• may be used to make the published movie interactive
The Library
• Symbols are stored in a document’s library
• The library also stores imported bitmap images and sounds
• The Library panel is used to access, organize, and modify symbols
in a document’s library
Options menu control
Symbol preview
Symbols
Delete icon
New symbol button
Properties icon
Symbol Instances
• To use a symbol on the Stage you drag a
copy of it from the Library panel
• Instance
– an instance is a copy of a symbol
– you can have multiple instances of a symbol
– the symbol is stored only once regardless of
the number of instances created
Editing a Symbol
• You can edit a symbol by placing it in
symbol-editing mode
• Changes made to a symbol are applied to
all instances of that symbol
• Changes made to an instance of a symbol
do not affect the symbol or other instances
of that same symbol
Animation
• Animation is accomplished by changing
the content of the Stage from one frame to
the next and then displaying this content
one frame at a time
• Types of animation
– Frame-by-frame animation
– Tweened animation
Frame-by-Frame Animation
• In a frame-by-frame animation you create the
content for each frame
– some of the content can be repeated in each frame
– the content in other frames can be slightly modified to
create the perception of movement
– frame-by-frame animations are usually used to build
more complex animations
– frame-by-frame animations tend to produce larger
sized files
Tweened Animation
• In a tweened animation, Flash creates the in-
between frames (hence, the term “tweened”)
– content created based on the content of the starting
and ending frames
– tweening is the process Flash uses to create the
individual frames
– easier and quicker to create than a frame-by-frame
animation
– you only to need to create the content for two frames,
the one at the beginning of the animation and the one
at the end
Tweened Animation
• There are two types of tweened
animations
– Motion tweens
• used to create animations in which an object
changes its position, rotates, changes in color, or
fades in or out
– Shape tweens
• used to change a shape over time
Creating a Motion Tweened
Animation
• Create an object in the first frame of the animation
• Convert the object to a symbol
Symbol
created
Object
in first frame
Creating a Motion Tweened
Animation
• Create a keyframe in the frame where the animation will
end and move the object to a different position or change
its properties
Keyframe
Object
repositioned
Creating a Motion Tweened
Animation
• Instruct Flash to create a motion tweened animation starting in the
first frame
– additional frames are created that contain the different states of the
object as it transitions between the first and last frame
Motion tweens
Creating a Motion Tweened
Animation
• Adjust the motion tween using the Property
inspector
– set the rotate to CW or CCW and specify how many
times to rotate
– set the Ease value to control how fast the object starts
or ends within the animation sequence
• Change the object’s Brightness Amount to make
it fade in or out
– the Brightness Amount affects the relative lightness or
darkness of an object
• An object’s Alpha Amount can also be used to
create a fade effect
Creating a Shape Tweened
Animation
• Create an object in the first frame of the animation
• Do not convert the object to a symbol
• Create a keyframe in the frame where the animation will
end and change the shape of the object
• Use the Property inspector to instruct Flash to create a
shape tweened animation starting in the first frame
• Text can also be used in a shape tween but it must first
be converted to fills using the Break Apart command
Special Layers
• Guide layer
– can serve as a guide as you draw
– example: a guide layer with a diagonal line which can be used as
a guide to align graphic elements
– the contents of a guide layer are not displayed in the final movie
• Motion guide layer
– a special kind of guide layer that provides a path for an object to
follow when it is used in a motion tween
– useful when you want to animate an object to move along an
irregular path
• draw the path with a tool such as the Pencil tool in the guide layer
Special Layers
• Mask layer
– contains a graphic object, such as an oval
shape, through which the contents of one or
more underlying layers will show
– the content of the underlying layers is only
visible when the mask layer’s graphic object is
over it
Special Layers
• Mask layer example
– text will only be visible when the circle is over it
Mask layer
Masked layer
Special Layers
• Motion guide layer
– provides a path for an object to follow
– draw a path in the motion guide layer using a
tool such as the Pencil tool
– create a motion tween of an object in the
guided layer which is below the motion guide
layer
– the object in the guided layer follows the path
in the motion guide layer
Special Layers
• Motion guide layer example
– object will follow path in the motion guide layer
Motion guide
layer
Guided layer
Using Buttons, Actions, and
Sounds
• Buttons
– provide an interactive element to a movie
– buttons are symbols with the Button behavior
– button symbols have a Timeline consisting of
only four frames
• each frame represents a state of the button
Using Buttons, Actions, and
Sounds
• Each button has four frames in its Timeline
– Up frame contains the button’s normal state
– Over frame contains the content that shows what the button will look like
when the mouse pointer is moved over it
– Down frame contains the content that shows the button’s appearance
when it is clicked
– Hit frame does not affect the appearance of the button; it represents the
clickable area of the button
Four button
frames
Using Buttons, Actions, and
Sounds
• Actions
– code elements of ActionScript, Flash’s
programming language
– Flash provides many preprogrammed actions
that you can access through the Actions panel
– the Actions toolbox, located on the left side of
the Actions panel, contains a list of folders
that represent different action categories
Using Buttons, Actions, and
Sounds
• Actions panel
– double-click a specific action to enter its code into the script
pane on the right side of the Actions panel
– add actions to button instances and not to button symbols
Actions Action code
Script pane
Using Buttons, Actions, and
Sounds
• Adding Sounds
– add sound effects to buttons or add sounds that play
during certain frames
– sounds cannot be created within Flash
– import sounds using the Import command from the
File menu
• sound files formats that can be imported
– WAV, MP3, or AIF
– a sound from a different document’s library can be
dragged to the current document
– sounds reside in the document’s library
Using Buttons, Actions, and
Sounds
• Adding Sounds
– to add a sound from the library to a specific
frame in your document
• create a new layer
• select the layer’s frame where the sound will play
• use the Sound drop-down list in the Property
inspector to select the sound
• the frame where the sound will play must be a
keyframe
Using Buttons, Actions, and
Sounds
• Adding Sounds
– to add a sound effect to a button
• edit the button instance
• select the button’s frame where the sound will play
• drag the sound from the Library panel to the Stage
or select the sound using the Property inspector
Using Buttons, Actions, and
Sounds
• Adding Sounds
– the Sounds library contains sounds that can be added
to a document
Using Buttons, Actions, and
Sounds
• Button sound effect example
– a sound can be added to a button’s Down frame
– the sound will play when the button is clicked
Waveform of
sound added to
Down frame
Using Buttons, Actions, and
Sounds
• Adding Sounds
– a background sound can be added to a document
– place a background sound in a keyframe
Waveform of background
sound added at Frame 1
Publishing Your Movie
• Publishing
– publish a document in order to distribute it for
use on the Web
– a published movie will play within an HTML
page
– use the Publish Settings dialog box to specify
how to publish a document
– click Publish to create the necessary files,
such as the .swf and .html files
Publishing Your Movie
• Select the file types in the Publish Settings dialog box
• The filenames for the published files can also be
changed
Filenames used
Select file types
when movie is
to publish
published
Summary
• Animations can be created by placing different
states of an image in different frames and then
displaying the frames one after another
• A document’s frames are coordinated by the
Timeline
– the Timeline’s playhead indicates which frame is
currently being displayed
• Layers are used to organize the images,
animations, and other objects that make up a
document
– special types of layers include guide layers and mask
layers
Summary
• Types of animations include
– frame-by-frame: create the content for each frame
– tweened: create the content for the beginning and
ending frames and Flash creates the in-between
frames
• Types of tweened animations
– motion tweened animations are used to make an
object move, rotate, or change in size or color
– shape tweened animations are used to make an
object change its shape
Summary
• Objects used in motion tweened animations
must be converted to symbols
• Symbols are stored and organized in a
document’s library
– instances or copies of a symbol are created on the
Stage
– multiple instances can be created of the same symbol
– an instance’s properties can be changed without
affecting the symbol or other instances of the same
symbol
Summary
• Buttons are symbols with their own four-frame
Timeline; buttons allow user interaction
– rollover effects as well as sound effects can be added
to buttons
– actions are added to buttons to control a movie
• A document is published to make it available on
the Web
– movies published for the Web have the .swf file
extension
– Flash creates the necessary HTML to play the movie
in a browser