Activity 5.

1 Worksheet

The Macromedia Flash Workspace

Student Name: ________________________________________________ Date: _______________________

Identify the Stage, workspace, Timeline, layers, panels, Tools panel, and Property inspector.

The Macromedia Flash Workspace 5 - 35

Activity 5.1 Worksheet

Identify the drawing tools, the view tools, and the color tools:

5 - 36 The Macromedia Flash Workspace

 Activity 5.1 Guide

The Macromedia Flash Workspace

Stage
The Stage is the white area of the workspace (Figure 1). Objects you place on the Stage will appear in your
published movie. The light gray area arround the Stage is called the workspace. Nothing in the workspace will
appear in your finished movie, but you can place objects there until you want them to appear on the Stage.

Stage Workspace
Figure 1 Flash workspace

The Macromedia Flash Workspace 5 - 37

Activity 5.1 Guide

Timeline and Layers

The Timeline is where you control the images and sounds in your Macromedia Flash 8 document (Figure 2). The
Timeline is divided into frames. You can add content to the frames on the Timeline.
Current frame, frame rate, and elapsed time are all shown at the bottom of the Timeline. The playhead, represented
by a red rectangle with a long red line, shows the current frame you are viewing on the Timeline. You can click and
drag the playhead back and forth on the Timeline to quickly view all or any part of your animation.
Layers provide a way to organize the elements of your movie. You can arrange content from front to back by
placing it on separate layers. This allows you to place objects in front of or behind one another. The layer controls
appear on the left side of the Timeline. Each layer has an option for hiding or showing the layer, locking it, and
displaying its contents as outlines.

Show/Hide Lock
Layers All Layers Layer Playhead

Add Layer Add Layer Delete Layers Current Frame Elapsed

Folder frame rate time

Figure 2 Timeline

Edit Bar
The edit bar, at the top of the Timeline, lets you quickly navigate between different parts of your Flash document
(Figure 3). It indicates the current object being edited and lets you switch between scenes and symbols. You can
also change the magnification level of the Stage. You can use the Timeline button to show or hide the Timeline.

Move up a Change
level magnification

Timeline Current Switch Switch

button object scene symbol

Figure 3 Edit bar

5 - 38 The Macromedia Flash Workspace

 Activity 5.1 Guide

Panels
Panels provide easy access to controls that help you work
with the content in your document (Figure 4). By default,
the panels are docked to the right side of the workspace. You
can undock panel groups, add panels to a group, undock
individual panels, rearrange the order of docked panels, and
collapse and close panel groups. To undock a panel, drag the
panel gripper in the upper left corner of the panel’s title bar.

gripper

Figure 4 Panels

The Macromedia Flash Workspace 5 - 39

Activity 5.1 Guide

Tools Panel
The Flash Tools panel is divided into labeled sections for easy tool selection. The Options section of the Tools panel
lets you modify a tool you have selected. If the Tools panel is not visible, you can display it by selecting
Window > Tools. To select a tool, just click it. (You can also use the shortcut key shown in parentheses in the
Tooltip that appears when you rest the pointer over a tool for a few seconds.)

Selection Subselection

Free Transform Fill Transform

Line Lasso

Pen Text

Oval Rectangle

Pencil Brush

Ink Bottle Paint Bucket

Eyedropper Eraser

Hand Zoom

Stroke color

Fill color

Figure 5 Tools panel

Drawing tools

Selection tool (black arrow): Click an object to select it. Drag a selected object to move it.
Subselection tool (white arrow): Select and move points of an object or edit paths between adjacent points.
Line tool: Draw straight lines.
Lasso tool: Click and drag to select an area.
Pen tool: Create straight or curved lines. You can also create Bezier curves.
Oval tool: Create circles and ovals composed of fills and strokes, just fills, or just strokes.
Rectangle tool: Create rectangles or squares composed of fills and strokes, just fills, or just strokes. Also has the
Polystar tool, which you can use to create both polygon star shapes. You can set how many points both shapes
have.
Pencil tool: Create lines in any of three modes—straighten, smooth, or ink.

5 - 40 The Macromedia Flash Workspace

 Activity 5.1 Guide

Brush tool: Create shapes with fills only.

Free Transform tool: Resize or rotate selected objects by clicking and dragging.
Fill Transform tool: Transform a gradient or bitmap fill by adjusting the size, direction, or center of the fill.
Ink Bottle tool: Change the color or width of a line, or add a stroke to a shape.
Paint Bucket tool: Add fill inside a shape or change the fill color.
Eyedropper tool: Sample a color from swatches or anywhere on the screen.
Eraser tool: Erase parts of an image.

View tools

Hand tool: Drag the Stage to view another part of your document.
Zoom tool: Zoom in or out to view more or less of the Stage. To zoom out, hold down the Alt key (Windows) or the
Option key (Macintosh).

Color tools

Stroke Color: Set the stroke color.

Fill Color: Set the fill color.

Property Inspector
The Property inspector displays options that change according to the current object or tool selection. When you
open a document, the Property inspector displays document properties. When you select a tool, it displays tool
options. When you select a vector object, it displays options such as stroke and fill. You can change these and other
options directly from the Property inspector. By default, the Property inspector is visible; you can hide or show it by
selecting Window > Properties. Figure 6 shows the properties for a text object and a rectangle shape, respectively.

Figure 6 Property inspector

The Macromedia Flash Workspace 5 - 41

 Activity 5.1 Guide

How to Create an Animated Face

This activity walks you step by step through the process of creating a simple animation by using Macromedia
Flash 8. You will use many basic Flash techniques, including drawing tools, motion and shape tweens, button
symbols, and basic ActionScript to provide user controls. You will also import a sound file to provide a musical
soundtrack while the movie plays. After you have tested your movie, you will publish it for playback by others,
either through a browser or directly with Flash Player.

Draw Facial Features

Draw the right eye

1. Start Flash and open a blank new document.

2. The new document contains one layer and one empty
keyframe.
3. Select the Oval tool and draw a small circle to represent
the right eye on a face (Figure 1).
Your circle may not be blue.
4. Select the Selection tool and double-click the circle’s
center to select it. You should see both its outline
(stroke) and center (fill) selected.
Figure 1 Right eye drawn with Oval tool
5. To change the outline color of the eye, click the Stroke
Color box in the Property inspector and select a new
color (Figure 2). To change the fill color, use the Fill
Color box.
6. On the Timeline, double-click the layer name, Layer 1
(Figure 3).
Stroke color Fill color
This selects the layer name so you can rename it.
Figure 2 Image Property inspector
7. Rename the layer Right Eye and press Enter (Windows)
or Return (Macintosh) (Figure 4).

Figure 3 Layer name

Figure 4 New layer name

How to Create an Animated Face 5 - 43

Activity 5.1 Guide

Save the eye graphic as a symbol in the library

Instead of creating two eyes separately, convert the right eye

from a shape to a graphic symbol. This adds the eye to the
library so you can use it over and over. This will also reduce
the size of your finished movie.
8. On the Right Eye layer, click frame 1 to select it
(Figure 5).
This automatically selects the contents of frame 1.
Note: If the right eye is not completely selected, double-
click the eye on the Stage with the Selection tool to Figure 5 Frame 1 selected
select it.
9. Select Modify > Convert to Symbol.
The Convert to Symbol dialog box opens (Figure 6).
10. In the dialog box, name the symbol eye, select Graphic
as the behavior, and click OK (Figure 7).
The eye on the Stage is now just an instance (copy) of Figure 6 Convert to Symbol dialog box
the master eye symbol, which is stored in the library.
The eye now has a single blue selection border and can
be selected with a single click.
11. Select Window > Library to see that your symbol has
been added to the Library panel (Figure 8).
Note: You must select the eye symbol in the library to
see the graphic in the preview window. Figure 7 Symbol name
You can now reuse the eye symbol as many times as
you want without redrawing it.

Figure 8 Library panel

5 - 44 How to Create an Animated Face

 Activity 5.1 Guide

Reuse the eye symbol to create the left eye

12. Click the Insert Layer button in the lower left corner of
the Timeline to insert a new layer (Figure 9).
13. Double-click the layer name and change the name to
Left Eye.
14. On the Left Eye layer, select frame 1.
15. Select the eye symbol in the Library panel and drag the
symbol onto the Stage (Figure 10). Figure 9 Insert Layer button
You now have a second instance of the eye on the
Stage. Using instances from the library keeps the file
size of your movie smaller than copying and pasting.
Smaller movies load faster in a browser.

Figure 10 Drag eye symbol onto Stage

Draw the nose

16. Insert a new layer and name it Nose.

17. Select frame 1 on the Nose layer.
18. Select the Line tool and draw two lines that form an
angle to represent a nose (Figure 11).
19. To adjust the angle after you’ve drawn it, use the
Subselection tool (white arrow) to drag one end of the Figure 11 Draw nose
line. (You might try dragging one end of a line with the
Arrow tool to see the difference between the two tools.)

How to Create an Animated Face 5 - 45

Activity 5.1 Guide

Add frames to make a three-second movie

A Flash movie typically plays 12 frames per second. To keep the nose on the Stage for 3 seconds, for example, you
need to insert 36 additional frames on the Nose layer after frame 1, the current frame. (Starting at frame 1, it will
take the movie 3 seconds to reach frame 37, because 1 + 36 = 37.)
20. Select frame 37 on the Nose layer and select
Insert > Timeline > Frame.
Flash inserts frames through frame 37 (Figure 12).
Observe that the playhead (the red rectangle at the top
of the Timeline) is on frame 37 and that the nose is
visible but the eyes have disappeared. At the bottom of
the Timeline, you can see that this movie is currently 37 Figure 12 Frame inserted in Timeline
frames, is set to play at 12 frames per second, and will
play for 3 seconds.
Note: The keyboard shortcut for inserting a frame is F5.
21. Drag the playhead to various frames.
The nose remains visible in frames 1 through 37, but the
eyes appear only in frame 1.
22. To see your movie, drag the playhead to frame 1 and
then select Control > Play.
At this point, not much is happening beyond frame 1.

Draw the mouth

23. Insert a new layer and name it Mouth.

24. Select frame 1 of the Mouth layer.
25. Draw a mouth in frame 1.
• Use the Line tool to draw a straight line Figure 13 Mouth as straight line
(Figure 13).
• Select the Selection tool and click on the Stage
away from the line to deselect it.
• Move the pointer toward the middle of the line.
When a curve appears next to the pointer, drag the
middle of the line downward to create a smile
(Figure 14).
• When you release the mouse button, only the smile
remains (Figure 15).
Figure 14 Drag line with Arrow tool

Figure 15 Mouth complete

5 - 46 How to Create an Animated Face

 Activity 5.1 Guide

Animate the Facial Features

Use motion tweens to animate the eyes

Because you created the eyes by using a graphic symbol, you can animate them by using a motion tween. To create
the motion tween, you need a start keyframe and an end keyframe containing the same symbol. You can then use a
motion tween to fill the frames between the keyframes.
1. On the Right Eye layer, select frame 37 and select
Insert > Timeline > Keyframe. This will be the end
keyframe.
A keyframe signals Flash that some animation action Figure 16 Tween menu
begins or ends at that frame.
2. On the Right Eye layer, select frame 37 and drag the
right eye a short distance.
3. Select any frame between frames 1 and 36 on the Right
Eye layer.
4. In the Property inspector, select Motion from the
Tween menu to create a motion tween (Figure 16).
Note: You can also select Insert > Timeline >
Create Motion Tween.
Notice the frames containing the motion tween are now
light blue and contain a solid arrow running from the
start frame to the end frame.
5. Position the playhead on frame 1 and select
Control > Play to play your movie and see the effect of
the motion tween.
The right eye gradually moves from its original position
in frame 1 to the new position in frame 37. Notice that
only the right eye moves.
Note: If you want to change the motion, move only the
symbol in keyframe 37.
6. Select frame 37 on the Left Eye layer and insert a
keyframe.
7. Move the left eye the same distance as the right eye, and
then create a motion tween between the first and last
frames on the Left Eye layer.

How to Create an Animated Face 5 - 47

Activity 5.1 Guide

Use a shape tween to animate the mouth

Because you created the mouth by using one of the drawing tools (the Line tool) and have not converted the mouth
to a symbol, it is still a shape. You can use a shape tween to animate the mouth.
8. Select frame 37 on the Mouth layer and insert a
keyframe.
9. With the Selection tool, click on the Stage away from
the mouth line to deselect it. Then drag the mouth line
into a bigger smile.
10. To create a shape tween between the first and last
frames on the Mouth layer, click a frame between
frames 1 and 37, and select Shape from the Tween
menu in the Property inspector.
Notice the frames containing the shape tween are now
light green and contain a solid arrow running from the
start frame to the end frame.
10. Select File > Save.
11. Select Control > Test Movie to see it play.
Selecting Control > Test Movie exports a .swf file and
plays it in a preview window. When the movie reaches
the last frame, it loops back to frame 1 and plays again.
12. Select File > Close to close the preview window.
Create any additional animated facial features as you choose.

5 - 48 How to Create an Animated Face

 Activity 5.1 Guide

Add User Control

In Flash you can use ActionScript to enable the viewer to control a movie. You use frame actions to tell the movie
what to do when it reaches a specific frame. You use object actions to associate the control with an object such as a
button symbol. Object actions, such as button actions, let you give your visitors more control over the movie.
For example:
• You can attach a stop action to the first frame of your movie so the movie will not play past frame 1 until
the viewer makes that happen.
• You can add a Start button in the first frame of your movie and attach a goto action so the movie will
resume playing when the viewer clicks the Start button.
• You can add a Stop button that will be available after the viewer clicks the Start button. If you attach a stop
action to the Stop button, the movie will stop when the viewer clicks the button.

Attach a stop action to the first frame

1. Select the top layer on the Timeline and insert a new

layer.
The new layer is inserted at the top of the list.
Note: A new layer is always inserted above the
currently selected layer. To change the order of layers
on the Timeline, select a layer and drag it to the desired
position in the list.
2. Name the new layer Actions.
3. Select the first frame of the Actions layer.
Actions Parameters Script
This is where you will place the stop action telling the toolbox area pane
movie to stop and not begin playing automatically.
4. Select Window > Actions. Figure 17 Actions panel

The Actions Panel opens (Figure 17). Notice that the

panel title bar reads Actions – Frame. This is because
you are applying an action to a frame, not to a button or
movie clip.
5. Make sure Script Assist is on (the right pane will appear
split, as in Figure 17). If it is not, click the Script Assist
button.
Script Assist makes it easier to add ActionScript to your
Flash documents by letting you fill in dialog boxes
instead of directly writing code.
6. In the Actions toolbox, click the Global Functions Figure 18 Global functions category expanded
category to display subcategories of actions (Figure 18).

How to Create an Animated Face 5 - 49

Activity 5.1 Guide

7. Click the Timeline Control category to expand it

(Figure 19).
8. Select the stop action. To attach the stop action to frame
1, either double-click the stop icon or drag it to the
Script pane.
9. Close the Actions panel and look in frame 1 of the
Actions layer.
The frame contains a small letter a indicating this frame
contains an action (Figure 20).
Figure 19 Timeline control category expanded

Figure 20 Frame with action added

Create a Start button

Now that you’ve placed a stop action in frame 1, you need to create an object action giving the user the ability to
start the movie. The object action needs to be associated with an object, so first create a Start button.
10. Insert a new layer and name it Buttons.
11. Select frame 1 on the Buttons layer, and select
Insert > New Symbol.
The Create New Symbol dialog box opens.
12. Name the symbol Start, select Button for the Behavior,
and click OK (Figure 21). Figure 21 Create New Symbol dialog box
Flash switches to symbol-editing mode, with a new
blank Stage for your button symbol. The name of your
button appears on the information bar at the top of the
Stage (Figure 22).
The Timeline displays four frames for the four states of
a button (Figure 23). Each frame (or button state) has a Figure 22 Symbol-editing mode
specific function:
• The Up state represents the button’s appearance
when the pointer is not over the button.
• The Over state represents the button’s appearance
when the pointer is over the button.
• The Down state represents the button’s appearance
as it is clicked. Figure 23 Button Timeline
• The Hit state defines the target area that responds to
a mouse click. This area is not visible when the
movie plays.

5 - 50 How to Create an Animated Face

 Activity 5.1 Guide

13. Select the Up frame.

14. Use the Rectangle tool to draw a rectangular button on
the Stage. Use the Property inspector to set stroke and
fill colors for the Up state of the button.
15. Insert keyframes in the Over, Down, and Hit frames.
By inserting keyframes, you automatically copy the
rectangle to the other states of the button.
Note: Flash automatically inserts a keyframe in the Up
frame.
16. Select the Over frame. Using the Selection tool, double-
click the button on the Stage to select it, and change the
stroke or fill color for the Over state in the Property
inspector.
17. Select the Down frame. Using the Selection tool,
double-click the button on the Stage and change the
stroke or fill color for the Down state.
18. Select the Hit frame. Use the Rectangle tool to draw a
rectangular target area that will respond to a mouse
click.
Note: It doesn’t matter what colors you use for the Hit
area, because this rectangle is not visible to viewers of
your movie. If you skip this step, Flash will
automatically define the target area to be the same as the
button shape.
19. Insert a layer and name it Text.
20. Select the Up frame on the Text layer and use the Text
tool to type Start. Use the Property inspector to change
the font, size, and color of the text. Center the text
within the rectangle shape.
21. To exit symbol-editing mode and return to editing the
movie, click Scene 1 on the information bar at the top of
the Stage or select Edit > Edit Document.
Your Start button does not appear on the Stage yet, but
it is stored in the library.

How to Create an Animated Face 5 - 51

Activity 5.1 Guide

Create a Stop button

You can repeat the steps you used to create the Start button, or you can simply duplicate and then modify the Start
button.
22. Make sure the Library panel is open. (If not, select
Window > Library.)
23. Select the Start button symbol in the library.
24. Select Duplicate from the Library panel options menu
in the upper right corner of the panel (Figure 24).
The Duplicate Symbol dialog box opens (Figure 25).
25. Make sure Button is selected for Behavior. Name the
new symbol Stop and click OK.
26. In the Library panel, double-click the icon for the Stop
symbol to edit the symbol (Figure 26).
27. Select frame 1 of the text layer, and use the Text tool to
edit the text to read Stop. Figure 24 Library panel options menu
28. Click Scene 1 or select Edit > Edit document to exit
symbol-editing mode.

Figure 25 Duplicate Symbol dialog box

Figure 26 Edit Stop symbol

5 - 52 How to Create an Animated Face

 Activity 5.1 Guide

Place the buttons on the Stage

29. Select frame 1 on the Buttons layer.

30. Make sure the Library panel is open. (If not, select
Window > Library.)
31. Drag the Start button from the library onto the Stage.
32. Select frame 2 on the Buttons layer and insert a
keyframe.
Figure 27 Onion Skin Outlines button
33. Delete the Start button from frame 2.
34. Drag the Stop button onto the Stage.
35. Click the Onion Skin Outlines button at the bottom of
the Timeline (Figure 27).
With onion skinning turned on, you can view a range of
frames. This will help you align the Start and Stop
buttons.
36. Move the Start and Stop buttons until both of them are
in the same position on the Stage.
Note: To fine-tune the position of the buttons, select a
button and use the up, down, left, and right arrow keys.
37. Click the Onion Skin Outlines button again to turn off
onion-skinning.

Add button actions

38. Select frame 1 on the Buttons layer, select the Start

button on the Stage, and open the Actions panel
(Window > Actions).
Note: Be sure to select the Start button, or your action
will be applied to the frame, not the button. The Action
panel’s title bar should say Actions - Button.
39. Make sure Script Assist is turned on (Figure 28). If you
don’t see the Parameters area, click the Script Assist
button.
40. In the Actions toolbox, expand the Global Functions
and Timeline categories and drag goto to the lower
right panel. Parameters area Script pane
Flash automatically adds an on(release) command to the Figure 28 Script Assist turned on
script along with the goto action. This means the goto
action executes when the visitor releases the Start
button.
41. Make sure Go to and Play is selected in the parameters
area.

How to Create an Animated Face 5 - 53

Activity 5.1 Guide

42. Be sure the setting for Scene in the parameters area is

<Current scene>, and Type is Frame Number. For
Frame, type 2.
This action will start the animation in frames 2 through
37.
Notice that the settings you made in the parameters area
are reflected in the Script pane at the bottom of the
panel. This is the ActionScript that controls the actions
in your movie (Figure 29).
43. Select frame 2 on the Buttons layer and select the Stop
button.
Note: You may need to collapse the Actions panel to Figure 29 Parameters for the goto action
see the layers. To collapse the Actions panel, click the
down arrow on the title bar.
44. Make sure the Actions panel is expanded, and double-
click goto.
45. In the parameters area of the Actions panel, select Go to
and Stop. For Frame, type 1.
This action will stop the animation and redisplay the
Start button in frame 1.
Next, make the movie loop through frames 2–37 until
the viewer clicks Stop. You do this by using a Frame
action.
46. Insert a keyframe in frame 37 of the Actions layer.
47. In the Actions panel, double-click goto.
48. In the parameters area, select Go to and Play, and type
2 for Frame.
49. Close the Actions panel, save your movie, and select
Control > Test Movie to test it.
50. Select File > Close to close the preview window.

5 - 54 How to Create an Animated Face

 Activity 5.1 Guide

Add Sound
1. Insert a new layer below the Actions layer and name it
Sound.
2. Select File > Import > Import to Library.
The Import to Library dialog box opens. Figure 30 Sound Property inspector
3. Locate and select a sound file saved on your computer.
Click Open (Windows) or Import to Library
(Macintosh).
The sound is added to the library.
Note: You can download free music loops and sound-
effect clips at www.flashkit.com, for example.
4. Select frame 2 on the Sound layer and insert a keyframe.
5. Open the library and drag the sound file from the library
onto the Stage.
Flash inserts the sound on the Sound layer, starting in
frame 2.
6. Select frame 2 on the Sound layer. In the Property
inspector, select Start from the first Sync menu and
select Loop from the second Sync menu (Figure 30).
7. To stop the sound when the viewer clicks the Stop
button:
• Select frame 2 on the Buttons layer.
• Select the Stop button.
• Select Window > Actions.
• Double-click stopAllSounds in the Movie Control
category of the Actions toolbox.
• Close the Actions panel.
• Save the movie and test it.

How to Create an Animated Face 5 - 55

Activity 5.1 Guide

Publish Your Movie

When you’re ready to deliver your movie to an audience, you can publish the Flash document (FLA file) for
playback. The Publish command creates a Flash SWF file (playable with Flash Player) and an HTML document that
inserts your Flash movie in a browser window. For viewers who do not have Flash Player installed, you can select
to publish the FLA file in alternative file formats—GIF, JPEG, PNG, or QuickTime—with the HTML needed to
display them in a browser window.
1. Select File > Publish Settings to open the Publish
Settings dialog box (Figure 31).
2. Use the Formats tab to determine which file formats to
output when you publish.
3. Use the Flash tab to determine which Flash Player you
are publishing to (Figure 32). If you think your
audience might not have the latest player, you might
want to select an older player.
4. Select Generate Size Report to see a detailed report of
size for each asset in your movie.
5. Select Protect from Import to prevent anyone from
importing your SWF file into Flash and converting it
back to a FLA file.
6. Select Compress Movie to reduce the file size of the
exported movie.
Figure 31 Publish Settings dialog box

Figure 32 Flash tab of Publish Settings dialog box

5 - 56 How to Create an Animated Face

 Activity 5.1 Guide

7. Use the HTML tab to control settings for the HTML

file (Figure 33).
8. To publish your movie, click the Publish button.

Figure 33 HTML tab of Publish Settings dialog

box

How to Create an Animated Face 5 - 57

 Activity 5.1 Guide

Symbols, Instances, and the Library

Symbols and Instances

A symbol is a graphic, button, or movie clip you create once in Macromedia Flash 8 and can use any number of
times throughout your movie. Any symbol you create is automatically placed in a storage area called the library for
the current document.
An instance is a copy of a symbol located on the Stage. An instance can be different from its symbol in color, size,
and function. To create an instance of a symbol, drag the symbol from the library onto the Stage. Once you have
created an instance, you can use the Color options in the Property inspector to change its brightness, tint, alpha, or
RGB color settings.
Editing the symbol automatically updates all of its instances, but applying effects to an instance of a symbol updates
only that instance.
Using symbols offers a number of advantages. Symbols add interactivity to your documents. They save space and
reduce the download time of your finished movie because Flash does not have to save duplicate information for
each instance. For example, if you create an animated wheel symbol, you can use several instances of the symbol to
create the wheels on a train. The result is a much smaller file than if you had created each wheel separately.
Symbols also help you maintain consistency throughout your Flash document. For example, if you have buttons
throughout your document, using symbols ensures that all buttons look alike. You can easily edit all instances of
buttons in a document at once when you use symbols to create them. You can also use symbols to share content
between different documents.
When you create a new drawing in Flash, you’re creating a shape, not a symbol. You can convert any shape to a
symbol by selecting it and then selecting Modify > Convert to Symbol.

Libraries
The library is a container where Flash stores and organizes symbols, sounds, bitmap graphics, video, and other
elements. The library is attached to the document you’re working on. If you share your document with someone
else, and they open it on their computer, they will see the same library objects. You can also open libraries from
other documents by selecting File > Import > Open External Library. As your documents become more complex,
you’ll find it helpful to use folders to sort your symbols into related groups within the library.

Figure 1 Library panel

Symbols, Instances, and the Library 5 - 59

Activity 5.1 Guide

Types of Symbols
Flash has three types of symbols: Graphic, Button, and Movie Clip.
Each symbol has a unique Timeline and Stage, complete with layers. When you create a symbol, you choose the
symbol type, depending on how you want to use the symbol in your document.
• Use graphic symbols for static images and to create reusable pieces of animation that are tied to the main
Timeline. Graphic symbols operate in sync with the main Timeline. Interactive controls and sounds won’t
work in an animation sequence contained in a graphic symbol.
• Use button symbols to create interactive buttons that respond to mouse clicks, rollovers, and other site
visitor actions. You define the graphics associated with various button states and then assign actions to a
button instance.
• Use movie clip symbols to create reusable pieces of animation. A movie clip has its own Timeline that is
independent from the main Timeline—think of is as a sub-Timeline nested inside the main Timeline.
Movie clips can contain interactive controls, sounds, and even other movie clip instances.

Creating Symbols
You create symbols in one of two ways:
• Select Insert > New Symbol. This creates a new symbol to which you must add content.
• Select an existing shape and select Modify > Convert to Symbol.

5 - 60 Symbols, Instances, and the Library

 Activity 5.1 Guide

Frames and Keyframes

Frames define increments on the Timeline. The order in which frames appear on the Timeline determines the order
in which they appear when a Flash document plays. You can arrange keyframes on the Timeline to edit the
sequence of events in an animation.
Keyframes are special frames in which you define a change in an animation, either by changing an object’s
properties (such as its size or location) or by adding ActionScript to the frame. Keyframes let you produce
animation without drawing each individual frame. Flash can tween, or automatically fill in, the frames between
keyframes to produce animations. Blank keyframes are keyframes in which all previous frame content is cleared.
A keyframe is indicated on the Timeline with a solid black circle. The frame where a keyframe span ends has a
small white rectangle. A blank keyframe is indicated by an empty circle.

Keyframe Frame End of Blank

keyframe span keyframe
Figure 1 Frames

You can do the following with frames or keyframes:

• Insert frames, keyframes, and blank keyframes.
• Remove frames, keyframes, and blank keyframes.
• Convert frames to keyframes or blank keyframes.
• Drag frames and keyframes to a new location on the same layer or on a different layer.
• Copy and paste frames and keyframes.

Frames and Keyframes 5 - 61

 Activity 5.1 Guide

How to Create Motion and Shape Tweens

Overview of Tweening
Macromedia Flash 8 provides two methods for creating an animation sequence: tweened animation and frame-by-
frame animation. Frame-by-frame animation involves a series of keyframes with a different image in every frame.
Although this can be useful for complex animations, Flash is capable of automatically creating animation by
tweening images. The word tween comes from an animation technique in which an artist draws the starting point of
a motion—such as a dog wagging its tail to the left—and the stopping point of the motion—a wag to the right. Then
the artist has to draw all the stages in between to make the tail appear to move. To tween an element on the Stage in
Flash, you set the starting and ending frames for the element, create a tween between those frames, and Flash
automatically fills in the frames between. There are two types of tweens in Flash: motion tweens and shape tweens.

Motion tweening

You can use motion tweening to animate any of the following elements:
• A symbol (graphic, button, or movie clip)
• A grouped object (a collection of drawn shapes that have been grouped)
• A text block
When using a motion tween to animate a symbol, you can change the following properties:
• Color (tint)
• Alpha (fade or transparency)
• Position
• Size
For example, you can use a motion tween to create the effect of text floating across the Stage, but if you want the
text to slowly fade as it moves across the Stage, you must first convert the text block to a symbol. You can then use
the Color Alpha setting in the Property inspector to create the fade.
1. Start Flash and open a new blank document.
2. Draw a shape on the Stage or import an image by
selecting File > Import > Import to Stage.
Notice the shape appears in keyframe 1 of Layer 1.
3. If the object is a drawn object, select the Selection tool
and double-click the object to select it.
If the object is an imported image, select the Selection
tool and just click the object to select it.
4. Select Modify > Convert to Symbol.
The Convert to Symbol dialog box opens.
Note: You cannot apply motion tweens to shapes. To
apply a motion tween, you must first convert the shape
to a symbol.
5. Type a new name for the symbol in the Name text box,
select the Graphic option, and click OK.

How to Create Motion and Shape Tweens 5 - 63

Activity 5.1 Guide

6. Select frame 10.

7. Select Insert > Timeline > Keyframe (Figure 1). (This
will make the motion tween last for 10 frames.)
Notice that when you insert a keyframe, Flash fills the
area between the last frame (on the current layer) and
the new keyframe with the same content. Frames 1
through 10 all contain the new symbol.
8. Make sure frame 10 is selected. This is the end frame
for the motion tween. Select the instance of the symbol
in frame 10; then make one or more of the following
changes:
Color change: In the Property inspector, select Tint Figure 1 Inserted keyframe
from the Color pop-up menu (Figure 2). Select 100%
for the Tint Amount and change the color in the color
box.
Fading: In the Property inspector, select Alpha from the
Color pop-up menu. Reduce the percentage of the Alpha
Amount for more transparency. For example, an Alpha
Figure 2 Color pop-up menu
value of 0% makes the object disappear.
Position: Use the Selection tool to move the object to a
different position on the Stage.
Size: Select the object and then select Modify
> Transform > Free Transform (Figure 3). Drag the
corners of the object to increase size, decrease size, and
rotate the object.
9. Select frame 1 on the Timeline.
10. In the Property inspector, select Motion from the Tween
pop-up menu.
The tween is represented by a solid arrow on a blue
background running from the start keyframe to the end
keyframe.
Figure 3 Free Transform menu option
11. In the Property inspector (Figure 4), adjust one or more
properties of the Motion tween:
• Ease: Controls how fast the object starts or ends the
motion tween. For example, a high number for Ease
makes an object begin tweening quickly but end
tweening slowly.
• Rotate: Rotates the object clockwise or
counterclockwise a designated number of times.
Figure 4 Tween Property inspector
• Scale: Keeps the proportions of the object equal
when the tween resizes the object.
• Orient to path: If you have added a guide layer, the
object is linked to the path drawn on the guide
layer.
• Sync: Starts and stops the tweening of all objects on
the Stage at the same time.
• Snap: Keeps the tweened object aligned to an
invisible grid to control spacing.

5 - 64 How to Create Motion and Shape Tweens

 Activity 5.1 Guide

12. Select Control > Test Movie to test the movie.

13. Select File > Close to close the preview window.
14. To see all phases of the tween at the same time, click the
Onion Skin Outline button at the bottom of the
Timeline (Figure 5).
15. Drag the onion skinning frame handles (they appear as
brackets with circles on them at the top of the Timeline) Figure 5 Onion Skin Outline button
to span the frames in which the object appears.
The steps of the tween are all visible on the Stage
(Figure 6).
16. Turn off onion skinning.
17. Save the movie.

Figure 6 Onion skinning visible

Common motion tween problems and solutions

The tween you created was indicated on the Timeline by a solid arrow on a blue background. If the tween is not
working, the arrow is dashed. There are several ways to fix a broken motion tween.

