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

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

Book VII Chapter 6

trans-Follow these steps to create a tween with 3D properties:

dragging it from the Library panel.

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

circular handles appear around the instance.

and a position.

movie clip tweens from its original 2D position to the 3D settings you applied, as shown in Figure 6-8.

movie clip slide in three dimensions.

786 Book VII: Flash Professional CS5

Chapter 7: Controlling Your Movie with ActionScript

In This Chapter

Whether 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

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,

Book VII Chapter 7

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

environ-ActionScript 3.0 versus environ-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:

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 ming languages, some concepts in ActionScript 3.0 may present a significant learning curve

program-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)

Book VII Chapter 7

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:

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

792 Creating ActionScript with the Actions Panel

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

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

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

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

Book VII Chapter 7

Indicates ActionScript on the keyframe

To use gotoAndStop, follow these steps:

gotoAndStop.

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);

The tween plays and jumps to the first frame, where it stops

794 Creating ActionScript with the Actions Panel

Follow these steps to use gotoAndPlay():

the Actions panel with the new keyframe selected.

gotoAndPlay.

In the Object text box, have the timeline refer to itself by typing this

empty (see Figure 7-5).

The actions should now read

import flash.display.MovieClip;

this.gotoAndPlay(5);

Figure 7-5:

The gotoAndPlay() action, placed in ActionScript 3.0

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 tion) reference exact frame numbers to navigate the timeline If you happen

sec-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

Book VII Chapter 7

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:

This name is arbitrary, but it’s always a good idea to name layers as

intuitively as possible

inspector (see Figure 7-6).

For example, we assigned this keyframe the label name top

796 Creating Button Symbols

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

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

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 matically as long as the frame label remains the same

auto-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

Book VII Chapter 7

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 stand how to create proper buttons before wiring them up

under-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:

stage that you want to use as a button and select the shape with the Selection tool.

The Convert to Symbol dialog box appears

Button from the Type drop-down list.

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:

This state is the one you see most of the time as the button sits on the stage

798 Creating Button Symbols

it Adding unique content to this frame creates the rollover effect that many people know and love from using Web buttons

button is held down

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 acting with your button

inter-Adding content to button states

You can add content to each frame of your button to make it complete:

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

key-frame with the F6 shortcut key.

to modify the artwork on the Over frame (see Figure 7-8).

shortcut key.

This step determines how the button appears when the user clicks and holds down the mouse button

shortcut key.

tools to fill this frame with a large, filled Hit area.

Rollover and click your new button to see the different states in action

Book VII Chapter 7

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:

800 Putting It All Together: Creating a Simple Photo Viewer

visible.

your existing button instance.

If necessary, position the buttons so that they’re spread apart from each other

The Property inspector opens

The button becomes tinted with the chosen color

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:

For more information on importing images, refer to Chapter 5 of this minibook

Backward buttons.

For instance, create a right-pointing arrow that can be flipped over

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.

Book VII Chapter 7

801

Applying Code Snippets

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

reads “Made with Adobe Flash CS5” on the stage Place it in the 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

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

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:

Notice that the timeline plays through continuously The stop actions you add soon will fix this problem

time-line (Frame 1).

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

Snippets panel.

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

Book VII Chapter 7

stop on each of the five frames.

When you complete this step, your movie should resemble Figure 7-11

This time, you remain stopped at frame 1

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:

The code you add for your buttons must be added at the beginning of the movie

Snippets to open it, or expand it from its icon view in the panel group

This step adds some new ActionScript to the existing Actions layer,

which is tied to your selected button

the new button automatically; click OK.

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

Book VII Chapter 7

805

Applying Code Snippets

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

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!

806 Applying Code Snippets

To create a clickable link to a Web site or Web page, follow these steps:

As with buttons, you add code for a text box at the beginning of the timeline

the stage when you set up your movie.

Snippets to open it, or expand it from its icon view in the panel group

on the right.

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

Book VII Chapter 7

807

Applying Code Snippets

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

Click the text field Your default system browser opens to the Adobe Web site

808 Book VII: Flash Professional CS5

Chapter 8: Getting Into the (Work)Flow

In This Chapter

Sometimes 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 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

cus-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 space layouts

work-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)

810 Using Workspace Layouts

Creating new layouts

Before creating a new workspace layout, open any panels you need, close any panels you don’t use often, and position and size them exactly how you think is best All panels can be toggled on or off from the Window menu

Grouping options for each panel are available under their respective panel menus, or you can drag and drop panels on top of one another to group them

To create a new workspace layout, follow these steps:

You can also collapse any panels or groups to Icon mode to maximize the screen area

A dialog box appears, prompting you to name the new layout

The new workspace is created

You see the new workspace as an available selection

Managing layouts

After you create workspace layouts, you can rename, delete, or update them

as needed Deleting layouts you no longer use is good practice so that you can keep the list manageable Also rename layouts to indicate when they were created (for example, MyLayoutFeb2010) You can manage layouts by using the Manage panel

To delete a layout, choose Window➪Workspace➪Manage Workspaces

Select the layout you want to delete and click the Delete button Click OK to

close the Manage Workspaces dialog box Note: You can’t undo this action,

but a dialog box gives you the same warning and a chance to change your mind

To rename a layout, choose Window➪Workspace➪Manage Workspaces

Select the layout you want to rename and click the Rename button Enter the new name in the Name text box, click OK, and then click OK again to close the dialog box

To update (or overwrite) an existing layout, recall the layout by choosing it from the Workspace menu Make any adjustments to your workspace and choose Window➪Workspace➪New Workspace When prompted, assign it

Book VII Chapter 8

811

Fine-Tuning with Grids and Guides

the name of the layout you’re trying to update A warning alerts you that you’re about to replace an existing layout by the same name; click OK to overwrite the layout with the new changes

To condense right-side panels to Icon view, collapse the entire panel group

by using the double arrows in the upper right corner of the screen To hide the labels and view the icons alone, hover over the edge of the panel group until you see the double arrows Click and drag the panel to resize it to be as narrow as possible

Fine-Tuning with Grids and Guides

Having lots of visual aides at your fingertips is indispensable when you need

to line up, arrange, or measure objects on the stage with absolute accuracy

You’ll want some designs to take advantage of the place-it-anywhere ity that Flash provides, but other designs demand more precise control over placement and sizing In these cases, you can take advantage of the large array of Flash visual aids and helpers, many of which you can enable and set from the View menu

flexibil-These visual aids don’t appear in any way in your final movie; they’re strictly for your benefit during the design and building process

Enabling rulers and guides

The Flash built-in rulers appear on the top and left edges of the stage and are used to position and measure objects on the stage You also use the rulers

to create vertical and horizontal guides by dragging them off the ruler bars

Ruler units are in pixels by default, but you can choose Modify➪Document

to change to other measurement units, such as inches, centimeters, or millimeters

The top ruler represents the X, or horizontal axis, and the left ruler sents the Y, or vertical axis The upper left corner of the stage represents

repre-absolute 0 for both X and Y, with X increasing as you move right and Y increasing as you move down

To set up and use rulers and guides, follow these steps:

The rulers appear on the top and left edges of your stage

Markers on both rulers follow to indicate your X and Y positions and the width of your selection area Now you can create guides that you can use to position artwork on the stage

812 Fine-Tuning with Grids and Guides

You’re carrying a guide with you while you drag

Position this one slightly above the one you previously created — for

example, place it at 100 pixels

in Figure 8-2.

Use a large enough font that you can easily see and drag the new text.

bottom of the text snaps in place on the lower guide you’ve created.

Book VII Chapter 8

Your text snaps easily to the new guides because of a built-in mechanism —

snapping Think of snapping as turning on a magnetic force that allows

objects to adhere to each other or to visual helpers (such as guides) to make positioning easier By default, Snap Align, Snap to Guides, and Snap to Objects are enabled (choose View➪Snapping) You can also enable Snap to Pixels and Snap to Grid

Enabling the grid

If you’ve ever drawn on graph paper, you know how fun it can be to follow the lines and create perfect shapes and drawings As with good old graph paper, you can enable and use the Flash grid to draw and position objects and create precise layouts by just following the lines As with guides, you can snap type, drawing objects, and symbols to gridlines You can also draw along gridlines to easily measure and match shapes

To enable the grid, choose View➪Grid➪Show Grid (see Figure 8-3) To take full advantage of the grid, choose View➪Snapping➪Snap to Grid to make it

magnetic.

814 Fine-Tuning with Grids and Guides

Figure 8-3:

You can position objects and draw on top

of the grid

Follow these steps to draw and position objects with the grid:

grid.

None.

The shape snaps to the nearest gridline while you draw

place.

When you move objects along the grid, they snap by their registration point to the gridlines You can use the gridlines to snap objects (includ-ing type) to the exact position you want, as shown in Figure 8-4

To customize the appearance of your grid, choose View➪Grid➪Edit Grid

From this dialog box, you can specify the grid’s size and color and the ping accuracy

snap-www.zshareall.com

Book VII Chapter 8

