Movie Clips

Lets look at the types of things that exist in Flash. Ill call them elements . These are the different types of elements Flash has:

• Bitmaps

• Compiled clips and components

• Videos

• Buttons

• Graphics

• BitmapData objects

• Movie clips

• Text (static, dynamic, and input)

• Shapes (lines and fills)

By far, the most useful of these elements, from an animation viewpoint, is the movie clip.

Movie clips can contain any other type of element and can listen for mouse and keyboard events. Movie clips can also be preassembled in the library and put on stage at runtime.

Youve already used movie clips in just about every example so far. Now, lets take a look at how the movie clips come to be and some of their more important features.

Movie clip symbols and instances

The first thing to know is that when you talk about movie clips, you are potentially talking about two different things:

• A movie clip in the library

• A movie clip on stage in the movie

The movie clip in the library is technically called a movie clip symbol , and the movie clip on the stage is called a movie clip instance . The library symbol is like a template. Only one symbol exists for any given movie clip. The on-stage instances are copies of the symbol, and you can have any number of copies of any one symbol. Despite this specific terminology, most people refer to both objects simply as movie clips . Youll probably catch me doing the same in places where what I am referring to is obvious. If there is any question though, I will use their proper names : symbol and instance.

Movie clip creation

Movie clip symbols are created in two basic ways. Youve already seen one of these ways twice in this chapter: select some stage element and convert it to a movie clip symbol. The other way is to simply create a new symbol.

You can create a new symbol by pressing CTRL-F8 ( -F8 on a Mac), by choosing Insert New Symbol from the menu, or by choosing New Symbol from the Library panel menu. The dialog box that comes up is identical to the Convert to Symbol dialog box (shown earlier in Figure 2-1), but the movie clip it creates will be empty. It will also immediately be opened for editing, allowing you to add content if you wish. Make sure that you specify Movie Clip and not Graphic or Button when creating the symbol.

Next, you need to know how to get a movie clip instance on the stage. You can do this in four main ways: manually, copying an existing instance, attaching a new movie clip, or creating an empty movie clip. Manually means to simply drag the symbol onto the stage in the authoring environment. Not much needs to be said about that. The other methods require a bit more explanation.

Duplicating movie clips

Once you have a movie clip on stage, you can make additional instances of it by copying that instance, using the duplicateMovieClip command. When you duplicate a movie clip, it inherits all properties of the instance you are copying, including any properties that you have changed with ActionScript during runtime. It also inherits any code that was placed on it in an onClipEvent block. Because of this last characteristic, duplicating was heavily used in Flash 5, where clip events were rampant. However, with the new event model and ActionScript 2 classes, duplication has largely fallen out of use.

Attaching movie clips

Far more common now is creating instances by attaching them, using attachMovie . This command is used to create a brand-new movie clip instance on stage at runtime. By attaching, you can leave your stage completely blank and dynamically attach all the content as your program sees fit. Designers might have a harder time with this method, as they cant really see what is going where until the movie is run. But most programmers embrace it, as it gives far more control over each elementwhere and when it appears, what it does, and when it goes away.

To attach a movie clip, you need to do one important piece of setup work: export it from the library . To export a movie clip from the library, right-click ( -click on a Mac) the library symbol and choose either Propertiesor Linkage. You can also do it while creating or converting the movie clip in that dialog box. Whichever method you use, you will see a check box option labeled Export for ActionScript. When you select that, you will see the Identifier field become active and filled with the name of the symbol. You will also see the Export in first frame check box become active and selected, as shown in Figure 2-10. For now, those defaults are fine, and you can click OK.

Figure 2-10: Setting export properties

Exporting the symbol forces Flash to include that symbol in the final SWF file. If a symbol is never placed on stage in the authoring environment, and is not exported with the Export in first frame option checked, that data will not be included when the SWF is published. If the symbol is not in the SWF, then obviously it will be impossible to create an instance of it.

Lets try it out. Open chapter2base.fla again. Delete the instance of ball from the stage, select ball s symbol in the library, and export it with the default settings, as just described. Now add this code to frame 1:

 attachMovie("ball", "ball", 0); ball._x = 100; ball._y = 100; 

Test the movie, and youll see an instance of the ball on stage at 100, 100. The parameters of the attachMovie call are as follows :

• "ball" : The linkage identifier of the symbol. This is the name in the identifier field when you set it to export, and it is generally the same as the name of the symbol.

• "ball" : The name of the instance you are creating. This is the same as when you used the Property inspector to manually name the instance on stage. For this example, it is fine if the instance name is the same as the linkage name. If you are attaching multiple clips though, you need to ensure that each one has a unique name, as youll see in moment.

• : The depth at which to place the new instance. Instances with higher depths will appear in front of instances with lower depths.

Most important, you should know that every dynamically created instance must have a unique name and depth. If you create a new instance with the same name or same depth as an existing one, the older one will disappear.

Lets see a quick example of just how powerful attachMovie is. Replace the preceding code with the following:

 for(var i:Number = 0; i < 100; i++){    var ball:MovieClip = attachMovie("ball", "ball" + i, i);    ball._x = Math.random() * Stage.width;    ball._y = Math.random() * Stage.height;    ball._xscale = ball._yscale =       Math.random() * 100 + 50; } 

When you play the movie, you should see something like Figure 2-11.

Figure 2-11: Randomly attached particles

This example uses a for loop to attach 100 instances of the ball symbol, giving each one a random size and position. The important thing to note is that the example uses the loop index, the variable i , to give each one a unique name and depth. The statement "ball" + i becomes "ball0" for the first instance, "ball1" for the second, and so on. Thus, none of the instances are overwritten. Youll be using very similar loops many times throughout this book.

Another important thing to realize about the attachMovie command is that its actually a method of a movie clip. In the previous case, youre really saying _root.attachMovie . But suppose you had an existing movie clip instance named dog and a movie clip symbol in the library named collar . You could say this:

 dog.attachMovie("collar", "spikesCollar", 0); 

This would attach an instance of the collar symbol inside the dog instance, with the specified name and depth. You could continue to nest the movie clips:

 dog.spikesCollar.attachMovie("leash", "spikesLeash", 0); 

Note that there is no depth conflict, as spikesLeash is at depth 0 within spikesCollar , which is at depth 0 within dog .

Creating empty movie clips

The final method for creating movie clip instances doesnt even require a symbol. As such, they are not really instances of a particular symbol in the library, but Ill still refer to them as instances. To create an empty movie clip, use the createEmptyMovieClip method. The command is almost exactly the same as attachMovie , but it leaves off the linkage identifier. You just need to specify the instance name and depth:

 createEmptyMovieClip("holder", 0); 

As with attachMovie , you can apply createEmptyMovieClip as is to create the instance on the current timeline, or you can use it as a method of an existing movie clip instance to create a new movie clip inside that.

At first, creating an empty movie clip may seem like a rather useless task. But empty movie clips actually have many functions:

• You can use an empty movie clip as a container in which to attach other movie clips, keeping them together as a unit.

• You can use an empty movie clip as a container to load external content such as JPEG images or external SWFs.

• When youre working with the drawing API (which I will cover in Chapter 4), you can use an empty movie clip as a holder for dynamically drawn lines and fills.

• An empty movie clip can be used as a listener for almost any event. Some developers find it tidier to have their onEnterFrame code associated with an empty movie clip rather than _root . Or you could have several empty movie clips, each running separate tasks on their own onEnterFrame handlers.