• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Seminar 4. Using Symbols in a Movie > Using Symbols in Macromedia Flash MX

Using Symbols in Macromedia Flash MX

As you begin to create a movie, you should think about symbols and how they can be used in your movie. This is your challenge as a Flash developer—what symbols to create and how to use the instances of these symbols most effectively and efficiently in your movie. How you get your artwork into Flash is up to you, but to use the power of Flash, you need to convert these items into symbols.

Converting Existing Artwork into Symbols

Typically, as you develop a Flash movie, you convert existing Stage objects into symbols. You create an object for the movie and immediately convert it to a symbol. Converting existing artwork that you have on your Stage into symbols is easy. Just follow these steps:

Select any object by clicking it with the Arrow tool; it becomes the active item on your Stage. Then select Insert, Convert to Symbol.

In the Convert to Symbol dialog box that displays, type a name for the symbol in the Name box. Then select a behavior for the symbol (see Figure 4.3).

Figure 4.3. Name a symbol something that makes sense and describes the symbol.

Click OK to close the dialog box. The object is converted into a symbol, and the Stage displays an instance of this symbol. The symbol also appears in the library window (see Figure 4.4).

Figure 4.4. You can identify certain instances on the Stage by the crosshairs that appear in the center of the symbol.


When you create a symbol, you don’t need to group your objects. When you use an instance of this symbol, it is automatically grouped as a symbol.


You can also press the F8 keyboard shortcut to convert a selected object to a symbol.


If you have set your function keys to handle global actions on your computer, the assigned function keys for Flash MX functionality might not work.

Exploring Symbol Behavior

When you create a symbol, you can designate three symbol behaviors: Movie Clip, Button, and Graphic. Each symbol behavior has its own functionality in a Flash movie:

  • Movie Clip— This symbol behavior is used to create reusable animation that will play independently from the Flash movie Timeline. A movie clip symbol can be compared to a mini-movie that is animated according to its own Timeline within the main movie. Movie clip symbols can contain sound, interactivity, and other movie clip instances. Movie clip instances can be part of a button so that the button is animated, too.

  • Button— This symbol behavior is used for interactive buttons in a movie. A button symbol responds to regular mouse events such as clicking or rollovers (when the user moves the mouse cursor over a button instance but does not click it). When you create a button symbol, you can create images of the three button states for the symbol: Up, Over, and Down. You learn more about button symbols and button states in Seminar 7, “Site Interactivity and Button Functionality.”

  • Graphic— This symbol behavior is used for static images or animation that is fixed to the movie Timeline. This means that the animation plays in conjunction with the Timeline progression. This type of symbol can’t be controlled by ActionScript.


Imagine the power and low file size of a movie clip symbol that is placed inside another movie clip or a button symbol. Instead of duplicating file size for repeated use of the movie clip, you are pointing to an already defined movie clip within the new movie clip or button symbol. This is referred to as nesting symbols inside other symbols.

Creating a Symbol from Scratch

You don’t always need to convert existing objects on the Stage into symbols. Flash MX also allows you to create a symbol from scratch.

To create a symbol from scratch, you must activate another mode of Flash MX: the Symbol-Editing Mode. Similar to Group Mode, this mode enables you to create objects using Flash MX tools. To activate the Symbol-Editing Mode to create a new symbol, select Insert, New Symbol. The Symbol Properties dialog box appears. Type a name for the symbol in the Name box and set the behavior. Click OK, and a new window displays (see Figure 4.5).

Figure 4.5. In the empty window of this Symbol-Editing Mode, you can create a symbol without having other images or symbols distract your design process.

Now that you’ve switched to Symbol-Editing Mode, notice that the screen is slightly different from the typical Flash MX screen. Two tabs are present in the upper-left corner—Scene 1 and the new symbol name. The library holds the new symbol, and the library Preview window is blank. Now you can create a new symbol by using the drawing tools or importing existing graphics into the Symbol-Editing Mode.

Based on the behavior you assign to a symbol, the Timeline reflects a different look for creating the functionality you need for that symbol. If the symbol has a Button behavior, the Timeline reflects the button states for the symbol (see Figure 4.6).

Figure 4.6. You can create as many layers as you need when creating buttons.

