What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

  How to Create Symbols and Instances in Flash

Basic Tasks: Create Symbols and Instances

Set up your workspace

About creating symbols

Create a graphic symbol

Duplicate and modify an instance of a symbol

Modify a symbol

Create a movie clip symbol

Assign an instance name to the movie clip

Add an effect to the movie clip

Summary

Basic Tasks: Create Symbols and Instances

TOP

A symbol is a reusable object, and an instance is an occurrence of a symbol on the Stage. Repeatedly using instances does not increase the file size and is a good part of a strategy for keeping a document file size small. Symbols also simplify editing a document; when you edit a symbol, all instances of the symbol update to reflect the edits. Another benefit of symbols is that they allow you to create sophisticated interactivity.

 

Set up your workspace

#TOP

First, you'll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.

  1. To open your start file, in Flash select File > Open and navigate to the file:

    • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Create Symbols and Instances and double-click symbols_start.fla.

    • On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Create Symbols and Instances and double-click symbols_start.fla.

    NOTE The Create Symbols and Instances folder contains completed versions of the tutorial FLA files for your reference.

    The document opens in the Flash authoring environment.

  2. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file.

    As you complete this lesson, remember to save your work frequently.

  3. Select Window > Workspace Layout > Default to configure your workspace.

 

About creating symbols

TOP

When you create a symbol, you specify one of the following symbol behaviors:

  • Graphic

  • Movie clip

  • Button

In this lesson, you'll work with graphic and movie clip symbols. For a lesson about button symbols, select Help > Flash Tutorials > Basic Tasks: Add Button Animation and Navigation.
 

 

Create a graphic symbol

TOP

A graphic symbol is well suited for repeated use of static images, or for creating animations associated with the main Timeline. Unlike with movie clip and button symbols, you cannot give instance names to graphic symbols, nor can you refer to them in ActionScript.

You'll take vector art on the Stage and turn it into a graphic symbol.

  1. In the Tools panel, click the Selection tool.

  2. On the Stage, drag around the car to select it.

  3. Select Modify > Convert to Symbol.

  4. In the Convert to Symbol dialog box, enter CarGraphic as the name and select Graphic as the behavior.

  5. The Registration grid uses a small black square to indicate where, within the symbol bounding box, the registration point is located. A registration point is the axis around which the symbol rotates, and the point along which the symbol aligns. Click the upper-left square on the grid to select the registration point location, and click OK.

  6. The car on the Stage is now an instance of the CarGraphic symbol. The Property inspector shows properties for the graphic symbol instance.

  7. Open the Library panel (Window > Library) to view the symbol.

    You'll find the CarGraphic symbol in the Library panel. Flash stores symbols in the library. Each document has its own library, and you can share libraries between different FLA files.

     

Duplicate and modify an instance of a symbol

TOP

After you've created a symbol, you can use instances of it repeatedly in your document. You can modify the following instance properties for an individual instance without affecting other instances or the original symbol: color, scale, rotation, alpha transparency, brightness, tint, height, width, and location.

If you edit the symbol later, the instance retains its modified properties in addition to acquiring the symbol edits.

You'll now duplicate the instance of the car, and change the tint for the duplicate.

  1. On the Stage, select the car. Press Alt and drag the car up to create another instance.

  2. With the duplicate selected, select Tint from the Color pop-up menu in the Property inspector.

  3. In the RGB area, enter 0 in the Red Color pop-up menu, 0 in the Green Color pop-up menu, and 255 in the Blue Color pop-up menu. Then press Enter (Windows) or Return (Macintosh).

    The duplicate instance turns blue, but the original instance remains unchanged.

 

Modify a symbol

TOP

You can enter symbol-editing mode by double-clicking any instance of a symbol. Changes that you make in symbol-editing mode affect all instances of the symbol.

  1. Do one of the following to enter symbol-editing mode:

    • On the Stage, double-click one of the car instances.

    • In the Library panel, double-click the CarGraphic symbol.

    Next to Scene 1 toward the top of the workspace, the name of the symbol appears, which indicates that you're in symbol-editing mode for the named symbol.

  2. In the Tools panel, select the Free Transform tool and drag around the bottom car to select the entire car.

    In symbol-editing mode, the car is a graphic, within a symbol, that you can manipulate as you would any other vector graphic.

  3. Drag the middle-right sizing handle of the Free Transform tool slightly to the right to stretch the symbol.

  4. Click Scene 1, above the Timeline, to exit symbol-editing mode.

    Both instances of the symbol reflect the transformation.

 

Create a movie clip symbol

TOP

Now that you've specified snap alignment settings, you'll use the snap alignment settings tA movie clip symbol is analogous in many ways to a document within a document. This symbol type has its own Timeline independent of the main Timeline. You can add movie clips within other movie clips and buttons to create nested movie clips. You can also use the Property inspector to assign an instance name to an instance of a movie clip, and then reference the instance name in ActionScript.

You'll convert the tire on the Stage into a movie clip.

  1. With the Selection tool, click the tire on the Stage to select it and select Modify > Convert to Symbol.

  2. In the Convert to Symbol dialog box, enter MCWheel as the name, and select MovieClip as the behavior.

  3. In the Registration grid, this time select the center square as the registration point, so the center of the movie clip becomes the axis around which the symbol rotates. Click OK.

  4. The image on the Stage is now an instance of the MCWheel symbol in the library.

 

Assign an instance name to the movie clip

TOP

To refer to an instance in ActionScript, and as a general best practice, always assign instance names to buttons and movie clip symbols. (You cannot assign an instance name to a graphic symbol.)

  • In the Property inspector, with the instance of MCWheel selected on the Stage, enter wheel_mc in the Instance Name text box.

 

Add an effect to the movie clip

TOP

You can create an animation within a movie clip Timeline, in symbol-editing mode, that plays independent of the main Timeline. You'll add an effect to the MCWheel symbol that will cause all instances of the symbol to spin.

  1. With the Selection tool, double-click the wheel_mc instance to enter symbol-editing mode.

  2. Right-click (Windows) or Control-click (Macintosh) the symbol and select Timeline Effects > Transform/Transition > Transform.

  3. In the Transform dialog box, enter 60 in the Effect Duration text box to specify that the effect spans 60 frames in the Timeline.

  4. In the Spin text box, enter 1 and verify that 360 populates the Rotate text box.

  5. Click Update Preview to view a preview of the effect and click OK.

    The effect spans 60 frames in the movie clip Timeline.

  6. Click Scene 1 above the Timeline to exit symbol-editing mode.

  7. Select Control > Test Movie to view the animation.
     

Summary

TOP

Congratulations on learning about symbols and instances. In a few minutes, you accomplished the following tasks:

  • Create a graphic symbol.

  • Duplicate and modify an instance.

  • Create a movie clip symbol.

  • Edit a symbol by adding an effect.

To learn more about Flash, take another lesson in the Basic Tasks series.

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash