Introduction to Symbols

Symbols are the very foundation of every Flash movie. They are defined objects that can be reused over an over, allowing our movies to have a small file size. Once a Symbol is created, it is stored in a movie's Library and is available to be used again at any time. By storing the object in a Library, each movie only has to define the object once. Therefore every time a Symbol is reused on the Stage, Flash reuses the same definition of the object and stores only the new location of it and any alterations to its properties such as its Alpha.

There are many different types of Symbols in Flash, each providing a unique function in your movie. The three main types of Symbols are Graphics, Buttons, and Movie Clips. In addition there are Font Symbols, Video Clips and Components. Combining these Symbols allows you to create animation and interaction in your movies. While there are several types, novice developers should focus on the main three until you are comfortable with their creation, uses and manipulation. Having a solid understanding of the basic types will make using the others easier.

Graphic Symbols
Graphic symbols are pieces of artwork that have their own timeline and layer sets. They are used to define artwork that will be used over time or that will be animated on the Stage. Graphics can also be used for animation that is locked to the timeline's progress (more on this later). Graphic symbols can be nested within other symbols as well. An example would be creating a tire and rim for a car. Once a symbol is made for the body of the car, the tire and rim symbol can be placed within the body symbol saving file size by only defining one set and allowing us to easily animate all the parts on the timeline together.

Movie Clips
Movie Clips are like Graphic symbols in that they have their own timeline and layer sets. Movie Clips however allow for animation that is independent of the main timeline's progress allowing you to create animation that may loop or continue playing (such as a spinning logo) when the main timeline is stopped. In addition, Movie Clips are much more powerful because once placed on the Stage, they can be named. This allows us to call them with ActionScript code to be controlled or have their properties changed. This simple trait lets us create interaction and dynamic visual effects at runtime verses pre-determined timelines. In addition, MX also allows Movie Clips to react to mouse events through scripting. Prior versions of Flash would require Buttons to be placed within Movie Clips for that clip to be interactive. MX provides us with a quicker developing environment with these new events.

Buttons
Buttons allow users to interact with your movies and are used to give visual ques to users through mouse states such as rollovers and clicks. Buttons are unique to the prior types because they only contain four frames on their timelines. They too can have layer sets, but each of the four frames represents a different stage in a cursor's interaction. These four frames, Up, Over, Down and Hit define artwork for that specific reaction to the mouse.

In its dormant state, a user will see the artwork placed on the Up frame. Rolling over the Button will cause the Button's Timeline to jump to the Over state and if pressed, the timeline moves to the Down state until released. The fourth state represents the clickable area for the Button. Artwork here will never be seen by the user, but will stand for the area that the mouse can invoke each of the other states. If the Hit state is not defined then Flash uses a prior frame of the Button for its interactive area.

Buttons can now be given names in MX just as Movie Clips can. This allows us to assign actions for the Button in remote locations such as the main timeline verses attaching it directly to the Button. This provides a better environment for script organization and debugging.

Symbols and Their Instances
Once a symbol is defined in the Library it is available to be reused on at any point in your movie. You can open the Library by choosing Window>Library. Once a symbol is dragged from the Library and placed on the Stage it is called an Instance. You can think of an Instance as a copy of the original. Instances are tied to the original unless broken apart. Instances have Properties such as Alpha and Tint that allow us to alter their appearance on the Stage. These are important notes to make, as they will effect how you use instances in your movie.

For example, if you created an object in the Library and placed several instances of it on the stage, modifying the original symbol will create a global change to all of its instances in a movie. This can be a positive trait in that it makes updates easy by only having to make a change once. It can also be a negative trait because if you want to make a change to only one of the instances it will require breaking it apart and creating a separate symbol for that artwork. As you go through more tutorials and start creating content with Flash you will become more accustomed to which situations will benefit from using symbols. It's important to remember at this point that symbols allow you to define artwork and reuse it, thereby cutting down on file size, development time and making it easier to apply global changes.

Creating Graphic Symbols

In an Introduction to Symbols you learned about Graphic symbols. As mentioned, Graphic symbols are pieces of artwork that have their own timeline and layer sets. There are several reasons and benefits of using symbols. The 2 main reasons are reducing movie file sizes and the ability to create Motion Tweens (more on this later) By creating Graphic symbols you can reuse artwork without increasing the size of your movie. A good example would be a forest scene in a cartoon. Lets imagine there were 10 trees and each tree you drew was 10kb. Your file size would then be 100kb. By creating a Graphic symbol for a tree, you can place multiple copies or “instances” of the symbol on the stage without increasing your file size. This would reduce the example by 90kb to 10kb! Motion Tweens, which are used to create simple linear movement in Flash, are another reason for using symbols. If we wanted to animate a cloud behind the trees in our previous example, we would need to convert the cloud artwork into a symbol in order to animate it with a Motion Tween. Lets take a look at how we create Graphic symbols.

