Using Symbols in Flash

One of the most efficient ways to use Flash MX is to use symbols whenever you need more than one occurrence of a graphic, or animation or sound. A symbol is a graphic, button, movie clip, or sound that you create once, then reuse in your movie or other movies. Flash allows you to have an item saved in the Library that you can pull out onto your stage over and over again without busting your file size budget. You can also modify certain parameters on each instance such as scale, rotation, alpha and overall color. If you modify the symbol, it will change all the instances, but if you modify the instance, then just that instance is affected.

Symbol Types

• Movie Clip - A symbol that can include animation(s), buttons, graphics, other symbols, and operates independently of the main stage Timeline.
• Button - A symbol that allows interactivity and that responds to mouse clicks or rollovers. Buttons can also have movies placed in one of the states.
• Graphic – A symbol that is used for static images or is controlled by main stage Timeline. Interactive controls and sounds won't work in this symbol.
• Sound - The Sound symbol is created automatically when you import a sound.
• Font - Create this type of symbol from the Library window options so you don't have to embed fonts in your site.
  
  

Naming conventions

The Library stores symbols in alphabetical order. In order to keep symbol types grouped together, name each symbol using the first letter of the type of symbol that is it first, followed by a comma, then the name of the symbol. When you are working with many symbols, this helps you find the particular symbol quickly and consistently.

Example:

• g, balloon
• m, balloon movie
• s, balloon squeaky sound
• b, balloon button
• ac, balloon movement action script in movie

Exercise:

1. Create a simple shape on the stage, such as a red balloon.
2. Let's save this shape into the Library by making the balloon a graphic symbol.
   • Using the Arrow tool, draw a selection box around the whole balloon.
   • With it selected, from the Modify menu, choose Convert to Symbol.
   • A Symbol Properties dialog box appears with 3 Behavior options. Flash defaults to the Movie Clip behavior.
   • Select the Graphic behavior.
   • Name your symbol: g, balloon. Click OK.
     
3. Delete the balloon from the stage.
4. From the Window menu, choose Library. You'll see your balloon symbol in the Library window.
5. Drag the balloon symbol (g, balloon) out of the library onto the stage.
6. Now you have an “instance” of the balloon on the stage.
7. Let's change the appearance of the balloon instance.
   - Using the properties menu, change the alpha to 50%, change the tint, and change the scale and rotation.
8. You'll see the original symbol is unaffected. You can keep pulling in the same symbol over and over again but change each instance any way you want. These attributes can also be changed for different keyframes.

Note: If you plan on animating each instance independently, put each instance on a separate layer. Animation requires "tweening", which will only work on one symbol on one layer at a time.

Making a movie symbol from the balloon graphic symbol

• From the Insert menu, choose New Symbol.
• Choose Movie Clip as the Behavior if it's not already selected, and name your symbol: "m, balloon movie." Click OK. Movie symbols have their own timeline. This can get confusing.
• You are now in the symbol editor, which looks just like the stage (because it has its' own independent timeline). One way you can tell you are in symbol editing mode is by looking at the upper left hand corner, which will have the movie symbol you just named after the scene name.
• In the Library window, drag the "g, balloon" symbol out onto the m, balloon movie stage.
• Select frame 10 on your timeline and then from the Insert menu, choosing Timeline > Keyframe from the top menu. (Keyframe will duplicate the last keyframe with something in it.)
• Move the animation scrubber to the second keyframe and select the balloon or click on that frame (this will pick everything in that keyframe).
• Modify the balloon instance by rotation, scale, alpha and/or color.
• Now we need to create a "tween" between the first keyframe and the second keyframe. To do this:
  • Click in the Timeline somewhere between the first and second keyframes.
  • In the property inspector, select the Motion option from the Tween dropdown menu. You can only use the motion tween on symbols. You can also add automatic rotation, easing, and other options at this point in the frame window.
  • There should be an arrow displayed in the Timeline area between the two keyframes. If you select something else, the motion tween should show up on a light blue field. (Shape tweens are green.)
  • Now if you scrub through the frames, you'll see the balloon changing smoothly from frame to frame.
  • Let's make this action loop continuously. To do that, let's assign an action to the last keyframe, telling it to return to the first frame of its Timeline again.
  • Click on the last frame and choose window>developer>actions, the Frame Actions dialog box appears.
    
  • Click on the "Global Functions > Timeline Controls " book display action catagories, select and find GoToandPlay. It will default to frame 1, which is fine. Now, the movie will loop continuously.
• See Example 4 in the Flash Examples section of this tutorial.

Button Symbol

• Now we will make a button using both the g, balloon and the m, balloon movie. The button symbol has 4 default states: Up, Over, Down and Hit. These states reflect what's happening when the button is doing nothing, when the mouse is over it, when the mouse clicks on it, and the hit zone for the button.
• Go back to the main stage.
• From the Insert menu, choose New Symbol.
• Choose Button option and name it: 'b, balloon.' You are now in the symbol editing mode again.
• Select the “Up” frame. Drag the g, balloon symbol from the Library onto the stage. This is what the button will look like “at rest.”
• For the "Over" state, we want the exact same position, but another color, so we're going to copy the “Up” frame and paste it into the “Over” frame (or, click to select the "over" frame and hit F6, or you can also just choose Keyframe from the Insert menu, and it will copy the contents of the last keyframe).
• change the color of the balloon using the property inspector.
• Now when you rollover this button, it will change color.
• Next, select the “Down” keyframe area. From the Insert menu, choose Keyframe and drag in m, balloon movie from the Library.
• For the “Hit” area, it doesn't show at all, so you can use the symbol or draw a hit area in this state.

Your button is created now. Let's test it.

• Go back to Scene 1 and drag your new “b, balloon” out onto the stage.
• Test your button by choosing Test Movie from the Control menu.
• See Example 5 in the Flash Examples section of this tutorial.

Congratulations! You've made a movie, and a button with a movie in it!

TOP