Section 1.4. Panels | Flash Fox and Bono Bear (Chimps) (Chimps Series)

1.4. Panels

A Flash panel is like a toolbar on steroids: bigger and loaded down with more options, but built for the same reasonto let you keep the stuff you work with the most visible right there in front of you, where it's easy for you to find and use. Furthermore, unlike toolbars , panels offer options you can't find on any menu.

Flash offers you a ton of panels, each of which appears initially in one of two flavors: docked or floating . Docked panels appear outside your workspace, like the Color Mixer, Library, Property, and Actions panels shown in Figure 1-6.

UP TO SPEED
Docked vs. Floating Toolbars

A docked toolbar or panel appears attached to some part of the workspace window, while a floating toolbar or panel is one that you can reposition by dragging.

Whether you want to display toolbars and panels as docked or floating is a matter of personal choice. If you constantly need to click something on a toolbarwhich means it needs to be in full view at all timesdocked works best. But if you usually just need a toolbar or a panel for a brief time and want to be able to move it around on the screen (so it doesn't cover up something else you need to work with, for example), floating's the ticket.

To turn a docked toolbar into a floating toolbar:

Select the docked toolbar by clicking any blank spot on it . An outline appears around the toolbar to let you know you've successfully selected it.
Drag the toolbar away from the edge of the workspace window and release the mouse button . Flash displays the toolbar where you dropped it. You can reposition it anywhere you like simply by dragging it again.

Here, the Controller toolbar has been dragged to make it float.

To dock a floating toolbar, simply reverse the procedure: drag the floating toolbar to the edge of the workspace window and let go of the mouse button. When you do, Flash docks the toolbar automatically.

You can have as few or as many panels showing at a time as you like. The Window menu lists all of Flash's panels, and you show and hide them by selecting to turn their checkmark on and offexactly as with toolbars, as shown in Figure 1-5.

Besides keyboard shortcuts, there's only one way to display a panelfrom the Window menubut you have plenty of options for getting them out of your way. For example, you can click the X in the upper-right corner of a floating panel, as shown in Figure 1-6. For docked panels, you can collapse (shrink) them by clicking the down arrow in the upper-left corner.

Tip: To hide all the panels you've displayed in one fell swoop, select Window

Hide Panels or press the F4 key. You can also click the arrows just beneath (and to the right of) the workspace scroll bars. Whoosh! The panels below the Stage (or to the right of it) disappear, and you get to see a lot more of your workspace.

1.4.1. Tools Panel

All animations start with a single drawing. And to draw something in Flash, you need drawing tools: pens, pencils, brushes, colors, erasers , and so forth. The Tools panel, shown in Figure 1-7, is where you find Flash's drawing tools. Chapter 2 shows you how to use these tools to create a simple drawing; in this section, you get a quick overview of the four different sections of the Tools panel, each of which focuses on a slightly different kind of drawing tool.

Figure 1-6. Panels like the ones shown here group useful options together, so you can find what you want quickly and easily. To expand a collapsed panel and see what options it offers, click the miniscule right arrow you see next to the panel name . To collapse an expanded panel, click the miniscule down arrow.

UP TO SPEED
The Options Menu

In the upper-right corner of every expanded panel, you see a menu icon. When you click this icon, an options menu appears. The options menu is different for each panel. Here, for example, you see commands that let you edit how the Colors panel displays color choices. But a handful of options are common to all panels:

Group panel with . Displays a panel as a tab in another panel, which is a great way to save space on a crowded screen. Just like a tabbed Web browser, you can keep related panels neatly stacked together.

Close panel . Closes the panel (or tab) you're working with.

Rename panel group . Lets you rename the panel (not the tab) you're working with; for example, to a shorter name. (Flash doesn't let you open the panel by its new name in the Window menu, though.)

Maximize panel group . If the panel you're working with is docked, Flash redisplays the panel along the full length of your screen. Turning off the checkbox next to Maximize panel group minimizes the panel.

Close panel group . Closes the panel (not the tab) you're working with.

Figure 1-7. The Tools panel shows up to four different sections, each relating to a different aspect of the drawing process: Tools, View, Colors, and Options. The icons that appear in the Options section change depending on which drawing tool you select. If you like, you can drag the docked Tools panel away from the edge of the workspace and turn it into a floating panel.

1.4.1.1. Tools section

The Tools section displays the tools you need to create and modify a Flash drawing. For example, you might use the Pen tool to start a sketch, the Eyedropper to apply color, and the Eraser to clean up mistakes.

Tip: If you forget which tool does what and can't tell by looking at the icon (and frankly, it's pretty tough to tell what a black or white arrow is supposed to do), move your mouse over the icon and hold it there (don't click). After a second or two, the name of the tool pops up onscreen.

1.4.1.2. View section

At times, you'll find yourself drawing a picture so enormous you can't see it all on the Stage at one time. Or perhaps you'll find yourself drawing something you want to take a super-close look at so that you can modify it pixel by pixel. When either of these situations occurs, you can use the tools Flash displays in the View section of the Tools panel to zoom in, zoom out, and pan around the Stage. (You'll get to try your hand at using these tools later in this chapter; see Section 1.7.2.)

1.4.1.3. Colors section

When you're creating in Flash, you're drawing one of two things, a stroke , which is a plain line or outline, or a fill , which is the area within an outline. Before you click one of the drawing icons to begin drawing (or afterwards, to change existing colors, as discussed in Chapter 2) you can use these tools to choose a color from the color palette, and Flash applies that color to the Stage as you draw.

1.4.1.4. Options section

Which icons appear in the Options section at any given time depends on which tool you've selected. For example, when you select the Zoom tool from the View section of the Tools panel, the Options section displays an Enlarge icon and a Reduce icon that you can use to change the way the Zoom tool works (Figure 1-8).

Figure 1-8. On the Tools panel, when you click each tool, the Options section shows you buttons that let you modify that particular tool. In the Tools panel's View section, for example, when you click the Zoom tool, the Options section changes to show you only zooming options: Enlarge (with the plus sign) and Reduce (with the minus sign).

1.4.2. Accessibility Panel

Not everyone is blessed with perfect eyesight and hearing. To make sure vision-and hearing-impaired folks can enjoy the animations you create using Flash, you need to think about accessibility : the special techniques you can use to deliver your message via alternate means.

The Accessibility panel provides tools to help you in creating a design that provides at least some information to those whose vision or hearing is impaired. For example, using the Accessibility panel, you can give names and descriptions to certain sections of your drawingsdescriptions that can be translated into speech by an assistive screen reader device, for example. Then, when a blind person surfing the Web views your animation of a car crunching into a thick brick wall, the assistive reader can speak the words, "the car crashes into a brick wall."

Note: Obviously, it's hard to translate any primarily visual medium like Flash into one that's spoken rather than seen. It's worth the effort it takes to try, though, because doing so gives impaired folks a chance to understand what you're trying to present.

To display the Accessibility panel, select Window Other Panels Accessibility (or press Alt+F2).

1.4.3. Actions Panel/ActionScript Debugger Panel

ActionScript is a serious developer-level scripting language that lets you add interactivity to your animations by tying a graphic element (say, a button) to a specific action (say, opening up a specific Web page). In fact, that's how ActionScript got its name: it lets you tie an action to an object or element you designate . You use the Actions panel (see the next section) to build the ActionScript code that turns regular animations into interactive animations like clickable splash pages, navigation bars, and type-in forms.

UP TO SPEED
Why Accessibility Matters

The term accessibility refers to how easy it is for folks with physical or developmental challenges (such as low or no vision) to understand or interact with your animation.

As you can imagine, a Flash animationwhich often includes audio in addition to video and still imagesisn't going to be experienced the same way by someone who is blind or deaf as it is by someone who isn't impaired. But there is help. One of the features that conscientious Flash-ionados build into their animations is alternative information for those who can't see or hear. (Often, sight- and hearing-impaired folks use assistive devices to "report back" on what they otherwise can't access, so Flash animators build content into their animations that these assistive devices can access and translate.)

Thanks to U.S. legislation referred to as Section 508 , local, state and federal Web sites absolutely have to be accessible and useable to the public. But if you're a private individual planning to incorporate your animation into a Web site, you can't ignore the issue of accessibility just because nobody's looking over your shoulder and forcing you to deal with it. If you ignore accessibility, you eliminate a whole audience who might otherwise benefit from your content.

For more information on accessibility, check out these Web sites:

www.alistapart.com/articles/wiwa/
http://DiveintoAccessibility.org
http://Section508.gov
http://WebABLE.com
http://WebAIM.org
www.w3c.org/wai/

The Actions panel lets you mix and match snippets of ActionScript code to build what's called an ActionScript script , which you can then attach to one of the objects in your drawing (or one of the frames in your animation) to make your animation "smart." After you create a script, the ActionScript debugger panel lets you to troubleshoot any scripting code that's giving you trouble. You'll learn how to write and debug ActionScripts of your own in Part 3.

1.4.4. Align Panel

