Wile Adobe Creative 5 suite Design Premium aio for dummies phần 9 pps

Book VII
Chapter 6
Lights, Camera,
Movie Clips!
785
Rendering and Animating Movie Clips in the 3D Realm
Tweening 3D properties
After you have a feel for how the 3D Rotation and 3D Translation tools trans-
form movie clips, you can incorporate these effects into a motion tween to
create stunning effects just as easily as you would with position and
transparency.
Follow these steps to create a tween with 3D properties:
1. Place a single movie clip instance on a new layer on the Timeline by
dragging it from the Library panel.
2. Right-click (Windows) or Control-click (Mac) the first frame of the new
layer and choose Create Motion Tween from the contextual menu that
appears.
A new tween span is created, and the playhead jumps to the end of the
span.
3. Select the 3D Rotation tool and click the movie clip to make it active;
circular handles appear around the instance.
4. Click and drag the axes to rotate the movie clip until you set an angle
and a position.
5. Press the Enter or Return key to play back your timeline, and your
movie clip tweens from its original 2D position to the 3D settings you
applied, as shown in Figure 6-8.
6. Repeat Steps 3 through 5 with the 3D Translation tool to see your
movie clip slide in three dimensions.

Figure 6-8:
A 3D

tween in
Onion Skin
Outlines
mode.

71_607466-bk07ch06.indd 78571_607466-bk07ch06.indd 785 5/25/10 9:01 AM5/25/10 9:01 AM
786
Book VII: Flash Professional CS5
71_607466-bk07ch06.indd 78671_607466-bk07ch06.indd 786 5/25/10 9:01 AM5/25/10 9:01 AM
Chapter 7: Controlling Your
Movie with ActionScript
In This Chapter
✓ Introducing ActionScript
✓ Adding actions to the timeline
✓ Creating button controls
✓ Applying code snippets
✓ Enabling buttons with ActionScript
W
hether you’re creating a Web site, presentation, or game, a truly
interactive experience is one in which users can control the action.
If you want to take your movies to the next level, ActionScript can help. The
built-in Flash scripting language has come a long way and can help you do
anything from control movie playback to create complex games.
This chapter introduces you to ActionScript and shows you how to use it to
create interactive elements, such as clickable buttons, in your movies.
Getting to Know ActionScript
ActionScript is a powerful scripting language that you can incorporate into
your movies to control playback, navigation, and imported media, such as
images, video, and audio. ActionScript is written as a series of commands
(or statements) that are placed on the timeline, buttons, movie clip, and

external files using the Actions panel and the new Code Snippets panel.
Think of ActionScript as a set of instructions you can give your movie to tell
it how to behave and add abilities.
ActionScript is often used for timeline control so that animations can be
told when and where to stop, loop, play, or jump to other points along a
timeline. You can also make truly interactive movies by adding ActionScript
to buttons on the stage so that users can control the animation, too.
The new Code Snippets panel
An excellent new addition for designers and code newbies is the new Flash
CS5 Code Snippets panel, shown in Figure 7-1. If you have never written
ActionScript, the learning curve can be a bit daunting, and sometimes you
72_607466-bk07ch07.indd 78772_607466-bk07ch07.indd 787 5/25/10 9:01 AM5/25/10 9:01 AM
788
Getting to Know ActionScript
just need to get the job done. The Code Snippets panel contains dozens of
useful pieces of code that you can easily apply in a single click. Whether you
want to navigate the timeline, play sounds, or control video in your movie, a
code snippet can help.
If you press the Enter or Return key to watch a movie clip play on the stage,
you’ll probably be a little disappointed. Don’t worry: To see a movie clip in
action, you just need to preview the movie in Flash Player.

Figure 7-1:
The new
Code
Snippets
panel.

The Actions panel
If you’re comfortable writing code by hand, you can use the Actions panel to