To create a Graphic symbol choose Insert>New Symbol. You will get a Create New Symbol dialog box. Enter a name for your symbol and select Graphic for the Behavior. Behavior represents how the symbol will act and dictate what it can do on the stage. After defining the symbol click OK. You will be moved to a blank stage and above it in the Information Bar you will see that you are inside of your new symbol. In the center of the stage is a crosshair, which is known as the symbol's registration point. This is the point that Flash will use for coordinates on the stage. It will also represent the center point for a symbol when doing things such as rotation. Artwork placed perfectly in the center over the registration point will spin on center in a rotation, while artwork that is off center will appear to revolve around it.

Place some artwork inside of your new symbol and return to the main timeline by clicking Scene 1 in the Information Bar above the left of the stage or by selecting it in the Scene drop down to the right. You'll notice that your symbol isn't on the stage. When creating a new symbol, its definition is stored in the movie's Library (more on this later). To open the movie's Library choose Window>Library. Once open you will see the symbol you just made listed in the Library. To add it to your timeline simply drag it onto the stage. Once added, the artwork on the stage is known as an instance of the symbol defined in the library. You can add an unlimited amount of instances to your timeline by dragging more to it. Your file size will increase slightly in bytes because Flash stores the X & Y coordinate for the instance, significantly less than redrawing the artwork each time. You will be able to affect the appearance of the instance by applying effects to it as well as scale and rotate it on the stage. All these are independent of the original symbol's definition.

Creating Movieclip Symbols

In an Introduction to Symbols you learned about Movie Clip symbols. As mentioned, Movie Clips are like Graphic symbols in that they have their own timeline and layer sets. Movie Clips however allow for animation that is independent of the main timeline's progress allowing you to create animation that may loop or continue playing (such as a spinning logo) when the main timeline is stopped. In addition, Movie Clips are much more powerful because once placed on the Stage, they can be named. This allows us to call them with ActionScript code to be controlled or have their properties changed. This simple trait lets us create interaction and dynamic visual effects at runtime verses pre-determined timelines by setting their properties. In addition, MX also allows Movie Clips to react to mouse events through scripting. Prior versions of Flash would require Buttons to be placed within Movie Clips for that clip to be interactive. MX provides us with a quicker developing environment with these new events. Lets take a look at how we create a Movie Clip.

To create a Movie Clip symbol choose Insert>New Symbol. You will get a Create New Symbol dialog box. Enter a name for your symbol and select Movie Clip for the Behavior. Behavior represents how the symbol will act and dictate what it can do on the stage. After defining the symbol click OK. You will be moved to a blank stage and above it in the Information Bar you will see that you are inside of your new symbol. In the center of the stage is a crosshair, which is known as the symbol's registration point. This is the point that Flash will use for coordinates on the stage and represent the center point for a symbol.

Place some artwork inside of your new symbol and return to the main timeline by clicking Scene 1 in the Information Bar above the left of the stage or by selecting it in the Scene drop down to the right. You'll notice that your symbol isn't on the stage. When creating a new symbol, its definition is stored in the movie's Library (more on this later). To open the movie's Library choose Window>Library. Once open you will see the symbol you just made listed in the Library. To add it to your timeline simply drag it onto the stage. Once added, the artwork on the stage is known as an instance of the symbol defined in the library.

While the Movie Clip is selected on the timeline look at the Properties Panel. In the far left of the Panel you will see the Behavior dropdown menu. Below that is an Instance Name field. Entering a name for the instance here will allow you to access the Movie Clip’s properties such as its width. Movie Clips can have methods in addition to properties. Methods allow us to do something to what are known as objects in Flash. In this case, the object is a Movie Clip and it has several methods such as “play()” and “stop()”. These methods allow us to control Movie Clips because they run independent of other timelines. Methods can also be created for Movie Clips as well as other objects.

Creating Button Symbols