Sometimes dragging stuff around the stage and eyeballing it works just fine; other times, you want to position your graphic elements with pinpoint precision. Using the Align panel, you can align graphic elements based on their edges (top, bottom, right, left) or by their centers. And you can base this alignment on the objects themselves (for example, you can line up the tops of all your objects) or on the Stage (useful if you want to position, say, the bottoms of all your objects at the bottom of the Stage, as shown in Figure 1-9). You can even distribute objects evenly with respect to each other.

Figure 1-9. The Align panel gives you the opportunity to align a single object (or whole groups of selected objects) along the left side of the Stage, the right side, the top, the bottom, and more. Make sure you select the objects you want to align first; then click the alignment icon from the Align panel.

To display the Align panel, select Window Align or press Ctrl+K (Windows) or -K (Mac).

Tip: More help for aligning stuff on the Stage comes from Flash's grids, guides, and rulers, which you learn about in Chapter 2 (Section 2.1).

1.4.5. Behaviors Panel

Flash comes with several common, pre-ActionScripted snippets of code called behaviors that you can add to your animations. You'll find a behavior for most of the really basic things you want to do with ActionScript, such as triggering a sound file or jumping to a specific section of an animation.

All you have to do to use a behavior is display the Behaviors Panel (Window Behavior) shown in Figure 1-10 and then click the Add Behavior icon to display a list of available behaviors. When you do, Flash pops up a helpful window (or two) to step you through the process of customizing the behavior.

For example, if you want to trigger a sound file, you need to add the Play Sound behavior, tie it to an eventsuch as a button clicking or a frame appearingand then customize your newly added behavior by telling Flash which sound file you want it to play when the event occurs.

1.4.6. Color Mixer Panel/Color Swatches Panel

A good painter can create custom colors by mixing and matching a bunch of other colors. In Flash, you can do that, too, through the Color Mixer panel. And, if you like, you can save your custom color as a reusable color swatch in the Color Swatches tab. That way, when you get the urge to draw another puce-colored hedgehog , you'll be all set.

Figure 1-10. The easiest way to add a behavior is to select a frame or object (such as the Skip Intro button shown here) and then select Window Behavior. When you do, the Behaviors panel appears with a list of object-specific events (such as click) for you to choose from. Click Add Behavior to display a list of behaviors.

Note: Color in Flash is a huge topic. To explore it further (including how you can specify hue, saturation, and luminescence for a custom color) check out Chapter 5.

1.4.7. Common Libraries

The three Common Libraries panelsButtons, Classes, and Learning Interactionsdisplay prebuilt clips (in other words, self-contained, preconstructed Flash documents) that you can add to your animations simply by dragging them to the Stage:

Buttons . Here you'll find a wealth of cool-looking customizable push buttons, each as different from a dull gray HTML button as you can get.
Classes . Useful only to heavy-duty ActionScript programmers, these compiled clipsDataBindingClasses, UtilsClasses, and WebServiceClasseslet you transfer information between your animation and server-side programs at runtime.

Note: To access the compiled classes that appear in the Common Libraries, you need to drag them from the Common Library to your document's Library; then you need to add specific ActionScript calls to your animation. Part 3 of this book introduces you to ActionScript and shows you how to add an action to your animation. You can find out more about the compiled classes Flash offers by choosing Help Flash Help and searching All Books for the specific class youre interested in.
Learning Interactions . In this panel, you find customizable components designed specifically for folks creating Flash tutorials, including fill-in-the-blank, multiple choice, and true/false.

1.4.8. Components Panel/Component Inspector Panel

A Flash component is a reusable, self-contained, customizable, interactive graphic that you can add to your animation. Technically, you (or anyone else, for that matter) can create your own components using a combination of Flash, ActionScript, and Macromedia's special component language. But right out of the box, the only components that appear on the Components panel are standard user interface components (buttons, lists, text fields, and so on), animation controller components (MediaController, PlayButton, PauseButton, that kind of thing), and the handful of other assorted components that ship with Flash. To view and change the component's settings, all you have to do is click the component to select it and then display the Component Inspector panel by selecting Window Component Inspector (or pressing Alt+F7).

UP TO SPEED
Deciphering Components

Components aren't unique to Flash. Most programming languages provide a way to create components, which are nothing more than reusable hunks of code known in the trade as black boxes . What that means is that you don't have to know how the component code works behind the scenes in order to use it. All you have to do is put stuff in (change a couple of settings) and take stuff out (watch the component do its thing).

In days gone by, software pundits predicted that components would be the next new thing. Since most people who sit down to work with Flash or similar programs tend to want to create the same kinds of thingsmenus, buttons, clickable images, and so forththe theory was that software developers would be falling all over themselves to create components, which other folks would shell out good money to buy.

Well, the world is still waiting. But if you look hard enough, you might be able to find useful third-party Flash components (some of them gratis) on the Web. Chapter 12 gives you some ideas for where to start looking.

1.4.9. History Panel

Flash keeps track of every little thing you do to a file, starting with the last time you opened (or created) it: every shape you draw, every file you import, every color you change. This behind-the-scenes trackingwhich you can view using the History panel shown in Figure 1-11comes in handy when you want to revert to an earlier version of an animation. For example, one in which the cartoon rabbits you drew actually look like rabbits instead of overfed mice. To display the History panel, click Window Other Panels History (or press Ctrl+F10).

Figure 1-11. When you move your mouse over one of the changes, Flash pops up a helpful detailed description of the change. To revert to an earlier version of your file, drag the slider until it's next to the last change you want to appear. To replay one or more changes, select the changes you want to replay and press Replay. If you do want to revert to an earlier version of your file, don't put it off: every time you close the file, Flash erases the file's history.

Note: Unless you tell it otherwise, Flash keeps track of the last 100 changes you made to a document starting with the last time you opened the document (or, if you've never saved the document, the last 100 changes since you created it). To increase this number, select Edit

Preferences. In the Preferences window that appears, select the General category. Then, in the Undo field, Specify Document-level Undo and type in the number of levels (changes) you want Flash to track. You can specify any number you like from 2 to 9,999.

1.4.10. Info Panel

The more complicated your Flash creations become, the more likely it is that at some point you'll want to know specific details about the objects on your Stage: details like the RGB values of one of the colors you used, the size of one of the objects in pixels, the XY coordinates of an object, and so on. This level of detail can be useful if you want to recreate a particular effect or if you want to rearrange objects on the Stage down to the last little pixel.

To display the Info panel, first head to the Stage and click an object to select it; then choose Window Info or press Ctrl+I (Windows) or -I (Mac). As shown in Figure 1-12, the Info panel only displays information about the object you currently have selected.

Figure 1-12. Select an object on the Stage, and the Info panel shows you the object's width, height, XY coordinates, and color ( expressed as RGB values and percentage of transparency). Move your mouse around the stage, and the bottom half of the Info panel shows you what color (and XY coordinates) your cursor is passing over.

1.4.11. Library Panel

The Library panel (Figure 1-13) is similar to the Common Libraries panel described on Section 1.4.7: both display reusable components you can add to your Flash animations. The difference between the two is that while the Common Libraries panel displays components you can add to any Flash file, the Library panel displays objects you can add only to the file you currently have open. To show the Library panel, click Window Library or press Ctrl+L (Windows) or -L (Mac).

Another difference between the Library panel and the Common Libraries panel is that the Library panel doesn't come preloaded with helpful buttons and such. You have to add your own reusable objects to the Library panel (which you see how to do in Chapter 7).

Let's say, for example, that you create a picture-perfect bubble, or sun, or snowflake in one frame of your animation. (You learn more about frames on Section 1.4.16.) Now, if you want that bubble, sun, or snowflake to appear in 15 additional frames, you could draw it again and again, but it really makes more sense to store a copy in the current project library and just drag it to where it's needed on those other 15 frames. Saves time and ensures consistency, too.

Figure 1-13. Storing simple images as reusable symbols in the Library panel does more than just save you time: it saves you file size, too. (You'll learn a lot more about symbols and file size in Chapter 7.) Using the Library panel you see here, you can preview symbols, add them to the Stage, and easily add symbols you created in one Flash document to another.

1.4.12. Movie Explorer Panel

After you finish creating a Flash animation (which you see how to do in Chapter 3), you can find and edit specific animation details quickly and easily by using the Movie Explorer panel, shown in Figure 1-14. To display the Movie Explorer panel, select Window Movie Explorer (or press Alt+F3).

Note: The Movie Explorer panel only shows you one scene at a time regardless of how many scenes your animation contains. If you want to work with multiple scenes, use the Scene panel described on Section 1.4.16 in conjunction with the Movie Explorer panel.

If you're familiar with the Explorer tool in Windows, you may recognize the Movie Explorer Panel. Much as the Windows Explorer shows you a collapsible outline of all the folders and files on your computer, the Movie Explorer panel shows you all the components of your animation, organized by scene: the video clips, the sound files, the text, the images, and so on. (For more about scenes, check out the box on Section 1.4.15.)

In addition to seeing an at-a-glance outline of your entire animation, you can use the Movie Explorer panel's Show icons to tell Flash which specific elements of your movie you want to view (just the buttons, say, or only the images, frames, and layers ). Or you can use the Find box to view specific elements (for example, you can hunt for an ActionScript script named openNewBrowserWindow ).

Figure 1-14. The Movie Explorer panel lets you view the overall structure of your animation; it also gives you a way to find and edit specific elements quickly and easily. To find a specific element, use the Show icons or type the name of the element you're trying to find in the Find box. Right-clicking an element pops up a menu you can use to edit that element.

1.4.13. Output Panel

When Flash has something to tell you about your animation, it uses the Output panel. To view the Output panel, select Window Output or press F2. For example, when you export your Flash animation (Chapter 14) or when you add buggy ActionScript code to your animation, Flash displays any problems it encounters in the Output panel.

Tip: To tell Flash to include a file size report in the Output panel every time you publish your animation, select File

Publish Settings. Then, in the Publish Settings window that appears, click the Flash tab; finally, turn on the checkbox next to Generate Size Report. The next time you export your animation, Flash adds a file size report to the comments its displays in the Output panel. (You want to keep on top of file size if you plan to include your Flash animation in a Web page, because the larger the file size, the more likely folks will have problems viewing it over the Web.)

1.4.14. Properties Panel/Filters Panel/Parameters Panel

The Properties panel (also known as the Property Inspector) appears automatically beneath the Stage when you open a new document. If you don't see the Properties panel, you can display it by selecting Window Properties Properties or by typing Ctrl+F3.

As you can see in Figure 1-15, the Property Inspector displays specific information about whatever object you currently have selected on the Stage. These details can be helpful if, for example, you're planning to incorporate your finished work into a Web page and need to know the dimensions of a particular drawing. In addition to just viewing the properties of a selected object, you can also edit those properties using the Property Inspector, as you'll learn in the "Test Drive" section of this chapter.

UP TO SPEED
Anatomy of a Scene

A scene is a collection of one or more frames tied to its very own Timeline. Most of the time, you'll create animations consisting of just one scene; but if it makes sense to you organization-wise, you can choose to break your animation up into several scenesfor example, you might create an intro scene, a main scene, and a credits scene.

The benefit of breaking an animation up into a bunch of scenes is that it helps you reuse stuff. For example, say you use Flash to create 30-second Web advertisements for the company you work for. If every single ad you create needs to contain the same few seconds of animation at the beginning (a welcome message from your CEO) and the same few seconds at the end (a heartfelt "and that's why you should buy from our company" appeal ), it makes sense to designate these beginning and ending frames as separate, reusable scenes, perhaps naming them something descriptive like Intro and Ending . Then all you have to do to construct your next animation is create the meat of the new ad and sandwich it between the Intro and Ending scenes.

You'll notice two additional panel tabs in Figure 1-15: Filters and Parameters. The Filters panel tab lets you add special effect filters to text, movie clips, and buttons (Chapter 7); the Parameters panel tab lets you customize component parameters (Chapter 12).

Figure 1-15. The Properties panel (Property Inspector) shows only those properties associated with the object you've selected on the Stage. Here, because a square is selected, the Property Inspector gives you options you can use to change the thickness and color of the square's outline, to tell Flash what kind of corners you want your square to have (round, pointy, or blunted), and more square-related characteristics.

Note: Despite the important sounding name, the Property Inspector is a panel at heart. You can collapse it, expand it, right-click its options menu, and hide it, just as you can any other docked panel.

1.4.15. Scene Panel

You can create an animation in Flash that comprises just one scene, but you can choose to break your animations up into multiple scenes, too, if you like. (See the box on Section 1.4.15 for the skinny on scenes and why you might want to organize your animation into multiple scenes.)

To add a scene to your animation (or to rename or delete an existing scene), you use the Scene panel, which you display by choosing Window Other Panels Scene. Figure 1-16 shows you what the Scene panel looks like.

Figure 1-16. Using the Scene panel, you can add a scene to your animation (either a duplicate of an existing scene, or a fresh, blank scene) or delete an existing scene. Just click the name of a scene and click Duplicate, Add, or Delete, respectively. To rename a scene, first double-click the name of the scene. Then, when you see an outline appear around the current name, click inside and type the new name.

1.4.16. Transform Panel

Transform is a $64 word meaning "to mess with." When you have an existing object that you want to mess with selected on your Stageto scale horizontally or vertically, to rotate, to compress, to distort (pull out of shape like a wad of taffy), or to skew (slant horizontally or vertically)you want, in animation terms, to transform that object. You can learn how to do all these transformations in Chapter 5 (Section 5.1).