Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - Symbols: Movie Clip or Graphic?

401 Animation
Flash Compatibility: MX 2004 (or earlier)

Written by: Phil

Length: 3500 words

Assumed Knowledge: Some experience of using symbols, creating standard animations such as Tweens and understanding how to place one symbol inside another (nesting or compound symbols).

Access: Members Bonus tutorial. For the full version you must: LOG ON To become a Member: Click here

 

For Free Tutorials: See listings: Free Tutorials

 

Symbols are a fundamental part of Flash. Comprehending their behaviour is crucial to understanding how different parts of a Flash movies interact with one another. This is particularly important when creating either interactivity or animation. The aim of the tutorial is to learn when to use Movie Clips as opposed to Graphic Symbols and why. This Flash tutorial covers this topic in great detail and with many interactive examples.

The names 'Graphic' and 'Movie Clip' leads to the presumption that a Graphic is for static objects and that a Movie Clip is for things that move. This definition is wrong and can lead to all sorts of problems. It is worth noting that Movie Clips may or may not move and the same is true of Graphic Symbols. If you want to create successful Flash Movies understanding the difference is important.

Cross Ref: If you have not done any Flash animation or don't know what a Movie Clip or Graphic Symbol is, it would be worth having a look at some of the Beginner tutorials first. They cover most of basic animation techniques.

Note: This tutorial is written for Flash MX 2004 but the usage of Movie Clips and Graphics has not changed since earlier versions, so even if you are not using Flash MX 2004 this tutorial is still relevant.

There are two specific occasions when the difference between Movie Clips and Graphic Symbols are critical. They are:

ActionScript Nested Inside a Symbol

You usually have a choice of placing the ActionScript inside or outside of a Symbol. In most cases the Flash Movie, as viewed on a web page, will look the same either way. But how you build the Movie and your choice of Movie Clip or Graphic Symbol may be different.

In the Movie below there is a animated Graphic Symbol which has two buttons. The buttons are part of the Graphic Symbol.

Example: Download the Flash file Ani 401a - AS Inside Symbol


Buttons are part of the Animated Graphic Symbol.

Below is a picture of the Graphic Symbol as you would see it in Flash:


The buttons are in same place as the animation.

Because the buttons are in the same place as the animation, the ActionScript to Stop or Play is very straight forward. Here is the ActionScript for the Stop button:

on (release){
    stop();
}

The important point to remember is: When the ActionScript controlling a Symbol is in the Symbol it does not matter if you use a Movie Clip or a Graphic Symbol.

ActionScript Outside the Symbol

You cannot name a Graphic Symbol. If something does not have a name the ActionScript will not find it unless the script is in the same place as the thing you want to control, as in the example above. But if the ActionScript is located in a different place to the Symbol you have to tell the ActionScript what it is called and where to find it. Thus not being able to name a Graphic Symbol could be a problem, except there is a way around it:

If you need to control a Graphic Symbol you nest it (place it inside) a Movie Clip. You then give the Movie Clip a name.

Note: All Symbols also have 'Library Names'. The name you see when you open the Library, which you can find under: Window > Library

Library names are not used by ActionScript. ActionScript only uses: 'Instance Names'. When you drag a Symbol onto the Stage (work area) the Library name is not important. Only when a Movie Clip is on the Stage can you give it an Instance Name. You do this by selecting the Symbol and typing a name in the Property Inspector, which you can find under: Window > Properties

Example: Download the Flash file Ani 401b - AS Outside Symbol


Example of buttons controlling an animated Graphic Symbol nested inside a Movie Clip.

Cross Ref: If you have no understanding of symbols nested one inside another you may want to look at the beginners tutorial: Tween within Tweens

In the above Flash movie words are animated inside a graphic symbol. The buttons are on the main stage. For the buttons to be able to control the animation, the Graphic Symbol is placed inside a blank Movie Clip. The Movie Clip has been given an Instance Name in the Property Inspector. The code for the Stop button is as follows:

on (release){
_root.myMovieClip.stop();
}

As you can see from the path in the ActionScript, the Movie Clip is on the main Stage (or root): _root.myMovieClip

Cross Ref: If you need to learn more about Paths see the following tutorial: Target Paths

In the ActionScript above there is no mention of any Graphic symbol only the Movie Clip. Yet the animation is built in a Graphic Symbol not a The Movie Clip. The reason that this ActionScript works is crucial to understand. There are two points which are important:

 

This is a members only bonus tutorial. For the full text you must: LOG ON


For a full list of Free tutorials click here



Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.