In an Introduction to Symbols you learned about Graphic symbols. As mentioned,
Buttons allow users to interact with your movies and are used to give visual ques to users through mouse states such as rollovers and clicks. Buttons are unique to the prior types because they only contain four frames on their timelines. They to can have layer sets, but each of the four frames represents a different stage in a cursor's interaction. These four frames, Up, Over, Down and Hit define artwork for that specific reaction to the mouse.

In a Button’s dormant state, a user will see the artwork placed on the Up frame. Rolling over the Button will cause the Button's Timeline to jump to the Over state and if pressed, the timeline moves to the Down state until released. The fourth state represents the clickable area for the Button. Artwork here will never be seen by the user, but will stand for the area that the mouse can invoke each of the other states. If the Hit state is not defined then Flash uses a prior frame of the Button for it's interactive area.

To create a Button symbol choose Insert>New Symbol. You will get a Create New Symbol dialog box. Enter a name for your symbol and select Button for the behavior. Behavior represents how the symbol will act and dictate what it can do on the stage. After defining the symbol click OK. You will be moved to a blank stage and above it in the Information Bar you will see that you are inside of your new symbol. In the center of the stage is a crosshair which is known as the symbol's registration point. This is the point that Flash will use for coordinates on the stage and represent the center point for a symbol.

Once your symbol has been created you can begin adding artwork for each state of the button you want to show a change for. By default you will begin with a blank keyframe in the Up state. To add additional states, simply select the spot under the state you want to add and choose Insert>Blank Keyframe. You can then add artwork to that state. You are not required to add all the states or any if you so desire. For example, you could have an Up and Down state only.

As we mentioned earlier, the Hit state acts a bit different from the other three. When artwork is plced here it is never seen by the user so it can be any shape or size you want the mouse to interact with. The hit state is sometimes used to create clear buttons. These buttons can be used to make hot spots on your stage with having to define visible artwork. To make a clear button insert a blank keyframe on the forth frame. Adding artwork here will let the mouse interact with the button, but without having anything in the other states it’s never seen. Returning to the main stage, you can now drag your clear button to the stage from you library. Once placed you will notice it turns to a transparent aqua color. This is a visual for you as a developer to scale and relocate it on the stage. Once exported, you will not see the aqua shape.
Graphic symbols are pieces of artwork that have their own timeline and layer sets. There are several reasons and benefits of using symbols. The 2 main reasons are reducing movie file sizes and the ability to create Motion Tweens (more on this later) By creating Graphic symbols you can reuse artwork without increasing the size of you movie. A good example would be a forest scene in a cartoon. Lets imagine there were 10 trees and each tree you drew was 10kb. Your file size would then be 100kb. By creating a Graphic symbol for one tree, you can place multiple copies or “instances” of the symbol on the stage without increasing your file size. This would reduce the example by 90kb to 10kb! Motion Tweens, which are used to create simple linear movement in Flash, are another reason for using symbols. If we wanted to animate a cloud behind the trees in our previous example, we would need to convert the cloud artwork into a symbol in order to animate it with a Motion Tween. Lets take a look at how we create Graphic symbols.

To create a Graphic symbol choose Insert>New Symbol. You will get a Create New Symbol dialog box. Enter a name for your symbol and select Graphic for the Behavior. Behavior represents how the symbol will act and dictate what it can do on the stage. After defining the symbol click OK. You will be moved to a blank stage and above it in the Information Bar you will see that you are inside of your new symbol. In the center of the stage is a crosshair which is known as the symbol's registration point. This is the point that Flash will use for coordinates on the stage. It will also represent the center point for a symbol when doing things such as rotation. Artwork placed perfectly in the center over the registration point will spin on center in a rotation, while artwork that is off center will appear to revolve around it.

Place some artwork inside of your new symbol and return to the main timeline by clicking Scene 1 in the Information Bar above the left of the stage or by selecting it in the Scene drop down to the right. You'll notice that your symbol isn't on the stage. When creating a new symbol, its definition is stored in the movie's Library (more on this later). To open the movie's Library choose Window>Library. Once open you will see the symbol you just made listed in the Library. To add it to your timeline simply drag it onto the stage. Once added, the artwork on the stage is known as an instance of the symbol defined in the library. You can add an unlimited amount of instances to your timeline by dragging more to it. Your file size will increase slightly in bytes because Flash stores the X & Y coordinate for the instance, significantly less than redrawing the artwork each time. You will be able to affect the appearance of the instance by applying effects to it as well as scale and rotate it on the stage. All these are independent of the original symbol's definition.