11.3. Tying Actions to Events Flash keeps track of every event that occurs while your animation plays, beginning with the instant Flash Player loads your animation and continuing through every frame Flash plays, every button your audience clicks, every key they press basically, just about everything that happens in (or to) your animation. You can tie an action to any event. The following sections show you how to tie actions to the most common events: when your animation loads, and when your audience clicks a button, mouses over a hotspot, or chooses an option from a list. 11.3.1. Triggering an Event When Your Audience Clicks a Button In Chapter 7, you saw how to create groovy-looking button symbols (and where to find the button symbols that come with Flash), as well as how to change the appearance of a button when someone mouses over it. This section shows you how to tie a button to an action so that when your audience clicks the button, Flash does something. The example below uses a quick and easy behavior to tell Flash to load an additional animation when your audience clicks a button. But you can substitute a different behavior (or your own custom ActionScript code) to tell Flash to go to a different frame in the current animation, load a Web page, play a soundjust about anything you like. UP TO SPEED
Handling Events | | An event in Flash is something that happens. Flash recognizes two different types of events: user events (things your audience does to your animation, such as clicking a button, dragging a mouse, or typing in some text) and system events (things Flash does automatically, like loading an animation and moving from frame to frame). If you want to tie an action to an eventin other words, tell Flash to do something when a particular event, such as a button click, occursyou need to use an event handler . An event handler is simply an ActionScript function (OK, technically, a special kind of function called a method ) that recognizes all the events that can affect a certain type of object. For example, the built-in event handler shown in this chapter is the mighty on() event handler, which lets you handle all the events that can happen to a button: press, release, releaseOutside, rollOver, rollOut, dragOver, keyPress ("<Enter>"), keyPress("<Space>"), keyPress("<Up>"), key- Press("<Down>") , and so on. (Flash made the button's on() event handler handle keyPress events because a lot of folks use the keypad to click an active button or to move from button to button.) After you select an event handler, you have to add in your own custom ActionScript code to tell Flash how, specifically , you want it to handle the event. This chapter gives several examples. Flash also supports something called a listener event model , which is a set of ActionScript classes that let you tell any object in your animation to "listen" for an event that happens to any other object. For example, you can tell a button to "listen" to an input text field and become active when the text in the field changes. Section 11.3.3 has an example of the listener event model. Handling events is a huge, relatively complex topicnot just in Flash, but in every programming language. To find out more, search for Handling Events in Flash Help (see the Appendix for tips on using Flash Help).  |
To tie an action to a button: -
Open the file button_event.fla . You can download this file from the "Missing CD" page. Make sure the Property Inspector is visible (select Window  Properties Properties). -
Click the "Instance name " field (see Figure 11-8), and then type myButton-Instance . Figure 11-8. The quickest and easiest way to make your button do something when someone clicks it is to add a behavior to your button. If Flash doesn't offer a behavior that does what you want, you can always roll up your sleeves, write some ActionScript code, and add the code to your button the old-fashioned way using the Actions panel (see Section 9.1).  -
Select Window Behaviors . The Behaviors panel in Figure 11-8 appears. -
Click on Add Behavior (the plus sign) and, from the pop-up menu, choose Movieclip Load Graphic . Flash displays the Load Graphic dialog box you see in Figure 11-9. -
Click the URL field and then type http://examples.oreilly.com/flash8tmm/elevator.jpg This action tells Flash to load the image file named elevator.jpg . -
Choose Control Test Movie to test your button . The Flash Player you see in Figure 11-10 (left) appears. -
In Flash Player, click the "Click to load" button . Flash replaces the contents of the first animation (the button) with the contents of the elevator.jpg file, as shown in Figure 11-10 (right). Figure 11-9. Here, you're telling Flash to load an image file located on a server. You could tell Flash to load the image in a Loader component, a Window component, or a nested movie clip, if this animation happened to contain any. Instead, leaving _root selected tells Flash to replace the current animation with the loaded image. 
Figure 11-10. Left: Thanks to the ActionScript code that Flash generated when you created your behavior, clicking this button loads the image on the right. (You can expand the borders of the window Flash chooses for you by dragging them.)
Right: Adding conditional statements to the ActionScript code (such as the ActionScript if else and switch statements) lets you load a different image based on a certain condition: for example, the text an audience typed in. 
11.3.2. Creating Hotspots and Rollovers If you've surfed the Web much, you've probably encountered hotspots and rollovers. A hotspot is a clickable portion of an image. The most popular way to use hotspots is to create a big, fancy splash page image, and then display different images or Web pages as someone mouses over or clicks different areas of the image. See Figure 11-11 for an example. A rollover is a special type of hotspot. When your audience mouses over a rollover, the area changes visually ("rolls over")turns a different color , displays a different bit of text, or something to that effect). Rolloverswhich many folks use in navigation barsare useful when you want to give your audience a big, fat, unmistakable visual cue that they've moused over something they can click. In this section, you'll create both a hotspot and a rollover. Clicking the hotspot embeds a second animation in the main animation using an instance of the Loader component; clicking the rollover embeds a third animation.
Note: Components, like the Loader in this example, are canned animation features that you can add to any Flash document. Chapter 12 covers components in detail.
Figure 11-11. Hotspots and rollovers let you turn any image into a fancy navigation "bar." Here, mousing over the image on the left side of the splash page (or over the crossword-style text on the right) pops up descriptive text; clicking any part of the image whisks you off to the appropriate section of the Web site. Underneath their sophisticated covers, hotspots and rollovers are really just buttons . 
Note: You can download a working version of this example file (hotspot_working.fla), plus the files you need for the following tutorial (hotspot.fla, apple.swf, and hoppy.swf), from the "Missing CD" page. This tutorial assumes you have these files on your hard drive.
-
Open the file hotspot.fla . The child's face is an imported bitmap that was turned into an editable image using Modify Break Apart (Section 8.1.2.1). First, youll turn the child's face into a hotspot. -
Use the Lasso tool to draw a circle around the child's face (Figure 11-12 ). Flash highlights (selects) the portion of the image inside the lasso. -
Select Modify Convert to Symbol . Flash displays the Convert to Symbol dialog box. -
In the Convert to Symbol dialog box, click the Name field and then type childFace . Select the Button symbol type, and then click OK . Flash places your button symbol in the Library. The button instance you'll be working with remains on the Stage. Figure 11-12. Top: The Lasso tool lets you describe irregular shapes . When you try this on your own bitmap image, choose Modify Break Apart after you import your image and before you draw your hotspot on it. If you forget, Flash wont let you select just a portion of your image.
Bottom: You can create as many hotspots on an image as you like, but make sure you don't overlap them.  -
On the Stage, click to select the button instance . Flash redisplays the Property Inspector to show button instancerelated properties. (If you don't see the Property Inspector, choose Window Properties Properties.) -
faceInstance. Your hotpot is complete. Next , you'll turn the child's hat into a rollover. -
Use the Lasso tool to draw a circle around the child's hat (Figure 11-12, bottom ). Once again, Flash highlights the portion of the image inside the lasso. -
Select Modify Convert to Symbol . Flash displays the Convert to Symbol dialog box. -
In the Convert to Symbol dialog box, click the Name field and then type childHat . Then select the Button symbol type. When you're finished, click OK . Flash places your childHat button symbol in the Library. The button instance you'll be working with remains on the Stage. -
On the Stage, click the Selection tool and then double-click the childHat instance . Flash pops you into symbol editing mode (see Figure 11-13). -
In the symbol Timeline, click the Over frame . Because this is the frame Flash displays when your audience mouses over your button, any changes you make to your symbol here appear as a rollover effect. Figure 11-13. Top: As sophisticated and time- intensive as hotspots and rollovers appear, they're really nothing more than glorified buttons, as the standard button Up, Over, Down, and Hit frames here show.
Bottom: The Over frame (often referred to in programming circles as the Over state) is what distinguishes a rollover from both a regular button and a hotspot. Any changes you make to the Over frame appear when your audience mouses over the button to create the so-called rollover effect.  -
Choose Insert Timeline Keyframe . Flash displays a round dot in the Over frame to let you know it's a keyframe now and that you can make changes on the Stage. -
Using the Text tool, add the static text Hat to the symbol Stage . Be sure to position it directly over the hat symbol as shown in Figure 11-13 (bottom). -
Choose Edit Edit Document to return to the main document Timeline. Then, with the instance still selected on the Stage, head to the Property Inspector, click the "Instance name field, and then type hatInstance . In the next few steps, you'll add an instance of the Loader component to the stage and use it to play (that is, load ) a new animation when your audience clicks the child's face hotspot. -
Choose Window Components . Flash displays the Components panel (Figure 11-14). Figure 11-14. The Loader component, which Section 12.1.3.15 describes in more detail, lets you embed an image or another animation directly into the main animation.  -
From the Components panel, drag an instance of the Loader component (you'll find it in the User Interface folder) to the Stage . Where you place the component doesn't matter for this example. Just make sure it's on the Stage but not touching your image. (Flash doesn't actually place your new animation inside the Loader component; the Loader component just tells Flash to pull in the new animation and play it.)
Note: You can't refer to an instance until you've given it a name, so always name your instances immediately after you drag them to the Stage (even if you're not planning to involve them in an action right away).
-
In the Property Inspector, with the Loader component still selected, click the "Instance name" field and then type myLoader . Now that the loader's on the Stage and properly named, you can tell Flash what animation to load. And to do that , you add a behavior to the childFace button instance. -
On the Stage, click the childFace instance to select it. Then choose Window Behavior . The Behaviors panel appears. -
Click the Add Behavior icon. From the drop-down list, choose Movieclip Load External Movieclip . Flash displays the Load External Movieclip dialog box shown in Figure 11-15. Figure 11-15. Top: Tell Flash which animation to load when someone clicks the childFace hotspot (and where to load it). myLoader is the instance name you typed in for the Loader component.
Bottom: This behavior tells Flash to display a different animation in the same Loader component when someone clicks the childHat rollover. 
Note: Out of the box, Flash's security model prevents you from loading an animation on a Web site into an animation on your computer. So, to demonstrate adding an action to a button, this example shows you how to load an animation located on your own computer. For the nitty-gritty technical details of Flash's security model, choose Flash Help and search for "understanding security."
-
In the URL field, type c:/hoppy.swf as shown in Figure 11-15 (left ). This example assumes you saved the hoppy.swf file on a Windows computer's C: drive. If you saved it in a folder, type the path to that folder. (If you have a Mac, the path might look like Macintosh HD/Users/<Your Account Name>/Desktop/hoppy.swf .)
Tip: If you saved the file in the same place you saved hotspot.fla, you can simply type the file name ( hoppy.swf ) in the URL field.
-
In the "movie clip or level" field, type myLoader (the name of the Loader instance you added to your animation in step 17) and then click OK . In the Behaviors panel, Flash displays a new behavior showing the event On Release and the action Load External Movieclip . Finally, you'll add another behavior to the childHat button instance so that when your audience clicks the rollover positioned over the child's hat, a different animation loads. Just a few more steps to go: -
On the Stage, click the childHat instance to select it. Then choose Window Behavior . Flash redisplays the Behaviors panel to reflect the childHat instance (Figure 11-15, right). -
Click the Add Behavior icon and then, from the drop-down list, choose Movieclip Load External Movieclip . Flash displays a Load External Movieclip dialog box. -
In the URL field, type c:/hoppy.swf , as shown in Figure 11-15 (right ). As explained in step 20, type the appropriate file path depending on where you saved this file. -
In the "movie clip or level" field, type myLoader (the name of the Loader instance you added to your animation in step 17) and then click OK . Time to test your handiwork: -
Select Control Test Movie . The Flash Player window appears. To make sure you're seeing everything, maximize the Flash Player window by clicking the Maximize button in the window's upper-right corner. -
Move your mouse over the child's hat . As your cursor changes to a pointing finger to let you know you're over a clickable region, the word "Hat" appears (Figure 11-16, top). -
Click the child's hat . The apple.swf animation begins playing at the bottom of the Flash Player (Figure 11-16, middle). -
Click the child's face . The apple.swf animation disappears, and the hoppy.swf animation appears in its place (Figure 11-16, bottom). Figure 11-16. Top: Mousing over the child's hat changes your pointer, letting you know you're over a clickable region. The rollover effect (the word Hat) also appears. In place of adding text as shown here, you might choose to change the color, transparency, or size of the button, or add special effectsanything you think will fit the look of your animation and get your audience's attention.
Middle: Clicking the hat embeds the apple.swf animation by loading it into the Loader component you added in step 16 on Section 11.3.2.
Bottom: Clicking the child's face replaces the apple.swf animation with the hoppy.swf animation. 
11.3.3. Tying an Event to a Component Just as you can tell Flash what to do when your audience clicks a button, you can tell it what to do when your audience interacts with a component. (Chapter 12 describes the components Flash includes and shows you how to add them to your animations.) When it comes to interactivity, though, you can add actions to a component instance exactly as you would to a button or movie clip instance, a hotspot, and so on. The example below shows how to add an action to a ComboBox component (a drop-down list) so that when someone chooses a Web page from the list, Flash launches his Web browser preloaded with that Web page. To tie an event to a component: -
Open the file component_action.fla . You can download this file from the "Missing CD" page. The Stage shows an instance of the ComboBox component (Figure 11-17). Figure 11-17. The ComboBox component on the Stage has already been customized: In other words, the number of options and option labels have already been set. (Look in the Parameters tab.) The instance name of this ComboBox is myList. Testing the component shows that it's working just fine, except that nothing happens when you select an option. You fix that problem by adding an action.  -
Test the component by selecting Control Test Movie . The Flash Player in Figure 11-17 appears. -
Click the drop-down box, and then select from the list of Web sites . Flash highlights the option you select. When you release your mouse, Flash displays your option in the fieldbut nothing else happens. Next, you'll tell Flash what you want to happen. In the next few steps, you'll add a frame-based action that tells Flash to wait until your audience has selected an option and then display the selected Web site. -
Click Frame 1 to select it. Then select Window Actions . The Actions frame titled ActionsFrame appears. -
Click in the script pane, and then type the following ActionScript code : 1 var comboListener:Object = new Object(); 2 3 comboListener.dropdown = function(eventInfo) { 4 var comboValue:String = eventInfo.target.value; 5 switch (comboValue) { 6 case "o'reilly" : 7 getURL("http://www.oreilly.com"); 8 break; 9 case "missing manuals" : 10 getURL("http://www.missingmanuals.com"); 11 break; 12 case "amazon" : 13 getURL("http://www.amazon.com"); 14 break; 15 default : 16 trace("error in component or action"); 17 } 18 }; 19 myList.addEventListener("change",comboListener.dropdown);
Note: You can download a working version of this example, complete with ActionScript code (component_action_working.fla) from the "Missing CD" pagegood news if you're not much for typing.
Here's what the above ActionScript does: First, in lines 1 through 18, it creates a variable called comboListener that describes what you want Flash to inspect (the option your audience selects from a drop-down list). Then, on line 19, the code associates the comboListener both with the ComboBox instance named myList so Flash knows which specific ComboBox you're talking aboutand with the change event, so Flash knows when you want it to check which option your audience has selected. (There's no sense in telling Flash to check every 2 seconds; it only makes sense to tell it to wait until the option has changed.) Time to test your action: -
Select Control Test Movie . The Flash Player appears, showing contents similar to what's in Figure 11-18 (top). -
From the drop-down box, choose Missing Manuals . Flash launches your Web browser, and then loads the Missing Manuals home page. Selecting another option tells Flash to open an additional browser window. Figure 11-18. Top: Thanks to the built-in ActionScript function getURL(), choosing an option from the drop-down list
Bottom: displays the Web site you associated with the option. 
POWER USERS' CLINIC
Communicating with Your Audience's Web Browser and Mail Client | | You can do more with Flash's built-in getURL() function than simply load a Web page (although that is pretty cool). You can also: -
Communicate with the Web page in which you've embedded your animation . For example, you can pass a JavaScript statement to the Web browser. (To test this out, attach the following ActionScript code to the first frame of your animation, make sure you've selected HTML in the Format tab of the Publish Settings window, and then choose Publish Preview.) getURL("javascript:alert('Hi from inside a Flash animation!')");
-
Trigger your audience's mail client . The following ActionScript code launches your audience's email program with the "To:" field prefilled with santa@northpole.org: getURL("mailto:santa@northpole.org");
For more on exchanging data between Flash and other programs, including sending data via the HTML GET and POST methods , head to Flash Help and search for "working with external data." |
 |
