Flash CS5 THE MISSING MANUAL phần 7 pdf

435 C : C A  E Getting Help for Events and Event Listeners you need for your script. Each event type (MouseEvent, KeyboardEvent, ErrorEvent) has related constants that you use when you create event listeners. You have to type these constants exactly as they’re defined (including capital letters, underscores, and so on) for your event listener to work. In addition to the constants, the events have properties you can use in your programs. For example, MouseEvent has properties called altKey, ctrlKey, and shiftKey. These are Booleans, and they can tell you whether a particular key is being pressed during a mouse event. You can use them to define, say, a special action for Shift-click and a different one for Alt-click. CoderS’ CliniC Mouse Events: Public Constants Here’s the complete list of constants used by MouseEvent, as shown in ActionScript 3.0 Reference for the Adobe Flash Platform. The first word, in capital letters, is the constant you use to identify the event. The word after the colon, String, indicates that the constant is of the String type. The word in quotes is the constant’s actual value. The most im- portant part of this definition is the word in caps, because that’s the word you use to register listeners for a particular mouse event, as explained in the next section. You can think of these constants as the specific triggers for a MouseEvent. CLICK : String = “click” DOUBLE_CLICK : String = “doubleClick” MOUSE_DOWN : String = “mouseDown” MOUSE_MOVE : String = “mouseMove” MOUSE_OUT : String = “mouseOut” MOUSE_OVER : String = “mouseOver” MOUSE_UP : String = “mouseUp” MOUSE_WHEEL : String = “mouseWheel” ROLL_OUT : String = “rollOut” ROLL_OVER : String = “rollOver” Tip: You can ignore the items with the red triangles next to their names unless you’re planning on doing some AIR (Adobe Integrated Runtime) programming. The triangles indicate that these classes, properties, and methods are available only in AIR. For more details on AIR projects, see Chapter 21 (page 673). Creating a Rollover with a Mouse Event So, you know you want to listen for a mouse event; specifically, you want to trigger some actions when the mouse is over the mcCircle movie clip. That makes mcCircle the event target, because it’s the object where the event takes place. As described ear- lier and as shown in Figure 13-1, the event target creates an event object, and then sends it to an event listener. The event object delivers information about the event that happened. Often, all that’s necessary is notification that the event took place. As programmer, it’s your job to tell the event target the name of the event that serves as a trigger and where to deliver the event object. This process is called registering an event, and it’s done with a line of code like this: mcCircle.addEventListener(MouseEvent.MOUSE_OVER, mouseOverListener); 436 F CS: T M M Getting Help for Events and Event Listeners Note: As usual, create an “actions” layer in your timeline and use the Actions panel (Window➝Actions) to write your code. In ActionScript-speak, this statement “registers an event listener.” Almost all events use a similar method to register event listeners, so it’s worthwhile to examine the statement completely. The first chunk of code, mcCircle.addEventListener, is nearly recognizable. The dot syntax indicates that mcCircle is an object, and that makes addEventListener either a property or a method of the object. The action verb “add” in the name hints that it’s a method, because methods are actions, while properties are characteristics. In fact, addEventListener is a method that’s included with just about every object in Flash. That means you can use nearly any object to register an event listener. The details in the parentheses are the parameters for the method. The first parameter is the event the listener is listening for. In this case, it’s a MouseEvent, and the specific type of event is named by the constant MOUSE_ OVER. As you know from your extensive research in the Flash help files, those capital- lettered constants are the specific triggers for a MouseEvent. A comma sepa- rates the parameters of the method. In this statement, there are two parameters. The second parameter, mouseOverListener, is the name of the event listener. An event listener is simply a function—a series of statements or actions—that run when the event happens. You get to name (and write all the code for) the event listener. It’s helpful to use a name that shows that this is an event listener and that describes the event that triggers the actions; hence the name “mouseOverListener.” The event listener is a function, much like the functions described on page 413. The most significant detail is that the function has to list the event object in its param- eters. You can think of the event object as the message sent from the event target to the event listener. Here’s the code for mouseOverListener: function mouseOverListener (evt:MouseEvent):void { mcText.gotoAndStop("over"); } The first line begins with the keyword function, indicating that what follows defines a function—a list of actions. Next comes the name of the function: mouseOverListener. The function’s parameter is the event object; in this case, the event object’s name is evt. That’s followed by a colon (:) and the object class MouseEvent. The name doesn’t matter—it can be evt, e, or george. As always, it’s helpful to choose a name that means something to you now and will still make sense 5 years from now when you’re trying to remember how the code works. You do have to accurately define the class or type of event, which in this case is MouseEvent. The term :void indicates that this function doesn’t return a value. If you need to brush up on how to build a function, see page 413. Once the curly brackets begin, you know that they contain the list of statements or actions that the function performs. In this case, there’s simply one line that tells the movie clip mcText to go to the frame labeled “over” and stop there. All in all, here’s the complete code so far, with accompanying line numbers: 437 C : C A  E Getting Help for Events and Event Listeners 1 mcCircle.addEventListener(MouseEvent.MOUSE_OVER, mouseOverListener); 2 3 function mouseOverListener (evt:MouseEvent):void 4 { 5 mcText.gotoAndStop("over"); 6 } What you have at this point is one complete and registered event listener. Line 1 identifies mcCircle as the event target for a MOUSE_OVER event. It also registers the event listener as mouseOverListener. Beginning on Line 3, you have the code for mouseOverListener. Any actions you place between those curly brackets will happen when the mouse cursor is over mcCircle. You can go ahead and test your movie if you want, but it’s not going to behave all that well. It needs a few more lines of code to make it presentable. If you test your movie at this point, you’ll see a lot of movie clip flickering. If you mouse over the circle, the flickering stops and the text changes to “mouse over.” That much works well. When you move the mouse out of the circle…nothing happens. The text still reads “mouse over.” That’s because you haven’t written the mouse-out event. Fortunately, it’s very similar to the mouse-over code. In fact, all you have to do is copy and paste the mouse-over code, and then make changes where needed, as shown in bold text in this example: 7 8 mcCircle.addEventListener(MouseEvent.MOUSE_OUT, mouseOutListener); 9 10 function mouseOutListener (evt:MouseEvent):void 11 { 12 mcText.gotoAndStop("out"); 13 } By now, you should be able to read and understand most of the code. Like the first example, the event is registered using the mcCircle object. The event in this case is MOUSE_OUT, and the event listener is named accordingly: mouseOutListener. The action part of the event listener sends the timeline playhead to the frame labeled “out,” which displays the text “mouse out”—back where it was when the program started. Perfect. Well, almost perfect. If you test the movie now, you’ll find that it behaves well when you mouse over the circle and when you mouse out of the circle. At the beginning though, there’s still a bunch of movie clip flickering, unless the mouse starts off over the circle. Time for a little Flash troubleshooting. Unless they’re told otherwise, movie clips play one frame, and then the next, and so on, until they reach the last frame, and then they play over again. And again. And again. Your main movie has only one frame, so it’s not causing the flickering. mcCircle only has one frame, so it’s not causing the flickering either. The mcText clip has two frames, and those are the ones doing the dance when you start your animation. You need a line of code that stops the movie clip on Frame 1. Then it will be up to the mouse events to control which frame is shown. All you need is one line that says: mcText.gotoAndStop(1); 438 F CS: T M M Getting Help for Events and Event Listeners The method gotoAndStop() is part of every movie clip. This bit of code tells mcText to go to Frame 1 and stop. The parameter inside the parentheses has to refer to a specific frame. You can do that with a frame number, as shown here, or you can do it with a frame label as you did in your event listeners. If you’re wondering how you can find out about the properties and methods for particular classes and objects, see the box on this page. CoderS’ CliniC Getting Help for ActionScript Classes On page 434, the section “Getting Help for Events and Event Listeners” explained how to find an event and all its programming details in the ActionScript 3.0 Reference for the Adobe Flash Platform. You can use the same reference to look up the properties and methods of particular classes and objects. For example, if you can’t remember the exact spelling for the “goto and stop” method, you can look up the MovieClip class and you see all the methods associated with the class. After opening the ActionScript 3.0 Reference for the Ado- be Flash Platform (page 419) look for MovieClip in the scrolling box at the bottom left under All Classes. Click the word “MovieClip,” and you see the complete and formal definition of the class, including the public properties that you can change through ActionScript programming. Below that, you see the public methods including gotoAndStop(). There’s a short description that describes what the method does, and the type of parameters it requires. Scroll down far enough, and you’ll see examples of how to use the MovieClip class, along with its properties and methods. As a statement on the first frame of your main movie clip, mcText.gotoAndStop(1) runs when the animation begins. It doesn’t really matter whether it comes before or after the other lines of code. Those other bits of code don’t do anything until an event happens. Not so with the statement above. There’s nothing to prevent it from running as soon as Frame 1 of the main movie clip loads. In ActionScript programming, the order in which different functions and statements appear isn’t always important. It doesn’t matter which event listener appears first in your code. The order in which the event listeners run is determined by the order in which someone mouses over or out of mcCircle. So whenever possible, you may as well arrange your code so it’s easy to read and understand. In this case, it’s probably best to register all your event listeners in the same spot, and then put the event lis- tener functions together. You may also want to put the code that isn’t dependent on a listener at the very top. So here, with a little rearranging for readability, is the code up to this point: 1 2 mcText.gotoAndStop(1); 3 4 mcCircle.addEventListener(MouseEvent.MOUSE_OVER, mouseOverListener); 5 mcCircle.addEventListener(MouseEvent.MOUSE_OUT, mouseOutListener); 6 7 function mouseOverListener(evt:MouseEvent):void 8 { 9 mcText.gotoAndStop("over"); 10 } 439 C : C A  E Getting Help for Events and Event Listeners 11 12 function mouseOutListener(evt:MouseEvent):void 13 { 14 mcText.gotoAndStop("out"); 15 } Line 1 stops mcText in its tracks before it has a chance to start flickering between its two frames. Lines 3 and 4 register event listeners. Beginning on line 6 are the functions that make up the event listeners. At this point, you can test your program, and it should behave pretty well. If something unexpected happens, double-check your spelling and make sure you have semicolons at the end of the statements. Add Statements to an Event Listener So far in this example you’ve seen how an event listener attached to one object (mc- Circle) can effect a change in another object (mcText). A single event listener can change any number of objects, including the object that registers the listener. After all, any statements you put between the curly brackets of an event listener will run when the event happens. So, the next steps change the mcCircle object to give it a rollover-style behavior. Once you make these changes, both the text and the circle will change in response to MOUSE_OVER and MOUSE_OUT events. Before you can indulge in ActionScript programming fun, you need to create a new keyframe in the mcCircle movie clip with a different image. Then you get to add statements to the two event listeners, mouseOverListener and mouseOutListener, to describe the actions. Here are the steps to set up mcCircle’s timeline: 1. On the stage, double-click mcCircle to open it for editing. The circle symbol opens, showing a single frame in the timeline. 2. Click Frame 2 in the timeline, and then press F7 to add a blank keyframe. A new empty keyframe appears in Frame 2 of the circle timeline. 3. Draw a star in Frame 2 using the Polystar tool. The circle timeline now has a circle on Frame 1 and a star on Frame 2. 4. In the Properties panel, label Frame 2 over, and then label Frame 1 out. It’s good to get in the habit of labeling frames you refer to in ActionScript code. 5. In the Edit bar above the stage, click Scene 1 to close the movie clip. The circle movie clip symbol closes, and you’re back at the main movie clip’s timeline. In your ActionScript, you need to add the lines that control the behavior of the mcCircle movie clip. They’re all of the gotoAndStop() variety. Start off with a line that stops the movie clip from flickering when the animation begins. mcCircle.gotoAndStop(1); 440 F CS: T M M Getting Help for Events and Event Listeners Then, between the curly brackets of mouseOverListener, add code to change the circle to a star when a MOUSE_OVER event happens. mcCircle.gotoAndStop("over"); Last but not least, between the curly brackets of the mouseOutListener, add code to change the star back to a circle when the mouse moves away from mcCircle. mcCircle.gotoAndStop("out"); When you’re done, the complete code should look like this: 1 mcText.gotoAndStop(1); 2 mcCircle.gotoAndStop(1); 3 4 mcCircle.addEventListener(MouseEvent.MOUSE_OVER, mouseOverListener); 5 mcCircle.addEventListener(MouseEvent.MOUSE_OUT, mouseOutListener); 6 7 function mouseOverListener(evt:MouseEvent):void 8 { 9 mcText.gotoAndStop("over"); 10 mcCircle.gotoAndStop("over"); 11 } 12 13 function mouseOutListener(evt:MouseEvent):void 14 { 15 mcText.gotoAndStop("out"); 16 mcCircle.gotoAndStop("out"); 17 } Now is a good time to test your movie. If everything runs as it should, you enjoy a high-quality mouse-over and mouse-out experience. Both the graphics and the text change with the mouse events. On the other hand, if you’re getting somewhat differ- ent results, you may want to download 13-2_Mouse_Event_done.fla from the Miss- ing CD page at www.missingmanuals.com/cds to look for places where your code doesn’t match the downloaded file. Applying mouse events to other projects As it stands now, your mouse event project isn’t the flashiest thing on the block (pun intended). Still, it’s worth considering how you can take the same rollover style behaviors and create larger, more impressive projects. For example, using the same mouse events, it would be easy to create a photo gallery that has half a dozen or more photo thumbnails and one large “feature” image, like the one in Figure 13-4. When the mouse moves over one of the thumbnails, the thumbnail changes to display a highlight, and the feature image changes to match the thumbnail. You can even add a text caption that changes for each picture. Once you’ve created one photo gallery, it’s easy to reuse your code by simply swapping in new photos. The variations are lim- ited only by your time and imagination. For example, the photo gallery animation mentioned in Chapter7 (7-5_Photo_Gallery.fla), uses mouse-click events. When a thumbnail is clicked, the playhead moves to a different point on the timeline, where a tween shows the photo move in 3-D space and fill the stage. Another click, and it shrinks back to size. 441 C : C A  E Creating a Tabbed Window with Mouse Events Creating a Tabbed Window with Mouse Events So far this chapter has covered two types of mouse events: MOUSE_OVER and MOUSE_OUT. The technique for using other events is nearly identical. The most frequently used mouse event is probably the CLICK event. If you understand the previous examples with MOUSE_OVER and MOUSE_OUT, you’ll have no problem putting CLICK to work. Suppose you want to create a Flash project that’s organized with tabs?. You’ve seen a similar system on websites and in programs including Flash. You click a tab, and it reveals different information or a panel of tools. Figure 13-4: Using the mouse-event techniques described so far, you can create a photo gallery like this one. When the mouse is over a thumbnail, a large version of the picture is shown to the right. Using the ActionScript programming tools introduced in this chapter and the pre- ceding one, you can create a tabbed window like the one shown in Figure13-5. Here are the tools you need in your Flash and ActionScript toolbox: • Three mouse events: MOUSE_OVER, MOUSE_OUT, and CLICK. • A few IF ELSE conditional statements to control tab behavior. • Four movie clips to serve as tabs. • One movie clip that holds the “content” shown under each tab. Setting the Stage for Tabbed Folder Display The tabbed bar in Figure 13-5 is made up of four movie clips, one for each tab sub- ject: dog, cat, flower, and Porsche. You can make the graphic part of the tab any shape you want. In this example, the tabs are created with a rectangle primitive. The top corners are rounded to give it that old-fashioned, tabbed-folder look. The Classic static text was created with the text tool. The important thing is that each tab is a separate movie clip, and each movie clip has three frames: over, out, and selected. In the example, the tabs are 137.5 pixels wide so that four tabs fit snugly in a 550- pixel horizontal space. 442 F CS: T M M Creating a Tabbed Window with Mouse Events Note: You can follow the instructions in this section to set up your tabbed folder document, or you can download 13-3_Tabbed_Folders.fla from the Missing CD page (www.missingmanuals.com/cds). If you want to see a finished and working copy of the project, download 13-4_Tabbed_Folders_done.fla. As the mouse moves and clicks, you want to change the tabs’ appearance to provide some interactive feedback for your audience. In this example, when the mouse is “out,” the tab contrasts in color with the color of the content’s folder. It looks as if the tab is behind another open folder. When the mouse moves over the tab, it changes size and color and the text is bold, providing a highlight effect. Figure 13-5: You can make a tabbed window inter- face using three simple mouse events. Top: The dog tab is selected, and the content area below shows a dog. Bottom: Clicking the cat tab changes the tab’s appearance and the content below. 443 C : C A  E Creating a Tabbed Window with Mouse Events When the tab is selected and its content is showing, the color of the tab matches the background color of the folder, giving it the appearance of an open folder. The frames are labeled out, over, and selected as shown in Figure 13-6. The ActionScript code uses the labels to identify particular frames. Figure 13-6: Each tab is a movie clip with three frames, one for each state of the tab. Shown here in the symbol editing view, the top picture shows the “out” state, the middle shows “over,” and the bottom shows “selected.” The main movie clip has only one frame, but it organizes the actions, tabs, and con- tent into three layers, as shown in Figure 13-7. 444 F CS: T M M Creating a Tabbed Window with Mouse Events Figure 13-7: The timeline for the main movie clip in this project has three lay- ers: actions, tabs, and content. It’s not absolutely necessary to use three layers, but it’s helpful to organize your project using layers. Each tab is a separate movie clip symbol, and the instances arranged on the stage are named mcDogTab, mcCatTab, mcFlowerTab, and mcPorscheTab. There’s one other movie clip in this project, called mcContent. You guessed it—that’s a movie clip that covers most of the stage and shows the contents for each of the tabs. The mcContent movie clip has four frames with labels that match each tab: dog, cat, flower, and Porsche. So, when the “cat” tab is clicked, the playhead in mcContent moves to the “cat” frame. In the example file, there’s a matching photo for each mcContent frame. If you don’t have photos of your favorite dog, cat, flower, and Porsche, a static text word will do. Tip: It’s easy to line up and arrange the tabs on the stage using the align commands. Use Modify➝ Align➝Bottom to line up all the bottom edges. Then use Modify➝Align➝ Distribute Widths to space them evenly. [...]... tab selected Chapter 13: Controlling Actions with Events 453 Creating a Tabbed Window with Mouse Events 454 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 // else if the tab isn't selected show the out frame if (mcFlowerTab.currentLabel == "selected") { mcFlowerTab.gotoAndStop("selected");... porscheClickListener(evt:MouseEvent):void { // when clicked change the tab to selected mcPorscheTab.gotoAndStop("selected"); // when clicked change the mcContent to show related frame Flash CS5: The Missing Manual Keyboard Events and Text Events 74 75 76 77 78 79 } mcContent.gotoAndStop("porsche"); // Set all the other tabs to the "out" frame mcCatTab.gotoAndStop("out"); mcFlowerTab.gotoAndStop("out"); mcDogTab.gotoAndStop("out");... for mcDogTab Code revised for mcCatTab 70 // Event listeners for mcDogTab // Event listeners for mcCatTab 71 function dogOverListener (evt:MouseEvent):void { function catOverListener (evt:MouseEvent):void { 75 if (mcDogTab.currentLabel == “selected”) { if (mcCatTab.currentLabel == “selected”) { 77 mcDogTab.gotoAndStop(“selected”) mcCatTab.gotoAndStop(“selected”) 67 // else if the tab isn’t selected,... so that it looks like this: // mcCatTab.addEventListener(MouseEvent.MOUSE_OVER, catOverListener); 450 Flash CS5: The Missing Manual Problem solved Place comment marks in front of the lines for the mcCatTab: 15, 16, and 17; for the mcFlowerTab: 20, 21, and 22; and for the mcPorscheTab: 25, 26, and 27 Creating a Tabbed Window with Mouse Events Tip: When you want to comment out more than one line of code,... stop Release the space bar, and the numbers start again Note: When you test keyboard events inside Flash, you may notice some odd behavior That’s because Flash itself is trapping some keyboard events, and it tends to catch the letter keys If you actually publish your Flash project, and then run the SWF in Flash Player or a browser, you get a more accurate experience Using Event Properties Like most things... preview the Flash document (Ctrl+Enter or -Return) 466 Flash CS5: The Missing Manual Adding Objects to the Display List CODERS’ CLINIC Making Library Objects Available to ActionScript In the exercises in this chapter, you use ActionScript to display instances of objects in the Library on the stage using ActionScript code When you drag a symbol out of the Library and then place it on the stage, Flash knows... you’ll get to that later (page 472 ) 468 Flash CS5: The Missing Manual Adding Objects to the Display List 3 In the Action panel on the next available line, type the following code: card2.x = 50; card2.y = 50; These lines reposition the card2 movie clip so it appears 50 pixels from the top and left margin 4 Press Ctrl+Enter ( -Return) to test your ActionScript code This time when Flash Player shows your document,... TextEvent Indicates a change when the audience enters text TimerEvent 462 Description Activity Event Indicates the passing of a timing interval Flash CS5: The Missing Manual chapter 14 O  rganizing Objects with the Display List When you create your animation using the Flash authoring tool, you draw objects on the stage or drag them from the Library Often, you put one object inside another For example, you... object Anything you put in a frame of that main timeline is displayed in the Flash animation So it, too, is a container for other display objects So, before you even start the process of building your animation, Flash always starts out with two display objects, which are also containers, as shown in Figure 14-1 Figure 14-1:  Every Flash document starts off with two display objects that are also display... container holding the main timeline, and the timeline is a container holding the playing card movie clip Everything that appears in a Flash animation has to be in a container and ultimately, those containers are held in the main timeline, which is held in the 464 Flash CS5: The Missing Manual Adding Objects to the Display List stage Objects that can hold or contain other objects are a special type of . mcPorscheTab.gotoAndStop("out"); 66 } 67 } 68 69 function porscheClickListener(evt:MouseEvent):void 70 { 71 // when clicked change the tab to selected 72 mcPorscheTab.gotoAndStop("selected"); 73 // when clicked. == “selected”) { if (mcCatTab.currentLabel == “selected”) { 77 mcDogTab.gotoAndStop(“selected”) mcCatTab.gotoAndStop(“selected”) 67 // else if the tab isn’t selected, change it on mouse over //. for mcCatTab 70 // Event listeners for mcDogTab // Event listeners for mcCatTab 71 function dogOverListener (evt:MouseEvent):void { function catOverListener (evt:MouseEvent):void { 75 if (mcDogTab.currentLabel