For most Flash designers, the Movie Clip has been an important and rather indispensable building-block for creating dynamic Flash web sites and applications. Movie Clip symbols are very intuitive and easy to relate to, mainly because of the metaphors of ‘timelines’, ‘frames’, ‘keyframes’, ‘layers’, and ‘clips within clips’, as well as the ease of manipulating them via the tools palette when creating .fla files.

Flash creators moving to ActionScript 3.0 and Flash CS3 may find that movie clips have become somewhat ‘de-emphasized’ in the latest documentation and tutorials available. This is perhaps a result of Adobe’s commitment to expand its reach to Java and C++ developers, as well as expanding Flash’s potential as an application platform which goes beyond timeline-centric media.

That’s all well and good, but where does that leave those of us who have come to know (and love) movie clips throughout the years? One of the benefits of designing and producing in Flash, for me, is the visual nature of the interface, and the power of clips in the library and nested timelines as a way to organize content and interactivity. Fortunately, we are still in very good shape, because movie clips are still very available, and their capabilities have even been extended in ActionScript 3. However, in order to take advantage of these capabilities, we need to gain a somewhat solid understanding of AS3.

What are Movie Clips in ActionScript 3?

In AS3, movie clips are a type of Display object. A Display object is an element that can appear on screen and be manipulated by our code. All Display objects have certain properties (which can be set by our code), as well as methods (functions) which can be called by our code.

All Display objects, for example, have the following properties (among others):

• alpha
• height
• mouseX
• mouseY
• filters

So because movie clips are a type, or descendant class of the DisplayObject class, they automatically inherit these properties.

Movie clips are also Display Object Containers. This is a type of object which can hold display objects. This means movie clips can contain various display object types, such as other movie clips, sprites, or bitmaps.

This information is important to know, because when you read the documentation on movie clips available from Adobe, you will see ‘inherited properties’ and ‘inherited methods’. This functionality comes from the classes that the movie clip is descended from. It will also open up more possibilities in your Flash design. You may not always, for example, want to use movie clips for simple graphics that you want to animate, when you can use sprites. Sprites are display objects that do not have a timeline, and take up less Flash player resources (important especially for web or mobile content).

Exporting Movie Clips from the Library

If you are familiar with exporting library movie clips in AS2, you will need to do things slightly differently in AS3. Because of the object-oriented nature of AS3, movie clips which are to be exported need to be given a class name.

You do this by creating a ‘linkage name’ which will become the class name. This class name will enter the ’scope’ of your .swf file when it is exported. You no longer need to use the AS2 attachMovie() method, however, you will need to instantiate the class using AS3 code.

Creating an Instance of a Movie Clip in AS3

Whenever you want to create an instance of a movie clip which is residing in the library (and properly given a class / linkage name) you can use the new operator. If we have exported our MC with the class name “MyMovieClip”, we could use create an instance like so:

var myInstance = new MyMovieClip();

So now you have created an instance of the clip. But this is not the same as the attachMovie() method, because the clip is not actually a part of anything. It has been created in the space of the Flash player, but is not yet visible. It lives in the variable “myInstance” but that’s it. I personally like the fact that it is not yet on the stage, and I think this is an improvement over ActionScript 2. With the new method we are responsible for placing it wherever we want, whenever we want, and it gives us more flexibility, because we can manipulate this instance before we put it anywhere. For example, we could change the alpha, size, width, or apply filters, and then place it on the stage somewhere.

Placing the Movie Clip Instance on the Stage

Remember that our MC is a DisplayObject. Display objects go inside display object containers. So, logically, we need to place our movie clip inside of some DisplayObjectContainer instance. Let’s say that you are writing your ActionScript on the main timeline of an .fla, frame 1. Well, good news, that .swf file’s root is a Display object container. So when you are writing your code on frame 1, you could do the following:

var myInstance = new MyMovieClip();
addChild(myInstance);

Since you are writing your code on frame 1 of an .fla file, you can make your new movie clip one of its children by using the addChild() method. After you do this, the .swf file now has one child, your movie clip. This will also make it visible, by default at x position 0 and y position 0. In Adobe’s terminology, this is adding your clip to the display list.

Remember that you can manipulate the movie clip’s properties before OR after you add the clip to the display list.

Removing the Movie Clip from the Stage

At some point you may need to remove the child from the display list. You can do this like so:

removeChild(myInstance);

This will remove it from the stage, but not necessarily from memory. If you have a lot of instances ‘hanging around’, which are not the children of any display object containers, it may hog up your Flash player memory. You need to make them eligible for “garbage collection.” The best way to do this is to remove all references to those instances. In our example, the variable called myInstance is actually still a reference to our clip. So we can use:

myInstance = null

To remove that reference, making it immediately available for the ‘garbage man’ to come and take that instance away. If there are no active references to an object, the garbage man should activate whenever it is next possible, according to the documentation provided by Adobe.

General Ideas for Optimizing Your Movie Clip Usage

1. Use Movie Clips only for functionality which needs a timeline. This means animations that you create working in the Flash authoring environment. Otherwise, learn about Sprites, Bitmaps, and other classes which might be incorporated into your animations and interactivity.
2. Wean yourself off of placing code on the main timeline (or any timelines) and use ActionScript classes instead.
3. Learn how to use the “document class” of your .swf file, and put all the ActionScript that you used to place on the main timeline in that document class file. You can work with the movie clips which reside in the library inside your document class and it will help you to stay organized.
4. Learn how to use Tweener or another tweening library to produce code-based transitions. Tweening MovieClips with code is very efficient, and you will not need to use the Flash authoring environment to make simple animations, saving you hours, days, or weeks of development time.
5. Use your main .swf as a repository for movie clips and very basic interactive elements, and use your ActionScript class files for all of your animations, transitions, and event handling. You will become more organized, yet you can still design your user interface components visually, and maintain your asset library in a very ‘real’ fashion. The best of both worlds! Happy Scripting

Related Articles

• Loading an external .jpg, .png, or .gif bitmap image file in ActionScript 3.0
• Book Review: Essential ActionScript 3.0 by Colin Moock
• Recommended ActionScript 3.0 Books
• Using ActionScript 3.0 with PHP Part 1: Loading External Variables
• Introduction to the Document Class in ActionScript 3.0 - Tutorial
• ActionScript State Abbreviations Combo Box (U.S. 50 states)