write your own code statements throughout your movie. The Actions panel,
shown in Figure 7-2, acts as a wizard, reference book, and script editor all
in one. You can also add actions from the Actions panel using a categorized
tray or drop-down list or type them directly into the script editor. A handy
Script Assist mode (see the next section) is available so that you can add
and modify actions without having to type the code by hand. (We highly rec-
ommend the Script Assist mode for new users.)
To launch the Actions panel, choose Window➪Actions or use the F9
(Windows) or Option+F9 (Mac) shortcut key combination.
To place an action on a frame, select the frame on the timeline and launch
the Actions panel.
Script Assist mode
For users new to ActionScript, an alternative to using the Code Snippets
panel or tackling hands-on coding is Script Assist mode. This mode acts as
a wizard within the Actions panel to let you use a series of menus, buttons,
72_607466-bk07ch07.indd 78872_607466-bk07ch07.indd 788 5/25/10 9:01 AM5/25/10 9:01 AM
Book VII
Chapter 7
Controlling Your
Movie with
ActionScript
789
Getting to Know ActionScript
and text boxes to build scripts without having to get into the nuts and bolts
of writing code by hand. Script Assist mode helps prevent time-consuming
errors so that you spend more time being creative and less time trouble-
shooting.

Figure 7-2:
The Actions

panel.


To enable Script Assist mode, click the Script Assist icon in the upper-right
corner of the Actions panel.
Previewing ActionScript
ActionScript is understood and processed within Flash Player, so most
scripted movies need to be tested by choosing Control➪Test Movie.
In some cases, you can also enable simple actions in the authoring environ-
ment so that you can see your work in progress while still working from the
timeline.
ActionScript 3.0 versus ActionScript 2.0
Since its introduction in Flash Player 9, ActionScript version 3.0 has brought
many major changes and improvements to the way ActionScript performs
and to the way it’s created within movies.
Previous versions of ActionScript (1.0+, 2.0) are still in use among some
Flash projects, so you still have options for creating or saving movies with
older ActionScript version settings, if necessary.
If you have worked with older versions of ActionScript, you should be aware
of some key differences:
72_607466-bk07ch07.indd 78972_607466-bk07ch07.indd 789 5/25/10 9:01 AM5/25/10 9:01 AM
790
Creating ActionScript with the Actions Panel
✦ ActionScript 3.0 can only be placed on keyframes in the timeline or
external (.as) files. You cannot place ActionScript 3 statements directly
on symbol instances.
✦ ActionScript 3.0 is stricter about a number of coding practices. Actions
that Flash Player would normally “let slide” in ActionScript 2 may cause
errors in ActionScript 3.
✦ ActionScript 3.0 projects can be published only to Flash Player 9 or

later. This consideration is important if your project or company limits
the use of Flash Player to version 8 or earlier.

If you’re a first-time coder or have never worked with scripting or program-
ming languages, some concepts in ActionScript 3.0 may present a significant
learning curve.
In the interest of keeping with best practices and taking advantage of the
latest tools in Flash CS5, this chapter covers only ActionScript 3.0.
Specifying the correct publish settings
When you choose to create a new Flash file, you can select an ActionScript
2.0 or 3.0 version file. If you’re adding ActionScript to an existing Flash
file, you should verify and adjust the ActionScript version in your Publish
Settings to match the version you’ve chosen to work in.
ActionScript versions are matched to specific versions of Flash Player, and
3.0 scripts don’t work in a version 2.0 movie (and vice versa).
To verify and select the appropriate ActionScript version, choose File➪
Publish Settings; click the Flash tab and choose ActionScript Version 2.0 or
ActionScript Version 3.0 from the Script drop-down list.
The Flash Player and ActionScript version shows in the Property inspector
panel when no tools or objects are selected.
Creating ActionScript with the Actions Panel
The Code Snippets panel is a helpful way to get up and running, but when
you’re ready to venture out on your own, you’ll find that coding using the
Actions Panel’s Code Editor window may give you more flexibility for certain
tasks.
All ActionScript code is added to keyframes on the timeline, and here you’ll
add some common ActionScript statements within the Code Editor (see the
top of Figure 7-3) and with the assistance of the Actions Panel’s Script Assist
mode (see the bottom of Figure 7-3).
72_607466-bk07ch07.indd 79072_607466-bk07ch07.indd 790 5/25/10 9:01 AM5/25/10 9:01 AM

