Learning Flash CS4 Professional phần 7 doc

Animating 3D Properties Chapter 8, 3D 213 Any rotated or translated child will be affected by a change to its parent. If a child appears small and far away, for example, due to a positive z position, rotating the parent 180 degrees automatically brings that child far into the foreground. You’ll see this effect of rotating children with multiple depths when you learn more about parallax scrolling later in the chapter. The important thing to take away from this discussion is that you don’t need to select objects as a group, reposition the 3D center point, or switch between global and local transformations using this technique. Once the children are positioned where you want them inside the parent container, all you need to do is transform the parent, and you’re done. Animating 3D Properties One of the best parts of having 3D properties integrated into the Flash CS4 Professional interface is that you can animate them as easily as you can ani- mate 2D properties—even in tweens. Figure 8-17 shows a movie clip rotating 180 degrees around the x- and y-axes (the faded frames have been inserted in the illustration to show you the progress of the tween). An animation rotating an image 180 degrees around the x- and y-axesFigure 8-17. You can use the Motion Editor panel (discussed in Chapter 5) to achieve this animation effect. Before applying the 3D transformations, set up a simple motion tween that moves the movie clip from one side of the stage to another: Open 1. tween3d_01.fla from the companion source files. This file has one movie clip on the Stage at point (70, 200). Right-click (Windows) or Control-click (Mac) the movie clip and select 2. Create Motion Tween from the pop-up menu. 23 frames are added to the tween span, and the playhead should be in frame 24. Right-click or Control-click again and enable 3D Tween from the same menu. Select the movie clip on the Stage with the Selection tool and, using the 3. Properties panel, change its x position to 480. As you did in Chapter 5, you have completed a 2D motion tween, and you can see the path taken by the movie clip. You can even scrub through the Timeline to watch it move. If you like, compare your work to tween3d_02.fla, then move on to add the 3D transformations. Learning Flash CS4 Professional 214 Animating 3D Properties Open the Motion Editor and scroll down to the 4. Rotation X and Rotation Y properties. As usual, the first keyframe in any tween is provided. Scroll horizontally until you can see frame 24. Click the frame numbers in 5. the Motion Editor panel to place the playhead in this frame. In the Keyframe column, click the center diamond to add a keyframe in 6. the Rotation X and Rotation Y rows of the Motion Editor. In the same frame (frame 24), use the Value column to set both properties 7. to 180 degrees. Your Motion Editor panel should look like Figure 8-18. The graph for both Rotation X and Rotation Y properties should slant up and to the right between frames 1 and 24. Figure 8-18 shows the playhead midway through the tween, when both rotation values have just passed 90 degrees. The Figure 8-18. Motion Editor showing x, y, and z rotation values Save your work if desired (it will not be used in the portfolio project) and test your movie. Your movie clip should spin around both x-and y-axes as it moves across the Stage, as depicted in Figure 8-17 and demonstrated in tween3d_03.fla. Based on this experience, you can probably see the benefit of having Flash’s 3D features—basic though they may be—integrated directly into the author- ing interface. While you certainly will have more control over 3D objects when using ActionScript, at least you can accomplish a few simple effects without knowing a lick of code. Depth Management Chapter 8, 3D 215 Depth Management There are drawbacks, however, with Flash’s integrated 3D feature set. The biggest shortcoming is the lack of automatic z-sorting, or sorting movie clip stacking order based on the value of their z positions, called z-depth in most z-sorting discussions. Because the z-axis represents depth in the 3D world, z-sorting restacks elements when they overlap, based on their depth along the z-axis. This is easily demonstrated by placing your hands in front of your face. Hold both hands up about a foot or so in front of your face, and about a foot apart from each other. This represents two movie clips with the same z position, or depth. Now move your right hand another foot away from your face. Your right hand is now farther away, or has a larger z value. Now move your hands horizontally so they overlap in your line of vision. Your left hand is in front of your right hand because its depth is closer to your point of view. It would obviously be wrong if your right hand were in front of your left, because your right hand is further away. Unfortunately, Flash doesn’t handle the z-sorting for you. If you place one movie clip each in layers 1, 2, and 3, no change in the z-depth of any of the movie clips will change the visual stacking order imposed by the layer in which each appears. This limitation doesn’t apply only to layer order, either. If you set up the same three movie clips correctly in the same layer, so the stacking order matches your desired z-depths, everything will be fine. If you then select the frontmost movie clip and send it behind the others (Modify→Arrange→Send to Back), the z-depth will remain the same, but visually, the movie clips will overlap in the wrong order. Figure 8-19 illustrates this point. Figure 8-19(a) shows three movie clips in the same layer, stacked in an arrangement that matches their z-depths. Figure 8-19(b) shows three similar movie clips, each in its own layer, but layered in a manner that does not reflect their z-depths. Even though the movie clip in layer 4 has the highest z-axis value, it does not appear behind the other movie clips, because it resides in a higher layer. Finally, Figure 8-19(c) shows a similar arrangement, but this time the movie clips are in the same layer and their stacking order doesn’t match their z-depths. Unfortunately, there are only two ways to conquer this problem. The first way is to manually manage your stacking and layering orders so they don’t con- flict with the desired depths of your 3D objects. This is fine for work in the Timeline, but not helpful for dynamic or interactive scenarios. In these cases, you must use custom ActionScript to sort and reorder your display objects. In the “Using ActionScript to Change 3D Properties” section, later in this chapter, you will learn how to explicitly set the z value of any movie clip. However, maintaining a running inventory of all movie clips, and properly sorting their depths based on when they overlap, requires quite a bit more effort and is beyond the scope of this book. The book’s companion website, z: 15 Layer: 1 (a) (b) (c) z: 15 Layer: 4 z: 15 Layer: 5 z: 10 Layer: 1 z: 10 Layer: 3 z: 10 Layer: 5 z: 5 Layer: 1 z: 5 Layer: 2 z: 5 Layer: 5 z-depth, correct in example Figure 8-19. (a), does not override layer order (b) or conflicting single-layer stacking order (c) Learning Flash CS4 Professional 216 Parallax Scrolling however, has more information on this topic, including links to solutions from top-notch coders. As your ActionScript skills improve, you may be able to use a script prepared for this purpose, and integrate it seamlessly into your project—or even write your own solution! In the meantime, remain alert to awkward z-ordering and try to compensate by shuffling the layer or stacking order of your assets. When motion tweens require depth changes, impossible to achieve in a single tween, you can usu- ally adjust your work by splitting your tweens into multiple segments, each in its own layer and using layer order to provide better depth management. This technique, too, is covered on this book’s companion website. Parallax Scrolling Parallax scrolling is an effect that shows the appearance of depth during movement. The principle behind parallax scrolling is simple: as you move past objects at different depths, closer objects will seem to rush by faster. You’ve probably experienced this effect yourself on a road trip or train ride. Imagine you are sitting in a window seat in a car or on a train as it embarks on a trip across the countryside. Outside the window you see rocks at the edge of the road or track. Some distance beyond the rocks is a row of bushes, and further beyond the bushes is a row of trees. Finally, far off at the horizon is a mountain range. As the car or train picks up speed, the rocks rush past your window. Although moving quickly by, the bushes don’t seem to be traveling as fast as the rocks. The distant trees are moving slower still, and the mountains appear to be stationary. This effect is also used in 3D to give the illusion of depth. Figure 8-20 shows the rocks, bushes, trees, and mountains previously described. If you placed these elements in their own layers in the Flash Timeline and animated them in a normal 2D manner, they would all scroll at the same time. However, if you push each element further back along the z-axis, all four elements will reside in different depths and scroll by at different speeds. Figure 8-21 shows such an arrangement, but rotated in 3D space so you can clearly see the depth between layers. Because of scaling along the z-axis, objects closer to the viewer are wider than the smaller objects in the distance. As such, when all layers scroll by the viewer’s eye, the foreground layers move faster than the background layers. You will use this technique for the Gallery screen of the portfolio project. The foreground elements will eventually be components (added in the next chapter) that will load in external assets. The graphics behind the component layer will scroll through the gallery at different speeds, giving the illusion of depth. Four individual layers Figure 8-20. intended for a scrolling movie clip Scrolling assets, after Figure 8-21. z-translation is applied; this clip is rotated on the y-axis to illustrate parallax effect Using ActionScript to Change 3D Properties Chapter 8, 3D 217 Using ActionScript to Change 3D Properties Manipulating 3D objects with ActionScript is, in many ways, as simple as transforming display objects in two dimensions. Using a handful of proper- ties, you can do just about everything the 3D Flash interfaces can do. For example, translating a movie clip in 3D space uses x, y, and z properties. Assuming you’re transforming a movie clip with the instance name mc, here are examples of all three properties: mc.x = 275; mc.y = 200; mc.z = 100; Look familiar? It should. The x and y properties are the same properties you’ve been using for 2D manipulations, and the new z property is consistent in use. Rotation is not much different. In 2D space, there is only one rotation prop- erty. In 3D space, the three axes around which a movie clip can rotate require three properties, but the syntax is still similar. Instead of the single rotation property for 2D space, the 3D properties are: mc.rotationX = 10; mc.rotationY = -20; mc.rotationZ = 5; Even the perspective angle and vanishing point properties are easy to use, albeit a bit verbose. The ActionScript properties themselves are straightfor- ward enough—perspective angle is called fieldOfView and vanishing point is called projectionCenter, but they are used like this: root.transform.perspectiveProjection.fieldOfView = 25; root.transform.perspectiveProjection.projectionCenter = new Point(0,0); Changing these values requires a bit more syntax because they are part of a larger transformation object. They’re collected in an object called perspective- Projection (which also contains other 3D transformation properties) that is part of the more encompassing transform instance of applicable display objects, like movie clips. In the preceding example code, the transform object belongs to the root of the FLA’s display list, the main timeline, which itself is a big ol’ movie clip. This change affects all global transformations, just as you witnessed when making changes to the perspective angle and vanishing point controls in the Properties panel. Practical Demonstrations Here are a few examples of the ActionScript at work. A companion source file is provided to demonstrate each property. In all cases, a single frame event NOTE As with the Properties panel, the perspec- tive angle is measured in degrees, and the vanishing point unit is a point. Learning Flash CS4 Professional 218 Using ActionScript to Change 3D Properties listener links mouse movement with a 3D property that manipulates a movie clip with an instance name of mc. Rotation The as_3d_rotation.fla example sets the y rotation of a movie clip to the hori- zontal mouse position. As you move your mouse left and right, it looks like you’re spinning a placard on a nail. this1 .addEventListener(Event.ENTER_FRAME, onLoop); function2 onLoop(evt:Event):void { 3 mc.rotationY = mouseX; }4 Translation The as_3d_translation.fla file will set a movie clip’s z-depth to the mouse’s vertical location (0 to 400)—moving the movie clip into and out of the Stage. this1 .addEventListener(Event.ENTER_FRAME, onLoop); function2 onLoop(evt:Event):void { 3 mc.z = mouseY; }4 Vanishing point The as_3d_vanishing_point.fla file will move the vanishing point to wherever the mouse is, causing objects to reorient in 3D space. First, the location of the mouse is converted into a point (line 7), and the projectionCenter property is then set to that point (line 8). To see the effect work, 3D rotations have been applied to the movie clip in lines 1 through 3. mc.1 rotationX = 10; mc.2 rotationY = -20; mc.3 rotationZ = 5; 4 this5 .addEventListener(Event.ENTER_FRAME, onLoop); function6 onLoop(evt:Event):void { 7 var mouseLoc:Point = new Point(mouseX, mouseY); root8 .transform.perspectiveProjection.projectionCenter = mouseLoc; }9 Perspective angle The as_3d_perspective_angle.fla source file will change the field of view using the mouse’s vertical location. Because the mouseY value is divided by 4, and the height of the stage is 400, the initial value is between 0 and 100. However, the perspective angle cannot be 0, so 40 degrees is added to the initial value. The result is a demonstration of perspective angles between 40 degrees (a normal lens) and 140 degrees (an extra-wide-angle lens). The movie clip is also translated and rotated to enhance the effect. Project Progress Chapter 8, 3D 219 mc.1 x = 140; mc.2 rotationY = -45; 3 this4 .addEventListener(Event.ENTER_FRAME, onLoop); function5 onLoop(evt:Event):void { 6 root.transform.perspectiveProjection.fieldOfView = mouseY / 4 + 40; }7 Project Progress In this chapter, you will create a parallax scrolling effect that will serve as the interface for the gallery screen. The gallery interface will consist of three components added in the next chapter. Components are precreated combina- tions of code and graphics designed to complete tasks of varied complexity, but with little to no additional ActionScript provided by you. The gallery will ultimately present two external graphics and one video, and visitors will scroll between the three displays with the click of a button. For this exercise, you will need a provided source file, gallery_01.fla. This file differs slightly from a new FLA derived from the book template you’ve used in prior chapters. In this case, the art required for the gallery interface is already in place. The illustrations, shown in Figure 8-22, are typical 2D movie clips, and it will be your job to manipulate these assets in 3D space. Figure 8-22. Scrolling assets before z-depth is applied Inside the content movie clip, renamed to GalleryScreen in the Library and given an instance name of gallery, are the parts required to create a parallax scrolling interface. The content of this movie clip has three layers. Two layers are static and contain an image of a mountain range with a grassy plain and Learning Flash CS4 Professional 220 Project Progress a button that will advance through the gallery. The third layer is a movie clip called parallax, and this will be the focus of your attention. In the parallax movie clip are four layers. The background is a movie clip of trees, substantially wider than the stage and thus suitable for horizontal scrolling. Above the trees are two movie clips containing bushes and rocks, respectively. Finally, the foreground movie clip contains artwork of three frames, each labeled with the name of a component that you will add in later chapters. Adding Depth for Parallax Scrolling To prepare your movie clip for parallax scrolling, you will adjust both the z-depths of layers in the movie clip and the position of the vanishing point: Open 1. gallery_01.fla from the companion source files. Double-click the 2. gallery movie clip to edit its contents. Double-click the 3. parallax movie clip to edit its contents. Ignoring the foreground layer that contains the artwork of three empty 4. frames (which will remain unchanged until next chapter), select the movie clip in the trees layer and give it a z value of 1000 in the Properties panel. Select the movie clip in the bushes layer and set its z value to 600. Finally, select the movie clip in the rocks layer and change its z value to 300. With all layers pushed away along the z-axis, the assets are resized and repositioned to achieve a very basic appearance of 3D depth. Looking at the effect of the depth changes, the collection of movie clips is 5. sitting a bit high on the stage, causing a few elements to appear as if they are floating in air. Changing the vanishing point will adjust the position of all movie clips that have z values. Select any movie clip on stage and, in the Properties panel, change the Vanishing Point y value to 320. This will move the movie clips down a bit, all moving relative to one another. Using the Edit Bar above the Stage, click on GalleryScreen to leave the 6. parallax movie clip and go back to its parent clip, gallery. Click once on the 7. parallax movie clip to select it and, using the Properties panel, set its 3D x coordinate to 1235. This is the starting point of the parallax scrolling interface and the first thing viewers will see when visit- ing the Gallery screen. Save your work. If you want to check your progress, compare your file to 8. gallery_02.fla. Project Progress Chapter 8, 3D 221 Animating the Gallery Now it’s time to create a tween and animate the scroll. You will extend your timeline to 100 frames, change the location of the parallax movie clip over time, and add a few frames of ActionScript: Continue with your file or, if you prefer, open 1. gallery_02.fla from the com- panion source files and save that to your own file as your starting point. Double-click the 2. gallery movie clip to edit its contents. Don’t worry if the guide layer is no longer visible. This is just a little Flash quirk. When double-clicking a 3D element, the symbol is not edited in place. This is equivalent to editing any symbol by double-clicking in the Library. Right-click (Windows) or Control-click (Mac) on the 3. parallax movie clip and select Create Motion Tween from the pop-up menu. In the Timeline panel, drag the end of the 4. parallax layer’s tween span out to frame 100. In the 5. actions, button, and mountains layers, click in frame 100 and press F5 to add frames. When you are finished, all four layers should span to frame 100. In the actions layer, create empty keyframes (F7) in frames 35 and 70. You 6. will later add stop actions to these frames. Move the playhead to frame 35, click on the 7. parallax movie clip to be sure it’s selected, and, using the Properties panel, set the x value under 3D Position and View to 365. The ScrollPane frame artwork should be visible. This will automatically add a property keyframe to your tween, reflecting the movie clip’s change in x. Move the playhead to frame 70, make sure the 8. parallax movie clip is still selected, and set the 3D x value to –435. The FLVPlayback frame artwork should be visible. Move the playhead to frame 100, make sure the 9. parallax movie clip is still selected, and set the 3D x value to 1235. The UILoader frame artwork should be visible. This last frame provides an animated return to the first item in the gallery. Save and test your movie.10. The animation should scroll through the three gallery items, showing UILoader, ScrollPane, and FLVPlayback frames, and then returning to frame 1. If you look at the assets in the animation, you will see that the frames, rocks, bushes, and trees all move at a different rate, creating the parallax scrolling effect. This is achieved automatically because Flash’s 3D depth management handles the scrolling of each layer independently. Learning Flash CS4 Professional 222 Project Progress Adding ActionScript Control Now that you’ve seen the parallax scrolling effect, it’s time to prepare your file for ActionScript control. You will first add stop actions to stop the anima- tion when the three component frames come into view, and then you’ll add a script to react to user button clicks. In the 1. actions layer, add a stop action ( stop();) to frames 1, 35, and 70. Frame 100 does not receive a stop action because you want the movie clip to loop back to frame 1 on its own. Figure 8-23 shows a detail of the Timeline panel, depicting the layer structure, parallax tween, and added actions. A detail of the gallery movie clip Timeline panel, showing the parallax tweenFigure 8-23. Test your movie once again, and you’ll see that the movie clip doesn’t 2. scroll. This is correct, and is due to the stop action in frame 1. Save your work and compare your file to 3. gallery_03.fla. With the stop actions in place, you will need to add a small script to continue to preview your file. You’ll add this script in the main timeline, rather than inside the gallery movie clip, to make it easier to add it later to the main project file. Using the Edit Bar above the Stage, click on Scene 1 to return to the main 4. timeline. In the actions layer, add the following script, save your work, and test your file: gallery.more.1 addEventListener(MouseEvent.CLICK, onGalleryClick); function2 onGalleryClick(evt:MouseEvent):void { gallery.3 play(); }4 This script adds a mouse-click event listener to the more button inside the gal- lery movie clip. The main thrust of the script is line 3, which plays the movie clip. This animates the gallery interface after it’s been stopped by the stop actions in frames 1, 35, and 70. When testing your file, you should be able to click the more button and advance to the next gallery item. When the final item (the FLVPlayback component frame) is in view, clicking the more but- ton will cause the movie to return to the first item (the UILoader component frame). [...]... interface components that ship with Flash CS4 Professional, each of which adds approximately 15 to 30 KB to your file As another example, the video component that ships with Flash CS4 adds 50 to 65 KB to your file In most cases, this is a drop in the bucket when it comes to the overall size of the average SWF Just keep this in mind if your files are on a diet Fortunately, Flash CS4 s user interface components... its first use Thereafter, the current menu selection will be displayed in this location 7 Click the rowCount value and type 4 This setting limits the number of rows shown below the menu when the menu is clicked Figure 9-9 Configuring a ComboBox component using the Component Inspector panel 230 Learning Flash CS4 Professional Working Hand-in-Hand with Code 8 Test your movie, and you will see that the... This reference is akin to a manually created instance name Line 15 adds the menu to the display list as a child of the main timeline, and lines 16 and 17 set the components position Test your work and compare it to comboBox_02.fla 232 Learning Flash CS4 Professional Project Progress Skinning UI Components Depending on the design of a given project, you may not always be satisfied with the appearance of... file will not be used in the final project, so you don’t need to use the book template and you don’t need to save your work 2 Drag the Button component from the Components panel to the stage 228 Learning Flash CS4 Professional Working Hand-in-Hand with Code 3 Select the component and, in the Component Inspector, click the label value field and replace the default label with Trace it!, as shown in Figure... destined for the Gallery You will add the UILoader component, which loads external images and SWFs, and the ScrollPane component, which displays details of larger content within a scrolling pane 224 Learning Flash CS4 Professional Chapter 9 Components Introduction Components are wondrous little widgets that add functionality to your projects with little to no programming required Used by ActionScript neophytes... it may contain assets that are shared with other components, or simply external graphics that you can customize through editing Figure 9-2 The Library after adding a UIScrollBar component 226 Learning Flash CS4 Professional You can often use the Component Inspector panel (Figure 9-3) to configure a component, thereby controlling its functionality This panel contains editable text fields, menus, and... 9-14) This component allows you to scroll the detail area vertically and/or horizontally so you can see more of an image when you need to Figure 9-14 The project ScrollPane component in use 234 Learning Flash CS4 Professional Project Progress 1 Place the words.jpg image from the furnished source files into your assets folder 2 If you’re not already there, return to editing the foreground movie clip 3... about armatures and inverse kinematics In short, you’ll be animating elements by tying them together like the bones of a skeleton, and moving the bones to create poses Plus, Scaly returns! 236 Learning Flash CS4 Professional Chapter 10 Inverse Kinematics Introduction Programming the motion of a robotic arm is no small feat It requires knowledge of trigonometry and kinematics, the study of motion Moving... of the elbow positions the forearm and wrist, the angle of the wrist positions the hand, and so on Unless you’re a math wiz, this won’t help you much when animating jointed structures in Flash Fortunately, Flash CS4 Professional introduces an easier approach to the problem; an animation technique called inverse kinematics (IK) Common in higher-end 3D and animation packages, IK is the opposite, or inverse,... from shoulder to fingertip, the knuckle of your last finger segment has a tail joint but no head joint branch bone tail joint head joint Figure 10-1 A sketch mannequin with visible armature 238 Learning Flash CS4 Professional When a skeletal structure requires more than one linear segment as part of the armature, you can introduce additional joints and bones, called branches Although the arms and legs . effect. This is achieved automatically because Flash s 3D depth management handles the scrolling of each layer independently. Learning Flash CS4 Professional 222 Project Progress Adding ActionScript. visible only 6. within the masked area. Save your work and compare your file to 7. gallery_05.fla. Learning Flash CS4 Professional 224 Project Progress Adding the Gallery to the Main Project File Once. components that ship with Flash CS4 Professional, each of which adds approximately 15 to 30 KB to your file. As another example, the video component that ships with Flash CS4 adds 50 to 65 KB to