The Web Warrior Guide to Web Design Technologies

Chapter 8

Flash: Part II

The Web Warrior Guide to Web Design Technologies

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


• 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


• 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


• 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


• 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


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

Symbol preview

Symbols

Options menu control

New symbol button

Properties icon

Delete 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

Objectin first frame

Symbolcreated


• Create a keyframe in the frame where the animation will end and move the object to a different position or change its properties

Keyframe

Objectrepositioned


• 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


• 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


• 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


• 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


• 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

Script pane

Action codeActions


• 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


• 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


• 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


• Adding Sounds– the Sounds library contains sounds that can be added

to a document


• 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


• Adding Sounds– a background sound can be added to a document – place a background sound in a keyframe

Waveform of backgroundsound 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

Select file typesto publish

Filenames used when movie is 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

Documents

The Web Warrior Guide to Web Design Technologies