ptg adobe fLash professIonaL Cs5 CLassroom In a book 221 keyframes. To reference frame labels in ActionScript, you must enclose them in quotation marks. e command gotoAndStop("label1") makes the playhead go to the keyframe with the label called label1. 1 Select frame 10 on the content layer. 2 In the Properties inspector, enter label1 in the Label Name field. A tiny flag icon appears on each of the keyframes that have labels. 3 Select frame 20 on the content layer. 4 In the Properties inspector, enter label2 in the Label Name field. 5 Select frames 30 and 40, and in the Properties inspector, enter corresponding names in the Label Name field: label3 and label4. A tiny flag icon appears on each of the keyframes that have labels. 6 Select the first frame of the actions layer and open the Actions panel. Download from Library of Wow! ebook ptg 222 LESSON 6 Creating Interactive Navigation 7 In your ActionScript code, change all the fixed frame numbers in each of the gotoAndStop() commands to the corresponding frame labels: • gotoAndStop(10); should be changed to gotoAndStop("label1"); • gotoAndStop(20); should be changed to gotoAndStop("label2"); • gotoAndStop(30); should be changed to gotoAndStop("label3"); • gotoAndStop(40); should be changed to gotoAndStop("label4"); e ActionScript code now directs the playhead to a particular frame label instead of a particular frame number. 8 Test your movie by choosing Control > Test Movie > in Flash Professional. Each button moves the playhead to a different labeled keyframe on the Timeline, where a different movie clip is displayed. e user can choose to see any restaurant in any order. However, since the restaurant information covers the buttons, you can’t return to the original menu screen to choose another restaurant. You’ll need to provide another button to return to the first frame, which you’ll do in the next section. Creating a Home Button A home button simply makes the playhead go back to the first frame of the Timeline, or to a keyframe where an original set of choices, or the main menu, are presented to the viewer. Creating a button that goes to frame 1 is the same process as creating the four restaurant buttons. However, in this section, you’ll learn to use the new Code Snippets panel to add ActionScript to your project. Download from Library of Wow! ebook ptg adobe fLash professIonaL Cs5 CLassroom In a book 223 Adding another button instance A home, or main menu, button is provided for you in the Library panel. 1 Select the Buttons layer and unlock it if it is locked. 2 Drag the button called mainmenu from the Library panel to the Stage. Position the button instance at the top-right corner. 3 In the Properties inspector, set the X value to 726 and the Y value to 60. Using the Code Snippets panel to add ActionScript e Code Snippets panel provides commonly used ActionScript code for you to easily add simple interactivity to your Flash project. If you are unsure of coding your own buttons, you can use the Code Snippets panel to learn how to add inter- activity. You can also save, import, and share code between a team of developers to make the development and production process more efficient. 1 Choose Window > Code Snippets, or if your Actions panel is already open, click the Code Snippets button ( ) at the top right of the Actions panel. e Code Snippets panel appears. e code snippets are organized in folders that describe their function. Download from Library of Wow! ebook ptg 224 LESSON 6 Creating Interactive Navigation 2 Select the Main Menu button on the Stage. 3 In the Code Snippets panel, expand the folder called Timeline Navigation and select Click to Go To Frame and Stop. 4 Click the Add to Current Frame button at the top-left corner of the Code Snippets panel. Flash creates the code necessary to add the selected interactivity. If the button has not been given an instance name, a dialog box appears to warn you that the instance will automatically be given a name. Click OK to dismiss the dialog box. Download from Library of Wow! ebook ptg adobe fLash professIonaL Cs5 CLassroom In a book 225 e Actions panel opens to show you the code that is generated. Flash adds the code to your existing code in the actions layer. If you don’t have existing code, Flash will create a new layer for you. e code in gray (between the /* and the */ symbols) describes how the code works and any instructions for customizing it to fit your situation. 5 Within the function called fl_ClickToGoToAndStopAtFrame, replace the gotoAndStop(5) action with gotoAndStop(1). You want the playhead to return to frame 1 when the viewer clicks the Main Menu button, so you need to replace the argument in the gotoAndStop() action. 6 Choose Control > Test Movie > in Flash Professional. Clicking on each button moves the playhead to a different labeled keyframe on the Timeline, where a different movie clip is displayed. Clicking the Main Menu button returns to the first frame, which displays the original four restaurant choices. Download from Library of Wow! ebook ptg 226 LESSON 6 Creating Interactive Navigation Playing Animation at the Destination So far, this interactive restaurant guide works by using the gotoAndStop() command to show information in different keyframes along the Timeline. But how would you play an animation after a user clicks a button? e answer is to use the command gotoAndPlay(), which moves the playhead to the frame number or frame label specified by its parameter and plays from that point. Creating transition animations Next, you will create a short transition animation for each of the restaurant guides. en you’ll change your ActionScript code to direct Flash to go to each of the key- frames and play the animation. 1 Move the playhead to the label1 frame label. 2 Right-click/Ctrl-click on the instance of the restaurant information on the Stage and choose Create Motion Tween. Download from Library of Wow! ebook ptg adobe fLash professIonaL Cs5 CLassroom In a book 227 Flash creates a separate Tween layer for the instance so that it can proceed with the motion tween. 3 In the Properties inspector, select Alpha from the Style pull-down menu in the Color Effect section. 4 Set the Alpha slider to 0%. e instance on the Stage becomes totally transparent. 5 Move the playhead to the end of the tween span at frame 19. 6 Select the transparent instance on the Stage. 7 In the Properties inspector, set the Alpha slider to 100%. e instance is displayed at a normal opacity level. e motion tween from frame 10 to frame 19 shows a smooth fade-in effect. Download from Library of Wow! ebook ptg 228 LESSON 6 Creating Interactive Navigation 8 Create similar motion tweens for the remaining restaurants in the keyframes labeled label2, label3, and label4. Using the gotoAndPlay command e gotoAndPlay command makes the Flash playhead move to a specific frame on the Timeline and begin playing from that point. 1 Select the first frame of the actions layer and open the Actions panel. 2 In your ActionScript code, change all the first four gotoAndStop() commands to gotoAndPlay() commands. Leave the parameter unchanged: • gotoAndStop("label1"); should be changed to gotoAndPlay("label1"); • gotoAndStop("label2"); should be changed to gotoAndPlay("label2"); • gotoAndStop("label3"); should be changed to gotoAndPlay("label3"); • gotoAndStop("label4"); should be changed to gotoAndPlay("label4"); Make sure you keep the function for your Main Menu button unchanged. You’ll want that function to remain a gotoAndStop() command. For each of the restaurant buttons, the ActionScript code now directs the playhead to a particular frame label and begins playing at that point. Note: A fast and easy way of doing multiple replacements is to use the Find and Replace command in the Actions panel. From the options menu in the upper-right corner, select Find and Replace. Note: Recall that you can use the Motion Presets panel to save a motion tween and apply it to other objects to save you time and effort. Select the first motion tween on the Timeline and click Save selection as preset. Once saved, you can apply the same motion tween to another instance. Download from Library of Wow! ebook ptg adobe fLash professIonaL Cs5 CLassroom In a book 229 Stopping the animations If you test your movie now (Control > Test Movie > in Flash Professional), you’ll see that each button goes to its corresponding frame label and plays from that point, but it keeps playing, showing all the remaining animations in the Timeline. e next step is to tell Flash when to stop. 1 Select frame 19 of the actions layer, the frame just before the label2 keyframe on the image layer. 2 Right-click/Ctrl-click and choose Insert Keyframe. A new keyframe is inserted in frame 19 of the actions layer. Download from Library of Wow! ebook ptg 230 LESSON 6 Creating Interactive Navigation 3 Open the Actions panel. e Script pane in the Actions panel is blank. Don’t panic! Your code has not disappeared. Your code for the event listeners is on the first keyframe of the actions layer. You have selected a new keyframe in which you will add a stop command. 4 In the Script pane, enter stop(); Flash will stop playing when it reaches frame 19. 5 Insert keyframes at frames 29, 39, and 50. 6 In each of those keyframes, add a stop command in the Actions panel. 7 Test your movie by choosing Control > Test Movie > in Flash Professional. Each button takes you to a different keyframe and plays a short fade-in animation. At the end of the animation, the movie stops and waits for the viewer to click the Main Menu button. Animated Buttons Animated buttons display an animation in the Up, Over, or Down keyframes. When you hover your mouse cursor over one of the restaurant buttons, the gray additional information box appears. But imagine if that gray information box were animated. It would give more life and sophistication to the interaction between the user and the button. e key to creating an animated button is to create an animation inside a movie clip symbol, and then place that movie clip symbol inside the Up, Over, or Down keyframes of a button symbol. When one of those button keyframes is displayed, the animation in the movie clip plays. Note: If you want a quick and easy way to duplicate the keyframe containing the stop command, hold down the Alt/Option key while you move it to a new location on the Timeline. Download from Library of Wow! ebook . instance at the top-right corner. 3 In the Properties inspector, set the X value to 726 and the Y value to 60. Using the Code Snippets panel to add ActionScript e Code Snippets panel provides commonly. Actions panel is already open, click the Code Snippets button ( ) at the top right of the Actions panel. e Code Snippets panel appears. e code snippets are organized in folders that describe. ebook ptg adobe fLash professIonaL Cs5 CLassroom In a book 227 Flash creates a separate Tween layer for the instance so that it can proceed with the motion tween. 3 In the Properties inspector,