Flash CS4 Professional in 24 Hours- P11 ppsx

ptg Basic ActionScript 291 Actions are instructions. Flash follows each line of code in sequence. Some actions are complete pieces of instruction with no additional modifications on your part. For example, you can add a Stop action, and when Flash en- counters it, the playback head stops advancing. However, many actions re- quire you provide additional details called parameters. For example, an action such as gotoAndPlay requires you provide the additional detail about what frame number or frame label you want to go to. Specifying Actions by Using Parameters Now you can try out actions and parameters. You see that some actions are quite simple. The following task is a quick exercise that uses actions and parameters. After you complete it, we step back to analyze what you did in the task. Make an Action That Loops Part of Your Movie TRY IT YOURSELF ▼ In this task, you make the last few frames of an animation loop. Follow these steps: 1. In a new file, use the Text tool to create a text block containing the word Welcome. Make sure the text type is Static. Select the block and convert it to a symbol. Make it a movie clip and name it Welcome Text. 2. Insert a frame at Frame 19. Add motion tweening. At Frame 1, move the text offstage to the right. In Frame 19, move the text to the center of the screen. 3. At Frame 20, choose Insert, Blank Keyframe. Copy the text at Frame 19, and choose Edit, Paste in Place (or press Ctrl+Shift+V) to put it in Frame 20. Add a frame at Frame 30, and insert a Motion tween. Use the Properties panel to make the tween rotate one time clock- wise between Frame 20 and Frame 30. Test the movie. Notice the whole movie loops over and over. Instead of leaving the animation as is, you’re going to make the rotation part from Frame 20 to Frame 30 loop forever. 4. You can add actions to any keyframe, but instead of mixing scripts with your animation, you should make a new layer exclusively for ac- tions. Name the single layer you currently have Animation, choose Insert, Layer, and name the new layer Actions. Make sure the current layer is the one you called Actions. You can tell a layer is selected when you see a Pencil icon next to the layer’s name. Select Frame 30 in your Actions layer, insert a keyframe by pressing F6, and then ac- cess the Actions panel by clicking Window, Actions (or press F9). From the Library of Lee Bogdanoff ptg TRY IT YOURSELF ▼ Make an Action That Loops Part of Your Movie Make sure Frame 30 remains selected when you edit the Actions panel by noting the tab near the bottom of the panel reads Actions:30 and has the keyframe icon, as shown in Figure 16.2. This confirms the script you’re about to write executes when the playback head reaches Frame 30. 292 HOUR 16: Basic Interactivity FIGURE 16.2 The Actions panel is opened right after Frame 30 is selected so you can set an action to execute when the playback head reaches that frame. FIGURE 16.3 After you insert gotoAndPlay, the Actions panel is populated. 5. To insert a gotoAndPlay action, make sure the Actions panel toolbox is showing, set the filter drop-down to ActionScript 1.0 & 2.0, select Global Functions, Timeline Control, and then double-click gotoAndPlay. You should see a gotoAndPlay action added to your script in the Script pane on the right (see Figure 16.3). Because this action requires parameters, a code hint appears to help guide you. If it goes away, click inside the parentheses following gotoAndPlay, and click the Show Code Hint button. From the Library of Lee Bogdanoff ptg Basic ActionScript 293 As easy as the preceding task was, one thing in particular could make it better. Consider the amount of work involved if you changed the location of the keyframes. For example, what if the second keyframe, Frame 20, had to move to Frame 25? Of course, the initial tween would take longer to play, and the rotation would be quicker, but the loop would also stop working properly. To fix it, remember to edit the action in Frame 30 so it reads gotoAndPlay(25);. You would have to repeat this fix every time you changed the location of the keyframe where the rotation starts. There’s a better way. Instead of making the destination of gotoAndPlay an explicit frame number, you can change the parameters to make the destina- tion a named frame label, which is the same for the frame, no matter where it is located in the Timeline. You use frame labels in the next task. Make an Action That Loops Part of Your Movie TRY IT YOURSELF ▼ 6. You always type any required parameters inside the parentheses. In this case, type the number 20 because that’s the frame number to which you want to go and play. Therefore, the finished action in the script area should read gotoAndPlay(20). 7. Test the movie with Control, Test Movie as it doesn’t work in the au- thoring environment. It plays once, and then every time it gets to Frame 30, it goes back to Frame 20 and plays again. Save or keep this file open; you need it for the next task. Use a Frame Label as the Destination of a gotoAndPlay Action TRY IT YOURSELF ▼ In this task, you improve the gotoAndPlay action by supplying a frame la- bel instead of a frame number. Follow these steps: 1. In the file created in the preceding task, click Frame 20 of the Anima- tion layer, and insert a keyframe. In the Properties panel under Label, locate the Name form field. This is where we give Frame 20 a label. Name this frame Loop Start (see Figure 16.4). 2. Click Frame 30 in the Actions layer, and open the Actions panel. 3. You’re going to modify the gotoAndPlay line in the Actions panel. Change 20 to “Loop Start” (with the quotation marks). The final script should read gotoAndPlay(“Loop Start”);, as shown in Figure 16.5. 4. Test the movie; it doesn’t look any different from the old version to the user. Now go back to the Timeline, click Frame 20, and then click and drag it so Loop Start is now Frame 10. From the Library of Lee Bogdanoff ptg TRY IT YOURSELF ▼ Use a Frame Label as the Destination of a gotoAndPlay Action 5. Test the movie again. The animation now loops back to Frame 10, where you moved the Loop Start keyframe. The power of using a label as the destination of the gotoAndPlay action is that you can go back and move the location of the Loop Start keyframe to any frame you want, and it still works! Save this file for the next task. 294 HOUR 16: Basic Interactivity FIGURE 16.4 If you label Frame 20 via the Properties panel, the destination of the gotoAndPlay action can change from an explicit number (20) to a label name (Loop Start). FIGURE 16.5 This new version of the gotoAndPlay action is better than the original because the destination is a frame label. Frame Actions In the previous task, you saw how placing one action in a keyframe and changing its parameters makes the playback head jump to a different frame. Step back a second and consider what else you’ve learned. Actions are instructions you want Flash to follow. Actions do things. You can mod- ify actions by changing their parameters. This is all good information; how- ever, if actions are instructions, exactly when does Flash follow those instructions? From the Library of Lee Bogdanoff ptg Making Simple Buttons 295 The answer depends on where you put the actions. It turns out in earlier versions of Flash you could put actions both in keyframes and on any ob- ject type, such as button instances, movie clip instances, and components. Now, in ActionScript 3.0, you can put code only in keyframes. So, as to when the code triggers, the answer is simple: when the playhead reaches the frame with the code. In the preceding task, you placed an action in a keyframe. In that case, the action was executed (that is, the instruction was followed) when the playback head reached that frame. If you put an action in Frame 10, it would not be followed until the playback head reached Frame 10. With an action in a keyframe, the user doesn’t do anything but wait for the playback head to reach the appropriate frame to see the action happen. Al- though this isn’t exactly interactivity, it’s quite powerful. For example, often it’s useful to place a stop() action in the first frame so your movie initially appears paused and doesn’t play until a play() action is encountered, like after the user clicks a button. Another example might be when you want to stop in the middle of an animation. All you need is a keyframe and a stop action. There are many more examples of keyframe actions, which are good for when you want something to happen at a certain moment in the anima- tion, not only when a user clicks a button. It’s fairly intuitive to understand how the actions you place in keyframes trigger when the playhead reaches that frame. However, it’s more complex when you consider that scripts can effectively say, “When this event occurs, do this action.” For example, you might want an animation to start when the user clicks a button. In that case, your code is waiting for a mouse press. It’s easiest to always ask yourself, “What do I want to do, and when do I want to do it?” If you want something to happen when the keyframe is reached, put the code in that keyframe. If you want to wait for some event, you need to learn about listening for events. We get to that right after you learn how to make the most basic of event triggers—the simple button. Making Simple Buttons Before we start, you’re going to take a short break from ActionScripting to learn how to create a button. There are only a few ways for the user to in- teract with your movie. Clicking a button is the easiest and most common. Other events users can trigger include key presses, such as pressing the ar- row keys on their keyboards. You can create buttons and make them look cool without any ActionScript. Nothing happens when the user clicks unless From the Library of Lee Bogdanoff ptg TRY IT YOURSELF ▼ Make a Simple Button In this task, you make a simple but useful button. Follow these steps: 1. In a new file, draw an oval or a rectangle that becomes your button. 2. Use the Selection tool to select the entire shape. 3. Convert the shape to a symbol by selecting Modify, Convert to Sym- bol (or press F8). 4. Name the symbol MyButton; make sure you select the button behav- ior, and then click OK. 5. Test your movie by using Control, Test Movie (or press Ctrl+Enter), and notice the way your mouse cursor changes when you place it over the button, as shown in Figure 16.6. 6. Close the .swf you’re testing, so you can edit the button. Double-click the instance on the Stage, and you are taken inside the MyButton symbol. Notice the Timeline looks different. It has only four frames, and they’re named to match the four possible button states. It should look like Figure 16.7. 296 HOUR 16: Basic Interactivity you write ActionScript to respond to that event. We start by creating the buttons, and then deal with the ActionScript in the next section. It’s easy to make a button because it’s another symbol type like Movie Clip or Graphic. Draw a shape, select it, choose Modify, Convert to Symbol, and then select Button. When you test the movie, the cursor changes when you roll over the button, indicating to the user that the button is clickable. Noth- ing happens yet, but we get to that in the next section, “Listening for Events.” On the surface, a Button symbol is like a Movie Clip. The main characteris- tic of a Button symbol is you have the opportunity to create two additional states for it. One is for when the user first rolls over the button and another for when he clicks on the button. Let’s create a button that takes advantage of button states. FIGURE 16.6 Any shape can be used as a button. The user’s cursor changes to a hand when it’s over the button. From the Library of Lee Bogdanoff ptg Make a Simple Button TRY IT YOURSELF ▼ 7. You create new keyframes for the Over and Down states. To do this, click the Over frame, and insert a keyframe. Select the Free Trans- form tool, and then scale the contents of the second frame (the Up state) by making it a tad larger. 8. Select the third frame (the Down state), and insert another keyframe. Select the button’s shape in the new keyframe (Frame 2), and nudge it two pixels down and two pixels to the right. 9. Test the movie. This time the button should grow when you roll over it; click, and move down and to the right when you click it. Making Simple Buttons 297 FIGURE 16.7 Four frames for the four states of a button are inside a button. A few details about buttons are worth noting. First of all, you don’t have to create a different graphic in each state of the button. What might seem odd is you don’t need to have frames for the different states. Even though Flash tries to go to the Over state when users roll over your button, if nothing new is in that frame, they see what’s in the Up state. In addition to Up, Over, and Down, there’s another state called Hit. The Hit state is never visible to the user. It defines where the user must position her cursor to show a button’s Over state or where she must click to see the but- ton’s Down state. Imagine you had a doughnut-shaped button. If you didn’t NOTE The Four States A button state is the way the button looks at a particular moment in time. The Up state contains the appearance of the button in its normal state. The Over state contains the look for when the user hovers his cursor over the button. Down is the state when the user clicks. Hit is a special state in which you define what portion of the button you in- tend to be clickable. The user never sees the graphic you put into the Hit state, but the shape of that graphic is what the user must “hit” to trigger the button. From the Library of Lee Bogdanoff ptg 298 HOUR 16: Basic Interactivity set a Hit state, the user wouldn’t be allowed to click anywhere in the hole (similar to Figure 16.8). However, if you inserted a keyframe and drew a solid circle (no doughnut hole) in the Hit frame, the user could click any- where within the solid circle. This can also be useful when you want a small button, but you don’t want to frustrate the user by requiring her to have the precision of a surgeon. It’s usually a good idea to make the Hit state big enough to easily click even if that means that it’s bigger than the button. In the task, “Make a Simple Portfolio Viewer,” at the end of this hour, you make a button with nothing in the Up, Over, or Down states. You draw a shape in only the Hit state. This creates an invisible button, which means you don’t see anything normally, when you roll over it, and when you click it. Even though you don’t “see” the shape in the Hit state, that shape makes the button clickable. While you’re working in Flash, invisible but- tons show up as a semitransparent cyan tint, so you can resize and position them as needed. The advantage of an invisible button is you can use it on top of any other graphic. For example, you might have a large photo on which you want the user to be able to click on individual spots. If you did- n’t use invisible buttons, which can be placed over other graphics, you’d have to cut up the image and make a new button for each slice. Figure 16.9 shows an example where several round invisible buttons are used on top of a photograph. FIGURE 16.8 Changing the shape contents of a button’s Hit state affects what por- tion is clickable. FIGURE 16.9 Invisible buttons enable you to make any area clickable rather than make a new button for each spot. From the Library of Lee Bogdanoff ptg Listening for Events 299 Another important note about buttons: You can put anything you want into those three keyframes (Up, Over, Down). You get only one keyframe for each, but that doesn’t mean you can’t put more than one Movie Clip sym- bol in that frame. If you create a Movie Clip that contains a 10-frame anima- tion and then place that Movie Clip in the Over state for a button, the user sees that animation play and continue to loop when her mouse is over the button. In this way, you can make animated buttons. Now that you have created your own button, you have something to click during the ActionScript exercises that follow. The simple buttons you cre- ated are not the only kinds of buttons in Flash. These buttons (the ones you created by selecting Modify, Convert to Symbol) are officially called Simple Buttons. As you learn next hour, buttons are also available from the Com- ponents panel, the so-called UI Components. The primary difference is Sim- ple Buttons are easy to create and support in only the four states. Some of the UI Components support additional states such as Disabled or Checked and Unchecked. Don’t worry about that for now; keep in mind that Simple Buttons enable you to create custom buttons quickly. Listening for Events You’re about to learn the basics of writing ActionScript that triggers only when a specific event occurs. Remember in the earlier exercise, “Make an Action That Loops Part of Your Movie,” the ActionScript you put in the last keyframe told Flash to go back and play from Frame 20. Every time the playhead reached that last frame, it looked at the code and executed your ActionScript. Now you see how to write ActionScript that waits for an event—namely, when the user clicks a button. NOTE No Buttons in Buttons You can put nearly anything into a button. The only exception is another button. Buttons nested inside of each other fail to re- spond to any ActionScript. Add Buttons to an An- imation to Stop and Continue Playback TRY IT YOURSELF ▼ In this task, you add buttons that enable the user to stop and continue the animation from the task earlier this hour. Follow these steps: 1. Either use the file created in the task, “Make an Action That Loops Part of Your Movie,” or make a new Flash File (ActionScript 3.0) with a motion tween over several frames. Make sure you can see something moving while the animation plays. If you’re using the old file, make sure the publish settings are set for ActionScript 3.0; select File, Publish Settings, click the Flash tab, and then ensure the ActionScript version dropdown is set to ActionScript 3.0. From the Library of Lee Bogdanoff ptg 300 HOUR 16: Basic Interactivity TRY IT YOURSELF ▼ Add Buttons to an An- imation to Stop and Continue Playback 2. Insert a new layer for the buttons. You don’t want to place buttons in the layer that has the animation; that would affect the tween. Name the new layer Buttons. 3. Into the new Buttons layer, draw a rectangle that becomes a button. Select it, and then convert it to a symbol by pressing F8. Name it MyButton, and make sure the behavior is set to Button. 4. You’re going to need two buttons, so either copy and paste the in- stance that is already on the Stage or drag another instance of the My- Button symbol from the Library onto the Stage in the Buttons layer. Apply a Tint color style to each instance—one red for Stop and one green for Play. As you recall, you do so by selecting the button in- stance on the Stage, using the Properties panel to select Tint from the Color drop-down list, and then selecting a color and percentage. 5. Give each button a memorable instance name: stopButton for red and startButton for green. Like adding a label, you use the Properties panel to set the instance names. Select them each in turn, and type in the name for each in the first text box near the top of the Properties panel. The instance names are necessary, so you can specify what should happen when the user clicks a button. 6. Now you’re going to write the code in a keyframe. The code tells Flash,, “When users click stop, Flash stops, and when they click start, Flash plays.”. Select the first keyframe in the Buttons layer, and open the Actions panel. Write the following code: stopButton.addEventListener ( MouseEvent.CLICK, myStopHandler ) function myStopHandler( evt ){ stop() } Translating this code: The first line says the stopButton instance should broadcast the CLICK event to the homemade function called myStopHandler. That is, any time the user clicks the stopButton in- stance, it triggers the code inside the myStopHandler function. A homemade function always begins with the word function, followed by the name of your function; in this case, myStopHandler is followed by an opening and closing parenthesis, which is followed by an opening and closing curly brace ({}). Exactly what you put between the two curly braces is up to you. You can put one line of code or 1,000 lines of code. In this case, we put the Timeline action called stop(). 7. See whether it works so far. Select Control, Test Movie. Click the Stop button, and the animation should stop. Close the .swf you’re testing to add a listener for the CLICK event on the Start button. From the Library of Lee Bogdanoff [...]... buttons be placed in your movie? A In the main Timeline only B Anywhere you want: in the main Timeline or a Movie Clip’s Timeline, just not inside another button C Anywhere you want, including inside other buttons 2 What is an action? A Anything that moves on the Stage B An instruction snippet that tells Flash what to do C What programmers call a function 3 What is a great technique to make coding a little... 16.12 An invisible button’s Timeline has three blank frames and graphics in its Hit state The faded contents shown are on the main Stage—not in the button button, and then click and drag to move the keyframe to the Hit state The button’s Timeline should look like Figure 16.12 14 Return to the main Timeline by clicking Scene 1, and you see the Invisible button is semitransparent cyan Create two more instances,... always someInstance.someMethod() If you go back to the first two tasks where we looped part of an animation with gotoAndPlay() and then made the entire animation stop() or play(), no instance names were ever used In those cases, stop() is interpreted by Flash as meaning, “Stop the current Timeline.” This is important if you have a Movie Clip instance onstage, and it contains multiple frames, continuing to... the three RadioButton component instances vertically You can use the Align panel by pressing Ctrl+K to space out or line up the buttons Select the top instance and access the Parameters tab in the Component Inspector panel, as shown in Figure 17.5 FIGURE 17.5 You populate the three RadioButton component instances one at a time by using the Parameters tab in the Component Inspector panel NOTE Numbers for... button by choosing Modify, Convert to Symbol (or press F8 and choose Button) You can name it Invisible Click OK, and you see this button is far from invisible That’s because the square you drew is in the Up state Double-click the instance of Invisible, so you can move the shape into the Hit state Click once on the Up keyframe in the Invisible From the Library of Lee Bogdanoff Listening for Events 307... options through a single function Using the Button Component In Hour 16, ‘Basic Interactivity,’ you made your own custom Simple Buttons, so the following exercise using the Button UI Component seems familiar The only difference is you don’t have to draw anything The graphics for your button are already created However, we want to introduce a more advanced approach that involves channeling the events from... method and property in ActionScript, but that’s not practical Instead, it’s best if you step back and think about the task you’re trying to achieve, and write it out using your own words This is called pseudocode If you can write out the instructions for the task at hand using your own words, then the process of translating to actual ActionScript becomes mechanical It’s not easy to “think in ActionScript.”... easy to “think in ActionScript.” So, start by thinking of what you want to achieve Compare this to how you might mail a letter when traveling in a foreign country You might not know the word for “post office,” but you can probably assume they have such a place; it’s just a matter of finding the correct word This is similar to working in ActionScript and trying to change the volume for a video You might... cranking out video games; although you can create amazing games by using Flash, it takes a lot of work For now, we’re just laying the foundation From the Library of Lee Bogdanoff 310 HOUR 16: Basic Interactivity Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour You should try to answer the questions before checking... down the language syntax HOUR 16: Basic Interactivity There’s another powerful way to make the objects onstage change in Flash, and it’s actually simpler than triggering methods Remember, methods are processes or things that objects can do Properties are a similar, but simpler concept Properties are attributes that each Movie Clip instance can have or maintain independently For example, two Movie Clips . Anywhere you want: in the main Timeline or a Movie Clip’s Timeline, just not inside another button. C. Anywhere you want, including inside other buttons. 2. What is an action? A. Anything that moves. or play(), no instance names were ever used. In those cases, stop() is interpreted by Flash as meaning, “Stop the current Timeline.” This is important if you have a Movie Clip instance onstage,. taking baby steps first. It’s amazing the kind of powerful things you’ve done this hour. It’s going to take a lot more work before you’re cranking out video games; although you can create amazing