Controlling Movie Clips with onRelease actions

From DesignWiki

note: this tutorial is written using ActionScript 2.0

The basic approach for using the mouse to control the timeline of any flash object is always the same. You use some kind of mouse event to trigger a timeline event for a controlled movie clip. I'll write it below in fake code (pseudocode).

clickableObject.mouseEvent = function() {
     controlledObject.timelineEvent();
};

In plain talk, you click (mouse event) on something (clickable object) to make a movie clip (controlled object) play or stop (both play and stop are timeline events). Remember when we did the doors & rooms demo in class? We created a flash movie that contained several colored rooms on the main timeline. Then we created door-shaped buttons to take the user from room to room. In that example, we were using the "doors" to control the main timeline of the flash movie.

Here is the actual code we used to make each door click to the appropriate room:

myGreenDoor.onRelease = function() {
	_root.gotoAndStop("green_room");
};

Let's break this down using the terminology from above. myGreenDoor is the clickable object. onRelease is one of several possible mouse events. gotoAndStop is a timeline event. _root is the controlled object -- the main or "root" timeline of the movie. The code is saying: when someone clicks on the movie clip named myGreenDoor, move the root timeline to the marker named green_room and stop playing the movie.

So, let's say that you want to use this same idea to to control a movie clip that is not the main timeline. Perhaps you just want to start or stop an animation or event. The key difference is targeting. In the previous example, the keyword _root targets the action to take place on the main timeline. In order for the action to take place somewhere else, you have to move the target.

Download and take a look at this flash file: Image:CyclingAnimation.fla

This file contains a movie clip that cycles back and forth. Not too exciting right now... We'll use it as a starting point to add some interactivity.

Let's say that you'd like the demon to remain hidden until he is clicked on. When the demon is clicked, he'll pop up and then slowly sink down until he is mostly hidden again. After that, he'll wait until he is clicked on again, and then repeat his performance.

The first thing we'll want to do is to stop the demon from popping up over and over. Movie clips loop by default, so we'll need to disable the looping. Start by opening up the demon movie clip by double-clicking on the demon on the stage. You should see two layers on the flash timeline — one named code and one named animation.

Click on the first frame of the code layer, open up the Actions panel by selecting from the top menu Window > Actions. In the Actions panel type the code:

stop();

Now, test the movie by pressing command-return, and check and make sure that the demon has stopped popping up. If it didn't work, you might have the stop() in the wrong place. Be sure to click on the first frame of the code layer before adding the stop action. If the demon is behaving, and has stopped popping up, go ahead and close the test movie and continue.

Next, you'll need to name the instance of the demon movie clip that is on the stage. Remember, you can't control anything with code unless it has a name. Double-click on "Scene 1" to go back to the main timeline. Now that you're at the main timeline, select the demon by clicking on him on the stage, and in the property inspector, name him "myDemon".

Next we'll add the code that will make the demon pop up. On the main timeline, click on the first frame of the code layer. If the Actions panel isn't open already, open it by selecting Window > Actions. In the Actions panel type the code:

myDemon.onRelease = function() {
     this.play();
};

To recap, the code is attached to a keyframe on the main timeline and targeted to the myDemon Movie Clip. That's why the code starts out with the word myDemon -- myDemon is the name of the target movie clip. onRelease is the keyword for the second half of the mouse click -- when the mouse goes up. So, the code "fires" when the myDemon movie clip is clicked on. The single line of code in the function is this.play(); The keyword "this" refers to whatever the script is attached to -- in this case, the myDemon movie clip. The command play() starts the myDemon timeline playing.

Ok, now let's have some fun. We'll make the demon a little more sensitive. Let's make him pop up if the mouse is simply brushed over him. All you have to do is change one keyword in the Actions panel. Our new code will read:

myDemon.onRollOver = function() {
	this.play();
};

Hopefully, this should make a lot of sense to you at this point. onRelease is a mouse event. We should be able to substitute any other mouse event in the same place and still have things work. By the same token, myDemon and this are references to movie clips. You can substitute references to any other movie clips and everything should still work properly. So check out the completed file, and if you had trouble following along, take a look at the completed .fla file as well.

Completed flash file: Image:ControlledCycling-complete.fla