When a symbol has a Movie Clip or Graphics behavior, it has its own Timeline in the Symbol-Editing Mode (see Figure 4.7). Both the movie clip or graphics symbol can also be created using as many layers as you need. The difference between the two is their Timelines. The Timeline of a graphics symbol adheres and runs in sync with the movie’s Timeline. In contrast, a movie clip symbol’s Timeline is independent of the movie’s Timeline.

Figure 4.7. You can also create folder layers for grouping other layers in a movie clip or graphic symbol.

After you create a symbol in the Symbol-Editing Mode, you must exit this mode and return to your movie window. Select Edit, Edit Document or click the Scene 1 tab in the upper-left corner of the symbol-editing window. Either method returns you to your movie. The library contains your new symbol, and you can now access this symbol to create instances of it in your movie.


You can also click the Back button that is located above the Stage area on the left. This button is similar in functionality to the Back button on most browsers.

Changing a Symbol’s Behavior

You can change the symbol behavior for any existing symbol, such as changing a graphics symbol to a button or movie clip symbol. You can change a symbol’s behavior by doing the following:

Select the symbol in the library to be modified.

(Control-click)[Right-click] the symbol in the library to access the shortcut menu, select Behavior, and select the new behavior from the menu list.


When you change a symbol’s behavior, all instances of the symbol that were previously created from the symbol maintain the first applied behavior. For instance, if you create a symbol with a Graphic behavior and then place three instances of this symbol on the Stage, when you change this symbol’s behavior to a Movie Clip behavior, all three instances still maintain the Graphic behavior. You will learn about changing an instance’s behavior in the section “Changing the Behavior of an Instance,” later in this seminar.

Editing a Symbol

You can use various techniques to edit a symbol, and—based on where you are in your development of the movie—you might need to use one technique instead of another to perform the edit. For instance, if you need to make several changes to a symbol, you might want to isolate the symbol so that it’s the only item in a window. Other times, you might want to make a quick change to a symbol and see the change in relation to other objects on your Stage. You would perform this edit to your symbol directly on the Stage. The following techniques activate the Symbol-Editing Mode:

  • Double-click the icon next to the symbol in the library.

  • Double-click the symbol image in the Preview window.

  • Double-click the instance of the symbol on the Stage.

  • Select the symbol on the Stage and select Edit, Edit Symbols.

  • Select the symbol on the Stage and press (Command-E)[Ctrl+E].

Your symbol displays in the Symbol-Editing Mode, and you can edit the symbol’s composition using the Flash MX tools, Property Inspector, or panels. After you edit a symbol, any instances of the symbol that you have used in your movie are updated with the new features or modifications. Remember: An instance is just a pointer or reference to the symbol and, therefore, reflects any new changes that are added to the symbol.


To exit the Symbol-Editing Mode and return to the movie, click the Scene 1 tab in the upper-left corner of the Stage or press the Back arrow.

Setting a Symbol’s Reference Point

The Symbol-Editing Mode has its own Stage and rulers that are relative to the symbol. When you first create a new symbol, by default, the registration point is set for the center of the symbol and is represented by crosshairs on the Stage of the Symbol-Editing Mode (see Figure 4.8).

Figure 4.8. In this figure, the Info panel reflects the x, y coordinate of the symbol’s registration point.

You have a choice of a center or any of the out-edge locations for the registration point of a symbol. Setting the registration point for your symbol sets a point of control for interactivity. The Info panel is used to work with an object’s coordinates. All objects reside within a rectangular bounding box. Many times you will want to set a symbol’s registration point to be its upper-left corner and then align the symbol so that its zero coordinates are the upper-left corner (see Figure 4.9).

Figure 4.9. Setting your geometric symbols to have an upper-left corner registration point can be useful for attaining precision in your site design.


If a symbol has a center registration point, when the object is resized, it resizes from all sides. The object expands or contracts from the center point. If an object has an upper-left corner registration point, the object resizes from that corner, which can be easier to work with when designing with precision.

Editing a Symbol on the Stage

Another useful symbol-editing technique is to use the Edit in Place command. This command enables you to edit a symbol on the Stage in relation to all the other items on the Stage. To activate this command, select the instance of the symbol you want to edit on the Stage and (Control-click)[right-click] to access the shortcut menu. Then select the Edit in Place command.


You can also double-click an instance on the Stage to launch the Edit in Place command.

Using the Edit in Place command takes you to Symbol-Editing Mode for the symbol of this instance. The Stage dims, and only the symbol is accessible. Two tabs appear in the upper-left corner of the Flash window to indicate that you have switched to the Symbol-Editing Mode. Editing a symbol in relation to other objects on your Stage is very helpful for maintaining proportion and relationships with other Stage objects. After you’ve made the necessary changes to the symbol, select Edit, Edit Document to exit the Symbol-Editing Mode.

Altering Instance Properties

So far, this seminar has focused on symbols, which are only one half of the equation for the power of Flash MX. The other half is the instances, which are created by dragging a symbol from the library and positioning it on the Stage. You can have as many instances of a symbol as you want for developing your movie. To allow for variety in your use of instances, certain attributes of each instance can be altered. You can change the color effects applied to it, alter the shape by skewing it, or change the size and rotation of the instance. You can also change the color or tint of an instance. Finally, you can change the assigned symbol linked to an instance. This flexibility gives you the control you need to develop your movie and easily make changes and edits when you need to achieve a certain effect.

Changing the Size and Orientation of an Instance

You can change the size and orientation of any instance. This allows for variety and creativity in your movie objects and design, so your instances won’t all be the same size or in the same position. Always select the instance first and then access or open your Transform panel (see Figure 4.10).

Figure 4.10. The Transform panel enables you to change any instance to a precise size and rotation.

Set your size or the skew percentage, or set the rotation degrees in the panel; the selected instances will then reflect these new modifications.


You can also precisely rotate any instance by selecting Modify, Transform, Scale and Rotate or Rotate and Skew, and entering exact numbers or degrees in the dialog box. This method also produces a very precise and uniform result when altering any instance or graphic on the Stage.


The Free Transform tool in the toolbox can be used to scale or rotate an instance. But this tool is not as precise because you must eyeball the transform as you scale and rotate the graphic.

Applying Color Effects to an Instance

You can change the color effects of an instance through the Property Inspector. Always select the instance that you want to modify first; the Property Inspector reflects the different attributes that can be applied to the instance (see Figure 4.11).

Figure 4.11. By selecting the Color pop-up menu, you can change the brightness, tint, or alpha of an instance.

Select the color effect to apply to the instance. The following list describes each of the menu choices for applying new color effects for an instance:

  • Brightness— Adjusts the brightness of the instance by adding white or black to the instance. You can type a percentage for brightness, or you can adjust the slider to set the brightness.

  • Tint— Adjusts the overall color balance of the instance (see Figure 4.12). Click the Tint Color button and select a new color. You can also create a custom color through the Tint amount and RGB settings or by selecting a new color from the color bar.

    Figure 4.12. You can also use traditional RGB values to create a new tint color.

  • Alpha— Adjusts the transparency of the image allowing other Stage objects to be viewed behind the instance with the applied alpha effect (see Figure 4.13). You can compare this to a color transparency you overlay on top of an image. In the Alpha box, enter a percentage to change the transparency applied to the instance.

    Figure 4.13. In this figure, the bottom rectangle instance has a 50% alpha effect applied and allows the lower half of the Flash MX to display even though the instance is positioned on top of the text.

  • Advanced— Controls the brightness, alpha, and tint of an instance. To access this option, select Advanced from the Color pop-up menu and click the Settings button (see Figure 4.14). This option enables you to access all settings in one panel. The settings on the left reduce the tint and the alpha values by a specified percentage, whereas the settings on the right either reduce or increase the tint and the alpha values by a constant value. The current values are multiplied by the numbers on the left and then added to the values on the right.

    Figure 4.14. You can adjust all three color effects for an instance either by typing the new setting in the input box or by adjusting the associated slider.


When applying a color effect to an instance, you can apply only one effect at a time. For example, if you apply a brightness effect to an instance and then decide to apply an alpha effect, too, the instance returns to its original composition when you select Alpha from the Color pop-up menu. If you want to apply more than one color effect to an instance, you must use the Advanced menu choice. The Advanced option enables you to apply all three effects—Brightness, Tint, and Alpha—to an instance simultaneously.


