The Flash Connection Make mine Actionscript 3.0!

Source File: 

code_in_movieclip.fla

The word MovieClip is kind of ambiguous, as we tend to call the instance on the stage a MovieClip, and we also call the symbols in the library MovieClips. But there is a distinction. The symbols in the library are basically templates for new movie clip instances of that type. So the object on the stage, while we might be inclined to call it a MovieClip, is really a MovieClip instance.

So we now have a MovieClip instance on the stage that can be dragged and dropped. But our code only applies to that one instance. If we drag another copy of this symbol out to the stage, and give it an instance name, our newly created instance won't also exhibit drag and drop behavior unless we write more programming for it separately.

What if we wanted all instances of the MovieClip that we drag out from the library to exhibit a kind of built-in (or default) drag and drop behavior? Well, there are a couple of different ways to do that, and writing our code on the MovieClip's own timeline is one of them. 

Move the code to the first frame of the MovieClip symbol

Open up your fla file if it isn't already open. Go to the first frame of the actions layer and open up the actions panel (press F9). Highlight all the code you find there and press CTRL-X (or right click and choose "cut"). Next, double click the circle instance on the stage to enter its edit mode. Create an actions layer on the MovieClip's timeline, and click on the first frame to select it. Press F9 once again to get the actions panel. Inside the actions panel, paste the code that you just cut from the main timeline (either press CTRL-V or right click and choose "paste").

Next, go through the code and change the word "circle" to the word "this" throughout. You will find that you are replacing the word "circle" in five places. You can do this manually, or you can use Flash's find and replace feature to automate this process if you want. Just highlight the word circle by double clicking it, then press CTRL-F to get the find and replace dialog box. The word circle will already be placed in the Find: field. Type the word this in the "Replace with:" field. Then click "replace all." 

The word "this" means "this object" or "this instance of me." Take your pick, but basically the idea is that the word this is the way an object references itself with code. If there are any number of instances of this circle, to each one, the word "this" will mean "me."

Now we've got built-in behavior! 

Let's go back to the main timeline now. Press CTRL-Enter to test the movie. The instance of the circle will now drag and drop exactly like it did before, as well as display the hand cursor when it is hovered. But now the behavior is built-in! Close the swf window and go back to the fla. Now drag out a few more copies of the MovieClip from the library. Each one will now exhibit drag and drop behavior, because it is programmed into them. It is literally part of their being now... wow, what power!

By the way, anytime you double click a MovieClip instance on the stage to edit it, you are not editing just that one instance, but you are actually editing the library symbol, and thus changing any and all other instances at the same time. There is no such thing as editing just an instance and not the template. Therefore, there isn't much difference between double clicking an instance on the stage, or double clicking a MovieClip in the library. Either way you are editing the symbol. The only difference is that when you double click the one on the stage, you are doing what is called "edit in place." Sometimes it is indeed helpful to edit something and see it in the context of the other objects on the stage, and that's the idea behind "edit in place."

The word "this" is optional!

Now go through the code again and take out the word this throughout and replace it with... nothing! The fact is that it's important to understand what the word this means. After you understand it, though, you will also begin to realize that its use is almost always optional. If it is omitted, it can be understood. Here is the resulting code, which should now reside on the first frame of the MovieClip symbol instead:

buttonMode = true;

addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

function mouseDownHandler(event:MouseEvent):void {
	startDrag();
}
function mouseUpHandler(event:MouseEvent):void {
	stopDrag();
}

Here is how our swf now behaves. Every instance of the MovieClip gets the hand cursor when you hover it with the mouse, and every one of them can be dragged and dropped. No matter how many instances you drag out of the library, every one of them will exhibit this behavior with no additional coding, and you need not even give them instance names!

If any of this is new to you, your mind should now be swimming with ideas and possibilities. Being able to create built-in behavior for MovieClip symbols can be very powerful. Yet the technique above is not necessarily the best way to do it. In this tutorial, I am sharing with you the many places where you can put your code. Just because you can do something, though, doesn't mean that you should. So I will also try to note along the way some advantages and disadvantages of the various techniques.

One advantage of the above technique is that it is easy and fast. You don't have to hassle with creating custom classes (let's pretend for now that it actually is a hassle. Ha!) and yet you get to create built-in behavior. But there are a couple of disadvantages, too. Probably the biggest one is that every time you want to modify the code, you have to open up the fla file and edit the MovieClip symbol to change it. Another is that you might tend to forget that you did build in some behavior to your MovieClip symbols. Suppose you return to your fla file after a couple of months and compile it again. It won't be obvious (on the surface, anyway) just where certain behavior is coming from. In this simple example, that's unlikely of course, but as your projects grow and involve more and more MovieClip symbols, it could become a problem.

Finally, I should note that the publishing and classpath diagram is still the same as it was last time. The fla file is still publishing to the same folder and also looking for class files in the same folder (and yes, there are still no class files to find, but that's about to change):