Flash Symbols - Flash Tutorials

In this Tutorial you’ll learn the basic concepts of Flash symbols, symbol types (graphics, buttons and movieclips), creating and using them.

What is a Flash Symbol?

A symbol is a reusable object used/created in Flash. A Symbol can be reused throughout your movie or imported and used in other movies. There are three types of symbols: Graphics, Buttons, and Movieclips.

A copy of a symbol used in the movie is called an Instance, which can have its own independent properties (like color, size, function, etc.) different from the original symbol. All symbols used in a flash movie are stored in the Library from where you can drag-and-drop new instances of the symbols into your movie. When a symbol is edited all of its instances get updated, but changing the properties, effects or dimensions of an instance of a symbol does not affect the original symbol or other instances.

Importance of using Flash Symbols

Using flash symbols is very crucial to the file size of your Flash movie. The Flash file size depends largely on the size of all the graphics and texts used in the movie (both symbols and non-symbols) - here the major advantage of using symbols is that a symbol’s size is taken into consideration only once even if it is used a hundred times - this is the true power of Flash. Unused symbols in your library are not counted in the size of your movie.

Important Tip: Get used to using symbols in flash right from the beginning and name them neatly for easy maintenance. It is a very tough job optimizing your file size if you don’t use symbols from scratch!

The Three Types of Symbols

Graphic symbols are reusable static images that are used mainly to create animations. Any drawn vector/plain text/imported bitmap (photo), or combinations of these, can be converted into a single controllable object: as a graphic symbol. They have only one frame in their timeline. Learn how to create a graphic symbol.

Button symbols are used for timeline navigation - They add interactivity to the movie and respond to mouse clicks, key press or rollovers/rollout, and other actions. You define the graphics associated with various button states (Up/Over/Down/Hit), and then assign actions to the instance of a button. They have 4 frames in their timeline - one each for the up, over and down states, and one to define the hit area of the button. Learn how to create a button symbol.

Movieclip symbols are reusable pieces of flash animation - consisting of one or more graphic/button symbols - thus they are flash movies within your flash movie. They have their own non-restricted Timeline (any number of layers and frames - just like the main timeline) that plays independent of the main movie’s Timeline. The best thing about using movieclips is that you can control them from actionscript - you can change their dimensions, position, color, alpha, and other properties and can even duplicate and delete them. Learn how to create a movieclip symbol.

flash symbols

flash symbols

The three symbols appear in the flash library similar to the three symbols the above image.

Flash Graphic Symbols:

Flash Tutorial to create a graphic symbol

Graphic symbols are reusable static images that are used mainly to create animations. Any drawn vector/plain text/imported bitmap (photo), or combinations of these, can be converted into a single controllable object, called a graphic symbol. Graphic Symbols have only one frame in their timeline.

Please carry out the following steps in Macromedia Flash to create graphic symbols.

  1. First create/import the object(s) to be converted into a graphic. Import bitmaps onto the stage using Ctrl+R.
  2. Select the object(s) and then press F8 (or Modify >> Convert to Symbol).
  3. Select the Graphic Behavior and name the symbol, say ‘g_home’.
  4. To edit it at a later point, double-click the symbol in the library (Ctrl + L) or any of its instances on the stage to switch to its symbol-editing mode as shown below. The name of the symbol will appear near the scene name (’Scene 1′ by default, as shown below). 
  5. Make the necessary changes and click ‘Scene 1′ to exit from the symbol editing mode and go back to view the main movie’s time-line.

        

Fig: Symbol-editing Mode of flash graphic 'g_home'

Fig: Symbol-editing Mode of flash graphic 'g_home'

 

Flash Button Symbols:

 

Flash Tutorial to create a button symbol

Button symbols are used for timeline navigation - They add interactivity to the movie and respond to mouse clicks, key press or rollovers/rollout, and other actions. You define the graphics associated with various button states (Up/Over/Down/Hit), and then assign actions to the instance of a button. They have 4 frames in their timeline - one each for the up, over and down states, and one to define the hit area of the button.

Please carry out the following steps in Macromedia Flash to create button symbols.

  1. First create/import the object(s) to be converted into a button. Import bitmaps onto the stage using Ctrl+R.
  2. Select the object(s) and then press F8 (or Modify >> Convert to Symbol).
  3. Select the Button Behavior for the symbol and name the symbol say, ‘btn_home’.
  4. Double-click the instance of ‘btn_home’ on the stage to switch to its symbol-editing mode. The Timeline header changes to display four consecutive frames labeled Up, Over, Down, and Hit as shown below.
  5. The first frame displays the drawn vector/plain text used for creating this button, now insert a Key frame (F6) in the frame labeled Over (Flash automatically duplicates the contents of the Up frame).
  6. Now change the color of the object in the Over frame to create a rollover effect in the button.
  7. Insert frames (F5) for the Down frame and the Hit frame (only defines the area of the button that responds to user action and is not visible at runtime).
  8. Save your work and test the Movie (Ctrl + Enter). That’s it your simple button is ready!

   

Fig: Symbol-editing Mode of completed flash button 'btn_home'

Fig: Symbol-editing Mode of completed flash button 'btn_home'

 

Flash MovieClip Symbols:

Flash Tutorial to create a movieclip symbol

Movieclip symbols are reusable pieces of flash animation - consisting usually of one or more graphic/button symbols - thus they are flash movies within your flash movie. They have their own non-restricted Timeline (any number of layers and frames - just like the main timeline) that plays independent of the main movie’s Timeline.

The best thing about using movieclips is that you can control them with ease - you can change their dimensions, position, color, alpha, and other properties and can even duplicate and delete them. Thus any object that needs to be controlled using flash actionscript (no matter how simple or complex it might be) needs to be a movieclip with an instance name that is called in the actionscript code.

Please carry out the following steps in Macromedia Flash to create movieclip symbols.

  1. First create/import the object(s) to be converted into a movieclip. Import bitmaps onto the stage using Ctrl+R.
  2. Select the object(s) and then press F8 (or Modify >> Convert to Symbol).
  3. Select the Movieclip Behavior and name the symbol, say ‘mc_fade’).
  4. Double-click the instance of ‘mc_fade’ on the stage to switch to its symbol-editing mode. Now create an animation sequence (you can use simple Tweened Animation or Frame-by-Frame Animation)  
  5. The above figure shows the Timeline of the Movieclip symbol. Click Scene 1 to exit from the symbol editing mode.
  6. Save your work and test the Movie (Ctrl + Enter). That’s it your movieclip is ready! Its that simple.

    

Fig: Symbol-editing Mode of completed flash movieclip 'mc_fade'

Fig: Symbol-editing Mode of completed flash movieclip 'mc_fade'

 

Share/Save/Bookmark

Tags: , ,

Leave a Reply