Using An Event Handler Method to Activate a Movie Clips
This is a method that allows us to use movie clips like buttons.All the action scripts are on the main timeline, not on buttons or movie clips, and therefore makes it easier to keep track of scripts. In this tutorial we keep track of the light switch position by use of a boolean(true - false) variable. This variable is changed when you press on the switch, even though there is no button. The movie uses a simple conditional statement that tests for the value of this variable, and attaches actions based on these values.
You will need this file to complete the scripting in this project.
1. Movie Review: Open the movie and check out what is on the stage.
First, there is a background layer that contains the backdrop of the land, sky, grass, face plate for the switch, and tower.
The windmill layer contains a movie clip with instance name windmill_mc, which has the blades of the windmill.
The switch layer contains a movie clip with instance name switch_mc.
The soundclip layer contains what appears to be an empty movie clip, instance name click_mc, located just to the left of the stage. If you open this up, youw ill see the movie clip only has a stop in frame 1, and a sound file in frames 2-4, set on event, so it will play in entirety if the timeline reaches frame 2.
2. Initializing a variable: Click in frame 1 of the actions layer. Open your action panel. We want to name the variable switchposition, set it as boolean(true or false) and set the initial value as false. Type in the following:
var switchposition:Boolean = false;
3. Making the switch work like a button on Press: To make a movie clip work like a button we can use a function callback, which is an event handler method.
Go to the next line of your action panel, just under your variable initialization, and click y our target button.
Highlight the instance name switch_mc, select absolute and click ok.
Add a period (dot) after the instance name in your actions panel.
A drop down box will appear. Select onPress from the drop down.
Set that equal to a function() {}
Your script should now look like this:
var switchposition:Boolean = false;
_root.switch_mc.onPress = funtions(){
}
Check your script.
4. Flipping the switch: Between the curly braces we want to put in a script that automatically flips the switch when the switch is pressed. All we have to do it multiply the _yscale value by -1 and it will flip the clip over. We do not have to put the full path and instance name because we already identified the instance name in the function callback, so we will use "this". Add the following script inside your curly brackets:
this._yscale *= -1;
Check your script. . Your resulting script thus far should look like this:
Test your movie and notice the switch is cflipping up and down.
5. Adding sound to your switch function callback: The click sound is on the timeline of the soundclip_mc. when the movie plays, the clip is stopped on frame 1, where there are no sounds. We need to tell this movie clip instance to play, which will cause it to advance to the frame with the event sound, play it once, in entirety, and move back to frame 1, where there is a stop action and it halts the clip.
We need to insert a line below the "this._yscale *= -1;" but before the end of curly bracket, so it is part of this function callback.
Click the target button and select the click_mc, set the target path to absolute, and click ok.
Add a dot (.).
Select play() from the list.
End with a semicolon ;
Your line of scripot should look like this:
_root.click_mc.play();
Check your script. . Your resulting script thus far should look like this:
Test your movie to insure the switch is playing your sound now.
6. Testing the position of the switch, on or off: We can then setup a conditional statement that tests the value of our variable, switchposition, as being either true of false. Later we will attach specific scripts for each each condition.
Plant your cursor after the last script edition, " _root.click_mc.play();" and hit enter to add a line before the close of the curly bracket.
There are two possible values : true and false. Set up the conditional frame work for an if and else if.
if (){
}else if{
}
The first condition, put in the if statement parentheses, will test if switchposition is false, so add within the if parenthese switchposition == false and place the condition that test if switch positoin is true within the else if parentheses. Your conditional wshould look like the following:
if (switchposition == false){
}
}else if (switchposition == true){
}
We want to reverse the value of switchpositon to true, ir it was false, or to false if it was true. Add these statements for each condition so that the resulting script looks like this:
if (switchposition == false){
switchposition = true;
}
}else if (switchposition == true){
switchposition = false;
}
Check your script. . Your resulting script thus far should look like this:
var switchposition:Boolean = false;
_root.switch_mc.onPress = function(){
this._yscale *= -1;
_root.click_mc.play();
if (switchposition == false){
switchposition = true;
}
}else if (switchposition == true){
switchposition = false;
}
}
We only changed a variable value so testing the movie would not show a different yet.
7. Setting up a function to change the windmill: If the switchposition variable is true, we want to rotate our windmill_mc. Our windmill_mc movie clip could have had a timeline with the tween, but it is just a static image, in a movie clip with only one frame. We need to create a function callback that will rotate this script on a regular basis while the switchposition is true.
Click into your action panel at the end of the the line that changes switchposition to true, and says "switchposition = true;" and hit enter to add a line.
Target your windill_mc using the target button, and absolute positioning.
Add a dot (.)
From the drop down hint box that appears, select onEnterFrame. (this event will run the script in a function at the frame rate)
Add your = operator.
type in function(){} so your resulting script looks like this:
_root.windmill_mc.onEnterFrame = function(){
}
Check your script. . Your resulting script thus far should look like this:
8. Now we add the rotation to the windmill_mc callback function as an action line. Between the culry bracks of the windmill function, type in the script that will increment _rotation property of the windmill_mc by 20, or this line:
Test your movie and notice the clicking of the switch now "turns on" or rotates the windmill.
9. Disabling the Windmill_mc function callback: We need to turn off the function that causes the mindmill to rotate when we turn the switchposition to false or off. We already have the condition ready, we just need to add the following action to the condition that changes switchposition to false, right under the statement "switchposition = false;"
_root.windmill_mc.onEnterFrame = null;
Check your script. . Your resulting script thus far should look like this: