Unformatted Attachment Preview
This week you will add interactivity to a Flash movie by adding
buttons and creating animations.
Complete the following:
•
Chapter 3 "Skills Review" on pages 3-34 to 3-35. Submit the
Flash document that results from completing the entire Skills
Review.
ADOBE FLASH CS6
3
CHAPTER
WORKING WITH SYMBOLS
AND INTERACTIVITY
1.
2.
3.
4.
5.
FLSH_CS6_002_ch03.indd 1
Create symbols and instances
Work with libraries
Create buttons
Assign actions to frames and buttons
Import graphics
07/06/12 8:39 PM
3
CHAPTER
WORKING WITH SYMBOLS
AND INTERACTIVITY
Introduction
An important benefit of Flash is its ability to
create movies with small file sizes. This allows
the movies to be delivered from the web or
displayed on a mobile device more quickly.
One way to keep the file size small is to create
reusable graphics, buttons, and movie clips.
Flash allows you to create a graphic (drawing)
and then make unlimited copies, which you
can use throughout the current movie and in
other movies. Flash calls the original drawing
a symbol and the copied drawings instances.
Flash stores symbols in the Library panel—each
time you need a copy of the symbol, you can
open the Library panel and drag the symbol
to the Stage, which creates an instance (copy)
of the symbol. Using instances reduces the
movie file size because Flash stores only the
information about the symbol’s properties (size,
shape, color), and a link is established between
the symbol and an instance so that the instance
has the same properties (such as color and
shape) as the symbol. There are two especially
valuable editing features of this process. First, if
you have created several instances of a symbol
and decide to change the same property for
every instance, all that is needed is to edit the
symbol. For example, if a logo appears in
several places in an application and you need
to change the color of each instance of the logo,
you simply change the color of the symbol.
Because the instances are linked to the symbol
they are automatically updated. Second, you can
change the properties of an individual instance
of a symbol in one of two ways. You can change
properties associated with the whole instance,
such as size or transparency, and you can skew or
rotate the instance. So if you have a symbol that
is a tree, you can make the tree bigger or smaller,
or you can make the tree lean to the left as if it
is blowing in the wind. However, if you want to
change individual parts of the instance, then you
must break the link between the instance and the
symbol. When you break the link between an
instance and a symbol, the instance becomes an
object that can be edited. For example, thinking
about our tree now as an object, you can make
the leaves on the tree different colors. You can
only do this if you break the link between the
instance and the symbol. When you break the
link, changes you make to the object are not
reflected in the symbol or any instances of the
symbol. Likewise, if subsequently you make
changes to the symbol, the changes will not be
reflected in the unlinked object. The process for
unlinking an instance is to select the instance on
the Stage and choose the Break Apart command
from the Modify menu.
FLASH 3-2
FLSH_CS6_002_ch03.indd 2
07/06/12 8:39 PM
TOOLS YOU’LL USE
Figures © Cengage Learning 2013
FLASH 3-3
FLSH_CS6_002_ch03.indd 3
07/06/12 8:39 PM
LESSON 1
Create Symbols
AND INSTANCES
What You’ll Do
Figure © Cengage Learning 2013
In this lesson, you will create graphic symbols, turn them
into instances, and then edit the instances.
Understanding Symbol Types
There are three categories of symbols: graphic,
button, and movie clip. A graphic symbol is
useful because you can reuse a single image
and make changes in each instance of the
image. A button symbol is useful because
you can create buttons for interactivity, such
as starting or stopping a movie. A movie
clip symbol is useful for creating complex
animations because you can create a movie
within a movie. For example, you could have
a movie with a car moving across the screen
and its wheels rotating. The wheel animation
would be created as one movie clip symbol and
attached to each wheel of the animated car.
Symbols can be created from objects you draw
using the Flash drawing tools. In addition, you
can import graphics into a Flash document
that can then be converted to symbols.
Creating a Graphic Symbol
You can use the New Symbol command on
the Insert menu to create and then draw a
symbol. You can also draw an object and
then use the Convert to Symbol command
on the Modify menu to convert the object
to a symbol. The Convert to Symbol dialog
box, shown in Figure 1, allows you to name
FLASH 3-4
FLSH_CS6_002_ch03.indd 4
the symbol and specify the type of symbol
you want to create (Movie Clip, Button, or
Graphic). When naming a symbol, it’s a good
idea to use a naming convention that allows
you to quickly identify the type of symbol and
to group like symbols together. For example,
you could identify all graphic symbols by
naming them g_name and all buttons as b_
name. In Figure 1, the drawing on the Stage is
being converted to a graphic symbol.
After you complete the Convert to Symbol
dialog box, Flash places the symbol in the
Library panel, as shown in Figure 2. In Figure 2,
an icon identifying the symbol as a graphic
symbol and the symbol name are listed in the
Library panel, along with a preview of the
selected symbol. To create an instance of the
symbol, you simply drag a symbol from the
Library panel to the Stage. To edit a symbol,
you can double-click it in the Library panel
or you can use the Edit Symbols command
on the Edit menu. Either way displays the
symbol in an edit window, where changes
can be made to it. When you edit a symbol,
the changes are reflected in all instances of
that symbol in your movie. For example, you
can draw a car, convert the car to a symbol,
and then create several instances of the car.
Working with Symbols and Interactivity
07/06/12 8:40 PM
You can uniformly change the size of all the
cars by double-clicking the car symbol in the
Library panel to open the edit window, and
then rescaling it to the desired size.
Working with Instances
You can have as many instances as needed in
your movie, and you can edit each one to make
it somewhat different from the others. You can
rotate, skew (slant), and resize graphic and
button instances. In addition, you can change
the color, brightness, and transparency.
However, there are some limitations. An
instance is a single object with no segments
or parts, such as a stroke and a fill. You
cannot select a part of an instance. Therefore,
any changes to the color of the instance are
made to the entire object. Of course, you can
use layers to stack other objects on top of an
instance to change its appearance. In addition,
you can use the Break Apart command on
the Modify menu to break the link between
an instance and a symbol. Once the link is
broken, you can make any changes to the
object, such as changing its stroke and fill
color. However, because the link is broken, the
object is no longer an instance of the original
symbol. So, if you make any changes to the
original symbol, then the unlinked object is
not affected.
box indicates that the object is selected. Then,
you can use the Free Transform tool options
(such as Rotate and Skew, or Scale) to modify
the entire image, or you can use the Break Apart
command to break apart the instance and edit
individual strokes and fills.
The process for creating an instance is to open
the Library panel and drag the desired symbol to
the Stage. Once the symbol is on the Stage, you
select the instance by using the Selection tool
to drag a marquee around it. A blue bounding
You need to be careful when editing an instance. Use the Selection
tool to drag a marquee around the instance or click the object
once to select it. Do not double-click the instance when it is on the
Stage; otherwise, you will open an edit window that is used to edit
the symbol, not the instance.
QUICK TIP
Figure 2 A graphic symbol in the Library panel
Name of Flash
movie the Library is
associated with
Click to display list of
all open Flash movies
Preview of symbol
Figure 1 Using the Convert to Symbol dialog box to convert an object to a symbol
Icon identifies symbol
as a graphic
Symbol name
Figures © Cengage Learning 2013
Lesson 1
FLSH_CS6_002_ch03.indd 5
Create Symbols and Instances
FLASH 3-5
07/06/12 8:40 PM
Create a symbol
1. Open fl3_1.fla from the drive and folder
where your Data Files are stored, then save it as
coolCar.fla.
This document has one object, a car, that was
created using the Flash drawing tools.
2. Verify the Properties panel, the Library panel,
and the Tools panel are displayed.
3. Set the magnification to Fit in Window.
4. Click the Selection tool
on the Tools panel,
then drag a marquee around the car to select it.
5. Click Modify on the menu bar, then click
Convert to Symbol.
6. Type g_car in the Name text box.
7. Click the Type list arrow to display the symbol
types, then click Graphic, as shown in Figure 3.
8. Set the registration to the upper-left corner as
shown in Figure 3 if necessary, then click OK.
9. Click the Library panel tab, study the Library
panel as shown in Figure 4, then save your work.
The Library panel displays the symbol (red car) in
the Item Preview window, an icon indicating
that this is a graphic symbol, and the name
of the symbol (g_car). The symbol is contained
in the library, and the car on the Stage is now an
instance of the symbol.
You opened a file with an object, converted the object to a
symbol, and displayed the symbol in the Library panel.
Figure 3 Options in the Convert to Symbol dialog box
Click to set
Registration to
upper-left corner
Figure 4 Newly created symbol in the Library panel
Preview of g_car
symbol in Item
Preview window
Icon indicating a
graphic symbol
Figures © Cengage Learning 2013
FLASH 3-6
FLSH_CS6_002_ch03.indd 6
Working with Symbols and Interactivity
07/06/12 8:40 PM
Figure 5 Creating an instance
Create and edit an instance
1. Point to the car image in the Item Preview
window of the Library panel, then drag the
image to the Stage beneath the first car, as
shown in Figure 5.
Both cars on the Stage are instances of the
graphic symbol in the Library panel.
TIP You can also drag the name of the symbol or its icon
from the Library panel to the Stage.
Drag the car image, the name of the symbol,
or its icon from the Library panel to below
the original instance to create a second
instance of the symbol
Figure 6 The alpha set to 50%
2. Verify the bottom car is selected, click Modify
on the menu bar, point to Transform, then click
Flip Horizontal.
3. Display the Properties panel, then display the
COLOR EFFECT area if it is not already showing.
4. Click the Style list arrow, then click Alpha.
5. Drag the Alpha slider left then right, then set
the transparency to 50%.
Notice how the transparency changes. Figure 6
shows the transparency set to 50%.
6. Click a blank area of the Stage to deselect
the object, then save your work.
Changing the alpha setting gives the car a more
transparent look.
You created an instance of a symbol and edited the instance on
the Stage.
This area may not be open
Transparency set to 50%
Figures © Cengage Learning 2013
Lesson 1
FLSH_CS6_002_ch03.indd 7
Create Symbols and Instances
FLASH 3-7
07/06/12 8:40 PM
Figure 7 Edit window
Edit a symbol in the edit window
1. Display the Library panel, double-click the g_car
symbol icon in the Library panel to display
the edit window, then compare your screen to
Figure 7.
The g_car symbol appears in the edit window,
indicating that you are editing the g_car symbol.
TIP You can also edit a symbol by selecting it, clicking
Edit on the menu bar, then clicking Edit Symbols.
2. Click a blank area of the window to deselect the car.
3. Verify the Selection tool
is selected, then
click the light gray hubcap inside the front
wheel to select it.
4. Press and hold [Shift], then click the hubcap inside
the back wheel so both hubcap fills are selected.
5. Set the Fill Color to the blue gradient color
swatch in the bottom row of the color palette,
compare your image to Figure 8, then deselect
the image.
6. Click Scene 1 at the top left of the edit window
to exit the edit window and return to the main
Timeline and main Stage, then save your work.
Changes you make to the symbol affect every instance
of the symbol on the Stage. The hubcap fill becomes a
blue gradient in the Library panel and on the Stage.
Graphic symbol
indicates you
are in the edit
window
Name of symbol
Figure 8 Edited symbol
You edited a symbol in the edit window that affected all
instances of the symbol.
Hubcap fills are
blue gradient
Symbol reflects
changes
Figures © Cengage Learning 2013
FLASH 3-8
FLSH_CS6_002_ch03.indd 8
Working with Symbols and Interactivity
07/06/12 8:40 PM
Figure 9 The car with the maroon body selected
Break apart an instance
Figure 10 Changing the symbol affects only the one instance of the symbol
Instance of the symbol
Object that is no
longer an instance
of the symbol
1. Drag a marquee around the bottom car to
select it if it is not selected.
2. Click Modify on the menu bar, then click
Break Apart.
The object is no longer linked to the symbol, and
its parts (strokes and fills) can now be edited.
3. Click a blank area of the Stage to deselect
the object.
4. Click the blue front hubcap, press and hold
[Shift], then click the blue back hubcap so
both hubcaps are selected.
5. Set the Fill Color to the light gray color
swatch (#999999) in the left column of the
color palette.
6. Double-click the g_car symbol icon
in the Library panel to display the edit window.
7. Click the maroon front body of the car to select
it, press and hold [Shift], then click the maroon
back body of the car, as shown in Figure 9.
8. Set the Fill Color to the red gradient color
swatch in the bottom row of the color palette.
9. Click Scene 1 at the top left of the edit window,
then compare your images to Figure 10.
The body color of the car in the original instance
is a different color, but the body color of the car
to which you applied the Break Apart command
remains unchanged.
10. Save your work.
You used the Break Apart command to break the link between
one instance and its symbol, you edited the object created using
the Break Apart command, and then you edited the symbol,
which only affected the instance still linked to the symbol.
Figures © Cengage Learning 2013
Lesson 1
FLSH_CS6_002_ch03.indd 9
Create Symbols and Instances
FLASH 3-9
07/06/12 8:40 PM
LESSON 2
Work with
LIBRARIES
What You’ll Do
Figure © Cengage Learning 2013
In this lesson, you will use the Library panel to organize
the symbols in a movie.
Understanding the Library
The library in a Flash document contains the
symbols and other items such as imported
graphics, movie clips, and sounds. The
Library panel provides a way to view and
organize the items, and allows you to change
the item name, display item properties, and
add and delete items. Figure 11 shows the
Library panel for a document. Refer to this
figure as you read the following descriptions
of the parts of the library.
Tab title—Identifies the panel title, in this
case, the Library panel.
Panel options menu— Labeled in Figure 11
and shown in Figure 12, the Panel options
menu provides access to several features used
to edit symbols (such as renaming symbols)
and organize symbols (such as creating a new
folder).
Display movies list arrow—Opens a menu
showing all open movies. You use this menu
to select an open document (movie) and
display the Library panel associated with that
open document. This allows you to use the
items from one movie in another movie. For
example, you may have developed a drawing
FLASH 3-10
FLSH_CS6_002_ch03.indd 10
in one Flash movie that you converted
to a symbol and now you want to use that
symbol in the movie you are working on.
With both documents open, you simply use
the Display movies list arrow to display the
library with the desired symbol, and then
drag the symbol to the Stage of the current
movie. This will automatically place the
symbol in the library for the current movie.
In addition to the movie libraries, you can
create permanent libraries that are available
whenever you start Flash. Flash also has
sample libraries that contain buttons and
other objects. The permanent and sample
libraries are accessed through the Common
Libraries command on the Window menu.
All assets in all of these libraries are available
for use in any movie.
Item Preview window—Displays the selected
item. If the item is animated or a sound file,
a control button appears, allowing you to
preview the animation or play the sound.
Name list box—Lists the folder and item names.
Each item type has a different icon associated
with it. Clicking an item name or icon displays
the item in the Item Preview window.
Working with Symbols and Interactivity
07/06/12 8:40 PM
Toggle Sorting Order icon—Allows you to
reorder the list of folders and items within
folders.
New Folder icon—Allows you to create a
new folder.
New Symbol icon—Displays the Create New
Properties icon—Displays the Properties
dialog box for the selected item.
Symbol dialog box, allowing you to create a
new symbol.
or folder.
Delete icon—Deletes
the selected item
Figure 11 The Library panel
Tab title
Item Preview
window
To make changes to an item, you can doubleclick either the item icon in the Library panel,
the item in the Item Preview window, or the
item on the Stage to display the edit window.
Figure 12 The Panel options menu
Panel options
list arrow
Display movies list arrow; click to display
list of all open Flash movies; click a movie
to open Library panel for that movie
Toggle Sorting Order icon
(position may vary)
New Symbol icon
New Folder icon
Name list
box
Properties icon
Delete icon
Figures © Cengage Learning 2013
Lesson 2 Work with Libraries
FLSH_CS6_002_ch03.indd 11
FLASH 3-11
07/06/12 8:40 PM
Figure 13 The open Library panel
Create folders in the Library panel
1. Open fl3_2.fla, then save it as carRace.fla.
2. Verify the Properties panel, the Library panel,
and the Tools panel are displayed.
3. Set the magnification to Fit in Window.
This movie has eight layers containing various
objects such as text blocks, lines, and a backdrop.
Two layers contain animations of cars.
4. Test the movie, then close the Flash Player window.
5. Click the Show or Hide All Layers icon on
the Timeline to hide all of the layers.
6. Click each red X in the Show or Hide All Layers
column to show the contents of each layer, click the
Show or Hide This Layer icon to hide the
contents of that layer, then after viewing the contents
of each layer, click the Show or Hide All Layers
icon on the Timeline to show all of the layers.
Note: The resetBTN layer shows an empty Stage.
This is because the word Reset is located in frame
65 at the end of the movie and does not appear
in frame 1.
7. Click each item in the Library panel to display it in
the Item Preview window.
Notice that there is one button symbol (b_reset)
and five graphic symbols.
8. Click Name on the Name list box title bar, as
shown in Figure 13, and notice how the items
are sorted.
9. Repeat Step 8 and notice how the items
are sorted.
Click Name to
sort the list in
alphabetical
order by name
Your sort order
may be different
New Folder icon
You opened a Flash movie and sorted items in the Library panel.
Figure © Cengage Learning 2013
FLASH 3-12
FLSH_CS6_002_ch03.indd 12
Working with Symbols and Interactivity
07/06/12 8:40 PM
Figure 14 The Library panel with the folders added
Organize items within Library
panel folders
Buttons folder
Graphics folder
Figure 15 The Library panel after moving the symbols to the folders
Your folders
might be
expanded
1. Click the New Folder icon in the Library
panel, as shown in Figure 13.
2. Type Graphics in the Name text box for
the new folder, then press [Enter] (Win) or
[return] (Mac).
3. Click the New Folder icon on the
Library panel.
4. Type Buttons in the Name text box for the
new folder, then press [Enter] (Win) or
[return] (Mac).
Your Library panel should resemble Figure 14.
5. Drag the g_title symbol in the Library
panel to the Graphics folder.
6. Drag the other graphic symbols to the
Graphics folder.
7. Drag the b_reset symbol to the Buttons
folder, then compare your Library panel to
Figure 15.
8. Click the Graphics folder expand icon to
open it and display the graphic symbols.
9. Click the Buttons folder expand icon to
open it and display the button symbol.
10. Click the Graphics folder collapse icon to
close the folder.
11. Click the Buttons folder collapse icon to
close the folder.
Note: To remove an item from a folder, drag the
item down to a blank area of the Library panel.
You created new folders, organized the symbols within the
folders, and then opened and closed the folders.
Figures © Cengage Learning 2013
Lesson 2 Work with Libraries
FLSH_CS6_002_ch03.indd 13
FLASH 3-13
07/06/12 8:40 PM
Rename symbols and delete a symbol
Figure 16 Updated Library panel
1. Click the expand icon for the Graphics
folder to display the symbols.
2. Right-click (Win) or [control]-click (Mac) the
g_car1 symbol, then click Rename.
3. Type g_redCar in the Name text box, then press
[Enter] (Win) or [return] (Mac).
4. Repeat Steps 2 and 3 to rename the g_car2
symbol as g_blueCar.
5. Study the Stage and notice there are two yellow
lines, one near the top and the other at the
bottom of the Stage.
6. Click g_border in the Library panel to select it.
7. Click the Delete icon at the bottom of the
Library panel.
8. Study the Stage and notice the yellow border
lines are deleted.
Your Library panel should resemble Figure 16.
TIP You can also select an item and press [Delete], or
you can use the Panel options menu in the Library
panel to remove an item from the library. The Undo
command in the Edit menu can be used to undelete
an item.
You used the Library panel to rename symbols and delete
a symbol.
Figure © Cengage Learning 2013
FLASH 3-14
FLSH_CS6_002_ch03.indd 14
Working with Symbols and Interactivity
07/06/12 8:40 PM
Figure 17 The carRace.fla document and the coolCar.fla Library panel
The carRace.fla document is
the active document
Use multiple Library panels
The Library panel
for the coolCar.fla
document
Display movies
list arrow
1. Click the Display movies list arrow near
the top of the Library panel to display a list of
open documents.
2. Click coolCar.fla, then click g_car.
The Library panel for the coolCar document
is displayed. However, the carRace document
remains open, as shown in Figure 17.
3. Click frame 1 on the resetBTN layer, then drag
the g_car symbol from the Library panel
to the center of the Stage.
The reset BTN layer is the only unlocked layer.
Objects cannot be placed on locked layers.
4. Click the Display movies list arrow to display
the open documents.
5. Click carRace.fla to view the carRace
document’s Library panel.
Notice the g_car symbol is added automatically
to the Library panel of the carRace document.
6. Click the g_car symbol in the Library panel.
7. Click the Delete icon at the bottom of the
Library panel.
You deleted the g_car symbol from the carRace
library but it still exists in the coolCar library.
The car was also deleted from the Stage.
8. Save your work.
9. Click the coolCar.fla tab at the top of the
workspace to display the document.
10. Close the coolCar document and save the
document if asked.
You used the Library panel to display the contents of another library
and added an object from that library to the current document.
Figure © Cengage Learning 2013
Lesson 2 Work with Libraries
FLSH_CS6_002_ch03.indd 15
FLASH 3-15
07/06/12 8:40 PM
LESSON 3
Create
BUTTONS
What You’ll Do
Understanding Buttons
Figure © Cengage Learning 2013
Button symbols are used to provide
interactivity. When you click a button, an
action occurs, such as starting an animation
or jumping to another frame on the Timeline.
Any object, including Flash drawings, text
blocks, and imported graphic images, can be
made into buttons. Unlike graphic symbols,
buttons have four states: Up, Over, Down,
and Hit. These states correspond to the use
of the mouse and recognize that the user
requires feedback when the mouse is pointing
to a button and when the button has been
clicked. This is often shown by a change in the
button (such as a different color or different
shape). An example of a button with different
colors for the four different states is shown in
Figure 18. These four states are explained in
the following paragraphs.
In this lesson, you will create a button, edit the four
button states, and test a button.
Hit—Defines the area of the screen that will
respond to the pointer. In most cases, you will
want the Hit state to be the same or similar to
the Up state in location and size.
When you create a button symbol, Flash
automatically creates a new Timeline. The
Timeline has only four frames, one for each
button state. The Timeline does not play;
it merely reacts to the mouse pointer by
displaying the appropriate button state.
The process for creating and previewing
buttons is as follows:
Create a button symbol—Draw an object or
select an object that has already been created
and placed on the Stage. Use the Convert to
Figure 18 The four button states
Up—Represents how the button appears
when the mouse pointer is not over it.
Over—Represents how the button appears
when the mouse pointer is over it.
Down—Represents how the button appears
Up
Over
Down
Hit
after the user clicks the mouse.
Figure © Cengage Learning 2013
FLASH 3-16
FLSH_CS6_002_ch03.indd 16
Working with Symbols and Interactivity
07/06/12 8:40 PM
Symbol command on the Modify menu to
convert the object to a button symbol and to
enter a name for the button.
Edit the button symbol—Select the button and
choose the Edit Symbols command on the
Edit menu or double-click the button symbol
in the Library panel. This displays the edit
window, which includes the button Timeline,
shown in Figure 19. You use the button
Timeline to work with the four button states.
The Up state is the original button symbol.
Flash automatically places it in frame 1. You
need to determine how the original object
will change for the other states. To change the
button for the Over state, click frame 2 and
insert a keyframe. This automatically places
a copy of the button that is in frame 1 into
frame 2. Then, alter the button’s appearance
for the Over state, for instance, by changing
the fill color. Use the same process for the
Down state. For the Hit state, you insert a
keyframe in frame 4 and then specify the area
on the screen that will respond to the pointer.
If you do not specify a hit area, the image for
the Down state is used for the hit area. You
add a keyframe to the Hit frame only if you
are going to specify the hit area.
Return to the main Timeline—Once you’ve
finished editing a button, you choose the Edit
Document command on the Edit menu or
click Scene 1 above the edit window to return
to the main Timeline.
Preview the button—By default, Flash disables
buttons so that you can manipulate them on the
Stage. You can preview a button by choosing
the Enable Simple Buttons command on the
Control menu. You can also choose the Test
Movie command on the Control menu to play
the movie and test the buttons.
Figure 19 The edit window showing the button symbol and the button Timeline
The Up state of the
button symbol
Figure © Cengage Learning 2013
Lesson 3
Create Buttons
FLSH_CS6_002_ch03.indd 17
FLASH 3-17
07/06/12 8:40 PM
Figure 20 The rectangle object
Create a button
1. Insert a new layer above the top layer on the
Timeline, then name the layer signal.
2. Select the Rectangle Primitive tool
,
then set the Stroke Color to No Stroke.
TIP The No Stroke icon
the color palette.
Rectangle object
is in the upper-right corner of
3. Set the Fill Color to the red gradient color
swatch in the bottom row of the color palette.
4. Display the Properties panel, click the Reset
button in the RECTANGLE OPTIONS area, then
set the corner radius to 5.
5. Draw the rectangle shown in Figure 20.
6. Click the Zoom tool on the Tools panel,
then click the rectangle to enlarge it.
7. Select the Gradient Transform tool on
the Tools panel.
TIP You may need to click and hold the Free Transform
tool first.
8. Click the rectangle, then drag the diagonal
arrow toward the center of the rectangle as shown
in Figure 21 to make the red area more round.
9. Click the Selection tool
on the Tools
panel, then drag a marquee around the
rectangle to select it.
10. Click Modify on the menu bar, then click
Convert to Symbol.
11. Type b_signal in the Name text box, click the
Type list arrow, click Button, then click OK.
12. Display the Library panel, then drag the
b_signal symbol to the Buttons folder.
You created a button symbol on the Stage and dragged it to the
Buttons folder in the Library panel.
FLASH 3-18
FLSH_CS6_002_ch03.indd 18
Figure 21 Adjusting the gradient
Center circle indicates
round red area
Drag the diagonal arrow
from the outside ring
toward the center of the
rectangle
Figures © Cengage Learning 2013
Working with Symbols and Interactivity
07/06/12 8:40 PM
Figure 22 Specifying the hit area
Edit a button and specify a hit area
1. Open the Buttons folder, right-click (Win) or
control-click (Mac) b_signal in the Library
panel, then click Edit.
Flash displays the edit window showing the
Timeline with four button states.
2. Click the blank Over frame on Layer 1, then
insert a keyframe.
TIP The [F6] key inserts a keyframe in the selected frame. The
[fn] key may need to be used with some Mac keyboards.
Blue rectangle
represents
hit area
3. Set the Fill Color to the gray gradient color
swatch on the bottom of the color palette.
TIP If the gradient is not selected, try clicking the edge of the
gradient swatch rather than the middle.
4. Insert a keyframe in the Down frame on Layer 1.
5. Set the Fill Color to the green gradient color
swatch on the bottom of the color palette.
6. Insert a keyframe in the Hit frame on Layer 1.
7. Select the Rectangle tool
on the Tools
panel then set the Fill Color to the blue color
swatch in the left column of the color palette.
8. Draw a rectangle slightly larger than the
button as shown in Figure 22, then release the
mouse button.
TIP The Hit area will not be visible on the Stage when you
return to the main Timeline.
9. Click Scene 1 above the edit window to return to
the main Timeline.
You edited a button by changing the color of its Over and Down
states, and you specified the Hit area.
Figure © Cengage Learning 2013
Lesson 3
Create Buttons
FLSH_CS6_002_ch03.indd 19
FLASH 3-19
07/06/12 8:40 PM
Test a button
Figure 23 The button’s Over state
Figure 24 The button’s Down state
1. Click the Selection tool , then click a blank
area of the Stage.
2. Click Control on the menu bar to display
the Control menu, then click Enable
Simple Buttons if it is not already checked.
This command allows you to test buttons on the
Stage without viewing the movie in the Flash
Player window.
3. Point to the signal button on the Stage, then
compare your image to Figure 23.
The pointer changes to a hand , indicating
that the object is clickable, and the button
changes to a gray gradient, the color you selected
for the Over state.
4. Press and hold the mouse button, then notice
that the button changes to a green gradient, the
color you selected for the Down state, as shown
in Figure 24.
5. Release the mouse and notice that the button
changes to a gray gradient, the color you selected
for the Over state.
(continued)
The Button Hit Area
All buttons have an area that responds to the mouse pointer, including rolling over the button and
clicking it. This hit area is usually the same size and shape as the button itself. However, you can specify
any area of the button to be the hit area. For example, you could have a button symbol that looks like a
target with just the bulls-eye center being the hit area.
Figures © Cengage Learning 2013
FLASH 3-20
FLSH_CS6_002_ch03.indd 20
Working with Symbols and Interactivity
07/06/12 8:40 PM
Figure 25 The button’s Up state
6. Move the mouse away from the signal
button, and notice that the button returns to
a red gradient, the Up state color, as shown
in Figure 25.
7. Click Control on the menu bar, then click Enable
Simple Buttons to turn off the command.
8. Click the View list arrow above the Stage, then
click Fit in Window, as shown in Figure 26.
This shortcut allows you to change the
magnification view without using the Magnification
command on the View menu or the Zoom tool in
the Tools panel.
9. Save your work.
You used the mouse to test a button and view the button states.
Figure 26 View options from the View list
View options
for the Stage
Figures © Cengage Learning 2013
Lesson 3
Create Buttons
FLSH_CS6_002_ch03.indd 21
FLASH 3-21
07/06/12 8:40 PM
LESSON 4
Assign Actions
TO FRAMES AND BUTTONS
What You’ll Do
Figure © Cengage Learning 2013
In this lesson, you will use ActionScript to assign actions
to frames and buttons.
Understanding Actions
In a basic movie, Flash plays the frames
sequentially without stopping for user input.
However, you often want to provide users
with the ability to interact with the movie by
allowing them to perform actions, such as
starting and stopping the movie or jumping
to a specific frame in the movie. One way
to provide user interaction is to assign an
action to the Down state of a button. Then,
whenever the user clicks the button, the
action occurs. Flash provides a scripting
language, called ActionScript, that allows
you to add actions to buttons and frames
within a movie. For example, you can place a
stop action in a frame that pauses the movie,
and then you can assign a play action to a
button that starts the movie when the user
clicks the button.
Analyzing ActionScript
ActionScript, which is a powerful scripting
language, allows those with even limited
programming experience to create complex
actions. For example, you can create order
forms that capture user input or volume
controls that display when sounds are played.
A basic ActionScript involves an event (such
FLASH 3-22
FLSH_CS6_002_ch03.indd 22
as a mouse click) that causes some action to
occur by triggering the script. The following
is an example of a basic ActionScript:
on (release) {
gotoAndPlay(10);
}
In this example, the event is a mouse click
(indicated by the word release) that causes
the movie’s playhead to go to frame 10 and
play the frame. This is a simple example of
ActionScript code and it is easy to follow.
Other ActionScript code can be quite complex
and may require programming expertise to
understand.
ActionScript 2.0 and 3.0
Adobe has identified two types of Flash CS6
users, designers and developers. Designers
focus more on the visual features of a Flash
movie, including the user interface design,
drawing objects, and acquiring and editing
additional assets (such as graphic images).
Whereas, developers focus more on the programming aspects of a Flash movie, including
creation of complex animations and writing
the code that specifies how the movie responds
Working with Symbols and Interactivity
07/06/12 8:40 PM
to user interactions. In many cases, designers
and developers work together to create sophisticated Flash applications. In other cases,
designers work without the benefit of a
developer’s programming expertise. In order to
accommodate the varying needs of these two
types of users, Flash CS6 provides two versions
of ActionScript, 2.0 and 3.0, called AS2 and AS3.
ActionScript 3.0 is used by developers because
it provides a programming environment that
is more familiar to them and can be used to
create movies that download more quickly.
However, the differences between AS2 and
AS3 are transparent to designers who do not
have programming expertise. AS2 allows new
Flash users to create compelling applications
even if they do not have a background in
programming. At the same time, AS2 provides
an introduction to ActionScript that can
be the basis for learning ActionScript 3.0.
ActionScript 2.0 will be used in this chapter.
You can specify ActionScript 2.0 when creating
a new document or you can use the Flash tab
in the Publish Settings dialog box, which can
be opened using the Publish Settings command
found on the File menu, to specify AS2.
An advantage of using AS2 is a feature
called Script Assist, which provides an easy
way to use ActionScript without having
to learn the scripting language. The Script
Assist feature within the Actions panel
allows you to assign basic actions to frames
and objects, such as buttons. Figure 27
shows the Actions panel displaying an
ActionScript indicating that when the user
clicks the selected object (a button, in this
example, b_signal), the movie goes to and
plays frame 2.
Figure 27 The Actions panel displaying an ActionScript
Event
on (release)
Script Assist
active
Action
gotoAndPlay(2)
Action assigned
to this button
symbol
Figure © Cengage Learning 2013
Lesson 4 Assign Actions to Frames and Buttons
FLSH_CS6_002_ch03.indd 23
FLASH 3-23
07/06/12 8:40 PM
The process for assigning actions to buttons,
shown in Figure 28, is as follows:
1. Select the button on the Stage that you
want to assign an action to.
2. Display the Actions panel, using the
Window menu.
3. Click the Script Assist button to display the
Script Assist panel within the ActionScript
panel, and verify the button symbol and
name appear in the lower-left corner of
the Actions panel.
4. Click the Add a new item to the script
button to display a list of Script categories
and associated menus.
5. Click the appropriate category from a
menu. Flash provides several categories,
such as the Timeline Control category
accessed via the Global Functions menu.
You can use the actions available via the
Timeline Control menu to start and stop
movies, as well as jump to (goto) specific
frames. These can be in response to user
mouse movements and keystrokes.
■ Select the desired action, such as goto.
■ Specify the event that triggers the
action, such as on (release). This step in
the process is not shown in Figure 28.
Button actions respond to one or more mouse
events, including:
Release—With
the pointer inside the
button Hit area, the user presses and
releases (clicks) the mouse button. This is
the default event.
Key Press—With the button displayed, the
user presses a predetermined key on the
keyboard.
Roll Over—The user moves the pointer into
the button Hit area.
Drag Over—The user holds down the mouse
button, moves the pointer out of the button
Hit area, and then back into the Hit area.
Using Frame Actions
In addition to assigning actions to buttons, you
can assign actions to frames. Actions assigned
to frames are executed when the playhead
reaches the frame. A common frame action
is stop, which is often assigned to the first and
last frame of a layer on the Timeline.
Figure 28 The process for assigning actions to buttons
1. Select the button
2. Display the Actions panel
3. Click the Script Assist
button to toggle between
on (seen here) and off
4. Click the “Add a new item
to the script” button
Hide/Display arrow, click at
any time and as needed to
hide or display the Toolbox
pane
5. Select the Script category,
the Actions category, and
the action
Script categories
FLASH 3-24
FLSH_CS6_002_ch03.indd 24
Actions categories available
in the selected Script category
Actions available in the
selected Actions category
Figure © Cengage Learning 2013
Working with Symbols and Interactivity
07/06/12 8:40 PM
Understanding the Actions Panel
The Actions panel has two panes. The left
pane (also called the Toolbox pane) uses
folders to display the Script categories.
The right pane, called the Script pane, is
used with the Script Assist feature and it
displays the ActionScript code as the code
is being generated. When using the Script
Assist feature, it is best to close the left pane.
This is done by clicking the Hide/Display
arrow, which is shown in Figure 28 and
Figure 29. In Figure 28, the Toolbox pane
is collapsed, and in Figure 29, the Toolbox
pane is expanded.
The lower-left corner of the Script pane
displays the symbol name or the frame to
which the action(s) will apply. Always verify
that the desired symbol or frame is displayed.
When the Script Assist feature is turned off
(not active), you can type ActionScript code
directly into the Script pane.
Using Frame Labels
Buttons are often used to move the playhead
to a specific location on the Timeline. For
example, clicking a Start button might cause
the playhead to jump from frame 1 to frame 10
to start an animation. In addition to referencing
Figure 29 The Actions panel
Toolbox
pane
Figures © Cengage Learning 2013
Hide/Display
arrow for the
Toolbox pane
Lesson 4 Assign Actions to Frames and Buttons
FLSH_CS6_002_ch03.indd 25
frame numbers, like 10, you can reference
frame labels in the ActionScript code. Frame
labels have an advantage over frame numbers,
especially in large and complex applications,
because adding or deleting frames will not
disrupt the navigation to a frame reference
you already have in actions because the label
remains attached to the frame even if the frame
moves. The process is to select a frame and use
the Properties panel to specify a name. Then
use the frame name in the ActionScript code
instead of the frame number. Figure 30 shows
the Timeline with a frame label and the Actions
panel with the code that references the label.
Figure 30 The Timeline with a frame label
Button that
the code will
be applied to
Script Assist
off
Frame label
“StartRace”
in frame 2
Code that
references the
frame label
Script Assist on
FLASH 3-25
07/06/12 8:40 PM
Figure 31 The Actions panel Toolbox pane
Assign a stop action to frames
1. Click Control on the menu bar, point to Test
Movie, then click in Flash Professional.
The movie plays and continues to loop.
2. Close the Flash Player window.
3. Insert a new layer, name it stopMovie, then
click frame 1 on the layer to select the frame.
4. Click Window on the menu bar, then click
Actions to display the Actions panel.
5. Study the Actions panel. If the Toolbox pane is
displayed as shown in Figure 31, then click the
Hide/Display arrow to hide the pane.
6. Click the Script Assist button to turn on the
Script Assist feature if Script Assist is not active.
7. Verify stopMovie:1 (indicating the layer and
frame to which the action will be applied)
is displayed in the lower-left corner of the
Script pane.
8. Click the Add a new item to the script button
to display the Script categories, point to
Global Functions, point to Timeline Control,
then click stop, as shown in Figure 32.
9. Insert a keyframe in frame 65 on the
stopMovie layer, then open the Actions panel if it
is no longer open.
TIP You can collapse the Actions panel to view more
of the Stage, then expand the Actions panel when
needed. Alternately, you can drag the bottom or sides
of the Actions panel up to make the panel smaller.
Hide/Display arrow for
the Toolbox pane
Figure 32 Assigning an action to frame 1 on the stopMovie layer
Script Assist on
(continued)
Figures © Cengage Learning 2013
FLASH 3-26
FLSH_CS6_002_ch03.indd 26
Working with Symbols and Interactivity
07/06/12 8:40 PM
Figure 33 Script for the stopMovie layer
10. Verify stopMovie: 65 is displayed in the lower-left
corner of the Script pane, then repeat Step 8.
Compare your screen to Figure 33.
11. Test the movie.
The movie does not play because there is a stop
action assigned to frame 1.
12. Close the Flash Player window.
Action stop()
You inserted a layer and assigned a stop action to the first and
last frames on the layer.
Assign a play action to a button
Action assigned to frame 65
of the stopMovie layer
Figure 34 Assigning an event and an action to a button
Action assigned to
the button named
b_signal
Figures © Cengage Learning 2013
Lesson 4 Assign Actions to Frames and Buttons
FLSH_CS6_002_ch03.indd 27
1. Click frame 1 on the signal layer.
2. Move the Actions panel to view the signal
button on the Stage, if necessary.
3. Click the Selection tool
on the Tools
panel, then click the button on the Stage.
4. Verify b_signal is displayed in the lower left of
the Actions panel.
This ensures that the actions specified in the
Actions panel will apply to the b_signal button.
5. Click to display the Script categories, point
to Global Functions, point to Timeline
Control, then click play.
Release is the default event for a button, as
shown in Figure 34. The “play” action causes the
playhead to move to the next frame. To jump
to a specific frame, the “goto” action and frame
number would be used.
6. Click Control on the menu bar, point to Test
Movie, then click in Flash Professional.
7. Click the signal button to play the animation.
8. Close the Flash Player window.
You used the Actions panel to assign a play action to a button.
FLASH 3-27
07/06/12 8:40 PM
Assign a goto frame action to a button
1. Click Control on the menu bar, point to Test
Movie, then click in Flash Professional.
2. Click the signal button.
The movie plays and stops, and the word Reset,
which is actually a button, appears.
3. Click the Reset button and notice nothing
happens because it does not have an action
assigned to it.
4. Close the Flash Player window.
5. Click frame 65 on the resetBTN layer to display
the Reset button on the Stage.
Note: You many need to close and/or move
the Actions panel to view the Reset button on
the Stage.
6. Click the Reset button on the Stage to select it.
7. Verify b_reset is displayed in the lower left of
the Actions panel.
8. Verify Script Assist in the Actions panel is active
, click , point to Global Functions,
point to Timeline Control, click goto, then
verify Frame 1 is specified, as shown in Figure 35.
9. Click Control on the menu bar, point to Test
Movie, then click in Flash Professional.
10. Click the signal button to start the movie, then
when the movie stops, click the Reset button.
The goto action you assigned to the Reset button
causes the playhead to jump to frame 1, the
beginning of the movie.
11. Close the Flash Player window.
Figure 35 Assigning a goto action to a button
Frame 1 specified;
you can type a
frame number
if the autofill
number is not the
frame you want
Script Assist active
Event on (release)
Action gotoAndPlay(1)
Global Functions: Timeline Control and Movie Clip Control
The most common actions for including interactivity in a movie when using ActionScript 2.0 are added
using the Global Functions categories Timeline Control and Movie Clip Control. Timeline Control actions
focus on controlling the playhead (play, stop), jumping to a specific frame (goto), and stopping sounds
(stopAllSounds). These actions are generally assigned to buttons. Movie Clip Control actions focus on
manipulating movie clips (startDrag, stopDrag, removeMovieClip, and so on). They also provide mouse
(on Release) and keyboard (Key Press) actions that can be assigned to buttons.
You used the Actions panel to assign an action to a button.
Figure © Cengage Learning 2013
FLASH 3-28
FLSH_CS6_002_ch03.indd 28
Working with Symbols and Interactivity
07/06/12 8:40 PM
Figure 36 Assigning a keyPress action to a button
Assign a second event to a button
1. Click the right curly brace (}) in the Actions panel
to highlight the brace in line 3 of the ActionScript.
2. Click , point to Global Functions, point to
Movie Clip Control, then click on.
The Script Assist window displays several event
options. Release is selected.
3. Click the Release check box to deselect the option.
4. Click the Key Press check box to select it, then
press the [Home] key on the keyboard.
TIP If your keyboard does not have a [Home] key, use
[fn]+[←] (Mac) or a letter, such as r, to complete
the steps.
Action gotoAndPlay(1)
Event on (keyPress “”)
keyPress Events
Not all keys on a keyboard can be used for keyPress events. In addition, some keys such as [Home] will
only work when the movie is played in a browser and not when the movie is played in the Flash Player
window. You may need to use another key such as r or h which will work in a browser or the Flash Player
window. Test your movie to make sure the keyPress events work for the intended playback system.
5. Click , point to Global Functions, point to
Timeline Control, then click goto.
The ActionScript now indicates that pressing
the [Home] key will cause the playhead to go to
frame 1, as shown in Figure 36.
The Reset button can now be activated by
clicking it or by pressing the [Home] key.
6. Click File on the menu bar, point to Publish
Preview, then click Default – (HTML).
The movie opens in your default browser.
Note: If a warning message opens, follow the
messages to allow blocked content.
7. Click the signal button to start the movie, then
when the movie stops, press the [Home] key.
TIP Use the key(s) you assigned to the keypress event if it is
different from the Home key.
8. Close the browser window, close the Actions panel,
then save and close the movie.
Figure © Cengage Learning 2013
Lesson 4 Assign Actions to Frames and Buttons
FLSH_CS6_002_ch03.indd 29
You added a keypress event that triggers a goto frame action.
FLASH 3-29
07/06/12 8:40 PM
LESSON 5
Import
GRAPHICS
What You’ll Do
Understanding Graphic Types
Vector graphics represent an image as a
Flash provides excellent drawing tools, which
allow you to create various objects that can
be changed into symbols. In addition, you
can import graphics and other assets, such as
photographs and sounds. There are two types
of graphic files, bitmap graphics and vector
graphics. They are distinguished by the way
in which the image is represented.
geometric shape made up of lines and arcs that
are combined to create various shapes, such as
circles and rectangles. This is similar to Flash
drawings that include strokes and fills. Flash
drawing tools create vector graphics. One
advantage of vector graphics is that they can
be resized without distorting the image. The
reason is that the geometric shapes are based
on mathematical models that are recalculated
when the image is resized. Figure 38 shows
an example of a vector graphic before and
after resizing. Vector graphics are best used
for drawings rather than for images requiring
photographic quality.
Bitmap images are made up of a group
of tiny dots of color called pixels (picture
Photo courtesy of J. Shuman
In this lesson, you will import and work with bitmap and
vector graphics.
FLASH 3-30
FLSH_CS6_002_ch03.indd 30
elements). Bitmap graphics are often used
with photographic images because they can
represent subtle gradients in color. However,
one disadvantage of bitmap graphics is the
inability to enlarge the graphic without
distorting the image. This is because both
the computer screen’s resolution (pixels per
inch) and the number of pixels making up
the image are a fixed number. So, when you
enlarge an image each pixel must increase in
size to fill the larger image dimensions. This
causes the pixels to display jagged edges, as
shown in Figure 37.
There are several programs that allow you
to create and edit graphics including Adobe
Illustrator, Fireworks, and Photoshop.
There are also clip art and stock photograph
collections that are available online. Filename
extensions identify the file type. For example,
.jpg, .tif, .png, and .gif are file formats for
bitmap graphics; while .ai is a vector file
format.
Working with Symbols and Interactivity
07/06/12 8:40 PM
Importing and Editing Graphics
Once you have identified the graphic you
would like to include in a Flash document, you
can use the Import feature to bring the graphic
into Flash. The process for importing is to select
Figure 37 Bitmap graphic enlarged
the Import command from the File menu and
specify where to import (Stage or Library).
Then you navigate to the location where the file
is stored and select it. After importing a vector
graphic you can work with it as you would any
graphic. Because bitmap graphics are not easy
to edit in Flash, you may want to use another
program, such as Photoshop, to obtain the
desired size, color, and other enhancements
before importing the graphic.
Figure 38 Vector graphic enlarged
Photo courtesy of J. Shuman
Figure © Cengage Learning 2013
Lesson 5 Import Graphics
FLSH_CS6_002_ch03.indd 31
FLASH 3-31
07/06/12 8:40 PM
Import graphics
Figure 39 Positioning the sailboat image on the Stage
Photo courtesy of J. Shuman
1. Start a new Flash document, then save it as
sailing.fla.
2. Click File on the menu bar, point to Import,
then click Import to Library.
The Preparing to import process make take a
few moments.
3. Navigate to the folder where your Data Files are
stored, click islandview.jpg, then click Open.
Islandview.jpg is a digital photo that was edited
in Photoshop and saved as a .jpg file.
4. Display the Library panel and notice the icon
used for bitmap graphics.
5. Drag the islandview icon to the Stage, then
lock the layer.
6. Click File on the menu bar, point to Import,
then click Import to Library.
7. Navigate to the folder where your Data Files are
stored, then click sailboat.ai.
This graphic was created using Adobe Illustrator
and is made up of several layers.
8. Click Open.
A dialog box appears asking you to choose
the layers to import. All layers are selected
by default.
9. Click OK.
The graphic is added to the Library panel as
a symbol.
10. Add a new layer to the Timeline, click frame
1 on the layer, then drag the sailboat icon to
the Stage, as shown in Figure 39.
(continued)
FLASH 3-32
FLSH_CS6_002_ch03.indd 32
Vector graphic
of a sailboat
Bitmap graphic
of a sailboat
Symbol identifies
this object as a
bitmap graphic
Working with Symbols and Interactivity
07/06/12 8:40 PM
Figure 40 Changing the color of the sail
Photo courtesy of J. Shuman
Figure 41 Rotating and skewing the sailboat image
Photo courtesy of J. Shuman
11. Click Modify on the menu bar, click Break
apart, then repeat this step until the dotted
pattern that indicates the image is no longer a
symbol appears.
12. Click the Selection tool , then click a blank
area of the Pasteboard.
13. Click the left sail, set the Fill color icon to the
rainbow pattern to change the sail color, as
shown in Figure 40.
Hint: The rainbow color is found at the bottom
of the palette for the Fill Color tool.
14. Use the Selection tool
to drag a
marquee around the entire sailboat to select
it, then convert the image to a graphic symbol
named g_rainbowSail.
15. Display the Properties panel, verify the Lock
icon is not broken, then change the width
of the boat to 60.
16. Click the Zoom tool
on the Tools panel,
click the sailboat twice, then scroll as needed
to view each sailboat.
Notice how the bitmap photograph becomes
distorted, while the vector sailboat does not.
17. Change the view to Fit in Window, click the
, then click the sailboat
Selection tool
with the rainbow sail.
18. Click the Free Transform tool , click the
Rotate and Skew option , skew the
sailboat to the left, verify the Lock icon is
not broken, change the width to 50, then
position the sailboat as shown in Figure 41.
19. Test the movie, close the Flash Player window,
then save your work and exit Flash.
You imported a bitmap and a vector graphic, and edited the
vector graphic.
Lesson 5 Import Graphics
FLSH_CS6_002_ch03.indd 33
FLASH 3-33
07/06/12 8:40 PM
SKILLS REVIEW
Create a symbol.
1. Start Flash, open fl3_3.fla, then save it as
skillsDemo3.fla. This document consists of a single
object that was created using the Flash drawing tools.
2. Use the Selection tool to drag a marquee around the
ball to select it.
3. Convert the ball to a graphic symbol with the name
g_beachBall.
4. Double-click the g_beachBall symbol on the Library
panel to open the edit window, change the fill color to
a rainbow gradient, add a text block that sits on top of
the ball with the words BEACH BALL (see Figure 42),
formated with white, Times New Roman, 12-pt, bold,
then click Scene 1 to return to the main Timeline.
5. With the ball selected, create a motion tween
animation that moves the ball from the left edge of
the Stage to the right edge of the Stage.
6. Use the Selection tool to drag the middle of the
motion path up to near the middle of the Stage to
create an arc.
7. Select the last frame of the animation on the
Timeline and set Rotate to 1 time in the Rotation area
of the Properties panel.
8. Play the movie.
The ball should move across the Stage in an arc and
spin at the same time.
9. Lock the beachBall spin layer.
Create and edit an instance.
1. Insert a new layer and name it blueBall.
2. Click frame 1 on the blueBall layer, then drag the
g_beachBall symbol from the Library panel so it is on
top of the ball on the Stage.
FLASH 3-34
FLSH_CS6_002_ch03.indd 34
3. Use the arrow keys as needed to align the ball so that
it covers the ball on the Stage.
4. Click the Selection tool, click the ball to select it, and
break apart the object.
5. Change the fill color of the ball to a blue gradient and
change the text to BLUE BALL.
6. Insert a new layer and name it greenBall.
7. Click frame 12 on the greenBall layer, then insert
a keyframe.
8. Drag the g_beachBall symbol from the Library panel
so it is on top of the ball that is near the middle of the
Stage. (Note: Align only the balls, not the text.)
9. With the ball selected, break apart the object and
change the fill color of the ball to a green gradient
and the text to GREEN BALL.
10. Move the beachBall spin layer to above the
other layers.
11. Insert a new layer and name it title.
12. Click frame 1 on the title layer, create a text block
at the top middle of the Stage with the words
BeachBall Spin using Arial as the font, blue as the
color, and 20-pt as the font size, then center the text
block horizontally on the Stage.
13. Insert a new layer above the title layer and name
it titleBkgnd.
14. Draw a primitive rectangle with a corner radius of
10, a medium gray fill (#999999) and no stroke that
covers the BeachBall Spin title text.
15. Verify the rectangle is selected, convert it to a graphic
symbol, then name it g_Bkgnd.
16. Move the title layer so it is above the
titleBkgnd layer.
17. Play the movie, then save your work.
Work with libraries.
1. Click the New Folder button at the bottom of the
Library panel to create a new folder.
2. Name the folder Graphics, then move the two
graphic symbols to the Graphics folder.
3. Expand the Graphics folder.
4. Rename the g_Bkgnd symbol to g_titleBkgnd in
the Library panel.
5. Save your work.
Create a button.
1. Insert a new layer above the title layer and name it
startButton.
2. Click frame 1 of the new layer.
3. Create a text block with the word Start formatted
with white, bold, 20-pt Arial, then center the text
block horizontally near the bottom of the Stage.
4. Select the text. (Hint: Drag a marquee around
the object.)
5. Convert the selected object to a button symbol and
name it b_start.
6. Create a new folder named Buttons in the Library
panel and move the b_start button symbol to
the folder.
7. Open the Buttons folder, then display the edit
window for the b_start button.
8. Insert a keyframe in the Over frame.
9. Select the text and change the color to a lighter
shade of gray than the background rectangle.
10. Insert a keyframe in the Down frame.
11. Select the text and change the color to blue.
12. Insert a keyframe in the Hit frame.
Working with Symbols and Interactivity
07/06/12 8:40 PM
SKILLS REVIEW
(CONTINUED)
13. Draw a rectangular object that covers the button area
for the Hit state.
14. Click Scene 1 to exit the edit window and return to
the main Timeline.
15. Save your work.
Test a button.
1. Click Control on the menu bar, then click Enable
Simple Buttons to turn on Enable Simple Buttons.
2. Point to the button and notice the color change.
3. Click the button and notice the other color change.
4. Turn off Enable Simple Buttons.
Import a graphic.
1. Import BeachScene.jpg from the drive and
folder where your Data Files are stored to the
Library panel.
2. Insert a new layer and name the layer backDrop.
3. Select frame 1 on the backDrop layer, then drag the
BeachScene image to the Stage.
4. Convert the BeachScene image to a graphic symbol
with the name g_beachScene.
5. Move the backDrop layer to the bottom of
the Timeline.
6. Move the graphic symbols to the Graphics folder in
the Library panel.
7. Test the movie, then compare your image to
Figure 42.
8. Close the Flash Player window, then save your work.
9. Exit Flash.
Figure 42 Completed Skills Review
Stop a movie by assigning an action
to a frame.
1.
2.
3.
4.
5.
6.
7.
Insert a new layer and name it stopMovie.
Insert a keyframe in frame 24 on the new layer.
With frame 24 selected, display the Actions panel.
Assign a stop action to the frame.
Click frame 1 on the stopMovie layer.
Assign a stop action to frame 1.
Save your work.
Assign a goto action to a button.
1. Use the Selection tool to select the Start button on
the Stage.
2. Use Script Assist in the Actions panel to assign an
event and a goto action to the button. (Hint: Refer to
the section on assigning a goto action as needed.)
3. Test the movie.
Figure © Cengage Learning 2013
Working with Symbols and Interactivity
FLSH_CS6_002_ch03.indd 35
FLASH 3-35
07/06/12 8:40 PM
PROJECT BUILDER 1
The Ultimate Tours travel company has asked
you to design a sample navigation scheme
for its application. The company wants to see
how its opening screen will link with one of
its main categories (Treks). Figure 43 shows
a sample opening screen and Treks screen.
Using the figures or the opening screen you
created in Chapter 2 as a guide, you will add a
Treks screen and link it to the opening screen
(Hint: Assume that all of the drawings on the
opening screen are on frame 1, unless noted.)
1. Open ultimateTours2.fla (the file you created
in Chapter 2 Project Builder 1), then save it as
ultimateTours3.fla. (Note: If you create a new file,
you must create an ActionScript 2.0 file. You can
check the ActionScript version by selecting Publish
Settings from the File menu and clicking the
Flash tab.)
2. Insert a layer above the subheading layer and
name it logo.
3. Import the UTLogo.png file from the drive and folder
where your Data Files are stored to the Library panel.
4. Select frame 1 on the logo layer, then drag the logo
image to the lower-right corner of the Stage.
FLASH 3-36
FLSH_CS6_002_ch03.indd 36
5. Select the logo and convert it to a graphic symbol
with the name g_UTLogo.
6. Set the last frame of the movie by inserting a
keyframe on a frame on the Logo layer at least five
frames farther along the Timeline, then lock the logo
layer. (Note: You see the logo because the keyframe
you inserted on the last frame of the movie ensures
everything on this layer appears on this last frame.)
7. Select the layer that the Ultimate Tours text block is
on, then insert a keyframe on the last frame of the
movie. (Hint: This should be the same frame number
as the frame you set as the last frame of the movie
in Step 6. Note: You see the logo and the heading
Ultimate Tours because the keyframe you inserted
on the last frame of the movie ensures everything on
this layer appears on this last frame.)
8. Insert a new layer, name it treks headings, insert a
keyframe on the last frame of the movie, then create
the Treks screen shown in Figure 43, except for the
home button.
9. Convert the Treks graphic on the opening screen to a
button symbol named b_treks, then edit the symbol
so that different colors appear for the different states
and be sure to set a hit area.
10. Assign a goto action to the Treks button that jumps
the playhead to the Treks screen when the Treks
button is clicked. (Hint : You can jump to the Treks
screen by typing the frame number for the screen in
the Actions panel. See Figure 35.)
11. Insert a new layer and name it stopMovie. Add stop
actions that cause the movie to stop after displaying
the opening screen and after displaying the Treks
screen. Make sure there is a keyframe in the last
frame of the stopMovie layer.
12. Insert a new layer and name it homeButton, insert
a keyframe on the last frame of the movie, then draw
the home button image with the Home text.
13. Convert the image to a button symbol named
b_home, then edit the symbol so that different
colors appear for the different states. Assign a goto
action for the Home button that jumps the movie
to frame 1.
14. Test the movie.
15. Save your work, then compare your screens to the
samples shown in Figure 43.
Working with Symbols and Interactivity
07/06/12 8:40 PM
PROJECT BUILDER 1
(CONTINUED)
Figure 43 Sample completed Project Builder 1
Opening screen
Convert to a button
symbol
Treks screen
Convert to a button symbol
Figure © Cengage Learning 2013
Working with Symbols and Interactivity
FLSH_CS6_002_ch03.indd 37
FLASH 3-37
07/06/12 8:40 PM
PROJECT BUILDER 2
You have been asked to assist the International
Student Association (ISA). The association
sponsors a series of monthly events, each
focusing on a different culture from around
the world. The events are led by a guest
speaker who makes a presentation, followed
by a discussion. The events are free and they
are open to everyone. ISA would like you to
design a Flash movie that will be used with its
website and on its mobile app. The movie starts
by providing information about the series, and
then provides links to the upcoming event and
to a schedule. Refer to Figure 44 as you create
the Flash movie. Depending on the font you
choose, your screen may not appear exactly the
same as Figure 44. (Hint: Keep the following in
mind as you complete this project:
■
■
■
Insert a blank keyframe in a frame on a layer
when you do not want the text or objects
from the previous frame to appear in the
frame where you are inserting a blank
keyframe.
Use the align panel and the rulers to help
place objects, such as the buttons on the
page, in the same location from screen
to screen. If copying an object you can
use the Paste in Place command to have
the object copied to the exact location it was
selected from.
Remember to break apart a button to change
its name, then select the object and convert
the updated object to a new button with a
new name.)
FLASH 3-38
FLSH_CS6_002_ch03.indd 38
1. Open a new Flash ActionScript 2.0 document and
save it as isa3.fla.
2. Change the Stage size to width: 320 and height: 480.
(Note: There will be three screens with each screen
being on a separate frame. Frame 1 will display the
opening screen; frame 2 will display the Next Event
screen; and frame 3 will display the Schedule screen.)
3. Draw a border that surrounds the stage. (Hint: Use
the rectangle tool, select the “no color” color
swatch in the color palette, then use the stroke color
of your choice. Set the border stroke to at least 2.)
4. On another layer create the heading and subheading
(top two lines) that will appear on all three screens.
Be sure to add a keyframe in the last frame on
this layer of the movie so that the heading and
subheading appear on every frame of the movie.
(Note: The last frame will be frame 3.)
5. On another layer add the text to the opening screen
in frame 1. (Hint: After adding the text in frame 1,
be sure to insert a blank keyframe in frame 2 of the
new layer. To add a blank keyframe, select the desired
frame, click Insert on the menu, point to Timeline,
and then click Blank Keyframe. You add a blank
keyframe in frame 2 so that the text you added in
frame 1 will not appear in frame 2.)
6. Create the Next Event screen in frame 2 by adding a
layer and entering the title (Next Event) and the text
for the screen. (Hint: Be sure to insert a keyframe in
frame 2 of the new layer and a blank keyframe in
frame 3 of that same layer.)
7. Create the Schedule screen in frame 3 by adding a
layer and entering the title (Schedule) and the text
8.
9.
10.
11.
12.
13.
14.
15.
16.
for the screen. (Hint: Be sure to insert a keyframe in
frame 3 of the new layer.)
Insert a layer and create a Next Event button with
the name b_nextEvent on the opening screen that
jumps the movie to the Next Event screen. Create
a Schedule button with the name b_schedule on
another layer that jumps the movie to the Schedule
screen. For each button you create, specify different
colors for each state of the button.
Insert another layer and on the Next Event screen,
create a Home button with the name b_home, that
jumps the movie back to the opening screen. Be sure
to specify different colors for each state when you
create the Home button.
Copy an instance of the Home button you created in
Step 6 to the Schedule screen. (Hint: You can select
the button with the Selection tool, select Copy from
the Edit menu, display the Schedule screen and select
Copy in Place from the Edit menu.)
On the Next Event screen, copy an instance of the
Schedule button you created in Step 5 that jumps the
movie to the Schedule screen.
On the Schedule screen, copy an instance of the Next
Event button you created in Step 5 that jumps the
movie to the Next Event screen.
Insert a layer and add an action to each frame on that
layer that stops the movie on that frame.
Rename all of the layers using appropriate names.
Test the movie.
Save your work, then compare your movie to the
sample shown in Figure 44.
Working with Symbols and Interactivity
07/06/12 8:40 PM
PROJECT BUILDER 2
(CONTINUED)
Figure 44 Sample completed Project Builder 2
Sample general
information screen
Sample next
event screen
Sample series screen
Figure © Cengage Learning 2013
Working with Symbols and Interactivity
FLSH_CS6_002_ch03.indd 39
FLASH 3-39
07/06/12 8:40 PM
DESIGN PROJECT
Figure 45 shows the home page of a website.
Study the figure and complete the following
questions. For each question, indicate how
you determined your answer.
Figure 45 Design Project
Courtesy of zoo.org. www.zoo.org
1. Connect to the Internet and go to www.zoo.org.
Notice that this website has images that change as
you visit the website.
2. Open a document in a word processor or open a
new Flash document, save the file as dpc3, then
answer the following questions. (Hint: Use the Text
tool in Flash.)
■ Whose website is this?
■ What is the goal(s) of the site?
■ Who is the target audience?
■ What treatment (“look and feel”) is used?
■ What are the design layout guidelines being used
(balance, movement, and so on)?
■ What may be animated on this home page?
■ Do you think this is an effective design for the
company, its products, and its target audience?
Why or why not?
■ What suggestions would you make to improve the
design, and why?
FLASH 3-40
FLSH_CS6_002_ch03.indd 40
Working with Symbols and Interactivity
07/06/12 8:40 PM
PORTFOLIO PROJECT
This is a continuation of the Chapter 2
Portfolio Project, which is the development
of a personal portfolio. In this project, you
will create a button that will be used to link
the opening screen of your portfolio to the
animations page. Next, you will create another
button to start the animation.
1. Open portfolio2.fla (the file you created in Portfolio
Project, Chapter 2), then save it as portfolio3.fla.
2. Unlock the layers as needed.
3. Insert a new layer, name it sampleAnimations,
then insert a keyframe in frame 2.
4. On this new layer, create a Sample Animations screen
that has a text block with an oval background and the
words Sample Animations at the top of the Stage,
then add another text block and oval background
with the word Tweened. (Note: This screen will have
several animation samples added to it later.)
5. Insert a new layer, name it home button, then
insert a keyframe in frame 2.
6. Add a text block that says Home and has an oval
background at the bottom of the Stage.
7. Insert a new layer, name it tweenedAnimation,
then insert a keyframe in frame 3.
8. Create an animation(s) of your choice using objects
you draw or import, or objects from the Library panel
of another document. (Note: To create a motion
tween animation when starting in a frame other
than frame 1, you need to specify the beginning
frame of the animation by inserting a keyframe in
the starting frame, placing or drawing the object
on the Stage, selecting the object and converting
it into a graphic symbol, inserting a motion tween,
inserting a keyframe in the ending frame of the
animation, and repositioning the object. (Hint:
To create more than one animation that plays at
the same time, put each animation on its own
layer, such as tweenedAnimationRedCar and
tweenedAnimationBlueCar.)
9. Insert a new layer, name it animationHeading,
insert a keyframe in frame 3, then add a heading,
such as Passing Cars in the sample in Figure 46, that
describes the animation(s).
10. On the Sample Animations screen, convert the
Tweened and Home text blocks into button symbols,
then edit each symbol so that different colors appear
for the different states. For the Tweened button,
assign an action that jumps to the frame that plays
an animation. For the Home button, assign an
11.
12.
13.
14.
15.
action to the Home button that jumps to the frame
that displays My Portfolio. (Hint: You need to use
ActionScript 2.0.)
Change the Animations graphic on the home page
to a button, then edit the symbol so that different
colors appear for the different states. Assign an action
to the Animations button that jumps to the Sample
Animations screen.
Insert a new layer, then name it stopMovie.
Insert keyframes and assign stop actions to the
appropriate frames.
Insert a new layer at the bottom of the layers pane
and name it backdrop. Insert a keyframe in frame 3
on the backdrop layer. This is the same frame where
the tween animation begins. Add a color background
to the animation screen.
Test the movie.
Save your work, then compare your movie to the
sample shown in Figure 46.
Figure 46 Sample completed Portfolio Project
Click to return to main page
Home
Click to run the animation
Figure © Cengage Learning 2013
Working with Symbols and Interactivity
FLSH_CS6_002_ch03.indd 41
FLASH 3-41
07/06/12 8:40 PM
FLSH_CS6_002_ch03.indd 42
07/06/12 8:40 PM