Printer Friendly Version

BellaOnline's Flash and Animation Editor

Create and Edit Symbols and Instances in Adobe Flash Professional CS3

In the last tutorial, we discussed FlashR symbols, instances and the Library Panel and how to use them together to keep your project assets organized and the size of your project to a minimum. In this tutorial, we will do the following.

1. Create a Flash symbol
2. Add instances of this symbol to the Stage
3. Edit the symbol

To create a symbol for our tutorial, let's draw a simple white circle that will represent a snowflake. We will then convert this circle to a symbol in preparation for animation.

  1. To start a new project, choose Create New, Flash File (ActionScript 3.0) from the Welcome Screen.

  2. We need a dark colored background to represent the sky in order to see the white snowflakes. Go to the Properties Inspector and click on the Size/Document Properties button. Set the Background Color to a dark blue in the Document Properties dialog box.

    Oval Tool
  3. Now we will set up to draw our snowflake. Select the Oval tool from the Tools panel and set the Stroke Color to Null and the Fill Color to white. Click anywhere on the Stage and draw a small oval.

    Selection Tool
  4. Double-click on the snowflake with the Selection tool. From the Menu Bar, click Modify, Convert to Symbol. In the Convert to Symbol dialog box, name the symbol Flake and set the Type of symbol to Movie Clip. Keep the default Registration setting. You will see our new symbol displayed in the Library Preview window. You will also see the icon, Name of our symbol and Type of symbol listed in the Library.

  5. If our symbol is now in the Library, what is left on the Stage? The oval has been changed into the first instance of our symbol. Click on the instance of our symbol on the Stage and you can see the information about the instance displayed in the Properties Inspector.

    Instance of: Flake
    Instance behavior: Movie Clip

  6. To add another instance of the symbol to the Stage, simply drag it from the Library.

Now we will edit the symbol or "master" that is stored in the Library by changing the color of the snowflake.

  1. Click outside of the instance on the Stage to deselect all of the instances of the snowflake.

  2. From the Library Panel, double-click on the icon for our Flake symbol. The Stage will change to display the symbol in the center of the edit workspace. Although this edit workspace is the same background color as our Stage, we are not working on the Stage at this time. To verify this, take a look at the Edit Bar and you will see the icon and name of our symbol.

    This is one of two ways to begin editing a symbol. Let's go back to the Stage and see how to use the other method which is called Edit in Place. To get out of our current edit mode and back to our Stage, click on Scene 1 in the Edit Bar.

  3. To use Edit in Place, double-click on one instance of the snowflake on the Stage. You will notice that the Stage has not disappeared as it did before. When we use Edit in Place, the Stage remains visible and the contents are dimmed. This is a nice feature which allows us to edit the symbol and immediately view the effect that it will have on the scene.

  4. We can change the Fill Color of our Flake symbol to a light gray color in the Properties Inspector. Notice that the change in color is reflected in the Library Preview window and in the Properties Inspector. Click on Scene 1 in the Edit Bar to exit editing and return to the Stage and you will see that both instances of the Flake symbol (both snowflakes) are now a light gray.

  5. We will use this project file again. Click File, Save As and name the Flash file Flake.fla.

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor