Building Nested Symbol Structures | Macromedia Flash8 Bible

Understanding the various symbol types individually is the first step, but the next step is integrating these building blocks to create organized, optimized Flash projects that will be extensible, easy to edit, and fast to build. Although we cover the workflow for different types of Flash projects in depth in other parts of this book, we can synthesize the overview of different symbol types by walking through the steps of creating a Button symbol with some nested animation and Graphic symbols.

To demonstrate building an animated Flash movie from various symbol types, we made a Button symbol called basicButton that uses some raw shapes, some Graphic symbols, and some Movie Clips, all nested inside a Button symbol timeline.

On the CD-ROM

The completed source file (sampleButton.fla) for this series of demonstrations is on the CD-ROM that accompanies this book in the ch06 folder.

Converting a Raw Shape into a Graphic Symbol

The best way to begin creating any graphic element is to first consider the final shape that you need and to try to find the most basic primitive shapes that you can use to build that element. Keep in mind that instances can be scaled, skewed, and adjusted with Color effects. Instead of drawing three circles to make a snowman, you would make just one circle and convert that into a symbol so that you could build your snowman from scaled instances of just one symbol stored in the Library. A resourceful animator we know built a Christmas tree by reusing instances of a symbol he had made for a dog's tail in the same animation — a wagging tail and a tree all built from just one Graphic symbol stored in the Library! Raw graphics can be converted into Graphic symbols after they have been drawn, or you can first create a new Graphic symbol and then draw the raw shapes directly inside the Graphic symbol in Edit mode — either way, the end result is a contained visual element that is stored in the Library to define any instances that you need to place in your movie.

To build the simple graphics used in basicButton, you can begin by converting a primitive shape into a Graphic symbol:

Select the Oval tool and set the fill color to green and the stroke color to black with a stroke height of 3.

Create an oval on the Stage, and hold down the Shift key while dragging out the shape to create a perfect circle. Double-click the fill with the Selection tool to select both the stroke and the fill, and then use the Property inspector to set the width to 75 and the height to 75. (If the Constrain check box is selected in the Property inspector, you only need to enter 75 in one of the value fields and the circle will scale evenly.)

New Feature

An alternative workflow supported in Flash 8 for creating an oval (after completing Step 1), is to Option/Alt+click in the Document window to invoke the new Oval Settings dialog box. Enter 75 for the width and height of the circle and click OK. Flash will render a circle in the Document window, centered on the point you clicked.

Note

If you open the Library panel — Window ð Library (z/Ctrl+L) — you will notice that the shape you've drawn is not visible in the Sort window because raw data is not stored in the Library.

While the stroke and the fill are both still selected, press F8 or choose Modify ð Convert to Symbol from the application menu.
In the Convert to Symbol dialog box, choose Graphic for the behavior and give the symbol the name plainCircle. Then click OK. You should now see the plainCircle symbol with the Graphic symbol icon next to it in the Library panel.

Tip

You always have the choice of creating artwork on the Main Timeline and then converting it into a symbol or first inserting a new symbol and then creating artwork on the symbol timeline. Either workflow will achieve the same end result. In the plainCircle example, start by selecting Insert ð New Symbol (z/Ctrl+F8). Enter the settings noted in Step 4. Then complete Steps 1 and 2 to draw the circle on the Graphic symbol timeline rather than on the Main Timeline. When you go back to the Main Timeline, you won't see an instance of plainCircle on the Stage, but the Graphic symbol should now be in the Library and you can drag an instance into the Document window whenever you need it.

You can now reuse instances of this Graphic symbol in your document in as many places as you need it just by dragging an instance onto the Stage from the Library panel.

Note

For the basicButton example, you will need an instance of plainCircle inside of a new Button symbol rather than on the main Stage, so you can delete any instances of plainCircle from the Main Timeline.

Using Graphic Symbols in a Button

Button symbols are similar to Movie Clips that have a special timeline structure linked to mouse states. For a Button to take you to a new point on the Main Timeline or to load any other elements, ActionScript needs to be added to the Button instance.

Cross-Reference

We discuss adding actions to buttons for more advanced interactivity in Chapter 18, "Understanding Actions and Event Handlers."

In this example, the button simply works as a structure for an animation that reacts to the mouse. Begin by inserting a new Button symbol:

Click the New Symbol button in the Library panel or choose Insert ð New Symbol from the application menu or use the shortcut keys (z/Ctrl+F8).
In the Create New Symbol dialog box, choose Button as the behavior and for this example, give the symbol the name basicButton. Then click OK.
This Button symbol is now stored in the Library and automatically opens in Edit mode in the Document window, so you can add some content to the button.