Book VII
Chapter 7
Controlling Your
Movie with
ActionScript
791
Creating ActionScript with the Actions Panel

Figure 7-3:
The Actions
Panel lets
you create
code by
freely typing
in the Code
Editor
window
(top) or
building
scripts
by using
the Script
Assist mode
(bottom).

Adding a stop()
The stop() statement does exactly what it sounds like: It stops the timeline
at whatever frames it’s placed on. A common use of stop() is to keep a
movie from looping, which is the default behavior for Flash Player.
Follow these steps to create a stop action in your movie:

1. On a new layer, create a motion or shape tween from frames 1
through 24 and press Enter or Return to play back and preview the
animation.
For more information on creating tweens, see Chapter 3 of this
minibook.
72_607466-bk07ch07.indd 79172_607466-bk07ch07.indd 791 5/25/10 9:01 AM5/25/10 9:01 AM
792
Creating ActionScript with the Actions Panel
2. Click the New Layer button below the timeline to create a new layer
and name it Actions. If necessary, drag the layer upward so that it’s
the topmost layer in the stack.
This dedicated layer is where you add ActionScript to control your new
motion tween.
3. Add a keyframe on frame 24 of the new Actions layer with the F6
shortcut key.
4. Select the keyframe and choose Window➪Actions to launch the
Actions panel.
5. In the Actions panel, locate the Script Assist button and click it.
The top panel expands, and you’re now working in Script Assist mode.

You can add ActionScript to keyframes with existing content, but it’s
always a good practice to separate scripts from visual elements on the
stage by creating a dedicated layer for your ActionScript.
6. Click the plus sign at the top of the Actions panel and choose flash.
display➪MovieClip➪Methods➪Stop.
7. Specify in the Object text box the name of the object you want to con-
trol. Because you’re stopping the current (main) timeline, enter the
word this in place of the not_set_yet text in the Object text box, as
shown at the top of Figure 7-4.
The actions panel reads

import flash.display.MovieClip;
this.stop();
Take a look at your timeline (refer to the bottom of Figure 7-4), and
you’ll notice that a lowercase a now appears inside the keyframe, which
indicates that there is ActionScript on the keyframe. These scripts run
when the playhead passes that keyframe.
8. Choose Control➪Test Movie to preview your movie.
The animation plays until frame 24 and then stops.
Using goto: gotoAndPlay() and gotoAndStop()
To loop a movie or to send the playhead to a different point on the timeline,
you can tell your movie to jump forward or backward to a specific frame
with one of two variations of the goto statement: gotoAndPlay() and
gotoAndStop().
Each of these two statements requires a frame name or number so that Flash
Player knows where to send the playhead. When placed on a frame, these
actions send the playhead forward or backward to the specified frame and
stop, or they resume playback from that point.
72_607466-bk07ch07.indd 79272_607466-bk07ch07.indd 792 5/25/10 9:01 AM5/25/10 9:01 AM
Book VII
Chapter 7
Controlling Your
Movie with
ActionScript
793
Creating ActionScript with the Actions Panel

Figure 7-4:
The Actions
panel view,
showing a

stop()
action (top);
a lowercase
a indicates
that
ActionScript
has been
added to
frame 24 of
the Actions
layer
(bottom).

Indicates ActionScript on the keyframe
To use gotoAndStop, follow these steps:
1. On the Actions layer, select and create a new keyframe at frame 23.
2. Choose Window➪Actions to open the Actions panel.
3. Click the plus sign and choose flash.display➪MovieClip➪Methods➪
gotoAndStop.
4. In the Object field, target the current timeline by typing this in the
Object text box. Enter 1 in the Frame text box and make sure the
Scene text box is empty.
The statements should now read
import flash.display.MovieClip;
this.gotoAndStop(1);
5. Choose Control➪Test Movie to preview your movie.
The tween plays and jumps to the first frame, where it stops.
72_607466-bk07ch07.indd 79372_607466-bk07ch07.indd 793 5/25/10 9:01 AM5/25/10 9:01 AM
794
Creating ActionScript with the Actions Panel

Follow these steps to use gotoAndPlay():
1. Create a new keyframe at frame 22 on the Actions layer and launch
the Actions panel with the new keyframe selected.
2. Click the plus sign and choose flash.display➪MovieClip➪Methods➪
gotoAndPlay.
In the Object text box, have the timeline refer to itself by typing this.
3. Enter 5 in the Frame text box and make sure the Scene text box is
empty (see Figure 7-5).
The actions should now read
import flash.display.MovieClip;
this.gotoAndPlay(5);

Figure 7-5:
The
gotoAnd
Play()
action,
placed in
ActionScript
3.0.

4. Choose Control➪Test Movie to preview your movie.
The animation plays until frame 22 and loops between frames 5 and 22.
Using frame labels
Many statements (like the goto statements described in the preceding sec-
tion) reference exact frame numbers to navigate the timeline. If you happen
to change the placement of something on your timeline (such as the start or
end of an animation), frame numbers may become inaccurate. For cases like
these, you can assign names directly to keyframes on the timeline that you
can call directly from ActionScript.

72_607466-bk07ch07.indd 79472_607466-bk07ch07.indd 794 5/25/10 9:01 AM5/25/10 9:01 AM
Book VII
Chapter 7
Controlling Your
Movie with
ActionScript
795
Creating ActionScript with the Actions Panel
Frame labels are familiar names you can assign to any keyframe (such as
start, end, or big_finale). You can then tell ActionScript to jump to
these frames by name as an alternative to using a frame number. If the loca-
tion of the named frame changes, scripts still function as long as the label
name is the same. When you move a keyframe, the label you assign to it
moves with it.
Here’s how to modify a button to use a frame label instead of a frame
number:
1. Create a new layer on the timeline and assign it the name Labels.
This name is arbitrary, but it’s always a good idea to name layers as
intuitively as possible.
2. Select frame 1 of your new layer.
3. Enter top in the text box shown in the Label area of the Property
inspector (see Figure 7-6).
For example, we assigned this keyframe the label name top.

Figure 7-6:
Assign any
keyframe a
label name
with the
Property

inspector.

72_607466-bk07ch07.indd 79572_607466-bk07ch07.indd 795 5/25/10 9:01 AM5/25/10 9:01 AM
796
Creating Button Symbols
4. Select frame 22 of your Actions layer and choose Window➪Actions to
open the Actions panel (if it’s not already open).
If you haven’t already, follow the steps in the previous section, “Using
goto,” to add a gotoAndPlay() statement.
5. Locate the line that reads gotoAndPlay(5). Replace 5 with the name
of the new frame label (top) in double quotes, as shown in Figure 7-7.
The code now reads
gotoAndPlay (“top”);

Figure 7-7:
Replace
the frame
number with
the frame
label you
assigned.

6. Choose Control➪Test Movie to preview your changes.
Click the Rewind button and you see the animation jump to frame 5 and
stop just as it did earlier. This time, however, the code uses a frame
label instead of an absolute frame number.
Now, no matter where you move the keyframe, the script follows auto-
matically as long as the frame label remains the same.
Creating Button Symbols
In everyday life, buttons give you control over your world, whether it’s

switching on a light or your TV at home or navigating Web pages and e-mail
messages online. To make your movies better, you can use buttons to give
users control over the action with timeline control and navigation.
72_607466-bk07ch07.indd 79672_607466-bk07ch07.indd 796 5/25/10 9:01 AM5/25/10 9:01 AM
Book VII
Chapter 7
Controlling Your
Movie with
ActionScript
797
Creating Button Symbols
In Flash, buttons are special symbol types built to respond to mouse or key-
board interaction such as clicks, rollovers, and specific key presses. When
paired with ActionScript, buttons can be used for just about any navigation
or control task. Buttons are created in the same way as other symbol types,
and you can easily drag instances to the stage from your library to create
more buttons.
Buttons truly come to life after ActionScript is added, but you must under-
stand how to create proper buttons before wiring them up.
Creating a new button
As with graphical symbols, you can create buttons from existing content on
the stage or as new empty symbols to which you can add content later.
Follow these steps to create a new button symbol from existing content:
1. On a new layer in your document, create a new, solid shape on the
stage that you want to use as a button and select the shape with the
Selection tool.
2. Choose Modify➪Convert to Symbol.
The Convert to Symbol dialog box appears.
3. Enter a name for your new button in the Name text box and choose
Button from the Type drop-down list.

