Creating and using Symbols is an efficient way to add artwork or objects to your Flash document. When you create a symbol, it is stored in the Library and it can be reused as an instance in the Stage.
Any element in Stage (shape, line, obect, text, Group, image) can be converted in Symbol and stored in Library.
Flash lets you create three types of symbols: Graphic, Movie Clip and Button; each one has specific properties and their own discrete Timelines.

- To convert an element into Symbol, select that object on the Stage, click the Modify menu -> Convert to Symbol (or press F8), type a name for the symbol, select a symbol type option, and click OK (see the image below).
Flash automatically will add that Symbol in the Library panel, and the selected object in the Stage become an Instance of that Symbol.

In the "Convert to Symbol" window, there is a registration grid, with a small black square to indicate the registration point for the graphic.
A registration point is the axis (0, 0) from which a symbol rotates or aligns to other objects.

An Instance is a copy of a symbol. When you use a symbol in the Stage you are using an instance of it. You can resize, rotate an instance of a symbol and apply color effects to it without affecting the original Symbol in the Library.
You can use multiple instances of the same symbol, by dragging it from the Library in the Stage.
When you change the properties of an instance in the Stage, you are only applying these changes to that copy. But when you edit and make changes to the master Symbol, all of the instances of that symbol will be updated with these changes.
If you delete the original Symbol from Library, all its instances will be deleted.

Using Symbols and Instances when you want to use multiple copies of an element will keep the file size down because no matter how many times a symbol is used, it's only stored once. Even if you have 100 instances onto the Stage, the symbol is still stored only once and the file size will be the same as with a single instance.

Here's an example from which you can learn how to create and how to use a simple Symbol:
  1. Open a new Flash document, and use the "Oval tool" to draw a circle. Click the "Selection tool" and make sure the circle is selected.
  2. Click Modify -> Convert to Symbol (or press F8). The "Convert to Symbol" window will be opened.
  3. Type a name (for example Cerc), select a symbol type option (for example Movie Clip), then press OK.
    Convert to Symbol
    - You should always name symbols logically. The default "Symbol 1", "Symbol 2", ... might seem logical, but having 20 symbols all named in this manner can become unwieldy.
  4. Open the Library panel by clicking Window -> Library (or Ctrl+L), and you should notice one symbol, with the name Cerc, in the Library.
  5. The object remained on the Stage became an instance of the Cerc symbol.
  6. Drag 3 or 4 instances of the Cerc symbol onto the Stage (by single-clicking and dragging the picture of the circle from the Library window onto the Stage).
  7. Now we try to edit the master symbol. In the Library panel double-click the picture of the circle (or right-click on the Cerc name and choose Edit).
    Now you're inside the Cerc symbol where you can edit its contents. You can see Scene 1: Cerc in your Edit Bar, indicating you're editing the master version of the symbol (see the image below).
    Edit master symbol
    - Another clue that you are editing the contents of a symbol is a plus sign (+) in the working place, and the Stage appears to have no borders.
  8. Change the circle color and click "Scene 1" in the Edit Bar (or double-click on an empty area) to get out of Edit mode for the master symbol.
    You return to the main scene with multiple instances of the Cerc symbol visible. The name "Cerc" disappeared from the Edit Bar
  9. Now we reenter another way in the edit mode for the symbol. Double-click one of the instances of the Cerc symbol on the Stage (or right-click on an instance and choose Edit in Place).
    - You should see the name "Cerc" in the Edit Bar and all the other instances dim slightly. This is similar to how you can edit the contents of a grouped shape.
    In this page, change again the color of the circle, select the "Free Transform tool" and make the circle a little oval.
  10. Go back to the main scene by clicking "Scene 1" in the Edit Bar. The changes you made are transfered to all instances of the Cerc symbol.
    - Any new instances of the symbol you drag from the Library will have the same effect.
  11. In the main scene, select with the "Free Transform tool" one of the instances, rotate it and modify its size.
    - This time the changes were not transferred to the other instances or to the master symbol.

    The changes made in the edit mode for the symbol are transfered to all instances of that symbol, but the changes made to an instances directly in the main scene not affect the other instances.

  12. Select one of instances and delete it (by pressing "Del" key). The other instances remain on the Stage.
  13. Select the Cerc symbol in the Library panel and delete it (with "Del" key, or right-click and "Delete"). This time all the instances will be deleted.
- In the presentation below you can watch this example.

Creating and using Symbol

- Here -> Working with Symbol you can download the FLA file with this example.

• Another way to create a Symbol is with the New Symbol option. Just click the Insert -> New Symbol. You'll see the same Symbol Properties window that you see when you use "Convert to Symbol", you can give a name and select a type of symbol. This time when you click OK, you are presented with a blank editing screen for the master symbol. Anything you create in that blank page will represent the symbol.

In the Library panel, when you right-click on the name of a Symbol, you'll get a list of options. Here is three of them, most importants:

Daily Test with Code Example

Which tag adds an image in web page?
<div> <img> <span>
<img src="" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
Working with Symbols and their Instances

Last accessed pages

  1. Paragraphs, Line break, Horizontal rule (2513)
  2. AJAX Course, free Lessons (9247)
  3. Select in MySQL, Output results in HTML Table (11212)
  4. HTML Course - Free Lessons (13887)
  5. Read Excel file data in PHP - PhpExcelReader (74309)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2421)
  2. Contact page - CoursesWeb (2322)
  3. Tabs effect with CSS (2310)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (909)
  5. PHP getElementById and getElementsByTagName (860)