You will notice that the button Timeline shows four keyframes with labels that define the button state by mouse behavior: Up, Over, Down, and Hit. These various keyframes can have multiple layers and contain any visual element or sound that you want. The button states function as follows:

Up: Any elements placed in the Up keyframe will be associated with the button as it appears on the Stage when it is present but not activated by any mouse interaction.
Over: Any elements placed in the Over keyframe will be associated with the button when the mouse rolls over it on the Stage, but as soon as the mouse rolls off the button it will revert to its Up state.
Down: Any elements placed in the Down keyframe will be associated with the button only when the mouse is over it and clicked and held down — as soon as the mouse is released, the button will revert to its Over state.
Hit: The Hit keyframe is actually never visible on Stage, but this instead defines the area of the button that is "sensitive" to the mouse. Whatever shape is present on this frame will be considered part of the button's hit area. It is important to note that it is better not to have holes or gaps in the hit area unless it is intended. For example, if you have text as a button, it is best to use a solid rectangle that matches the width and height of the total text area. Using the actual text would result in an irregular button hit area — whenever the mouse rolled into the space between letters, the button would revert to its Up state and could not be clicked.

Tip

If you ever need an "invisible" button in your project, you can create one by adding artwork to the Hit keyframe only of a Button symbol. The button will be visible in the authoring environment as a pale green preview shape (defined by the graphics in the hit state), but when the .swf file is published, the only indication that a button is on the Stage is the change in the mouse cursor when it enters the Hit area. You can add ActionScript to an invisible button to trigger events in your animation or to control the behavior of other elements in your movie. We discuss invisible buttons in more detail in Chapter 18, "Understanding Actions and Event Handlers."

For this example, you will be creating animation to be placed into the various visible states, but the main shape of the button will always be consistent, so you can begin by creating a layer to define the main shape of the button.

Rename Layer 1 of the Button symbol Timeline as buttonOutline and insert two frames (F5) after the first keyframe to create a span of three frames (visible for Up, Over, and Down).
With the Playhead set on the first keyframe, drag an instance of plainCircle onto the Button Stage and make sure that it is now visible in the Up, Over, and Down states of the button, but not on the Hit state.
Center the instance on the button Stage by using the Align panel (z/Ctrl+K). Select the instance of plainCircle and copy it to the clipboard (z/Ctrl+C).
Create a new layer and name it hitArea. Insert a blank keyframe (F7) on frame 4 (Hit). To paste the copy of plainCircle into the center of the blank Hit keyframe, use Paste in Place (z/Ctrl+Shift+V). If you have done a straightforward paste instead, make sure that the instance of plainCircle is centered to the button Stage.
The Timeline of your Button symbol should now look like Figure 6-12.
Return to the Main Timeline by clicking the Scene 1 label in the Edit bar or by double-clicking an empty area of the Stage.
If you don't see an instance of your basicButton on the Stage of the Main Timeline, drag an instance out of the Library and place it on the first frame of the Main Timeline.

image from book
Figure 6-12: The Edit mode view of the basicButton symbol Timeline, with Up, Over, Down, and Hit states defined with instances of the plainCircle Graphic symbol

Animating Graphic Symbols in a Movie Clip

After you have created some Graphic symbols to define your basicButton, you can now start building some animation to add to it. You can build animation by placing artwork in keyframes on the Main Timeline, but this limits how you can use the animation, and can make it difficult to add more elements to your project without disturbing the keyframe structure of the animation. If you need animated elements that can be reused, and quickly moved to different parts of the Main Timeline or placed into a Button symbol timeline, it is best to begin by creating a Movie Clip.

Click the New Symbol button in the Library panel or choose Insert ð New Symbol from the application menu or use shortcut keys (z/Control+F8).
In the Symbol Properties dialog box, choose Movie Clip as the behavior and give this symbol the name overAnim.
Create a new circle on the first frame of the Movie Clip timeline with a black stroke(with a height of 3) and no fill. Select the outline with the Selection tool and use the Property inspector to set its width and height to 25. Then use the Align panel to center it on the Stage.
Convert this raw shape into a Graphic symbol (Modify ð Convert to symbol or F8) with the name outline.
Insert a keyframe (F6) on frame 10 of the Movie Clip timeline so that you have a span of frames from frame 1 to frame 10 with the outline Graphic symbol visible.
Select the instance of outline on keyframe 10 and use the Property inspector to scale it up to 50 high and 50 wide.
Now select keyframe 1 and use the Property inspector to set a Motion tween. This creates an animation of the outline Graphic symbol scaling up from its original size to the larger size that you gave it in frame 10.
The Timeline of your Movie Clip should now look like Figure 6-13.

image from book
Figure 6-13: The symbol Timeline of the Movie Clip "overAnim" showing a Motion tween of the Graphic symbol "outline," from frame 1 to frame 10

Adding a Movie Clip to a Button Symbol

The final step in our example is to add the overAnim Movie Clip to the basicButton symbol. This is the secret to animated Button symbols — by nesting multiframe Movie Clip animations into the single frames assigned to the Up, Over, and Down states of the Button symbol timeline, you can create different animated "reactions" as the mouse rolls over or clicks the button.

To go back inside your button and add animation in Edit mode, double-click the instance of basicButton on the Stage or the symbol in the Library.
Create a new layer in the Button Timeline and name it outlineAnim. Make sure that this new layer is above the original buttonOutline layer.
On the outlineAnim layer, insert a new keyframe (F6) on frame 2 (Over).
Drag an instance of overAnim from the Library onto the button Stage in the keyframe you just created, and use the Align panel to center it.
To ensure that the animation is only visible on the Over state of the button, make sure that the content on the overAnim layer only occupies one frame on the Button symbol Timeline. If the overAnim symbol extends into frame 3, either insert a blank keyframe (F7), or remove a frame (Shift+F5) to keep it contained on frame 2.
Your Button symbol Timeline should now look like Figure 6-14.

image from book
Figure 6-14: The Timeline of Button symbol basicButton with the Movie Clip overAnim placed on the Over keyframe of the outlineAnim layer

You can test your Button symbol with this animation added to see how it is working, by pressing z+Return or Ctrl+Enter on the keyboard to view the movie (.swf) in the Test Movie environment. Now when you roll over the green button with your mouse, you should see the outline circles animate. Remember that you still only have one keyframe on your Main Timeline, so this demonstrates how both a Button symbol and a Movie Clip symbol will play back their own timelines even if they are placed into a single frame on another timeline. You still need to add some animation for the Down state of the basicButton, so close the Test Movie (.swf) window to go back to the Button timeline in the Document window.

Modifying a Movie Clip Instance

Instead of creating an entirely new animation to display on the Over state of our basicButton, you can reuse the overAnim Movie Clip and change its appearance by adding a Color effect to the instance.

Double-click the basicButton symbol instance to enter Edit mode. Add a new layer to the Button symbol timeline and name it outlineAnimTint.
Insert a blank keyframe on frame 3 (Down).
Drag an instance of the overAnim Movie Clip from the Library, or just copy the Over frame on the outlineAnim layer and paste it into the blank keyframe you just created.
Select the instance of the overAnim Movie Clip that you placed on the Down keyframe and, with the Property inspector, select Tint from the Color effect menu. Choose white as the tint color from the Swatches that pop up from the color chip and then enter a tint value of 100 percent by using the slider or by typing into the value box.
Your Button symbol Timeline should now look like Figure 6-15.

image from book
Figure 6-15: The basicButton Timeline with an instance of the overAnim Movie Clip placed on the Down keyframe and modified with a Color Tint

Test your animated button again (z+Return or Ctrl+Enter) and you will see that the animation now appears when you click the button. But instead of the original black that appears on the Over state, the animation for the Down (click) state is white. The three visible states of your button should now resemble Figure 6-16.

image from book
Figure 6-16: The finished animated button as it appears in the Up, Over, and Down states Up state Over state Down state

You have seen how symbols are created, nested, and modified and you are probably realizing that this basic animated Button symbol is only the beginning.

On the CD-ROM

If you would like to deconstruct another layered symbol structure, we have included a silly, but slightly more complex, animated Button on this book's CD-ROM. You will find the source file, surpriseButton.fla, in the ch06 folder. Figure 6-17 shows the three visible button states and diagrams the basic symbol nesting.

image from book
Figure 6-17: The animation as it appears in the three visible button states, Up, Over, and Down (left), with a diagram of the basic nested elements visible in each state (right)

As your symbol structures get more layered and complex, it can be helpful to have some guidance when you are trying to navigate to a specific item in your project, or just trying to remember exactly how you organized things as you were building. Although careful use of layer names, frame labels, and symbol names is indispensable, the Movie Explorer (introduced later in this chapter) is a great assistant for finding your way through the structure of any Flash document.