Working with Symbols

Any art that will be motion tweened MUST first be converted into a symbol. A symbol is a special kind of a group that has its own timeline.

Nested timelines can be confusing to new Flash users, but they are a great way to break complex movement or cyclical movement into the simplest components. In the next exercise, a helicopter will employ a "rotor" symbol so you only have to build one spinning blade (though your helicopter will have two rotors), and you only have to animate one single spin (though this cycle will repeat forever):

Symbols in action

To create this helicopter animation, follow the steps below:

1. Begin a new (ActionScript 3.0) Flash file and change the background color to light blue (set this on the Properties panel).
   
2. Draw a helicopter (or import mine) without rotors.
   
3. Convert the helicopter artwork into a symbol (with it selected, press F8).
   
4. Name the symbol "Chopper" and set the behavior to "Graphic."
   
5. Open the Library (WINDOW > Library). This is where all your symbols are stored.
   
6. Add a new symbol by pressing the New Symbol icon at the base of the Library panel ().
   
7. Name the new symbol "Blades" and set the behavior to "Graphic."
   
8. Draw a tall, skinny, unstroked grey rectangle, and center it on the stage using the Align panel (WINDOW > Align): Press the "to Stage" button on the align panel, and click the 2nd and 5th buttons on the top row:
   
   
   

NOTE: It is critical that you be aware of which timeline you are working in (keep an eye on the top left corner of the stage, just like when you worked with groups). NEVER switch timelines in these exercises (by clicking "Scene 1") unless directed to do so.

You've just built two graphic symbols ("Chopper" and Blades"). In the above animation, whenever the Rotor is present, it's rotating (as all good rotors should). To illustrate that constant movement, you'll create a third symbol consisting of the Blades spinning 360°. Then you'll embed that symbol inside the Chopper graphic, so the Chopper always appears with a twirling Rotor:

1. Click the New symbol icon at the base of the Library.
   
2. Name the new symbol "Rotor" and set the behavior to "Movie Clip."
   
3. Drag an instance of the Blades symbol from the Library to the centerpoint on stage (align its center with the centerpoint using the Align panel).
   
4. Insert a Motion Tween, and stretch it to encompass 40 frames.
   
5. Set the Rotate option on the Properties panel to 1 time Clockwise (CW). Drag the red playhead above the timeline to confirm you've created a 360-degree rotation.
   
6. Double-click the Chopper symbol in the Library to go to its timeline.
   
7. Drag an instance of the Rotor movie clip to the top of the Chopper, and vertically scale it to about 50% of its original height (but don't change the width: you can do this on the Properties panel or the Transform panel). This creates the foreshortened effect on the spinning rotor.
   
8. Place another instance of the Rotor on the tail of the Chopper. Shrink it proportionally to appear as the small tail rotor in the above example.
   
9. Click Scene 1 (the instance of the Chopper already there now has rotors on it).

NOTE: Symbol motion does not display when you preview the movie; this is why the Rotors appear still in Scene 1, AND when you press Enter. To see the full-blown animation as the web viewer would, test the movie by pressing Command-Return (Mac) or Ctrl-Enter (PC), or selecting CONTROL>Test Movie > Test. This opens a new window to display the whole Flash animation as it will appear online. The only difference between the Preview and the actual Flash movie online, is that the preview can show items even if they are offstage; the real Flash movie will clip these off.

10. Move the Chopper instance in Scene 1 off the right side of the stage.
    
11. Motion-tween the chopper so it takes 100 frames to move across the stage.
    
12. Test the movie (I added a motion guide to the example above; see if you can do that to make the movement of the chopper more dynamic). Note that both spinning rotors automatically loop. You'll learn how to prevent looping with ActionScripting in Lesson 3.

In the above exercise, you nested a graphic (Static rotor) inside a movie clip (Spinning rotor), which you then nested—twice—inside another graphic (chopper). Graphic symbols usually contain static artwork, and Movie Clips usually contain moving artwork [That's not a rule. Graphics and Movie Clips can often be used interchangably. In the Flash 2 class you'll learn why Movie Clips are universally better than Graphics!].

Buttons

The third kind of symbol you can create is a button. Buttons have only four frames that correspond to the "states" of the button, like those achieved with JavaScript:

To create a button similar to that above:

1. Click the New Symbol icon at the base of the Library palette.
   
2. Name the symbol "grey button" and select 'button' behavior.
   
3. Draw a medium grey rectangle on the centerpoint of the stage.
   
4. Insert a keyframe in the Over frame, and in the Down frame.
   
5. in the Over frame, change the grey to bright red.
   
6. In the Down frame, change the grey rectangle to dark red.
   
7. Return to Scene 1, and drag an instance of your button to the stage.
8. Apply a Bevel filter to the instance of the button:
   z
   
9. Select CONTROL > Enable Simple Buttons, and press your new button.

You do not have to illustrate anything in the Hit frame when you want the entire button area to be "hot." An example of when you would need the hit frame, is a button consisting only of a word:

Try slowly moving your mouse horizontally across both "Button" words above. Notice on the button without a Hit frame (on the right), you have to click exactly on one of the letters to activate the button. Buttons without Hit frames use the artwork in the prevous frame as the "hot" spot.

Invisible Buttons

Invisible buttons can be useful in a variety of applications, one of which you'll create in the next lesson. An invisible button simply involves leaving all frames empty except the hit frame. Since Hit frame art does not show in the finished file, the button is invisible. By laying an invisible button on other elements, you can effectively make any artwork "clickable".

KEY CONCEPT: Every symbol has its own timeline, and those timelines are independent of one another. Nesting a symbol inside another symbol is common in Flash. Just like a hamster on a treadwheel has no idea whether he's in a house, or an airplane going 500mph, he simply runs on his wheel regardless. Your Flash symbols act the same whether they are embedded inside another symbol or not (and in Flash where there's no gravity, that hamster could be on a canoe tumbling over a waterfall and he'd have no idea!—he'd just keep running).

For example, you can nest a movie clip inside the Over state of a button. That would show the nested movie only when the user moused over the button. This is often how buttons appear animated upon mouse-over, and static upon mouse-out.