If you select multiple instances on the Stage, you can apply the same color effect to all the instances simultaneously.

Changing the Behavior of an Instance

When you create a symbol, you set a behavior for it. Even though all instances are pointers to this symbol, you can change the behavior of an instance by using the Property Inspector (see Figure 4.15). This process is different from changing a symbol’s behavior because you are changing the instance’s behavior, which does not affect the original symbol’s behavior. First, you must select the instance on the Stage for which you want to change the behavior. In the Property Inspector, click the Behavior menu and select the new behavior from the list.

Figure 4.15. You can also name an instance with a Movie Clip or Button behavior in the Property Inspector. Naming an instance is beneficial for calling the instance in ActionScript code.

Breaking the Instance and Symbol Link

Sometimes you need to break the link between an instance and its symbol. For example, you might need to alter one instance’s shape to convey a new concept or to make it really stand out. You don’t want to change all the instances linked to this symbol by changing the symbol’s shape, so you need to break the link between this instance and the symbol. To do so, select the instance on the Stage for which you want to break the link and select Modify, Break Apart to break the instance/symbol link. The instance becomes a vector shape, which enables you to modify it as you would any other vector shape. The file size of the movie is then increased by the vector shape size. After the link is broken, any changes made to the symbol do not affect the vector shape that used to be the instance of the symbol.

The Power of the Movie Clip Symbol

The movie clip symbol is a key component for attaining interactivity and a range of functionality in Flash MX. The movie clip symbol has its own Timeline that is independent of the movie’s Timeline. When an instance is created from the movie clip symbol, it has its own functionality that runs regardless of what is happening on the Stage. This allows for special interactivity in the SWF file, such as enabling the end-user to drag and drop a movie clip instance anywhere he wants on the Stage regardless of what is happening as the movie plays through its Timeline. You will use movie clips quite often in your development of a Flash MX movie and throughout the workshop sections of each seminar from this point forward in the book. It is a very powerful feature for gaining additional functionality in your movies.

Identifying the Symbols Used in a Movie

Flash MX offers an easily accessible button on the Stage that lists all the symbols used in a movie. Click the Edit Symbols button in the upper-right corner of the Stage to display the pop-up menu that lists all the symbols used in the current movie (see Figure 4.16).

Figure 4.16. The Edit Symbols button displays a list of all symbols used in a movie.

Selecting one of the symbols from the pop-up menu launches the Symbol-Editing Mode, enabling you to edit the symbol.

Nesting a Symbol Inside Other Symbols

A neat trick and memory-saving technique that Flash MX offers is nesting a symbol inside another symbol. You reduce the size of the movie and the new symbol by nesting an existing symbol inside it. You can take this one step further and create a new symbol by using many existing symbols. In essence, you are creating a reference loop from a new symbol to existing symbols and therefore barely adding any new data to the symbol memory size.

To nest a symbol inside of another symbol, place an instance of the symbols you want to use to create your new symbol on the Stage. Make any additions or changes to the instances, and then select all these instances by Shift-clicking to make them active. Now make them into a new symbol by selecting Insert, Convert to Symbol. Your new symbol is composed of all the instances you selected from the Stage.


You can’t nest a symbol inside itself.

Swapping a Symbol

Sometimes you might need to replace the symbol to which an instance is linked. This causes that individual instance to change to an instance of the new symbol, but any color effects or transformations you might have applied to that instance are preserved.

To assign a different symbol to an instance, follow these steps:

Select the instance on the Stage that you want to assign a different symbol, and then click the Swap button in the Property Inspector (see Figure 4.17).

Figure 4.17. You must have an instance active on the Stage to display all the instance properties in the Property Inspector.

This displays the Swap Symbol dialog box (see Figure 4.18).

Figure 4.18. The active symbol for the instance on the Stage is shown in the Symbol Preview window.

Click a new symbol from the list to be assigned to the instance and click OK. The new instance of the symbol is placed with its center point at the same coordinates as the previous instance’s center point. This might require resizing or repositioning the new instance on the Stage.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint