Building Buttons for Interactivity
415
Creating Movie-Clip Buttons
Figure 14.29 The fi rst step in making a movie clip that
acts like a button is creating a new symbol. Choose
Insert > New Symbol, then set the symbol type to
Movie Clip and enter a name in the Create New
Symbol dialog.
Figure 14.30 When you set up the movie-clip button,
it’s a good idea to create a separate layer for the
actions, text, and graphic elements in the movie
clip’s Timeline.
Why Make Movie-Clip Buttons?
Flash’s button symbols make it easy to
create buttons quickly, but they limit you
to just three states: Up, Over, and Down.
Sometimes you’d like a button to have
more states than that. e best interface
designs use elements consistently. at
way, users know what options are avail-
able to them and always know where to
nd the interface elements for carrying
out a task. ink of a typical slide show
with a Next button. Ideally, the button
is always present in the same location.
When you view the last slide, the Next
button is inactive (and looks inactive).
When you make your own movie-clip
buttons, you can create as many states
as you like.
Creating Movie-Clip
Buttons
Flash’s button symbols have built-in rules
about how the button displays its three states
in response to the user’s mouse movements.
You can take control of that functionality
yourself and also create a button that has
more than three states by making your own
movie-clip button. In the following tasks, you
learn to assemble artwork in the Timeline of
the movie clip to create a button with four
states: Up, Over, Down, and Disabled. To give
the movie-clip button even the rst level of
interactivity—to make the movie clip respond
to mouse movements by displaying di erent
states—you must attach ActionScript. You
learn to do that in Chapter 15.
To create the button states:
1.
In a Flash document where you’d like to
use buttons that are movie-clip symbols,
choose Insert > New Symbol.
e Create New Symbol dialog appears.
2.
Type a name for your symbol,
MovieClipBtn
; choose Movie Clip as your
symbol type; and click OK (Figure 14.29).
Flash switches to symbol-editing mode.
In the Timeline you see one layer, with a
keyframe in frame 1.
3.
Add two new layers to the Timeline, for a
total of three layers.
Each layer holds a di erent type of infor-
mation for your button (Figure 14.30).
e top layer holds ActionScript that tells
the movie-clip button what to do; name
this layer Actions. e second layer holds
text identifying each keyframe that rep-
resents a button state; name this layer
Labels. e bottom layer holds the graphic
elements that give the button its look in
each state; name this layer ButtonGraphics.
continues on next page
Get Adobe Flash CS4 Professional for Windows and Macintosh: Visual QuickStart Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
