Learning Flash CS4 Professional phần 8 pps

Basic ActionScript Chapter 10, Inverse Kinematics 253 Lines 8 and 9 create an instance of the IKMover class, designed to move bones, and attempt to move the bone to point (0, 0), or the upper-left corner of the Stage. Because the armature is anchored, it can’t be moved to point (0, 0), and strains to get there. The result is that it ends up pointing in that direction. You will initialize an armature in your portfolio project this way, but the armature will be in a movie clip. As such, the coordinates used will be easier to understand if they are translated from values relative to the movie clip to values relative to the Stage. To prepare for this adjustment, see the “Local and Global Coordinates” sidebar, next. Local and Global Coordinates When working with display objects, many properties and methods are dependant upon the scope, or relative location, to which the code applies. For example, consider a movie clip with an instance name of mc , an upper-left-corner registration point placed on the stage at an x coordinate of 20 and a y coordinate of 60 (Figure 10-28). point(0,0) global point(-20, -60) local point(20, 60) global point(0,0) local x and y coordinates relative to the stage (global) Figure 10-28. and a display object (local) From the Stage’s perspective, that movie clip is at point (20, 60) and the upper-left corner of the stage is point (0, 0)—exactly as you’d expect. However, from the movie clip’s perspective, those points have different locations. The upper-left corner of the movie clip is no longer point (20, 60), but rather point (0, 0), because that position is now relative to the movie clip. Similarly, the upper-left corner of the Stage isn’t point (0, 0), but is point (–20, –60) instead. That is, the movie clip remains at the origin of its perspective and the upper-left corner of the stage is 20 pixels to the left and 60 pixels up. On occasion, you may need to refer to x and y coordinates in another scope. To do so, you can use the globalToLocal() and localToGlobal() methods. These methods translate Points from one scope to another so you don’t have to. For example, if you wanted to reference the upper-left corner of the Stage from within the movie clip described previously, you would have to use point (–20, –60). However, that location isn’t very intuitive. So, you can translate that information on the fly. You can use point (0, 0), which makes the most sense as the upper-left corner of the Stage, but the location will still be correct if you translate it first. Using globalToLocal() , you are asking for a global coordinate (relative to the Stage) to be converted to a coordinate at the same location but relative to the movie clip: trace(mc.globalToLocal(new Point(0, 0))); //(x=-20, y=-60) Using localToGlobal() , you are asking for a local coordinate (relative to the movie clip) to be converted to a coordinate at the same location but relative to the Stage: trace(mc.localToGlobal(new Point(0, 0))); //(x=20, y=60) The companion source file, local_global_coordinates.fla, shows a simple example of how this works, and you will also use the technique in this chapter’s “Project Progress” section, next. WARNING The point used in the bone-moving script must be an instance of the Point class. You can’t pass in separate x and y values. Learning Flash CS4 Professional 254 Project Progress Project Progress In this chapter, you’ll add an armature to the Help screen so users can point to interface controls with Scaly’s arm. In the next chapter, you’ll populate a dynamic text element with help text based on which on-screen control Scaly’s arm touches. For this exercise, you’ll need to open the accompanying source file help_01. fla. This file is very much like the default template you usually start with, but with two small exceptions. In the content movie clip, which has been renamed HelpPage for consistency with prior chapters, Scaly’s torso has already been imported from Illustrator. More importantly, a new layer has been added in which Scaly’s arm resides inside a movie clip. Scaly’s arm has been moved to a higher layer so that it can appear above the portfolio’s viewing wheel when the Help screen loads. You want Scaly’s torso to be cropped by the viewing wheel frame, just as the content from other frames has been cropped. However, his arm must be free to move outside the frame so it can interact with the navigation buttons and sound control at runtime. You will modify the HelpPage movie clip in the next chapter when you add text. For now, you will focus on turning the arm movie clip into an IK armature. Double-click the 1. arm movie clip to edit its contents. You will see that the arm is composed of four pieces: upper arm, forearm, hand, and a small green dot at the end of the finger (Figure 10-29). Select the Bone tool in the Tools panel. Enable the 2. Snap to Objects feature by clicking the context-sensitive magnet icon at the bottom of the Tools panel. Connect your first bone from the upper arm to the forearm. Click in the 3. upperarm movie clip, at the shoulder, and drag to the forearm movie clip, at the elbow. Because you enabled Snap to Objects, the Bone tool will snap to the registration points of the movie clips if you are close enough. Connect your second bone from the forearm to the hand. Click on the 4. head joint of the previous bone, at the elbow, and drag to the hand movie clip, at the wrist. Don’t worry if the hand movie clip is partially obscured; it will appear at the top of the armature when it is connected to the bone. Connect your third bone from the wrist to the placeholder graphic. 5. Click on the head joint of the previous bone, at the wrist, and drag to the armature_placeholder movie clip, at the finger. Don’t worry if the armature_placeholder movie clip is partially obscured. It will appear at the top of the armature when it is connected to the bone. Project Progress Chapter 10, Inverse Kinematics 255 Your armature is now complete. Click on the armature layer so the arma-6. ture’s properties are visible in the Properties panel. Change the Options Type to Runtime and test your movie. You should be able to drag the arm around the shoulder, unconstrained. Close your SWF and return to the 7. arm movie clip in the FLA. Now that you have moved the four movie clips that make up the armature to a dedicated armature layer, you can delete the remaining empty layer if desired. Save your work as 8. help.fla, and compare your file to help_02.fla. Continue with the exercise or, if you’ve had any problems thus far, continue with help_02.fla. Four arm pieces prior to adding armatureFigure 10-29. Now that your armature is working, it’s time to constrain its joints to move more like a human arm: Double-click the 9. arm movie clip to edit its contents. Using the Selection tool, select the upper arm bone. At the top of the 10. Properties panel, name the bone humerus. Under Joint Rotation, enable Constrain. Enter values of –130 for Minimum and 110 for Maximum. Repeat the process outlined in step 10 for the forearm and hand bones, 11 . using the following values: Name: a. radiusUlna, Minimum: 0, Maximum: 140 Name: b. metacarpal, Minimum: –60, Maximum: 90 The joints of your armature are now constrained. The final step in prepar-12. ing your armature for inclusion in the project file is to hide the placeholder Learning Flash CS4 Professional 256 Project Progress at the end of the finger. Open the Library panel and double-click the armature_placeholder movie clip. Select the movie clip inside and set its alpha value to 0. Test your movie again. When you drag the arm around, it should now 13. be constrained at all three joints to more closely mimic human joint movement, and the placeholder at the end of the finger should now be invisible. Close your SWF and return to the 14 . arm movie clip. If your arm doesn’t behave as expected, look at the visible constraint wedges in Figure 10-30 and compare them with your own. If necessary, adjust the constraint val- ues until the constraint wedge overlays look more like the ones in Figure 10-30. Save your work and compare your file to 15. help_03.fla. Continue with the exercise or, if you’ve had any problems thus far, continue with help_03. fla. A Scaly x-ray, showing joint constraintsFigure 10-30. Your armature is now complete, and it’s time to add it to the project file. You will copy the main content movie clip, HelpPage, from your help.fla file and paste it into the content layer of your main project file, as usual. However, this time you will also create a new layer in the project file, above all other inter- face layers, for the arm. This way, the arm can be dragged above the navigation buttons and sound control. When the layer drags over these elements, text feedback will display, based on a script that you’ll add in the next chapter. You’ll end this chapter by adding ActionScript to the main project file that registers the movie clip for runtime operation and presets the arm’s bone posi- tions upon entering the frame: Project Progress Chapter 10, Inverse Kinematics 257 In your help FLA, unlock the content layer, if necessary, and select the 16. HelpPage movie clip by clicking on Scaly’s torso, then copy it to memory. While your 17. help.fla file remains open, open your main project file. Scroll to the help section at the end of the Timeline. In the 18. content layer, at frame 224, add the HelpPage movie clip by using Edit→Paste in Place. Select the 19. sound layer and add another layer to the Timeline using the New Layer button at the bottom of the Timeline, or by using the Insert→Timeline→Layer menu command. Name the layer helpArmature. Add empty keyframes (F7) to the 20. helpArmature layer at frames 224 and 231 to match the keyframe locations in the content layer. Switch back to the 21. help.fla file, select the arm movie clip, and copy it to memory. Switch to the main project file again and paste the 22. arm movie clip into the helpArmature layer using Edit→Paste in Place. Double-click the 23. arm movie clip to edit its contents. Click the armature layer in the Timeline and, in the Properties panel, be 24. sure Runtime is selected in the Options Type setting. Save and test your movie. After the opening animation is complete, click 25. the Help button and test your armature. Theoretically, you should be able to use your armature, but it won’t work. This is because runtime armatures will only work in frame 1, by default. You will need to add ActionScript to register the armature. You will also add ActionScript to pose the armature when entering the screen. In frame 227, add lines 2 through 7 of the following script after the 26. stop() action already in place in the actions layer. This script will register the armature for runtime operation. If explanation is required, reread the “Supporting Runtime Armature Use Beyond Frame 1” segment of the “Basic ActionScript” section, earlier in this chapter: stop1 (); 2 import3 fl.ik.*; 4 var5 armtr:IKArmature = IKManager.getArmatureByName("Armature_1"); armtr.6 registerElements(this.stage); IKManager.trackIKArmature7 (armtr, true); Test your movie again, and navigate to the Help screen. Test the armature 2 7. by dragging it around. It should rotate in a constrained manner and be capable of dragging over the navigation buttons, sound control, and logo. Learning Flash CS4 Professional 258 Project Progress All that remains now is to initialize the armature every time you visit the 28. Help screen. Add the following code to frame 227 at the end of the same script you edited in step 26: presetBone(8 "humerus", arm.globalToLocal(new Point(380, 350))); presetBone(9 "radiusUlna", arm.globalToLocal(new Point(270, 300))); presetBone(10 "metacarpal", arm.globalToLocal(new Point(270, 200))); 11 function12 presetBone(whichBone:String, pt:Point):void { 13 var bone:IKBone = armtr.getBoneByName(whichBone); 14 var boneTJ:IKJoint = bone.tailJoint; 15 var ikMvr:IKMover = new IKMover(boneTJ, boneTJ.position); ikMvr.16 moveTo(pt); }17 To better learn about the script from the previous step, test your file to 2 9. see its results. Everything will be as it was before, including the ability to drag Scaly’s arm around the screen. However, each time you enter the Help screen anew, Scaly will be pointing up (Figure 10-31). Scaly’s default pose each time you visit the Help screenFigure 10-31. As for the script described in step 28, it’s very much like the script discussed in the “Posing an Armature with Code” segment of the “Basic ActionScript” sec- tion, earlier in this chapter. However, there are a few important differences. First, the code is wrapped in a function in lines 12 through 17, and called in lines 8 through 10. This allows you to pose three bones efficiently, rather Project Progress Chapter 10, Inverse Kinematics 259 than repeating code three times. You’re passing information into the function, including the name of the bone, and the location to which the bone should be set. The bones are given custom names (roughly corresponding to the names of human bones) for clarity only. In your own projects, you can stick with the default assigned names if you prefer. Second, the armature is already stored in the armtr reference variable deter- mined in the prior script. Most importantly, however, the points passed into the function are translated from values relative to the arm movie clip to values relative to the Stage. During development, you can look at the Stage and estimate the location of the bones you want to use. However, these coordinates are relative to the upper-left corner of the stage, or point (0, 0). If you do not translate these points into values relative to the movie clip, they will all be offset from the movie clip’s location and the armature will point southeast. Conversely, if you have to use points relative to the movie clip, they will be difficult to determine when writing your script, and probably confusing later on. To avoid this issue, you can use points that are familiar and easy to deter- mine based on the upper-left corner of the Stage, and then let Flash translate them on the fly to values relative to the movie clip. For more information about translating point values among scopes, see the “Local and Global Coordinates” sidebar, earlier in this chapter. The Project Continues In the next chapter, you’ll work with dynamic and input text elements on the Help and Lab screens. [...]... ote Although Flash CS4 Professional is the most up-to-date version of Flash as of this writing, most compatibility issues do not hinge on which version of the authoring tool you’re using While it’s true that new features are introduced with each version of the authoring tool, most compatibility problems relate to which version of the player your viewers are using 288 Learning Flash CS4 Professional. .. anything in Flash! Just opening the file in Flash will convert the layout to a movie clip containing static graphics and Static text elements to preserve visual accuracy Figure 11-14 shows the original InDesign output, and Figure 11-15 shows the final output from Flash with no interim steps applied Figure 11-14 Original InDesign layout Figure 11-15 Opened XFL document in Flash 282 Learning Flash CS4 Professional. .. and, therefore, selectable 2 68 Learning Flash CS4 Professional Configuring Text Fields with the Flash Interface Paragraph A Password option has been added to the Behavior menu When enabled, it substitutes asterisks for typed characters, obscuring the input from view The Orientation feature has been disabled Vertical input is not supported in the shipping version of Flash CS4 Professional Options The Link... clip exists and, if it does, line 18 sets its scaleX and scaleY properties to 1.5, or 150% actual size The Project Continues In the next chapter, you will learn about sound and write the ActionScript to enable the sound controller you created in Chapter 3 286 Learning Flash CS4 Professional Chapter 12 Audio Introduction Audio has long been an important part of the Flash world for designers and developers... class='heading'>CSS Text Formatting Possible in Flash 280 Learning Flash CS4 Professional Loading Text Lorem ipsum dolor sit amet, consectetur adipiscing elit Aenean facilisis luctus lacus Mauris porta felis quis nulla Vivamus sollicitudin magna vitae mauris Nulla ultricies accumsan mi. CSS: body { font-family: Verdana; text-indent: 20px; } heading { font-size: 18px; font-weight: bold; text-indent:... Double-click any unoccupied location of the Stage to return to the main Timeline and add the following script to the script frame for the Help section (frame 227 in the actions layer): 1 2 3 4 5 6 7 8 284 Learning Flash CS4 Professional this.addEventListener(Event.ENTER_FRAME, onLoop); function onLoop(evt:Event):void { if (arm.hand.hitTestObject(navigation)) { help.helpText.text = "Navigate the portfolio using... "actionscript" string If the two compared strings match, an affirmative message is traced to the Output panel 264 Learning Flash CS4 Professional Configuring Text Fields with the Flash Interface Label This simple component adds a text label that you can easily set with code: 1 2 3 4 5 6 7 8 import fl.controls.Label; var txtLabel:Label = new Label(); addChild(txtLabel); txtLabel.x = 200; txtLabel.y =... panel (Figure 11 -8) or though ActionScript Figure 11 -8 Choosing a device font from the font Family menu in the Properties panel Custom fonts As with device fonts, you specify custom fonts using the Properties panel or ActionScript OpenType PostScript and TrueType font formats are supported Instead of using a generic font reference (such as _sans, for example), 272 Learning Flash CS4 Professional Formatting... Chapter 11, Text 281 Using InDesign and XFL Using InDesign and XFL This section is an enthusiastic profile of a new feature that improves interoperability between Creative Suite 4 applications Adobe’s new XFL file format promises to improve asset transfer between applications In its current implementation, the format facilitates movement in one direction from InDesign CS4 to Flash CS4 Professional All... over dark or color backgrounds This menu also contains a custom anti-aliasing option through which you can control the thickness and sharpness of embedded fonts only 266 Learning Flash CS4 Professional Configuring Text Fields with the Flash Interface Selectable The final row of settings in the Character section of the Properties panel is a series of small buttons The leftmost button controls whether . buttons, sound control, and logo. Learning Flash CS4 Professional 2 58 Project Progress All that remains now is to initialize the armature every time you visit the 28. Help screen. Add the following. the text indent within the field on the left and right sides. Learning Flash CS4 Professional 2 68 Configuring Text Fields with the Flash Interface Behavior For Dynamic text fields, the Behavior. among others: Properties of a Dynamic text Figure 11-5. field Learning Flash CS4 Professional 266 Configuring Text Fields with the Flash Interface Family The Family property specifies the font