4. Click OK to create the button.
Choose Window➪Library to launch the Library panel, and you see the new
symbol with the special button icon next to it.
Understanding button states
Take a look inside your button by double-clicking it on the stage or in the
Library panel; its unique timeline contains four specially marked frames: Up,
Over, Down, and Hit. Each frame represents a button state, or the appear-
ance of a button, as it interacts with a mouse in different ways.
Each frame, or state, can contain unique artwork so that your button can
change appearance as it’s clicked, pressed, or released. You can even add
layers inside your button to stack artwork for more creative flexibility. This
list describes the states and what they represent:
✦ Up: The appearance of your button when it’s not pressed or rolled over.
This state is the one you see most of the time as the button sits on the
stage.
72_607466-bk07ch07.indd 79772_607466-bk07ch07.indd 797 5/25/10 9:01 AM5/25/10 9:01 AM
798
Creating Button Symbols
✦ Over: The appearance of the button when the mouse pointer rolls over
it. Adding unique content to this frame creates the rollover effect that
many people know and love from using Web buttons.
✦ Down: The appearance of the button when it’s clicked and the mouse
button is held down.
✦ Hit: Contents aren’t visible, but this state sets the hot spot, or clickable
area, of your button. If the Hit frame is empty, it uses the shape on the
last available state by default. You can create a more specific clickable
area if you want to give users more or less area to work with or you want
to simplify usability for odd-shaped buttons.

Use a filled shape in the Hit frame so that the user has no problem inter-

acting with your button.
Adding content to button states
You can add content to each frame of your button to make it complete:
1. If it’s not already open, edit your new button by double-clicking it on
the stage or in the Library panel.
You should have some content on the Up state from when you created
the button. Now you can define content for remaining states as well.
2. Select the Over frame on the button’s timeline and add a new key-
frame with the F6 shortcut key.
3. Use the Selection tool or Property inspector or another drawing tool
to modify the artwork on the Over frame (see Figure 7-8).
4. Select the Down frame and insert a new keyframe by using the F6
shortcut key.
5. Modify or add content to the Down frame.
This step determines how the button appears when the user clicks and
holds down the mouse button.
6. Select the Hit frame and create a new keyframe by pressing the F6
shortcut key.
7. Use existing artwork that’s copied to this keyframe or one of the shape
tools to fill this frame with a large, filled Hit area.
8. Exit the button by clicking Scene 1 above the stage.
9. Choose Control➪Test Movie to preview your movie.
Rollover and click your new button to see the different states in action.
72_607466-bk07ch07.indd 79872_607466-bk07ch07.indd 798 5/25/10 9:01 AM5/25/10 9:01 AM
Book VII
Chapter 7
Controlling Your
Movie with
ActionScript
799

Creating Button Symbols

Figure 7-8:
Modified
content
for the
Over frame
appears
when the
user rolls
the mouse
over the
button.

Enabling simple buttons
Although choosing Control➪Test Movie to preview your work is the best
way to preview buttons, you may want to see how certain elements of your
movie behave in real time on the stage. To see buttons in action on the stage
as you build your movie, you can choose Control➪Enable Simple Buttons.
You then see buttons as they would appear and respond to a user in Flash
Player.

Buttons can’t be selected or modified on the stage with Enable Simple
Buttons mode active; you must disable Enable Simple Buttons to apply
actions or transformations or to edit the button in place.
Modifying button instances
Individual button instances can have unique transformations and color
effects applied, just like graphic symbol instances. In addition, each
button can have a unique ActionScript applied to it, so you can use several
instances of a single button symbol to create an entire menu or control bar.

Here’s how to add and modify additional instances of your button on the
stage:
72_607466-bk07ch07.indd 79972_607466-bk07ch07.indd 799 5/25/10 9:01 AM5/25/10 9:01 AM
800
Putting It All Together: Creating a Simple Photo Viewer
1. Choose Window➪Library to make sure that the Library panel is
visible.
2. Drag two more instances of your button symbol to the same layer as
your existing button instance.
If necessary, position the buttons so that they’re spread apart from each
other.
3. Select one of the button instances and choose Window➪Properties.
The Property inspector opens.
4. Choose Tint from the Style drop-down list in the Color Effect section.
5. Select a color and set the tint percentage to 100 percent.
The button becomes tinted with the chosen color.
6. Select a different button instance, choose the Transform tool from
the Tools panel, and use the Transform tool to resize or rotate the
selected button.
Preview buttons by choosing Control➪Test Movie or Control➪Enable Simple
Buttons.
Putting It All Together: Creating
a Simple Photo Viewer
After you’ve created buttons and gotten a taste of adding ActionScript to the
timeline, you put it all together by “wiring up” a photo viewer on the main
timeline with ActionScript. The Code Snippets panel does most of the heavy
lifting here, but your understanding of the Actions panel and modifying
statements will prove quite handy.
For this photo viewer example, create a new Flash file by following these
steps:

1. Import five unique photos or graphics to your Library.
For more information on importing images, refer to Chapter 5 of this
minibook.
2. Create a button symbol that can represent both Forward and
Backward buttons.
For instance, create a right-pointing arrow that can be flipped over.
3. On the main timeline, create a new layer and add four keyframes back
to back (totaling five); on each of those keyframes, place a unique
image or graphic from your Library so that you have five images on
consecutive keyframes.
72_607466-bk07ch07.indd 80072_607466-bk07ch07.indd 800 5/25/10 9:01 AM5/25/10 9:01 AM
Book VII
Chapter 7
Controlling Your
Movie with
ActionScript
801
Applying Code Snippets
4. Create a new layer and add two button instances to it.
One button should represent a Previous button on the left side of the
stage; the other one, a Next button on the right side of the stage.
5. Create a new layer and use the Text tool to create a piece of type that
reads “Made with Adobe Flash CS5” on the stage. Place it in the lower-
right corner of the stage.
For more information on creating text on the stage, refer to Chapter 2 of
this minibook.
Your photo viewer should look similar to the one in Figure 7-9.

Figure 7-9:
Set up

your photo
viewer
movie as
shown here:
one layer
for the five
photos and
images, one
for buttons,
and one for
text.

Poster images designed by and courtesy of Jambone Creative (www.jambonecreative.com)
Applying Code Snippets
The addition of the new Code Snippets panel brings ActionScript within
reach for many more Flash users, and provides precreated code fragments
for most every common need.
72_607466-bk07ch07.indd 80172_607466-bk07ch07.indd 801 5/25/10 9:01 AM5/25/10 9:01 AM
802
Applying Code Snippets
For designers and developers who are experienced in writing their own
ActionScript code, the Code Snippets panel can be a valuable tool for creat-
ing and managing your own, custom fragments of code that are applied in
one click to save typing time.
In the following section, you can explore how to use the Code Snippets panel
to carry out common scripting tasks and bring your photo viewer movie to
life.
Stopping the main timeline
If you followed the photo viewer example in the following section, and
attempt to preview that movie now, you’ll notice that the timeline runs on its

own, causing it to rapidly flip through the images you’ve placed on the main
timeline (five of them, if you’re following along from the previous section).
Because the idea was to create a photo viewer, a user should be able to
determine when the next photo is viewed, so you need to stop the timeline
at each photo to give her a chance to view it.
To stop the timeline at specific points, follow these steps:
1. Preview your movie by choosing Control➪Test Movie (Windows) or
Command➪Test Movie (Mac).
Notice that the timeline plays through continuously. The stop actions
you add soon will fix this problem.
2. Close Flash Player and return to your Flash document.
3. In the Timeline panel, drag the playhead to the beginning of the time-
line (Frame 1).
4. Choose Window➪Code Snippets to open the Code Snippets panel,
or expand it from its icon view in the panel group on the right (see
Figure 7-10).