To experiment with the Align options, create a new layer, draw a shape on the stage, and place it on the bottom below any graphics you already have

on the stage Then follow these steps to align and distribute two or more graphics:

The first row contains all the Align buttons, broken down into two groups: vertical and horizontal

816 Aligning Artwork

and uncheck it.

You can see in the next section what effect this step has

horizontally by their top edge.

The graphics reposition themselves so that they’re all flush by the top edge Align selected graphics horizontally with each other with the but-tons under the Align row The second row contains buttons that evenly distribute graphics vertically or horizontally by their center, top, or bottom edges

Center) to distribute graphics based on their center points, as shown

in Figure 8-5.

Figure 8-5:

Distribute graphics horizontally across the stage

Distributing to the stage

The Align to Stage check box (located on the bottom of the Align panel) can

be selected so that any distribution uses the stage as a point of reference

The distribute options are useful if you want to distribute objects across the full width of the stage regardless of their distance from each other

To distribute objects across the stage, follow these steps:

aren’t selected, use the Selection tool to reselect them by dragging a selection area around them on the stage.

Book VII Chapter 8

817

Aligning Artwork

The graphics redistribute and spread across the full width of the stage,

Using Match Size options

If you need to resize two or more objects on the stage so that they’re all the same width and height, you can take advantage of the Match Size options

in the Align panel Match Size options can conform two objects to the same width or height, or both

To match two objects in size, follow these steps:

objects on the stage.

open).

the Align panel.

click the last button of the three (Match Width and Height).

The objects resize to the same width and height, as shown in Figure 8-7

Note: You can also match only width or height by clicking either the first

or second buttons of the group, respectively

818 Experimenting with Animation Helpers

Figure 8-7:

Match the width and height of two or more graphics

With the Stage button enabled, Match Size resizes any selected objects to the full width and height of your stage Using this feature is an easy way to create a full-size background or to stretch a graphic to fit the entire stage

When you use Match Size, the largest of the selected objects always tates the resizing All other objects are resized to match the largest selected object

dic-Experimenting with Animation Helpers

Sitting discretely below the Timeline are some highly useful icons that can

be a big help while you’re developing and fine-tuning animations The Onion Skin, Onion Skin Outlines, and Edit Multiple Frames options let you view, move, and manipulate entire animations at a time to save time and guaran-tee better results

When creating animation, you can enable onion skinning to view several frames at a time With tweened animation, onion skinning can reveal all frames created between the starting and ending keyframes to help you make adjustments and see them in action You can choose between two types of onion skinning, depending on whether you want to view frames as outlines

or full-color previews

Before you get started, create a new motion tween or open a document with

an existing tween that you can use for this example

Book VII Chapter 8

819

Experimenting with Animation Helpers

To enable onion skinning, follow these steps:

A set of brackets appears above the Timeline

You see a full preview of all frames generated by your tween

You can’t select the frames shown in between, but you can move the instances on the starting and ending keyframe Select the symbol instance

on the starting keyframe of your tween and move it The onion skin reveals how the frames in between change when you shift starting or ending instances

As an alternative to seeing frames in your tween in full color, you can view them as outlines by using the Onion Skin Outlines option (see Figure 8-8) This option works exactly like the Onion Skin option but shows selected frames using a wire-frame-style outline view The Onion Skin Outlines option can be a better choice if the full-color preview looks cluttered

820 Using Keyboard Shortcuts

Using Keyboard Shortcuts

Part of creating a smooth and fast work environment is having your ite commands, panels, and tools at your fingertips Most Flash menu items and panels are equipped with shortcut key combinations that provide easy access without having to comb through several menus If you need your own, custom keyboard shortcuts, Flash lets you create and save keyboard shortcut sets that you can fully customize to speed your workflow

favor-To view the default keyboard shortcuts and create your own, choose Edit➪Keyboard Shortcuts (Windows) or Flash➪Keyboard Shortcuts (Mac)

You can map almost any available tool, command, or panel to a keyboard shortcut You can choose to memorize existing keyboard shortcuts for com-monly used items or create custom keyboard shortcuts that are more intui-tive for you

To create a new keyboard shortcut, follow these steps:

Shortcuts (Mac).

The Keyboard Shortcuts dialog box launches (see Figure 8-9)

Figure 8-9:

Drill down through the menus to select the command you want

to create a shortcut for

Book VII Chapter 8

821

Working with the Movie Explorer

left of where it reads Control.

You see all menu items on the Control menu and any keyboard cuts assigned to them

for (refer to Figure 8-9).

For this example, we selected Insert➪Motion Tween

The default set can’t be modified, so you need to duplicate the default set and make changes to the new copy

Custom Set in the Name text box when prompted; click OK to create

the new set.

beside Shortcuts to add a new shortcut for the menu item.

The word <empty> appears, ready for you to enter a keyboard shortcut

want to assign as the keyboard shortcut (for example, Ctrl+Shift+M or

Ô+Shift+M).

Use a letter or a number for a keyboard shortcut You can also use the Shift, Ctrl, and Alt keys (Windows) or Shift, Ô, and Option keys (Mac) in combination with a letter or a number to create keyboard shortcuts

You may receive a warning if the keyboard shortcut you’ve selected is already in use Make sure the shortcut isn’t assigned to a crucial menu command before you decide to overwrite it

The Shortcuts text box fills in the keyboard shortcut as you hold it Note that if the keyboard shortcut already exists, a warning appears

At any time, you can return to your custom set in the Keyboard Shortcuts dialog box to add new shortcuts or modify existing ones If at any point you want to switch sets, return to the Keyboard Shortcuts dialog box and select

a different set from the Current Set menu

Working with the Movie Explorer

As a Flash project grows and becomes more complex, moving around the document can be a bit of a guessing game As you add movie clips, ActionScript, media files, and other elements, the project’s inner workings can overwhelm even the most organized designer

822 Working with the Movie Explorer

For these cases, the Movie Explorer panel (see Figure 8-10) offers an glance view of your movie From this panel, you see exactly what’s being used and where, and you can navigate directly to any item on the list You can filter the panel to show only the types of items you want, whether it’s ActionScript, movie clips, sounds, or type, by clicking and selecting the icon buttons at the top of the panel To launch Movie Explorer, choose Window➪Movie Explorer

at-a-Figure 8-10:

The Movie Explorer panel

Chapter 9: Publishing and Final Delivery

In This Chapter

To show your creations to the world, publish the final movie with the Publish command Before publishing, you can use the Publish Settings option to specify important settings for your final movie, including quality and version settings as well as your choice of file formats Different options let you publish for the Web, CD-ROM, and even mobile phones We cover all these options in this chapter

Getting Familiar with the Publish Process

The fla or xfl files you use to build your movie are intended only for the Flash authoring environment When you’re ready to deliver a final prod-uct, create a final swf (compressed movie) file that Flash Player can dis-play in a Web browser

Flash Player is responsible for displaying your movie in Web pages and mobile phones and on CD-ROM (when packaged as a projector) Adobe AIR (Adobe Integrated Runtime) provides an environment where movies can be run as desktop applications

The Publish command, activated when you choose File➪Publish, creates your final swf file (often pronounced “swiff”) as well as additional files, such as html (Web) pages that you need to display your movie in different environments When the Publish process is complete, you can then upload completed files to the Web, copy them to CD-ROM, or package them for mobile phone delivery

824 Selecting Your Formats

Before publishing your final movie, use the Publish Settings dialog box to tell Flash exactly which files you want to generate and which settings to use for each file type You can specify settings for every file format you choose as well as quality settings for sounds and images used in your movie The file types you choose depend on your movie’s final destination, whether it‘s the Web, your desktop, a CD-ROM, a mobile device, or a standalone, kiosk-style presentation

Selecting Your Formats

Depending on where and how you plan to distribute your movie, you can have Flash create a variety of different formats at publish time Although the most common deployment for Flash is a SWF file and a companion HTML (HyperText Markup Language) file for the Web, it can generate files that can

be used for CD-ROMs and mobile phones as well

To choose file formats, choose File➪Publish Settings and open the Publish Settings dialog box (see Figure 9-1) On the Formats tab, select the check box next to each format you want to create Enter the file path in the text box or click the folder icon to browse to the destination (optional) for each file you create By default, all files use the same name and are published to the same location as the original fla file

Take a look at the different file formats you can publish and where they’re used:

Flash Player and its plug-in use Think about Flash Player as a movie jector and the SWF file as a movie reel you load on it When publishing for the Web, this file type is the one to choose, most often accompanied

pro-by an HTML (Web) page that contains it

your Flash movie when the target venue is the Web HTML files also vide an extra level of abilities, such as checking for the Flash plug-in or enabling additional runtime parameters, such as looping

selections create static images from your movie in the Web-friendly GIF, JPEG, and PNG formats (depending on which check boxes you selected)

You can use these images as placeholders (in case the user doesn’t have Flash Player or its plug-in) or as elements you can use if you’re creating

a non-Flash version of your site

Keep in mind, however, that images are generated only from the first frame of your movie, so exporting an image from it may not yield much if your movie starts out blank or with minimal content