facebook google plus twitter
Webucator's Free Adobe Flash CS6/CC Tutorial

Lesson: Graphic Symbols and the Library

Welcome to our free Adobe Flash CS6/CC tutorial. This tutorial is based on Webucator's Introduction to Flash CS5 Training course.

In this section, we will work with Graphic Symbols and introduce the Library. The Library is one of the basic elements of Flash Movies.

Lesson Goals

  • Learn to use the Library Panel.
  • Learn to create and use symbols.
  • Learn to import items to the stage or library.

Working with the Library Panel

The Library Panel is utilized to store objects that can be reused throughout the movie. Items stored in the library are considered a Symbol. The Library helps Flash keep file size down by storing the basic information about objects in one place. When these objects are reused, known as an instance, Flash does not need to store the basics again. It only stores what is different about the new instance of the object. Certain properties of the instance can be changed, for example, transparency, color, size, and rotation.

Below, notice the Library is open on the right and has one Graphic Symbol, called Logo.

About Symbols

There are three types of symbols. Graphic Symbols, Button Symbols (covered later in this course), and Movie Clip Symbols (covered in the Advanced Course). This lesson primarily covers Graphic Symbols.

Symbols all have their own timelines. In fact, the timeline is one of the biggest differences between the types. Buttons have a special timeline that reacts to the user's mouse (when the mouse is over, for example, formatting can be applied to create an effect). We will see more about Buttons later.

Graphic Symbols and Movie Clip Symbols both have a layer structure and timeline that looks like the main timeline. Movie Clip timelines play independently of the main timeline. But, Graphic Symbols play in synch with the main timeline. That means if the main timeline stops, any Graphic Symbols will stop, also.

Creating Symbols

There are two ways to create Symbols:

  1. From existing content: You may draw the item first using the drawing tools. Select the shape (or shapes) and select Modify > Convert Symbol.
  2. From scratch: Start with a blank slate by choosing Insert > New Symbol... You will then see a new blank timeline and set of layers to create the content.

Either way, you will need to set the Name and the Type. If you are converting existing content, you may also set the Registration Point. That is the spot which will be treated as the 0,0 position when counting the number of pixels from the left or the top. The registration point can help in exact placement during advanced animations. If you create a symbol from scratch, the registration point will be visible on the stage.

Editing and Managing Symbols

There are a number of ways to edit symbols. When editing a symbol, you will see the symbol's name in the Edit Bar next to the name of the Scene. The two most common techniques are:

  1. Double-click the instance on the Stage. (Or, right-click and choose Edit in Place) This way you will see the instance in context with the other objects around it. The logo below is still stretched as it is in the instance.
  2. Double-click in Library. (Or, right-click and choose Edit) The symbol will still open, but you will not see any other items on the stage. It is the symbol alone. You will not see any effects that are on any instances surrounding the art you are editing.

Note: No matter how you edit the symbol. If you make changes to the symbol itself, it will change all instances of the symbol. It is important to watch the Edit Bar to know if you are editing a symbol or the main timeline.

Duplicating Symbols

If you have the need to create a new symbol that is very similar to an existing symbol, you will save time by duplicating the existing symbol. When you are ready to duplicate an existing symbol, right-click in the Library and select "Duplicate".

Swapping Symbols

Once an instance has been placed on the stage, you might decide to replace it with another. For example, if you are making a photo gallery, you might want the first picture to fade in and then fade out. When the second picture fades in, you will likely want it in the exact same spot. One way to do this is just swap one for the other.

With the original instance selected, look for the Swap button in the Properties Panel.

Changing the Size and Position of Instances

Certain changes may be made to instances on the stage that do not affect the main symbol. You may change the size, the rotation, the tint and the transparency level.

Start by dragging multiple instances of a symbol from the library to the stage. Then, select the Free Transform Tool. Move your mouse around the edge of the instance. You will see various mouse icons. Experiment with the changes you can make to each instance. For example, you can stretch, squish, skew and rotate the instance. None of these changes will change the main symbol. They will only change the selected instance. The main characteristics of the symbol remain, even when the original changes, the unique instances retain their own personality.

Changing the Color Effect of Instances

You may also add a tint that will color in your instance with a solid color. The screen shot below shows one instance has been completely covered in black at a level of 100%. Notice the Properties Panel on the right. You may also change Brightness and Alpha (transparency).

Demo: Creating Graphic Symbols

This demo will show how to create graphic symbols and store them in the library. When you are done, you will have multiple instances of the Paw Print graphic symbol which you might use in a later project. It might look something like this:

  1. Start by opening GraphicSymbols/demos/PawPrint.fla. On the screen you will find shapes which look like a paw print. (If you would prefer to draw your own paw print or make changes to the one provided, you may do so now or later. Since it is about to become a symbol, it will be easy to make changes to all instances in the future.)
  2. Select all parts of the paw print. (You may do so by (1) using Shift+Click to add objects to your selection, or (2) using the selection tool (the black arrow) to draw a big box surrounding the whole image.)
  3. Select Modify > Convert to Symbol (or press F8). Name the new symbol "Paw Print", select the Symbol Type "Graphic" and set the registration point to the center.
  4. Look in the Library to view your new symbol.
  5. Now, drag several instances from the Library to different parts of the stage. You may change various properties of each instance. For example, Alpha (transparency) and Tint are adjustable by adding an Effect in the Properties Window. Also, use the Free Transform Tool to change size, rotation and skew.
  6. Be sure to save your file. You may decide to use your Paw Print in the next exercise.

Create Graphic Symbols for a Banner Ad

Duration: 20 to 30 minutes.

You have been assigned to design a banner ad for the local newspaper web site for our upcoming Pet Parade in the park. The ad we purchased is 120 x 600 px. (Although, you can change that.)

In this exercise you will use the Paw Print Symbol that you made earlier this section. (Or, you may use the one provided for you.)

  1. Open GraphicSymbols/exercises/PetParade.fla. It is already sized at 120 x 600 px.
  2. Open the Library to see the assets your team has already assembled. You will find the paw print, the park logo and a number of photos sized appropriately.
  3. Take some time to plan out your ad and draw it on paper or in a Flash Document. (Or, use ours as your model.)The following steps will give you some hints about how we made ours.
  4. Create a new layer and name it background. Drag an instance of the paw print to the stage. Reduce the size and make it transparent. Copy it and paste a number of instances to make a wandering trail of footprints (or a design you like).
  5. Create a new layer and name it Heading Back. Draw a rectangle to cover a small portion of the top of the document. Ours has no stroke and a fill of #663333. Ours has a width of 121 pixels and a height of 83 pixels.
  6. Create a new layer and name it Heading Text. Add three text boxes at the top which will say Saturday! and Pet and Parade. Our text is white.
  7. Hint: To easily set each of the text boxes to be the exact same width, select all three pieces of text and open the Align Panel. Click on Match Width and Align Left Edge.
  8. Create a new layer and name it Photos. Drag photos of your choice to the stage.
  9. If you would like to add any effects like transparency to the photos, you must convert them to symbols first. These effects must be added to the instances of the symbols on the stage.
  10. Create a new layer and name it logo. Add the park logo to the stage. Ours is at the bottom.
  11. Add any additional content to the ad.
  12. When you are done, test the movie!

If you are done early...

  • Add a Drop Shadow Effect to the text.
  • Find additional photos to import.
  • Add the additional copies of the logo symbol to the background layer.

Import to Stage / Import to Library

It is easy to import images made in other programs to the stage or the library. Choose File > Import > Import to Stage or Import to Library. You may import images (jpeg, gif, png), sounds, videos and more. All external items you import in from another source will appear in the library, they are not Symbols automatically. You may, however, convert them to symbols at any time.

Open Another Document's Library / Sharing

It is easy to move items from one library to another. When two or more documents are open, the top of the Library will show a drop-down list of document names. Select the library that holds the items you would like to take. The Library panel will now be available to use. Drag from the Library to the stage of the new document and the item will automatically be added to the stage and library of the new document - even if you delete the instance from the stage of the new document, the library will still retain the item.

You may also open the library of another document by selecting File > Import > Open External Library.

The symbol will be copied from one file to another, but it will not remain connected to the original. There are two ways for a symbol to remain connected to the original. Neither is covered in this course. But, one technique is called Runtime Sharing. Runtime Sharing means that the symbol is updated every time you run the .swf - after it is published. You may also set the Source of a symbol. This method executes before the file is published. Both of these are set in the Symbol's Advanced Properties window.

Importing Illustrator Files

When a photo is imported into Flash, it is in the form of a bitmap. Bitmaps are not very editable. You may use the bitmap tools to edit, but the editing options are limited. Importing an Illustrator file is another story!

All of the layers, paths and individual objects are available and may be manipulated as vector art.

Choose File > Import > Import to Stage or File > Import > Import to Library. Locate the .ai file and you will see the following dialog box.

Importing Photoshop Files

Just like importing from Illustrator, when you import a .psd into Flash, you retain many of the key features of the .psd document. Again, you may keep all layers. You may also create a new keyframe for each layer or even convert the .psd into a Movie Clip.

Create Graphic Symbols

Duration: 10 to 15 minutes.

In this exercise you will convert three provided shapes into Graphic symbols and import a Baseball from an Illustrator File.

  1. Open GraphicSymbols/exercises/Baseball.fla. Notice the layer structure.
  2. Open the Library. For now, it is empty. You are to select the three objects on the stage, individually, and convert each one into a graphic symbol.
  3. You are welcome to draw any of your own items and use those instead.
  4. Import a baseball drawn in Illustrator. Select File > Import > Import to Library. Browse to GraphicSymbols/exercises/Baseball-Illustrator.ai. Leave the default settings on the import window and pay attention as the new item will appear in the Library.

If you are done early...

  • Draw any additional items of your own.
  • If you have any of your own Illustrator or Photoshop files, import them.