Macromedia Flash5

Introduction

The Interface

Flash Exercises:
   Layers
   Color
   Drawing
   Buttons
   Symbols
   Animating
   Sound

Saving and Publishing

Flash Examples

Using Symbols in Flash

One of the most efficient ways to use Flash 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, 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 Insert 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.
• Open the Effects panel (from the Windows menu, choose Panels and then Effect).
• 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.
• You are now in the symbol editor, which looks just like the stage. 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.
• Add some keyframes to the Timeline by selecting a frame and then from the Insert menu, choosing 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.
• Do this for the other frames except the first and last keyframes.
• Now we need to create a "tween" between the first frame and the second frame. To do this:
  • Click in the Timeline somewhere between the first and second frames. It turns black.
  • Open the Frame Panel (from the Window menu, choose Panels and then Frame.) In the Tweening box, select the Motion option. 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 now. If you select something else, the motion tween should show up on a light blue field. (Shape tweens are green.)
  • Create tweens between the other keyframes also. 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.
  • Double click on the last frame and the Frame Actions dialog box appears.
  • Make sure you are in normal mode in the Frame window. (check upper right pull-down arrow)
  • Choose the + sign from the left hand side and move down to Basic Action/ Go To. 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. To do this, from the Edit menu, choose Copy Frames, then select the “Over" keyframe and then from the Edit menu, choose Paste Frames. (You can also just choose Keyframe from the Insert menu, and it will copy the contents of the last keyframe).
• Open the Effects panel (from the Window menu, choose Panels and then Effect) and change the color of the balloon.
• 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