Symbols

[ LiB ]

The term symbol in Flash can represent a Movie Clip, button, or graphic. You will use these special symbols quite often. They all have their advantages and time and place when they need to be used. Within the next sections, I will break these symbols down in plain English.

Movie Clips

Without Movie Clips, ActionScript wouldn't be what it is today. By simple definition, Movie Clips are smaller timelines within the main Timeline that can be animated independently from the rest of the project. They can also be controlled by ActionScript and even have scripts written within the Movie Clip's timeline. Other Movie Clips can be embedded within the currently embedded Movie Clip's timeline, and so on. Thus, we can also treat our main timeline as the "parent" or "root" Movie Clip, and the embedded timelines as the "children." See Figure 1.26 to visually understand this somewhat complex relationship.

Figure 1.26. Movie Clip relationships

graphic/01fig26.gif


Movie clips are versatile because they allow you to change certain properties about them. We will definitely see this in action during Chapter 4, "Movie Clips and Buttons: Methods and Properties."

Open up Macromedia Flash, if not already open , and start a new project. Create a simple graphic on the stage with either the Square or Circle tool. Use the Arrow tool to drag a marquee over the new graphic. That's exactly what I did in Figure 1.27.

Figure 1.27. Selecting your new graphic

graphic/01fig27.gif


Either press F8 or go to Insert, Convert to Symbol up on the menu. The Convert to Symbol Dialog dialog box shown in Figure 1.28 will open.

Figure 1.28. The Convert to Symbol dialog box

graphic/01fig28.gif


Where is says Name , type in something friendly. I abbreviated the term Movie Clip and added a 1 at the end. The next thing to do is to check the proper behavior. Select Movie Clip and then click OK.

The next thing you should notice is that you now have a blue bounding box around your graphic and you also have a center registration ( assuming you didn't change the settings). See Figure 1.29 to make sure we are on the same page.

Figure 1.29. After converting to a Movie Clip

graphic/01fig29.gif


To edit the new Movie Clip's timeline, double-click the Movie Clip object, then go to Edit, Edit Symbol. At this point you should see a fresh timeline like in Figure 1.30. Notice that the stage tells you how far in you are in the hierarchy.

Figure 1.30. Exploring a Movie Clip's timeline

graphic/01fig30.gif


Just to give things a little twist (and to expand your knowledge about tweens), let's group the object. (Please note that you should be working within the new Movie Clip's timeline.) To group your graphic, select it with the Arrow tool. Select Modify, Groupyou should now have a grouped object. Why group an object? Because I want to show you how to do a motion tween that can't be readily done with shapes (simple graphics). Once you group a shape, it becomes an object that you can then motion tween. What this means is that you can move and scale this baby without the morphing or distortion that would otherwise happen if it were a shape.

Select Frame12 in the Movie Clip's timeline. Press F6 to set a keyframe. You will notice that a copy of the first frame is placed into Frame12. Go ahead and click on any frame before Frame12 on that layer and right-click that frame (Ctrl+Click if you are on a Mac). Select Create Motion Tween. You will see the gap turn blue and an arrow will appear. You won't see any change in the animation because you haven't modified any of the frames. You can verify this by pressing Enter; the frames will cycle through and nothing will happen on the stage.

To make things more interesting, let's click on Frame12 on the first layer and move our new grouped graphic. I moved mine to the left, as you can see in Figure 1.31.

Figure 1.31. Adjusting a motion tween

graphic/01fig31.gif


If you press Enter to see the Movie Clip playback, you'll see your grouped graphic move from its original position to the final position.

Now click on the blue arrow pointing left (which is on the stage controls). See Figure 1.32. I have highlighted the arrow for you.

Figure 1.32. Maneuvering back to the main Timeline

graphic/01fig32.gif


Now that now you have prepared your file, go ahead and save it wherever you want. Pick a place where you can access it easily.

Notice that you only have one keyframe on the main Timeline. All your animation is neatly embedded within your Movie Clip. Now that you are aware of all these things, go ahead and select the Control, Test Movie menu item. You will see your animation previewed and played back repeatedly. You can check out what I did in the file GDA_PROG1.4.fla.

Buttons

Buttons are a very useful part of Flash. They will be our first encounter with user interaction in your applications. I will not go into any ActionScript in this chapter, but I will explain a button's nomenclature .

Let's start off by creating a button from scratch. From the Insert menu, select New Symbol. From the Behavior option, select "Button" from the New Symbol dialog box and press OK. A special timeline that looks like Figure 1.33 should appear.

Figure 1.33. Creating a button

graphic/01fig33.gif


This is a good time to discuss a button's timeline. It has a special format that contains only four frame states. These are the Up, Over, Down, and Hit states. Any graphics within the Up frame will be displayed while the button is left alone. Anything in the Over frame will be shown when the mouse hovers over the button. When the mouse is clicked and held, the Down state will be displayed. Once the user releases the mouse button, it is considered a Hit and that frame then plays.

Now that you understand how a button is put together, let's go ahead and finish this exercise so you can see this button in action!

Select the Up frame and draw a circle over the center registration (the crosshairs in the middle of the screen). Once done, select the Over frame and draw a square. Remember that you need to press F6 to create a keyframe (that copies the previous frame, which is Over). In order to draw the square, you will need to delete the current copied keyframe and draw in the new graphic (which in this case is the square). Now go ahead and select the Down frame and draw another square in a different color . Leave the Hit frame alone. This is to show you how flexible creating and configuring a button can be.

Go back up to the main Timeline by clicking on the blue arrow on the stage controls. Notice that there is no button on stage on the main Timeline. This is because you created a new symbol in the library, not directly on the stage as you did before. If you remember correctly, we took the contents already on the stage and converted them to get our symbol. In this case, we created a new symbol that must be accessed through the Library window.

What's this mysterious Library window? It's a very important symbol management system that's built into Flash. To access it, either press F11 or Ctrl+L/Command+L.

In Figure 1.34 you can see that this Library window previews the symbols in the movie. It also displays the behavior and what you named the symbol. Seems very convenient , no?

Figure 1.34. Exploring the Library window

graphic/01fig34.gif


You can consider this as the master copy of the graphic. You can actually drag as many copies to the stage as you want. These copies are considered and referred to as instances . Go ahead and drag an instance to the stage.

Now that you have set up the button and also dragged an instance onto the stage, go ahead and save the movie so you can test it. Test it by pressing Ctrl+Enter or Command+Enter.

During the test, you can see your button's Up frame. In this case, it's the circle you drew. Once you hover over it, it becomes a square because it responds to the Over stage. I dare you to click on it! When you do, it turns into a square of a different color. This is exactly what you wantedthe Down stage that you drew in.

Congratulations! You've just created your very first button! I'm aware that it has no other functionality other than to sit there and respond to your mouse moves, but hold tight because we haven't gotten to any ActionScript yet. We will soon though. (Evil laughter .)

You can check out the file that I made during this section in the GDA_PROG1.5.fla file in the GDA_CH01 folder.

Graphics

The Graphic symbols will be the least popular option you have when it comes to symbols. Graphic symbols give you some advanced advantages when using them. I won't cover these advantages in depth because they don't directly relate to ActionScript, but here are a few things you can do with Graphic behaviors: perform motion tweens, motion guides, tint shifts, and alpha blending. These are cool effects, but there is nothing a Graphic can do that a Movie Clip can't. Graphic symbols are simply watered-down versions of Movie Clips.

[ LiB ]


Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net