Wile Adobe Creative 5 suite Design Premium aio for dummies phần 9 pps

Book VII Chapter 6 Lights, Camera, Movie Clips! 785 Rendering and Animating Movie Clips in the 3D Realm Tweening 3D properties After you have a feel for how the 3D Rotation and 3D Translation tools trans- form movie clips, you can incorporate these effects into a motion tween to create stunning effects just as easily as you would with position and transparency. Follow these steps to create a tween with 3D properties: 1. Place a single movie clip instance on a new layer on the Timeline by dragging it from the Library panel. 2. Right-click (Windows) or Control-click (Mac) the first frame of the new layer and choose Create Motion Tween from the contextual menu that appears. A new tween span is created, and the playhead jumps to the end of the span. 3. Select the 3D Rotation tool and click the movie clip to make it active; circular handles appear around the instance. 4. Click and drag the axes to rotate the movie clip until you set an angle and a position. 5. Press the Enter or Return key to play back your timeline, and your movie clip tweens from its original 2D position to the 3D settings you applied, as shown in Figure 6-8. 6. Repeat Steps 3 through 5 with the 3D Translation tool to see your movie clip slide in three dimensions. Figure 6-8: A 3D tween in Onion Skin Outlines mode. 71_607466-bk07ch06.indd 78571_607466-bk07ch06.indd 785 5/25/10 9:01 AM5/25/10 9:01 AM 786 Book VII: Flash Professional CS5 71_607466-bk07ch06.indd 78671_607466-bk07ch06.indd 786 5/25/10 9:01 AM5/25/10 9:01 AM Chapter 7: Controlling Your Movie with ActionScript In This Chapter ✓ Introducing ActionScript ✓ Adding actions to the timeline ✓ Creating button controls ✓ Applying code snippets ✓ Enabling buttons with ActionScript W hether you’re creating a Web site, presentation, or game, a truly interactive experience is one in which users can control the action. If you want to take your movies to the next level, ActionScript can help. The built-in Flash scripting language has come a long way and can help you do anything from control movie playback to create complex games. This chapter introduces you to ActionScript and shows you how to use it to create interactive elements, such as clickable buttons, in your movies. Getting to Know ActionScript ActionScript is a powerful scripting language that you can incorporate into your movies to control playback, navigation, and imported media, such as images, video, and audio. ActionScript is written as a series of commands (or statements) that are placed on the timeline, buttons, movie clip, and external files using the Actions panel and the new Code Snippets panel. Think of ActionScript as a set of instructions you can give your movie to tell it how to behave and add abilities. ActionScript is often used for timeline control so that animations can be told when and where to stop, loop, play, or jump to other points along a timeline. You can also make truly interactive movies by adding ActionScript to buttons on the stage so that users can control the animation, too. The new Code Snippets panel An excellent new addition for designers and code newbies is the new Flash CS5 Code Snippets panel, shown in Figure 7-1. If you have never written ActionScript, the learning curve can be a bit daunting, and sometimes you 72_607466-bk07ch07.indd 78772_607466-bk07ch07.indd 787 5/25/10 9:01 AM5/25/10 9:01 AM 788 Getting to Know ActionScript just need to get the job done. The Code Snippets panel contains dozens of useful pieces of code that you can easily apply in a single click. Whether you want to navigate the timeline, play sounds, or control video in your movie, a code snippet can help. If you press the Enter or Return key to watch a movie clip play on the stage, you’ll probably be a little disappointed. Don’t worry: To see a movie clip in action, you just need to preview the movie in Flash Player. Figure 7-1: The new Code Snippets panel. The Actions panel If you’re comfortable writing code by hand, you can use the Actions panel to write your own code statements throughout your movie. The Actions panel, shown in Figure 7-2, acts as a wizard, reference book, and script editor all in one. You can also add actions from the Actions panel using a categorized tray or drop-down list or type them directly into the script editor. A handy Script Assist mode (see the next section) is available so that you can add and modify actions without having to type the code by hand. (We highly rec- ommend the Script Assist mode for new users.) To launch the Actions panel, choose Window➪Actions or use the F9 (Windows) or Option+F9 (Mac) shortcut key combination. To place an action on a frame, select the frame on the timeline and launch the Actions panel. Script Assist mode For users new to ActionScript, an alternative to using the Code Snippets panel or tackling hands-on coding is Script Assist mode. This mode acts as a wizard within the Actions panel to let you use a series of menus, buttons, 72_607466-bk07ch07.indd 78872_607466-bk07ch07.indd 788 5/25/10 9:01 AM5/25/10 9:01 AM Book VII Chapter 7 Controlling Your Movie with ActionScript 789 Getting to Know ActionScript and text boxes to build scripts without having to get into the nuts and bolts of writing code by hand. Script Assist mode helps prevent time-consuming errors so that you spend more time being creative and less time trouble- shooting. Figure 7-2: The Actions panel. To enable Script Assist mode, click the Script Assist icon in the upper-right corner of the Actions panel. Previewing ActionScript ActionScript is understood and processed within Flash Player, so most scripted movies need to be tested by choosing Control➪Test Movie. In some cases, you can also enable simple actions in the authoring environ- ment so that you can see your work in progress while still working from the timeline. ActionScript 3.0 versus ActionScript 2.0 Since its introduction in Flash Player 9, ActionScript version 3.0 has brought many major changes and improvements to the way ActionScript performs and to the way it’s created within movies. Previous versions of ActionScript (1.0+, 2.0) are still in use among some Flash projects, so you still have options for creating or saving movies with older ActionScript version settings, if necessary. If you have worked with older versions of ActionScript, you should be aware of some key differences: 72_607466-bk07ch07.indd 78972_607466-bk07ch07.indd 789 5/25/10 9:01 AM5/25/10 9:01 AM 790 Creating ActionScript with the Actions Panel ✦ ActionScript 3.0 can only be placed on keyframes in the timeline or external (.as) files. You cannot place ActionScript 3 statements directly on symbol instances. ✦ ActionScript 3.0 is stricter about a number of coding practices. Actions that Flash Player would normally “let slide” in ActionScript 2 may cause errors in ActionScript 3. ✦ ActionScript 3.0 projects can be published only to Flash Player 9 or later. This consideration is important if your project or company limits the use of Flash Player to version 8 or earlier. If you’re a first-time coder or have never worked with scripting or program- ming languages, some concepts in ActionScript 3.0 may present a significant learning curve. In the interest of keeping with best practices and taking advantage of the latest tools in Flash CS5, this chapter covers only ActionScript 3.0. Specifying the correct publish settings When you choose to create a new Flash file, you can select an ActionScript 2.0 or 3.0 version file. If you’re adding ActionScript to an existing Flash file, you should verify and adjust the ActionScript version in your Publish Settings to match the version you’ve chosen to work in. ActionScript versions are matched to specific versions of Flash Player, and 3.0 scripts don’t work in a version 2.0 movie (and vice versa). To verify and select the appropriate ActionScript version, choose File➪ Publish Settings; click the Flash tab and choose ActionScript Version 2.0 or ActionScript Version 3.0 from the Script drop-down list. The Flash Player and ActionScript version shows in the Property inspector panel when no tools or objects are selected. Creating ActionScript with the Actions Panel The Code Snippets panel is a helpful way to get up and running, but when you’re ready to venture out on your own, you’ll find that coding using the Actions Panel’s Code Editor window may give you more flexibility for certain tasks. All ActionScript code is added to keyframes on the timeline, and here you’ll add some common ActionScript statements within the Code Editor (see the top of Figure 7-3) and with the assistance of the Actions Panel’s Script Assist mode (see the bottom of Figure 7-3). 72_607466-bk07ch07.indd 79072_607466-bk07ch07.indd 790 5/25/10 9:01 AM5/25/10 9:01 AM Book VII Chapter 7 Controlling Your Movie with ActionScript 791 Creating ActionScript with the Actions Panel Figure 7-3: The Actions Panel lets you create code by freely typing in the Code Editor window (top) or building scripts by using the Script Assist mode (bottom). Adding a stop() The stop() statement does exactly what it sounds like: It stops the timeline at whatever frames it’s placed on. A common use of stop() is to keep a movie from looping, which is the default behavior for Flash Player. Follow these steps to create a stop action in your movie: 1. On a new layer, create a motion or shape tween from frames 1 through 24 and press Enter or Return to play back and preview the animation. For more information on creating tweens, see Chapter 3 of this minibook. 72_607466-bk07ch07.indd 79172_607466-bk07ch07.indd 791 5/25/10 9:01 AM5/25/10 9:01 AM 792 Creating ActionScript with the Actions Panel 2. Click the New Layer button below the timeline to create a new layer and name it Actions. If necessary, drag the layer upward so that it’s the topmost layer in the stack. This dedicated layer is where you add ActionScript to control your new motion tween. 3. Add a keyframe on frame 24 of the new Actions layer with the F6 shortcut key. 4. Select the keyframe and choose Window➪Actions to launch the Actions panel. 5. In the Actions panel, locate the Script Assist button and click it. The top panel expands, and you’re now working in Script Assist mode. You can add ActionScript to keyframes with existing content, but it’s always a good practice to separate scripts from visual elements on the stage by creating a dedicated layer for your ActionScript. 6. Click the plus sign at the top of the Actions panel and choose flash. display➪MovieClip➪Methods➪Stop. 7. Specify in the Object text box the name of the object you want to con- trol. Because you’re stopping the current (main) timeline, enter the word this in place of the not_set_yet text in the Object text box, as shown at the top of Figure 7-4. The actions panel reads import flash.display.MovieClip; this.stop(); Take a look at your timeline (refer to the bottom of Figure 7-4), and you’ll notice that a lowercase a now appears inside the keyframe, which indicates that there is ActionScript on the keyframe. These scripts run when the playhead passes that keyframe. 8. Choose Control➪Test Movie to preview your movie. The animation plays until frame 24 and then stops. Using goto: gotoAndPlay() and gotoAndStop() To loop a movie or to send the playhead to a different point on the timeline, you can tell your movie to jump forward or backward to a specific frame with one of two variations of the goto statement: gotoAndPlay() and gotoAndStop(). Each of these two statements requires a frame name or number so that Flash Player knows where to send the playhead. When placed on a frame, these actions send the playhead forward or backward to the specified frame and stop, or they resume playback from that point. 72_607466-bk07ch07.indd 79272_607466-bk07ch07.indd 792 5/25/10 9:01 AM5/25/10 9:01 AM Book VII Chapter 7 Controlling Your Movie with ActionScript 793 Creating ActionScript with the Actions Panel Figure 7-4: The Actions panel view, showing a stop() action (top); a lowercase a indicates that ActionScript has been added to frame 24 of the Actions layer (bottom). Indicates ActionScript on the keyframe To use gotoAndStop, follow these steps: 1. On the Actions layer, select and create a new keyframe at frame 23. 2. Choose Window➪Actions to open the Actions panel. 3. Click the plus sign and choose flash.display➪MovieClip➪Methods➪ gotoAndStop. 4. In the Object field, target the current timeline by typing this in the Object text box. Enter 1 in the Frame text box and make sure the Scene text box is empty. The statements should now read import flash.display.MovieClip; this.gotoAndStop(1); 5. Choose Control➪Test Movie to preview your movie. The tween plays and jumps to the first frame, where it stops. 72_607466-bk07ch07.indd 79372_607466-bk07ch07.indd 793 5/25/10 9:01 AM5/25/10 9:01 AM 794 Creating ActionScript with the Actions Panel Follow these steps to use gotoAndPlay(): 1. Create a new keyframe at frame 22 on the Actions layer and launch the Actions panel with the new keyframe selected. 2. Click the plus sign and choose flash.display➪MovieClip➪Methods➪ gotoAndPlay. In the Object text box, have the timeline refer to itself by typing this. 3. Enter 5 in the Frame text box and make sure the Scene text box is empty (see Figure 7-5). The actions should now read import flash.display.MovieClip; this.gotoAndPlay(5); Figure 7-5: The gotoAnd Play() action, placed in ActionScript 3.0. 4. Choose Control➪Test Movie to preview your movie. The animation plays until frame 22 and loops between frames 5 and 22. Using frame labels Many statements (like the goto statements described in the preceding sec- tion) reference exact frame numbers to navigate the timeline. If you happen to change the placement of something on your timeline (such as the start or end of an animation), frame numbers may become inaccurate. For cases like these, you can assign names directly to keyframes on the timeline that you can call directly from ActionScript. 72_607466-bk07ch07.indd 79472_607466-bk07ch07.indd 794 5/25/10 9:01 AM5/25/10 9:01 AM [...]... for buttons, and one for text Book VII Chapter 7 Controlling Your Movie with ActionScript Poster images designed by and courtesy of Jambone Creative (www.jambonecreative.com) Applying Code Snippets The addition of the new Code Snippets panel brings ActionScript within reach for many more Flash users, and provides precreated code fragments for most every common need 802 Applying Code Snippets For designers... the stage 5 Create a new layer and use the Text tool to create a piece of type that reads “Made with Adobe Flash CS5” on the stage Place it in the lowerright corner of the stage For more information on creating text on the stage, refer to Chapter 2 of this minibook Your photo viewer should look similar to the one in Figure 7 -9 Figure 7 -9: Set up your photo viewer movie as shown here: one layer for the... panel and modifying statements will prove quite handy For this photo viewer example, create a new Flash file by following these steps: 1 Import five unique photos or graphics to your Library For more information on importing images, refer to Chapter 5 of this minibook 2 Create a button symbol that can represent both Forward and Backward buttons For instance, create a right-pointing arrow that can be... workspace layouts as you want for different projects or different designers who may share the same computer with you Choose Window➪Workspace to recall, save, reset, or manage your workspace layouts Flash CS5 comes with several layout presets: Animator, Classic, Debug, Designer, Developer, Essentials, and Small Screen You can select and use these layouts as a starting point for a new workspace layout or... keyboard shortcuts for commonly used items or create custom keyboard shortcuts that are more intuitive for you To create a new keyboard shortcut, follow these steps: 1 Choose Edit➪Keyboard Shortcuts (Windows) or Flash➪Keyboard Shortcuts (Mac) The Keyboard Shortcuts dialog box launches (see Figure 8 -9) Figure 8 -9: Drill down through the menus to select the command you want to create a shortcut for ... panel to stop the timeline at each of the five frames of your movie Poster images designed by and courtesy of Jambone Creative (www.jambonecreative.com) 804 Applying Code Snippets About instance names Every time you need to add ActionScript to control a button (or a movie clip), you first need to create an instance name for the button An instance name is a unique ID that tells ActionScript which object... shape tools to fill this frame with a large, filled Hit area 8 Exit the button by clicking Scene 1 above the stage 9 Choose Control➪Test Movie to preview your movie Rollover and click your new button to see the different states in action Creating Button Symbols 799 Figure 7-8: Modified content for the Over frame appears when the user rolls the mouse over the button Book VII Chapter 7 Although choosing... 8-1) Use the left ruler for reference so that you know exactly how far down you’re placing the new guide — for example, at 120 pixels Figure 8-1: To create a new, horizontal guide, click and drag from the top ruler and release a guide on the stage 5 Click and drag on the top ruler again to place another guide Position this one slightly above the one you previously created — for example, place it at... gotoAndPlay() statement 5 Locate the line that reads gotoAndPlay (5) Replace 5 with the name of the new frame label (top) in double quotes, as shown in Figure 7-7 The code now reads gotoAndPlay (“top”); Figure 7-7: Replace the frame number with the frame label you assigned 6 Choose Control➪Test Movie to preview your changes Click the Rewind button and you see the animation jump to frame 5 and stop just as... the existing Actions layer, which is tied to your selected button 6 A prompt lets you know that Flash will create an instance name for the new button automatically; click OK 7 Click to select the button you’ll use for the Next button on the stage Applying Code Snippets 8 05 8 Within the Code Snippets panel, you should already have expanded the Timeline Navigation category Locate and double-click the . 7 857 1_607466-bk07ch06.indd 7 85 5/ 25/ 10 9: 01 AM5/ 25/ 10 9: 01 AM 786 Book VII: Flash Professional CS5 71_607466-bk07ch06.indd 78671_607466-bk07ch06.indd 786 5/ 25/ 10 9: 01 AM5/ 25/ 10 9: 01 AM Chapter 7: Controlling. the animation. For more information on creating tweens, see Chapter 3 of this minibook. 72_607466-bk07ch07.indd 791 72_607466-bk07ch07.indd 791 5/ 25/ 10 9: 01 AM5/ 25/ 10 9: 01 AM 792 Creating ActionScript. additional instances of your button on the stage: 72_607466-bk07ch07.indd 799 72_607466-bk07ch07.indd 799 5/ 25/ 10 9: 01 AM5/ 25/ 10 9: 01 AM 800 Putting It All Together: Creating a Simple Photo Viewer