You can undock the Code Snippets panel for easier access by dragging
the panel out of its group on the right-hand side.
5. Locate and expand the Timeline Navigation folder in the Code
Snippets panel.
6. Double-click the snippet labeled Stop at This Frame.
A new layer (named Actions) is added to the timeline, and a stop action
is added at Frame 1.


Every time a code snippet is added, the Actions panel opens to show
you the code that was created. A quick and easy way to return to the
Code Snippets panel is to use the Code Snippets button at the top of the
Actions panel.

72_607466-bk07ch07.indd 80272_607466-bk07ch07.indd 802 5/25/10 9:01 AM5/25/10 9:01 AM
Book VII
Chapter 7
Controlling Your
Movie with
ActionScript
803
Applying Code Snippets

Figure 7-10:
Expand
the Code
Snippets
panel
from the
collapsed
panel
group in
the default
(Essentials)
workspace.

7. Repeat Step 6 for Frames 2, 3, 4 and 5, respectively, so that you have a
stop on each of the five frames.
When you complete this step, your movie should resemble Figure 7-11.
8. Preview your movie by choosing Control➪Test Movie (PC) or
Command➪Test Movie (Mac).
This time, you remain stopped at frame 1.

Figure 7-11:

Use the
Code
Snippets
panel to
stop the
timeline at
each of the
five frames
of your
movie.

Poster images designed by and courtesy of Jambone Creative (www.jambonecreative.com)
72_607466-bk07ch07.indd 80372_607466-bk07ch07.indd 803 5/25/10 9:01 AM5/25/10 9:01 AM
804
Applying Code Snippets
Creating the previous and next buttons
After your timeline is under control, you need to give users the ability to
move back and forth between the images you’ve placed across the timeline.
As suggested by the movie setup described earlier in the “Putting It All
Together” section, you should have a layer on the main timeline with two
button instances — one that represents the Previous button and another
that represents the Next button.
You can use two instances of the same button symbol or instances of two
unique symbols in the library. Follow these steps to create the buttons:
1. Drag the playhead to Frame 1.

The code you add for your buttons must be added at the beginning of
the movie.
2. Click and select a button to use for the Previous button on the stage.
3. If the Code Snippets panel isn’t already visible, choose Window➪Code

Snippets to open it, or expand it from its icon view in the panel group
on the right.
4. In the Code Snippets panel, click to expand the Timeline Navigation
category.
5. Locate and double-click the Click to Go to Previous Frame and Stop
code snippet.
This step adds some new ActionScript to the existing Actions layer,
which is tied to your selected button.
6. A prompt lets you know that Flash will create an instance name for
the new button automatically; click OK.
7. Click to select the button you’ll use for the Next button on the stage.
About instance names
Every time you need to add ActionScript to
control a button (or a movie clip), you first
need to create an instance name for the
button. An instance name is a unique ID that
tells ActionScript which object on the stage to
control or work with. The Code Snippets panel
automatically assigns an instance name to a
selected button or movie clip when you apply
a snippet. You can also add your own instance
name by selecting the symbol instance and
entering an instance name in the Property
inspector.
Instance names can be assigned to buttons,
movie clips, and certain text fields. Each
instance name needs to be unique, even across
several instances of the same symbol.
72_607466-bk07ch07.indd 80472_607466-bk07ch07.indd 804 5/25/10 9:01 AM5/25/10 9:01 AM
Book VII

Chapter 7
Controlling Your
Movie with
ActionScript
805
Applying Code Snippets
8. Within the Code Snippets panel, you should already have expanded
the Timeline Navigation category. Locate and double-click the Click to
Go to Next Frame and Stop code snippet.
This step adds code to the Actions layer, as shown in Figure 7-12.

Figure 7-12:
On Frame 1
of the
timeline, use
the Code
Snippets
panel to add
the code
that makes
your button
advance the
slide show.

9. Save your movie by choosing File➪Save. Next, you test it to see your
new code in action.
10. Choose Control➪Test Movie.
When your movie launches in Flash Player, click the Next button a
couple of times to advance through your images. Click the Previous
button to navigate backward.

Linking to a Web site or Web page
Users move around the Web by using buttons or hyperlinks to navigate to
Web pages within a site or to other Web sites.
You can easily link to a Web site or Web page within Flash movies by using a
button or piece of text and a bit of code help from the Code Snippets panel.
For your photo viewer, you link the text you placed on the stage to the
Adobe Web site to let users know just how cool Flash is!
72_607466-bk07ch07.indd 80572_607466-bk07ch07.indd 805 5/25/10 9:01 AM5/25/10 9:01 AM
806
Applying Code Snippets
To create a clickable link to a Web site or Web page, follow these steps:
1. Drag the playhead to Frame 1 on the timeline.

As with buttons, you add code for a text box at the beginning of the
timeline.
2. Use the Selection tool to click and select the text box you created on
the stage when you set up your movie.
3. If the Code Snippets panel isn’t already visible, choose Window➪Code
Snippets to open it, or expand it from its icon view in the panel group
on the right.
4. In the Code Snippets panel, click to expand the Actions category.
5. Locate and double-click the Click to Go to Web Page code snippet,
shown in Figure 7-13.
This step adds some new ActionScript to the existing Actions layer,
which is tied to your selected button.

Figure 7-13:
Use the
Code
Snippets

panel to
open a
browser and
go to a Web
page when
clicked.

You see a prompt that lets you know Flash will create an instance name
for your text field automatically; click OK.
72_607466-bk07ch07.indd 80672_607466-bk07ch07.indd 806 5/25/10 9:01 AM5/25/10 9:01 AM
Book VII
Chapter 7
Controlling Your
Movie with
ActionScript
807
Applying Code Snippets
6. When the Actions panel opens to show you the new code that has
been created, as shown in Figure 7-14, take a moment to review it.
Notice that the Adobe Web site (www.adobe.com) has automatically
been inserted as the default. Keep in mind, however, that you can edit
this Web address to make your text link to any site you want.

Figure 7-14:
You can
modify
the Web
address
placed by
the Code

Snippets
panel in
the Actions
panel. The
Adobe Web
site address
is used by
default as a
placeholder.

7. Save your movie and choose Control➪Test Movie to preview it.
Click the text field. Your default system browser opens to the Adobe
Web site.
72_607466-bk07ch07.indd 80772_607466-bk07ch07.indd 807 5/25/10 9:01 AM5/25/10 9:01 AM
808
Book VII: Flash Professional CS5
72_607466-bk07ch07.indd 80872_607466-bk07ch07.indd 808 5/25/10 9:01 AM5/25/10 9:01 AM
Chapter 8: Getting Into
the (Work)Flow
In This Chapter
✓ Creating and managing workspace layouts
✓ Setting up grids and guides
✓ Using snap options and the Align panel
✓ Using animation helpers
✓ Creating custom keyboard shortcuts
✓ Using the Movie Explorer panel
S
ometimes the difference between a good project and a great project
is having a seamless workflow. Visual aids, such as guides and grids,
alignment aids, and proper placement of tools and panels are essential parts

of creating better movies in less time. The Flash workspace is highly cus-
tomizable so that you can work in the most efficient way possible and spend
more time being creative. Flash CS5 includes a new, easy-to-use interface as
well as some helpful workspace presets for most every type of user.
Using Workspace Layouts
Your Flash workspace consists of all the panels and tools you rely on, so
why not take some time to customize it? You can save the position and
appearance of these essential components by creating custom workspace
layouts.
Workspace layouts take a snapshot of the appearance and position of
panels you’re using so that you can recall that same configuration at any
time. You can save as many workspace layouts as you want for different
projects or different designers who may share the same computer with you.
Choose Window➪Workspace to recall, save, reset, or manage your work-
space layouts.

Flash CS5 comes with several layout presets: Animator, Classic, Debug,
Designer, Developer, Essentials, and Small Screen. You can select and use
these layouts as a starting point for a new workspace layout or to reset the
workspace. The default layouts can’t be deleted or overwritten (even by
saving a layout under the same name).
73_607466-bk07ch08.indd 80973_607466-bk07ch08.indd 809 5/25/10 9:02 AM5/25/10 9:02 AM