| All standard event handlers have equivalent event handler methods, as demonstrated by the following: on(press) is buttonName.onPress or movieClipName.onPress on(release) is buttonName.onRelease or movieClipName.onRelease on(enterFrame) is movieClipName.onEnterFrame In addition, the following event handler methods exist but have no standard event equivalents: Buttons/Movie Clips nameOfClipOrButton.onKillFocus nameOfClipOrButton.onSetFocus Sound nameOfSoundObject.onLoad nameOfSoundObject.onSoundComplete Text Fields nameOfTextField.onChanged nameOfTextField.onKillFocus nameOfTextField.onScroller nameOfTextField.onSetFocus LoadVars Object nameOfLoadVarsObject.onLoad XML nameOfXMLObject.onData nameOfXMLObject.onLoad XML Socket nameOfXMLSocketObject.onClose nameOfXMLSocketObject.onConnect nameOfXMLSocketObject.onData nameOfXMLSocketObject.onXML As you can see, you can use numerous events to trigger a script. Since some of these objects are intangible (for example, Sound, LoadVars, XML, and so on), defining event handler methods (on a keyframe of the timeline) is the only way to execute a script when an event occurs in relation to that object (in contrast to buttons and movie clip instances, which you can select on the stage and attach scripts directly to). NOTE We will discuss and use many of these event handler methods throughout this book. For more information about each, see the ActionScript dictionary.
By attaching a script to a button or movie clip instance using a regular event handler, you pretty much lock down not only what happens when an event occurs but also the events that actually trigger a script to be executed. Take a look at the following script: on(press){ gotoAndPlay(5); } If you were to attach this script to a button, the button would react only to the press event, performing a single action when that event occurred. To give you an idea of the power and flexibility of event handler methods, assume there's a button instance on the stage named myButton. By placing the following script on Frame 1 of the main timeline (assuming the button exists at that frame), you define how that button will react to certain events: myButton.onPress = function() { stopAllSounds(); } myButton.onRelease = function() { myMovieClip._xscale = 50; } When pressed, the button will halt all sounds; when released, it will scale myMovieClip to 50 percent of its original size. However, by moving that timeline to Frame 2 which contains the following script (assuming the button exists at Frame 2) you would change the button's function completely: myButton.onPress = null myButton.onRelease = null myButton.onRollOver = function() { stopAllSounds(); } myButton.onRollOut = function() { myMovieClip._xscale = 50; } By using null , you prevent the button from continuing to react to an onPress or onRelease event and instead instruct it to react to the two newly defined events. As you can see, by using event handler methods, we can change the button's functionality and the events it reacts to a powerful capability! Event handler methods also come in handy for dynamically created objects. Since the act of dynamically creating an object involves putting an object in your movie that wasn't there when the movie was authored, you can't set the object up to react to an event by selecting it. (It hasn't been created yet!) This is where event handler methods become really useful. Take a look at the following sample script to see how you could implement this: _root.createEmptyMovieClip("newClip", 1); _root.newClip.onEnterFrame = function(){ myVariable++; } _root.newClip.onMouseMove = function(){ myCursorClip._x = _root._xmouse; myCursorClip._y = _root._ymouse; } As you can see, after creating a movie clip instance named newClip, we immediately use event handler methods to define what that instance will do when certain events occur. In the following exercise, we'll place event handler methods on Frame 1 of our movie to define the way scene elements react to various events. The idea behind this project is that when the user selects a particular text field (or types text into a field), elements in the scene will react and other elements will be dynamically configured to react to various mouse and clip events. -
Open CarParts1.fla in the Lesson02/Assets folder. This project contains a single scene with eight layers that are named according to their contents. The Background layer contains the main background graphic. The CarClip layer contains the red car at the top left of the stage a movie clip instance named car. That movie clip's timeline contains a couple of movie clip instances, wheel1 and wheel2, which represent the wheels of the car. The next layer, Text Fields, contains three text fields: text1, text2, and text3. As you will see, the way the user interacts with these text fields will dictate how the project functions. The next layer, Arrows, contains three small arrow movie clip instances: arrow1, arrow2, and arrow3. These arrows appear below each text field and will be set up to move horizontally along the bottom of the text field as text is entered and removed from a field. The next layer, Wheel, contains the movie clip wheelClip, which will be dynamically scripted to react to the onEnterFrame event only when the text1 text field has been selected. The layer above that, Speedometer, contains a movie clip instance named speedClip whose timeline contains a short animation of a needle rotating in the gauge as well as a revving sound. When the clip is played, these things make the clip appear to operate like the real thing. This instance will be dynamically scripted to play when the onPress event occurs but only after the text2 text field has been selected. The next layer, Fan, contains a movie clip instance named fanClip, which will be set up to react to the onEnterFrame event only when text3 has been selected. Finally, Frame 1 of the Actions layer will contain most of the script for our project.  -
With the Actions panel open, select Frame 1 and add this script: text1.onChanged = function(){ car._x += 2; car.wheel1._rotation += 10; car.wheel2._rotation += 10; arrow1._x = text1._x + text1.textWidth; } This script defines what happens when the text in the text1 text field is changed, added to, or deleted. The first action is used to horizontally move the car instance 2 pixels to the right by adding 2 to its current x property. The next two actions will rotate the wheel1 and wheel2 movie clip instances (which are in the car instance) by adding 10 degrees to their current rotation values. This will cause them to appear to spin as the car moves right. NOTE As shown in an earlier script, using += in the script is the same as saying, "Add the value on the right of the equals sign to the current value of what is identified on the left" which in this case is the rotation value of the wheel1 and wheel2 movie clip instances. The last action is used to move arrow1 horizontally so that it appears just below the last letter in the text1 text field. It does this by adding the horizontal location of text1 (its x property) to the width of the text in the field. The sum of this amount will position arrow1 appropriately. Every time text is changed (onChanged ) in text1, these actions will be triggered.  -
With the Actions panel open, add the following script just below the script you just added: text1.onSetFocus = function(){ wheelClip.onEnterFrame = function(){ wheelClip._rotation += 30; } speedClip.onPress = null; fanClip.onEnterFrame = null; } This script defines what happens when the text1 text field has been given focus or clicked on. (To "focus" on a field means to make it the active field, into which the user can immediately enter information.) When this event handler method is triggered it does an interesting thing: It configures three other event handler methods. Yes, they are that flexible! First, the wheelClip is set up to react to the onEnterFrame event, so that it will spin by an additional 30 degrees each time the event is triggered (24 times a second). This will cause it to spin as soon as text1 is selected. Since we will be adding script in the next couple of steps that will enable speedClip and fanClip to react to onPress and onEnterFrame events respectively, the next two actions are used to remove that functionality when text1 is selected. The following additions to the script are just a variation on what has been added so far. -
With the Actions panel open, add the following script just below the script you just added: text2.onChanged = function(){ car._x += 2; car.wheel1._rotation += 10; car.wheel2._rotation += 10; arrow2._x = text2._x + text2.textWidth; } Syntactically and functionally, this script is the same as the script shown in Step 2 with two exceptions: First, it's executed when the text in the text2 text field changes. Also, the last action is used to move arrow2 horizontally so that it appears just below the last letter in the text2 text field. -
With the Actions panel open, add the following script just below the script you just added: text2.onSetFocus = function(){ wheelClip.onEnterFrame = null; speedClip.onPress = function(){ speedClip.play(); } fanClip.onEnterFrame = null; } Once again, this script is a variation of that included in Step 3. It dictates what occurs when text2 is given focus (or selected). You'll notice that the speedClip instance is set up to react to an onPress event. Thus, pressing the speedClip instance once text2 has been given focus will cause that instance to play. The other actions prevent the wheelClip and fanClip instances from reacting to the onEnterFrame event, that other parts of the script define. As you may have realized, the idea behind this functionality is to enable the instance to the left of a text field to react to an event when the field is given focus but prevent it from reacting to that event when another field is given focus. -
With the Actions panel open, add the following script just below the script you just added: text3.onChanged = function(){ car._x += 2; car.wheel1._rotation += 10; car.wheel2._rotation += 10; arrow3._x = text3._x + text3.textWidth; } text3.onSetFocus = function(){ wheelClip.onEnterFrame = null; speedClip.onPress = null; fanClip.onEnterFrame = function(){ fanClip._rotation += 20; } } Once again, this script is a variation of those presented in previous steps. It dictates what occurs when text3 is given focus or when text within that field changes. -
Choose Control > Test Movie. Click the top text field (text1): That text field will be given focus, and thus the wheelClip instance will begin spinning. As you type text into the field, two things will occur: The car movie clip instance will move to the right, with its wheels spinning, and the arrow underneath the field will continue to appear just below the last character in the field. Try pressing the speedClip, and you'll notice that nothing happens. Click text2, and that changes: The wheelClip instance will quit spinning, and pressing on the speedClip instance will make that instance play. Clicking text3 will cause the speedClip instance to become inactive again, but the fanClip instance will begin spinning.  -
Close the test movie to return to the authoring environment and save your work as CarParts2.fla. This completes the exercise. |