Problem Solution
No keyframe at beginning or ending of motion Remove the motion tween in the Property inspector
tween. (select any frame of the tween and select None from the
Tween menu in the Property inspector). Then select the
beginning or ending frame and select Insert > Timeline >
Keyframe. Add the motion tween again.
Objects in keyframes aren’t the same. Remove the motion tween in the Property inspector. Click
the second keyframe (farther down the Timeline). Right
click (Windows) or Control click (Macintosh) and select
Clear Keyframe. Make sure the first keyframe has the
correct objects in it. Insert the second keyframe again and
add the motion tween.
The two keyframes contain objects that aren’t Remove the motion tween and clear the second keyframe.
instances of symbols, grouped objects, or a text If necessary, convert objects in the first keyframe to
block. symbols or remove them from the Stage. Add the second
keyframe again and re-create the motion tween.
More than one symbol is in the frame. Motion Remove the motion tween and place each symbol on a
tweening will not occur on layers with more than separate layer; then create separate motion tweens for
one group or symbol. each symbol on separate layers.

How to Create Motion and Shape Tweens 5 - 65

Activity 5.1 Guide

Shape tweening

In Flash, a shape is a vector-based object or series of objects, such as anything you draw with the drawing tools. For
a shape to be animated by shape tweening, it cannot be a grouped object, a bitmap, or a symbol. You can apply
shape tweening to text, but you must first convert the text to a shape by breaking it apart.
For example, you could create a motion tween that turns the word “elephant” into an image of an elephant.
You can use a shape tween to:
• Tween the shape of an object (morph from one shape to another)
• Tween the color of an object (including a color with transparency)
• Tween the position of an object on the Stage (much like a motion tween, but between shapes rather than
symbols)
• Tween text that has been broken apart
• Tween a bitmap that has been broken apart (converted to a shape)
You cannot use a shape tween to:
• Tween grouped objects
• Tween symbols
• Tween text that has not been broken apart
• Tween bitmaps that have not been broken apart
Note: Shape tweens can use much more memory than motion tweens, so it is best to use shape tweens sparingly. It
is also best to use simple shapes in shape tweens.
In a shape tween, you can change the following properties:
• Color (tint)
• Alpha (fade)
• Shape

5 - 66 How to Create Motion and Shape Tweens

 Activity 5.1 Guide

To change the color or alpha of a shape, use the Color Mixer panel.
1. Start Flash and open a new blank document.
Frame 1 in Layer 1 already contains a blank keyframe.
2. Begin by adding a shape to the Stage:
Drawn objects: Select a shape tool (rectangle or oval)
and draw an object on the Stage.
Text: Select the Text tool and type a word or phrase on
the Stage. Then select the text and select Figure 6 Change shape with Selection tool
Modify > Break Apart. This breaks the words into
separate letters. With the letters still selected, select
Modify > Break Apart again to convert the letters into
shapes.
Outside images: Select File > Import to import an
image. If the image is a bitmap, you must break it apart.
If the image is a grouped vector drawing, you must
ungroup it completely. To break apart a bitmap, select
Modify > Break Apart. To ungroup an image, select
Modify > Ungroup.
Note: You might need to select Modify > Break Apart
or Modify > Ungroup multiple times until the object
becomes a shape, as indicated in the Property inspector.
3. Select frame 10.
4. Select Insert > Timeline > Keyframe. (This will make
the tween last for 10 frames.)
5. Make sure frame 10 is still selected and make one or
more of the following changes to your shape:
Amorphous shape change: Click the Stage with the
Selection tool to deselect the object. Bring the Selection
tool close to the object to grab an edge. Drag the edge to
change the shape of the object (Figure 6).
Different shape: To morph between your original shape
and a new shape, delete the object in keyframe 10 and
draw a new object. Note: Select Modify > Break Apart
if the drawn object is not a shape.
Text: To morph between your original shape and text,
delete the object in keyframe 10 and type text on the
Stage. Select Modify > Break Apart until the text block
is a shape, as indicated in the Property inspector.
Outside image: To morph between your original shape
and a new image you import, delete the object in
keyframe 10 and select File > Import to bring in
another outside image. Select Modify > Break Apart to
make the object a shape, if necessary.

How to Create Motion and Shape Tweens 5 - 67

Activity 5.1 Guide

6. Select frame 1 on the Timeline (on the current layer).

This is your start frame for the animation.
7. In the Property inspector, select Shape from the Tween
pop-up menu (Figure 7).
8. Adjust one or more properties of the Shape tween:
Figure 7 Tween Property inspector
Ease: Controls how fast the object starts or ends the
shape tween. For example a high number for Ease
would have an object begin tweening quickly but end
the tween slowly.
Blend (Distributive): Creates an animation in which the
intermediate shapes are smoother and more irregular.
Blend (Angular): Creates an animation that preserves
corners and straight lines in the intermediate shapes.
9. Select Control > Test movie to test the movie.
10. Select File > Close to close the preview window.
11. To see all phases of the tween at the same time, click the
Onion Skin button at the bottom of the Timeline.
12. Drag the frame handles (they appear as brackets with
circles on them at the top of the Timeline) to span the
first 10 frames of Layer 1.
The steps of the tween are all visible on the Stage.
12. Turn off onion skinning.
13. Save the movie.
14. Close the movie.

Shape tweens versus motion tweens

The following table is helpful in deciding which type of tween to select when animating objects.

Shape Group Symbol Text Block Broken-apart Text

yes no no no yes
Shape Tween

no yes yes yes no

Motion Tween

5 - 68 How to Create Motion and Shape Tweens

 Activity 5.1 Guide

How to Create a Button Symbol

Button Symbols
Buttons give visitors a way to control parts of a movie. You can use button symbols to create interactive buttons that
respond to mouse clicks, rollovers, or other visitor interaction. Button symbols are four-frame interactive movie
clips. The first three frames display the button’s three possible states—Up, Over, and Down; the fourth frame, Hit,
defines the active area of the button. The Timeline for a button doesn’t play like other movies; it reacts to pointer
movement and actions by jumping to and displaying the appropriate frame.
You can create the image that will represent your buttons in several ways. For example, you can use an existing
graphic as the button, or you can create a shape by using the drawing tools.

Create a Button
Create a new button symbol that contains two layers. One layer will contain a shape representing the background of
the button. The second layer will include a text label for the button. You will change the background and text label
in the Over and Down states of the button to create the rollover effect.
1. Start Flash and open a new blank document.
2. Select Insert > New Symbol.
The Create New Symbol dialog box opens (Figure 1).
3. Select Button as the behavior type, name the button,
and click OK.
Figure 1 Create New Symbol dialog box
You are now in symbol-editing mode and viewing a
separate Timeline for the button symbol. The Up frame
contains a keyframe.
Each frame on the Timeline of a button symbol has a
specific function:
• Up state: Represents the button whenever the
pointer is not over the button.
• Over state: Represents the button’s appearance
when the pointer is over it.
• Down state: Represents the button’s appearance as
it is clicked.
• Hit state: Defines the area that will respond to a
mouse click. This area will be invisible in the
published movie.
4. Select the Up frame.
5. Use the drawing tools to create a shape for your button.
Use the Property inspector to set the fill and stroke
colors for the Up state of the button.
6. Select the Over state and select Insert > Timeline >
Keyframe to add a keyframe.
Adding this keyframe copies the button graphic from the
Up frame to the Over frame.

How to Create a Button Symbol 5 - 69

Activity 5.1 Guide

7. Select the Over keyframe and use the Selection tool to

select the button.
8. Change the fill or stroke color of the button shape.
When the visitor rolls the pointer over the button, the
button will appear as you see it in the Over frame.
9. Insert keyframes in the Down and Hit frames of the Text
layer.
This copies the button graphic from the Over frame to
the Down and Hit frames. Figure 2 Button Timeline
10. Insert a new layer and name it Text.
11. Select the Up frame of the Text layer.
This frame already contains a keyframe.
12. Use the Text tool to type text on the button shape.
13. Use the Property inspector to adjust the font, size, and
color of the text so it fits nicely on your button shape.
14. Use the Selection tool or the up, down, left, and right
arrow keys to position the text on the button shape.
15. Insert a keyframe in the Over frame of the Text layer.
16. Select the text and use the Property inspector to change
some feature of the text in the Over frame, such as
color.
17. Insert a keyframe in the Down frame. If you want the
text to change appearance when the button is clicked,
edit the appearance of the text in the Down frame.
The Timeline should now appear as it does in Figure 2.
Now you can insert an instance (copy) of the button Figure 3 Button in library
symbol into the main Timeline of your movie.
18. Click Scene 1 to exit symbol-editing mode and return to
the main Timeline.
19. Select Window > Library to open the Library panel.
The new button symbol appears in the Library panel
(Figure 3).
Note: You must select the symbol in the library to see
the symbol in the preview pane.
20. Drag the button symbol from the library onto the Stage.
21. Select Control > Test Movie to test the movie.
When you roll over the button with the pointer, you see
the changes you defined in the Over frames for the
button. If you edited the Down state of the button, this
will be visible when you click the button.

5 - 70 How to Create a Button Symbol

 Activity 5.1 Guide

Adding sound to a button

You can also add sounds to the button, so when visitors roll over the button, for example, they hear a sound.
1. Double-click the button to enter symbol-editing mode
for the button.
2. Insert a new layer and name it Sound.
3. Import a short sound into the library, such as from Figure 4 Frame Property inspector
www.flashkit.com.
4. On the Sound layer, add a keyframe to correspond with
the button state to which you want to add a sound.
For example, to play a sound when the visitor rolls over
the button, add the keyframe to the Over state.
5. Click the new keyframe.
6. Make sure the Property inspector is open. (Select
Window > Properties.)
7. In the Property inspector, select a sound file from the
Sound pop-up menu (Figure 4).
8. Select Event from the Synchronization pop-up menu.
The sound will play when visitors interact with the
button.

How to Create a Button Symbol 5 - 71

Activity 5.1 Guide

Add Control with Actions

Right now the button looks great, but it doesn’t perform any action. You can remedy this by adding ActionScript to
the button.
Buttons give visitors control over the movie. You can apply actions to your buttons that will stop the movie, stop
sounds, restart the movie (after stopping it), or jump to different frames within the movie and begin playing. You
can add actions to any instance of the button symbol you’ve placed in your movie.
1. Click the instance of the button to which you want to
add an action.
2. Select Window > Actions to open the Actions panel
(Figure 5).
3. Click to expand the Global Functions and Timeline
Control categories.
4. Double-click an action to add it to the selected button
symbol.
goto: Enables visitors to go to and play from a specific
frame or named location in the movie—or go to and
stop on a specific frame or named location in the movie. Figure 5 Actions panel
Use the Scene, Type, and Frame fields to set the
destination location.
play: Enables visitors to continue playing a movie. This
action is generally used to restart a movie after a stop
action.
stop: Enables visitors to stop a movie.
stopAllSounds: Enables visitors to stop playing all
sounds that are playing in the movie.
5. Close the Actions panel.
6. Save the movie.

5 - 72 How to Create a Button Symbol

 Activity 5.2 Worksheet

Analyzing Macromedia Flash on the Web

Student Name: ________________________________________________ Date: _______________________

Examine some websites that use Flash to see examples of the techniques designers use to target a variety of
audiences. Use this worksheet to record your observations.

URL: _______________________________________________________________________________________

Name of the Site: ______________________________________________________________________________

What is the main type of audience the site is targeting? How does the site target this audience?

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

Identify the following Flash techniques and explain what part of the site uses them:

Motion tweens

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

Shape tweens

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

Analyzing Macromedia Flash on the Web 5 - 73

Activity 5.2 Worksheet

Movie clips

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

Buttons

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

Sound (How many sounds do you hear? How many times does the sound seem to loop?)

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

stop actions

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

go to and play actions

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

5 - 74 Analyzing Macromedia Flash on the Web

 Activity 5.2 Worksheet

Combinations of symbols (such as buttons that contain animated movie clips)

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

Challenge:
For the complicated effects you see, suggest combinations or types of technical techniques that might be involved to
create them.

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

Describe a surprising technique.

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

Describe a challenging technique.

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

Analyzing Macromedia Flash on the Web 5 - 75

Activity 5.2 Worksheet

Describe unidentified techniques.

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

Describe a creative design.

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

____________________________________________________________________________________________

5 - 76 Analyzing Macromedia Flash on the Web

 Activity 5.2 Guide

Analyzing Macromedia Flash on the Web

This sample analysis of a Flash website illustrates some techniques designers use to target a specific audience.
URL: georgewashington.si.edu/
Name of the Site: George Washington: A National Treasure
What is the main type of audience the site is targeting? How does the site target this audience?
The main audience is teachers who might select to use the information on this site for a unit on George Washington,
history, culture, or art.

Identify the following Flash techniques and explain what part of the site uses them:
Motion tweens
When you launch the site, the white and red bars that expand and contract are a motion tween, as is the white star
that appears.

Shape tweens
The white star that turns into the profile of George Washington is possibly a shape tween.

Movie clips
The rotating star that appears when your pointer is over the words “Explore the Portrait” is a movie clip.

Buttons
After you enter the portrait and click “Explore the Portrait,” the boxes at the top of the portrait, labeled Symbolic,
Biographic, and Artistic, are all buttons.
The numbers that appear on the portrait are also buttons.

Sound (How many sounds do you hear? How many times does the sound seem to loop?)
There are no sounds in the portrait.
stop actions
There is probably a stop action placed after the red and white stripes complete their motion tweens, to hold visitors
at a screen before they decide to enter the portrait.

go to and play actions

There is most likely a go to and play action set on each of the main buttons over the portrait and the numerical
buttons on the portrait.

Combinations of symbols (such as buttons that contain animated movie clips)

The “Enter the Portrait” button on the initial screen is a combination of a button and a movie clip, because the
movie clip appears only when the pointer is over the button.

Analyzing Macromedia Flash on the Web 5 - 77

Activity 5.2 Guide

Challenge:
For the complicated effects you see, suggest combinations or types of technical techniques that might be involved in
creating them.
When the pointer rolls over one of the numbers on the portrait, these buttons fade all other parts of the image out
and highlight the section of the image to which the number is attached. These buttons most likely contain an action
that calls a movie clip to begin playing when the Over state is reached on the button. The movie clip fades out all
aspects of the picture except the aspect related to the number you select.

Describe a surprising technique.

The magnifying glass is a surprising technique that adds to the overall feel of the site. Drag the pane up from the
bottom of the portrait to magnify the portion of the portrait under the pane.

Describe a challenging technique.

The magnifying glass is a challenging technique. It most likely involves the use of complicated ActionScript.

Describe unidentified techniques.

It is difficult to tell how the magnifying glass might be achieved.

Describe a creative design.

A creative effect is the fading out and zooming in on aspects of the portrait when you click a number button.

5 - 78 Analyzing Macromedia Flash on the Web

 Activity 5.3 Guide

How to Produce Flash Video for Use on the Web

Flash provides a number of options for importing and publishing video with a Flash document.
You can import the following video formats if QuickTime 4 is installed (Windows and Macintosh):
• Audio Video Interleaved (.avi)
• Digital Video (.dv)
• Motion Picture Experts Group (.mpg or .mpeg)
• QuickTime Movie (.mov)
You can import the following file formats if DirectX 7 or later is installed (Windows only):
• Audio Video Interleaved (.avi)
• Motion Picture Experts Group (.mpg or .mpeg)
• Windows Media File (.wmv, .asf)

Deploying Video
Flash has three basic options for producing video:
Progressive download: Flash creates a Flash video file that downloads from a regular web server and plays within
the published SWF file.
Embedded video: Flash converts video to Timeline frames. The video is contained entirely within the published
SWF file.
Stream from Flash Communication Server or Flash Video Streaming Service: Although both of these options
produce the overall best performance, they require either the Flash Communication Server or a subscription to a
Flash Video Streaming service. See the Macromedia website for more information (www.macromedia.com).

How to Produce Flash Video for Use on the Web 5 - 79

Activity 5.3 Guide

Using Progressive Download

1. Open an existing Flash document or create and save a
new Flash document.
Note: It is important that you save the Flash document
before you begin the video import process.
2. Select a keyframe on the layer in which you wish to
import the video.
This is where the video player will be located once the
video import has completed.
3. Select File > Import > Import Video.
The Import Video wizard opens (Figure 1).
4. Enter a location for the video file you wish to import.
The video file can be located either on your computer or Figure 1 Import Video Wizard, Select Video page
on the Internet.
5. Click Next.
The Deployment page of the Import Video wizard opens
(Figure 2).
6. Select Progressive Download from a Web Server.
Note: This is the preferred method for using video with
Flash if use of the Flash Communication Server is not
possible.
7. Click Next.
The Encoding page of the Import Video wizard opens
(Figure 3).
8. Select an encoding method based on your anticipated
audience.
Each method produces a different file size. Figure 2 Import Video wizard, Deployment page

Note: Progressive download works with Flash Player 7

or later.

Figure 3 Import Video wizard, Encoding page

5 - 80 How to Produce Flash Video for Use on the Web

 Activity 5.3 Guide

9. Click Next.
The Skinning page of the Import Video wizard opens
(Figure 4).
The video’s skin determines the location and appearance
of the video controls. Visitors will see this skin when
Flash plays the video.
10. Select a skin from the Skin pop-up menu.
11. Click Next.
The Finish Video Import page of the Import Video
wizard opens. This page confirms the location of the
original video file and the new Flash Video file.
12. Click Next.
The Flash Video encoder runs. When the encoder Figure 4 Import Video wizard, Skinning page
finishes running, an FLVPlayback object appears on the
Stage (Figure 5).
13. Select Control > Test Movie to see it play.
The video plays in the Flash Player window. Observe
that you can use the controls to stop, pause, fast
forward, rewind, and change the volume of the video.
14. Select File > Close to close the preview window.
15. Open the folder in which you have saved the Flash
document.
Observe that this folder now contains two new files, an Figure 5 FLVPlayback object on Stage
FLV file and a SWF for the video’s skin (Figure 6).
(The skin will be called something like
MojaveOverAll.swf.) When you publish your Flash
document, both of these files need to be copied to the
same location as the Flash document.

Figure 6 FLV and SWF files

Embedding video within SWF files

When you select the Embedded video option, Flash converts video to Timeline frames. When the SWF file is
published, the video is fully contained in that file; unlike progressive download, it requires no external file, and so is
easier to deploy. However, because embedded video often has problems with audio synchronization after 120
frames, Macromedia recommends embedded video in only three cases:
• When you want visitors who have Flash 5 to be able to view your video
• When you must have one single file that encapsulates the video and the Flash content
• When your video clip is less than 5 seconds long
These situations are not common. In all other situations, embedded video is not recommended.

How to Produce Flash Video for Use on the Web 5 - 81

 Activity 5.3 Guide

How to Import Sound

In Macromedia Flash 8, you can import sound and video to integrate them into the Timeline. You can create media-
rich content with very precise control.

Importing Sound
You can use sound for many purposes in Flash. Some examples include soundtracks, narration, and sound effects
that complement objects such as rollover buttons.
You can import the following sound file formats into Flash:
• WAV (Windows only)
• AIFF (Macintosh only)
• MP3 (Windows or Macintosh)
If you have QuickTime 4 or later installed on your system, you can import these additional sound file formats:
• AIFF (Windows or Macintosh)
• Sound Designer II (Macintosh only)
• Sound Only QuickTime Movies (Windows or Macintosh)
• Sun AU (Windows or Macintosh)
• System 7 Sounds (Macintosh only)
• WAV (Windows or Macintosh)
When you import a sound file, it’s placed in the library. Then you can drag an instance (copy) of the sound onto the
Stage. Sound files must be tied to keyframes.
You can synchronize a sound to your movie in several ways (Sync Options):
• Event: An event sound plays when the playhead reaches the first keyframe containing the sound. It plays in
its entirety, independent of the Timeline, even if the movie stops. If a different instance of the same sound
is started, the sounds will overlap.
• Start: The same as Event, except that if the sound is already playing, no new instance of the sound will
begin playing.
• Stop: Silences the specified sound.
• Stream: Forces the movie to keep pace with the sound. If Flash can’t draw animation frames quickly
enough, it skips frames. Unlike event sounds, stream sounds stop if the movie stops. Stream sounds can
also produce a much smaller file size, although their quality tends to be poorer than event sounds.

How to Import Sound 5 - 83

Activity 5.3 Guide

Import a Sound
1. Start Flash and open a document.
2. Insert a new layer.
3. Double-click the new layer name, and rename it Sound.
4. Select File > Import > Import to Stage.
The Import dialog box opens (Figure 1).
5. Locate a sound file, select it, and click Open.
Note: You can download free music loops and sound
effect clips at www.flashkit.com, for example.
6. Select frame 1 on the Sound layer.
7. Make sure the Library panel is open. (If not, select
Window > Library.) Figure 1 Import dialog box

The sound appears in the Library panel. To preview the

sound, click the Play button in the preview (upper) pane
of the Library panel (Figure 2).
Note: You must select the sound to see the waveform of
the sound in the preview pane.
8. Drag the sound file from the library onto the Stage.
Note: The Sound layer must contain enough frames to
play the entire sound. For example, if your movie is set
for 12 frames per second and your sound is 2 seconds
long, the Sound layer must contain at least 24 frames. If
you are adding sound to an existing movie, your movie
might already be long enough to accommodate the
sound.
Figure 2 Library panel
9. If necessary, add frames to the Sound layer. To do this,
click a frame down the Timeline for the Sound layer,
such as frame 24 for a 2-second movie at 12 fps, and
select Insert > Frame.
The sound does not appear on the Stage but does appear
on the Timeline as a waveform (Figure 3).

Editing sound settings

Figure 3 Sound in Timeline
Through the Property inspector, you can change settings
for the sound, including making the sound fade in and
fade out.
10. Select the first keyframe and adjust the settings for the
sound in the Property inspector (Figure 4).
Figure 4 Sound Property inspector

5 - 84 How to Import Sound

 Activity 5.3 Guide

Effect: Choose from previously created effects such as

Fade In, Fade Out, keeping sound in only one channel
(left or right), or fading sound from one channel to the
other (Figure 5). Choosing custom will open a sound-
editing window where you can create your own fading
effects (Figure 6). In the sound-editing window, called Figure 5 Effect pop-up menu
the Edit Envelope, adjust the sound handles to control
sound volume in each channel.
Sync: Choose Event, Start, Stop, or Stream.
Loop: Set the number of times to have the sound replay.

Figure 6 Edit Envelope dialog box

Sound Compression
Sound files can drastically increase the file size of your movies. One way to control this is to set the compression for
the sounds in Flash.
1. Make sure the Library panel is open, and select the
sound file.
2. Click the Properties button in the Library panel
(Figure 7).
The Sound Properties dialog box opens (Figure 8).
3. Choose a compression option from the Compression
menu and click OK.
ADPCM: This is the compression method from Flash 3.
It sets the compression for 8-bit and 16-bit sound data.
You may consider using this if you need to open your
movie in Flash 3.
Figure 7 Library Properties button
MP3: This method produces sounds that can be heard
only by users with Flash 4 or later, but it offers good
compression and sound fidelity.
Raw: This resamples the file but does not perform any
compression.
Speech: A good compression to use for speech sound
files.
4. Save the movie.
5. Select Control > Test Movie.

Figure 8 Sound Properties dialog box

How to Import Sound 5 - 85

 Activity 5.4 Guide

How to Use Guides and Rulers

Using guides
You can drag horizontal and vertical guides from the rulers onto the Stage when the rulers are displayed. You can
move guides, lock guides, hide guides, and remove guides. You can also snap objects to guides and change the
guide color and snap tolerance (how close objects must be to snap to a guide). Flash enables you to create nested
Timelines. Guides appear on Stage only when the Timeline in which they were created is active.

To create a guide:

1. Make sure rulers are visible by selecting View > Rulers.

2. Click on a ruler and drag toward the Stage (Figure 1).
Figure 1 Click and drag ruler
A guide appears as you drag.
3. Release the mouse at the point you wish to locate the
guide (Figure 2).

To lock or unlock guides:

• Select View > Guides > Lock Guides.

Figure 2 Ruler on Stage
This command toggles between locking and unlocking
guides.
Note: You can also use the Lock Guides option in the
Guides dialog box (View > Guides > Edit Guides). For
more information, see Changing Guide Properties in the
next section.

To view or hide the drawing guides:

• Select View > Guides > Show Guides.

To move a guide:

• With the Selection tool, click anywhere on the guide and

drag the guide to the desired place on the Stage.

To remove a guide:

• With guides unlocked, use the Selection tool to drag the

guide to the horizontal or vertical ruler.

How to Use Guides and Rulers 5 - 87

Activity 5.4 Guide

Using guides to position objects on the Stage

1. Select View > Snapping > Snap to Guides.

2. Drag the edge of an object toward a guide.
When you get close to the guide, the object snaps to it
(Figure 3).
3. Release the mouse. Figure 3 Snap object to grid
The object remains snapped to the guide.
You can use guides to line up different objects
(Figure 4). Guides are especially useful for aligning
objects on different layers.

Figure 4 Aligning objects with guides

Changing Guide Properties

You can change guide colors, set guide snapping properties, and lock guides.
1. Select View > Guides > Edit Guides.
2. The Guides dialog box opens (Figure 5).
3. Click the Color box to change guide colors.
4. Select Lock Guides to lock guides in position.

Figure 5 Guides dialog box

5 - 88 How to Use Guides and Rulers

 Activity 5.4 Guide

How to Create Masks

A mask is a special type of layer that lets you reveal select parts of another layer. For example, if you want to show
people walking around inside a house, and you want them to be visible when they pass by a window but invisible
otherwise, you can use a mask. You can use masking for techniques such as creating a spotlight or showing pictures
behind images.

Creating a mask

1. Start Flash and open a document. Mask layer

2. Import an image to the Stage.

3. Create a new layer and name it mask. Put this layer
directly above the layer containing the image.
2. Use a drawing tool, such as the Oval tool or the
Rectangle tool, to define the area of the mask layer that
you want to be transparent (Figure 1).
Make the transparent area of the mask a solid,
noticeable color. This will help you see where the
transparent area is.
4. Right-click the mask layer and select Mask from the
pop-up menu.
The two layers change to indicate that the bottom layer
Mask area
is masked (Figure 2). The name of the masked layer is
indented under the name of the masking layer. Figure 1 Mask layer with mask area

5. Select Control > Test Movie to see it play.

Observe that only the masked area is visible (Figure 3).
6. Select File > Close to close the preview window.

Animating the mask

You can animate the mask so that, for example, the mask
pans along a picture.
7. On the mask layer, add a keyframe at frame 20.
8. On the masked layer below, also add a keyframe at
frame 20.
9. On the Mask layer, click the keyframe at frame 20 to
select the mask object.
10. Move the mask object. Figure 2 Mask applied

11. On the Mask layer, select any frame between frames 1

and 20.
12. In the Property inspector, select Motion from the
Tween pop-up menu to create a motion tween.
13. Select Control > Test Movie to see it play.
Observe that only the masked area moves across the
content beneath it.
Figure 3 Mask in playback window
14. Select File > Close to close the preview window.

How to Create Masks 5 - 89

Activity 5.4 Guide

Change the masked content

You can change content on the layer below the mask

while keeping the mask the same.
15. On the object layer, select frame 10 and select
Insert > Timeline > Blank Keyframe.
Inserting a blank keyframe clears the contents of the
frame.
The contents of the object layer clear.
16. Add new content to the object layer at frame 10.
For example, you could drag a different picture to the
Stage.
17. Select Control > Test Movie to see it play.
Observe that the area under the mask changes halfway
through the animation.
18. Select File > Close to close the preview window.

Reverting the masked content to its original state

19. Select frame 10 (where you inserted the second

keyframe), and select Modify > Timeline >
Clear Keyframe.
This reverts the keyframe to a regular frame, and
changes the layer back to its original state.

5 - 90 How to Create Masks

 Activity 5.4 Guide

How to Use a Motion Guide for Animation

You can use motion guides to create motion tweens that are more complex than those you can create with
keyframes. Using a motion guide, you can move an object along any path you create with the Flash drawing tools.
You can create a motion guide for a shape, text, or a symbol.
1. Select the layer that contains the object you wish to
animate.
2. Select Insert > Timeline > Motion Guide.
Flash creates a special layer named Guide (Figure 1).
3. Click the first frame of the Guide layer.
4. On the Stage, draw a guide, using one of the Flash
drawing tools, such as the Pencil or Pen. Figure 1 Guide layer
5. On both layers, insert keyframes at frame 20.
6. On the object layer, select any frame between frames 1
and 20.
7. In the Property inspector, select Motion from the
Tween menu to create a motion tween.
8. Click the first frame of the object layer to select the
object.
9. If it is not already there, drag the object by its center to
the start of the guide. Figure 2 Snap to guide
It should snap to the guide when you approach it.
10. Click frame 20 of the object layer.
11. Drag the object by its center to the end of the guide.
It should snap to the guide when you approach it
(Figure 2).
12. Turn Onion Skinning on to see how the object will Figure 3 Object moving along guide
move (Figure 3).
13. Select Control > Test Movie to see it play.
Observe that the object moves along the guide.
14. Select File > Close to close the preview window.

How to Use a Motion Guide for Animation 5 - 91

 Activity 5.4 Guide

How to Create and Edit Symbols

A symbol is a reusable object stored in a library for a Flash document. It can be as simple as a static drawing or as
complex as a movie clip that runs within another movie clip. Both you and Flash Player itself can reuse symbols
stored in the library. Not only does this approach speed development, it also helps keep your document small,
making it faster for site visitors to download.
Each symbol has its own Timeline. You can add frames, keyframes, and layers to a symbol Timeline, just as you
can to the main Timeline.
An instance is a copy of a symbol located on the Stage or inside the Timeline of another symbol. An instance can
differ from its symbol in color, size, and other characteristics set through the Property inspector. Editing the symbol
updates all its instances, but applying effects or changing the properties of an instance of a symbol changes only that
instance.

Creating a New Symbol

1. Select Insert > New Symbol.
The Create New Symbol dialog box opens (Figure 1).
2. In the Create New Symbol dialog box, give the new
symbol a name and select a symbol type.
3. Click OK.
Figure 1 Create New Symbol dialog box
The new symbol has been created and opens in symbol-
editing mode.
4. Add content to the symbol.
5. To exit symbol-editing mode and return to the main
Figure 2 Edit bar
Timeline, click Scene 1 on the edit bar (Figure 2).
The new symbol is stored in the Document library and
can be reused in this and other Flash documents.

Converting an Existing Object to a Symbol

1. Select the object you want to convert to a symbol.
Note: To select both the stroke and the fill of a shape,
you must double-click the fill unless the object is
grouped. A single click on the fill selects only the fill,
and a double-click on the stroke selects only the stroke.
2. Select Modify > Convert to Symbol.
Figure 3 Convert to Symbol dialog box
The Convert to Symbol dialog box opens (Figure 3).
3. In the Convert to Symbol dialog box, give the new
symbol a name, and select a symbol type.
The object is now a symbol that is stored in the
Document library and can be reused in this and other
documents. Select Window > Library to open the
Library panel and see your new symbol.

How to Create and Edit Symbols 5 - 93

Activity 5.4 Guide

Editing a Symbol
You can edit an existing symbol either through the library or in place on the Stage. You can also use the Edit in
Place command to edit a symbol The Edit in Place command lets you edit a symbol while still viewing other objects
on the Stage. Editing a symbol is different from changing the properties of a symbol instance. When you click a
symbol on the Stage and change its properties, you are changing the symbol instance, not the symbol itself. In this
case, only the instance is affected. When you edit the symbol itself, all instances of the symbol are affected.

Editing a symbol through the library

When you edit a symbol through the library, Flash updates all instances of the symbol on the Stage. If the symbol
has no instances (that is, if you have not copied it from the Library panel to the Stage), nothing on the Stage changes
when you edit the symbol.
1. Select the symbol in the Library panel.
2. Select Edit from the Library options menu in the
Library panel’s title bar (Figure 4).
Note: You can also double-click the symbol.
The symbol opens in symbol-editing mode.
3. Make changes to the symbol.
4. To exit symbol-editing mode and return to the main
Timeline, click Scene 1 on the edit bar.

Figure 4 Symbol in library

Editing a symbol through the Stage

1. Select the symbol on the Stage.

2. Select Edit > Edit Symbols.
The symbol opens in symbol-editing mode. All other
objects on the Stage disappear (Figure 5).
3. Make changes to the symbol.
Figure 5 Symbol in symbol-editing mode
4. To exit symbol-editing mode and return to the main
Timeline, click Scene 1 on the edit bar.

Using the Edit in Place command

1. Select the symbol on the Stage.

2. Select Edit > Edit in Place.
The symbol opens in symbol-editing mode, but all other
objects on the Stage remain visible (Figure 6).
3. Make changes to the symbol. Figure 6 Symbol-editing by using the Edit in
Place command
4. To exit symbol-editing mode and return to the main
Timeline, click Scene 1 on the edit bar.

5 - 94 How to Create and Edit Symbols