Flash CS4 Professional in 24 Hours- P8 docx

ptg 201 Workshop Q. I’m having trouble drawing bones in my shape. Flash wants to place the end of the bone only in specific spots. Can I tell Flash to enable me to put it wherever I want? A. Flash is setting the Transformation Point, what we called the joint, for you to some degree. You can turn that off and place your point any- where you want by choosing Edit, Preferences (or Flash, Preference on a Mac). Click on the Drawing Category, and uncheck the box that says Auto Set Transformation Point. What’s really cool about doing this is now you can drag your points outside of your figure and have a little more control of the movement when you need. 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 the answers. Quiz 1. What’s the downside to using art created with the brush rather than movie clips? A. There’s really no downside. You should always use brush-created art. B. If your figure loops on itself, it might not look right. Also, some- times you get jagged edges and unpredictable results. C. Bones don’t work with brush art. 2. How is posing movie clips different from posing a drawn shape? A. There’s no real difference. B. A drawn shape can be posed multiple times; a movie clip figure can only be posed once. C. Each movie clip can rotate independently. From the Library of Lee Bogdanoff ptg 202 HOUR 10: Advanced Animation with Inverse Kinematics 3. Once you’ve added bones to your shape, what can you not do in the armature layer anymore? A. If you’re using clips, you can’t add anymore. If you drew your shape, you can’t draw anymore. B. You can’t rename the armature layer. C. You’re stuck with whichever easing you selected before you added bones. Quiz Answers 1. B. Brush-art has to be carefully adjusted when posed to keep it look- ing good. Don’t forget that you can use the Bind tool to adjust the control points to make it look even better. 2. C. You get the extra benefit of being able to rotate the movie clips in addition to posing the figure. 3. A. After you add your first bone, you can’t add more clips or more brush strokes to your figure. Also, you can only use one kind of cre- ation, either all symbols or all drawing. From the Library of Lee Bogdanoff ptg WHAT YOU’LL LEARN IN THIS HOUR: . Creating 3D clips . Simulating 3D positions . Animating objects in 3D space Prior to this version of Flash, to make an image appear to rotate in 3D space, you had to use the Free Transform tool and fake it. In this version, the 3D tool takes care of the tedious work of simulating 3D for you and ac- tually moves and rotates your movie clips on all three axes. With the 3D Rotation tool, you can rotate a movie clip not just on the X-axis and Y-axis, but on the Z-axis as well. This enables you to perform perspective transfor- mations on anything you can put in a movie clip, even on movie clips com- bined to form a structure. It’s more powerful than it seems at first glance. As you gain more expertise with Flash, you learn how to rotate your clips dynamically using ActionScript. Creating a 3D Movie Clip Let’s take a look at two new 3D tools and how they are represented on the stage. Figure 11.1 shows a movie clip that has been moved with the selected 3D Rotation tool, located on the toolbar under the Free Transform tool. Take a closer look at Figure 11.1. The gray shape on the Stage is a movie clip. It started as a rectangle, but was moved in 3D space with the 3D Rota- tion tool. After you select a movie clip with this tool, you see red and green crosshairs, a blue circle, and a larger yellow circle centered on your movie clip at the point where the rotation occurs. The red line represents the X- axis; the green line is the Y-axis. Because the Z-axis would be sticking straight out at you, it’s represented by the blue circle. Think of this like a wheel that rotates your shape around the center axis. Finally, the orange cir- cle rotates in all three dimensions at once. Now, we take a quick look at the 3D Translation tool. Similar to how the Rotation tool enabled you to rotate in 3D space, the Translation tool enables HOUR 11 Simulating 3D Animation From the Library of Lee Bogdanoff ptg 204 HOUR 11: Simulating 3D Animation you to move your clip in 3D space along the same three axes. Figure 11.2 shows you the appearance of your clip on the stage when it’s selected with the Translation tool. The red arrow is a handle for the X-axis; the green arrow is for the Y-axis; and the blue dot in the center is for the Z-axis. Unlike the Rotation tool, you can’t move your clip across more than one axis at the same time. When you create a movie clip, the 3D Position and View section of the Properties panel appears, as shown in Figure 11.3. These settings are involved FIGURE 11.1 The 3D Rotation tool gives you the ability to rotate on the X-axis, Y-axis, Z-axis, or all three at the same time. FIGURE 11.2 The 3D Translation tool enables you to move your clip along the X-axis, Y-axis, or Z-axis. From the Library of Lee Bogdanoff ptg Creating a 3D Movie Clip 205 when you manually adjust the handles in the two tools. This section con- tains the following settings: . X, Y, and Z Position—Imagine a 3D grid covering the entire stage. These values correspond to the center of your movie clip’s location with reference to that grid. The 0, 0, 0 coordinates of this grid exist off the Stage by default. . Width (W) and Height (H)—In 2D space, these would apply to the width and height of your clip. In 3D space, it refers to the rotated width and height, that is, how wide and tall your movie clip is given the angle it’s been rotated. . Perspective Angle—We talk about this in more detail under “Per- spective Angle,” but for now, think of the perspective angle as the di- rection from where you are viewing the object. Pretend you are filming the screen with a movie camera. The perspective angle keeps track of what angle the movie camera is pointed toward the screen. . Vanishing Point X and Y Position—We also talk more about this un- der “Vanishing Point,” but this controls how far the screen is from our hypothetical camera. Before we create our 3D object, we quickly learn the rules of using 3D in Flash. Following the Rules of 3D Animation Just as motion tweening has different rules than shape tweening, animating objects in 3D has its own set of rules. Because the only reason you probably FIGURE 11.3 When you create and select a movie clip, the 3D Position and View section of the Properties panel appears. From the Library of Lee Bogdanoff ptg 206 HOUR 11: Simulating 3D Animation ever want to use 3D is to create an animation, we briefly go over a few rules that apply to animating in 3D and using the 3D tools in general. When using the 3D Rotation and Translation tools to move your clip, you can only use movie clips. This extends to animating your clips as well. When you move your movie clip in 3D space, you discover it’s essentially flat; it has no real depth. Figure 11.4 shows a movie clip that has been ro- tated on the X- and Z-axes until you can’t actually see it. If you want to create a true 3D object, you need to use multiple movie clips together and build some sort of hollow structure. You angle multiple movie clips into a box, as shown in Figure 11.5. This box only has three sides, but adding three more makes it a cube. You can rotate each movie clip individ- ually or all of them together. Animating movie clips in 3D, as you soon see, can be done by creating a simple motion tween and using the 3D tools to move the clip. You can also use the Select tool to reposition your clip, but it behaves much the same as the Translation tool, remembering that your clip is moving in 3D space. You can use the Free Transform tool as well. Basically, anything you can do in a normal motion tween, you can do during your 3D animation. It’s worth noting that you can also use ActionScript to rotate your movie clip instance. We show you a quick example at the very end of this hour in the section, “Rotating Objects with the 3D Rotation Tool.” Once you’ve used 3D transformation on a movie clip instance, you can’t edit the parent clip in Edit in Place mode. However, you can open it from the Library or by right-clicking and choosing Edit. You don’t have the FIGURE 11.5 To build a structure that has height, width, and depth, you need to com- bine movie clips. FIGURE 11.4 Movie clips have no actual depth, so you can’t see the one here, which has been rotated along the X- and Z-axes. From the Library of Lee Bogdanoff ptg Creating a 3D Movie Clip 207 advantage of seeing it in the current position on the Stage. When we say 3D transformation, we mean animating either the position or the rotation of the object in a motion tween. To tell when this has occurred, right-click on one of the frames in your Timeline, and instead of motion tween, Flash is now referring to your tween as 3D tween. Another important point to understand is what Flash uses to rotate around when you move your clip. Unlike rotating a 2D movie clip with the Free Transform tool, when you rotate your clip, Flash uses the center of the ob- ject, not the Registration point. Although we haven’t talked about publishing your Flash movie yet, keep in mind that the publish settings must be set to Flash Player 10 and Action- Script 3.0 to use 3D. This becomes important later when you decide to pub- lish your movie for the web. We discuss this process in Hour 20, “Linking a Movie to the Web.” Objects in 3D Space By now, you must be ready to try creating a 3D object yourself. Create a 3D Movie Clip TRY IT YOURSELF ▼ In this task, you create a movie clip and move it around in 3D space. You also get a chance to adjust how Flash centers the rotation and motion. 1. Open a new file, and make sure it’s ActionScript 3.0. Draw a rectangle on the stage, and turn it into a movie clip. 2. Select your movie clip. Choose the 3D Rotation tool, located under the Free Transform tool. You see the rotation overlay, as shown in Figure 11.6. 3. Play around with your movie clip by clicking and dragging on the three axes. Get comfortable with the direction that each axis moves your clip, and then use the orange circle to rotate all three dimensions at the same time. 4. Now change to the 3D Translation tool, and notice how dragging on the arrow handles changes the location of your clip. Dragging the X- axis handle to the right or left swings it around your view accordingly, and the Y-axis can move up or down. 5. If you drag the blue handle downward, your movie clip appears to move closer to you. If you drag the blue handle upward, it moves farther away, closer to the vanishing point. It seems smaller as you drag the blue han- dle up. Think of watching a car drive away. From your perspective it seems smaller as it drives further and further away from you. NOTE Use the Orange Circle with Caution It’s much easier to manipulate your movie clip with each indi- vidual axis in turn, rather than using the orange circle handle to manipulate everything at once. Your best bet for the most precise control is to con- sider how your clip should be tilted on each axis, and then adjust each accordingly. As you gain practice, you might feel more comfortable using the or- ange handle to move every- thing at once. From the Library of Lee Bogdanoff ptg TRY IT YOURSELF ▼ Create a 3D Movie Clip 6. Return to the 3D Rotation tool. Notice if you drag the center white cir- cle in the middle of the overlay, it moves the overlay and not the movie clip. This is how you can recenter the axis of rotation. You don’t have a similar option with the Rotation tool. 208 HOUR 11: Simulating 3D Animation FIGURE 11.6 Select a movie clip with the 3D Rotation tool. Now you’ve had a chance to play with the 3D tools, and you should be get- ting a sense of how they work. Let’s take a few minutes to consider two 3D concepts, perspective angle and vanishing point. Perspective Angle As you work with the 3D tools, you need to consider the view you have on the clips you are manipulating. If you pretend your head is a camera, and your eyes become the lens, you begin to get a sense of what the Perspective Angle setting in the Properties panel does. When you select your 3D Movie clip, you see a 3D Position and View section containing a Perspective Angle icon. Drag the underlined value to change the focal view of the animation. It ranges from 1 degree to 180 degrees. The default is generally 55 degrees. In general, it’s easier to use the default Perspective Angle setting. If you want to use it, we recommend you experiment with it before using it in an animation. From the Library of Lee Bogdanoff ptg Moving Objects with the 3D Translation Tool 209 Vanishing Point The vanishing point is the point where an object disappears out of sight. As objects approach the vanishing point, they get smaller and smaller until they become too small to recognize. Imagine a railroad track ahead of you. Look into the distance far enough, and you can’t see the railroad track any longer. You know the sides of the tracks are parallel and are the same dis- tance apart, but from your perspective, the separate tracks appear to con- nect to each other, as shown in Figure 11.7. The point is Flash has settings that enable you to change the distance away from you on the Stage where the vanishing point is set. To change the loca- tion of the vanishing point, click on your movie clip instance on the Stage. Then, use the X and Y sliders on the Properties panel next to the Vanishing Point setting. You see crosshairs on the stage that help you get a sense of where the vanishing point is shifting. Not only can you move the vanishing point closer or further out, you can also move it to the right or left. Moving Objects with the 3D Translation Tool You’ve had a chance to use the 3D Translation tool, but you haven’t ani- mated anything in 3D. In the next exercise, you find it’s like creating a mo- tion tween. FIGURE 11.7 The vanishing point is the point where you can no longer see the railroad tracks off in the distance. From the Library of Lee Bogdanoff ptg 210 HOUR 11: Simulating 3D Animation Rotating Objects with the 3D Rotation Tool You’ve rotated a movie clip, but you haven’t rotated more than one in 3D space at the same time. Let’s try that now. TRY IT YOURSELF ▼ Use the 3D Transla- tion Tool to Create an Animation In this task, you create a movie clip and move it around in 3D space. You also get a chance to adjust how Flash centers the rotation and motion. 1. Open a new file, and make sure it’s ActionScript 3.0. Draw a rectangle on the stage, and turn it into a movie clip. 2. Click on the Timeline at Frame 25, and choose Insert, Timeline, Frame. Now, click on one of the frames, and choose Insert, Motion Tween. Your frames should now be blue to indicate motion tweening. 3. Click on Frame 25, and choose the 3D Rotation tool. Rotate your movie clip on all three axes. 4. Click on Frame 25, and choose the 3D Translation tool. Move your movie clip on all three axes. 5. Move your movie clip by choosing Control, Test Movie (or press Enter). As you watch it move, get a sense of how it’s moving in 3D space. A natural easing seems to take place as it moves further away and closer to you. TRY IT YOURSELF ▼ Create Multiple Ro- tating Movie Clips In this task, you create two movie clips that animate and rotate at the same time. 1. Open a new file, and make sure it’s ActionScript 3.0. Draw a rectangle on the stage, and turn it into a movie clip. 2. Use the 3D Rotate tool to rotate on at least two axes. 3. Create a second movie clip, or pull a new instance from the Library. 4. Click on the new instance, and then use the Rotate and Translate tools to move it in a recognizably different direction than the first movie clip, as shown in Figure 11.8 5. With the Rotate tool selected, press and hold the Shift key to select both movie clips at once. You now discover that both of them move as you rotate with the overlay handles. FIGURE 11.8 With the Shift key, you can select multiple movie clips to work on with the 3D tools at the same time. From the Library of Lee Bogdanoff [...]... now? A You definitely can Remember, though, that you can’t do any more editing in place Keep in mind what your Timeline looked like, and edit the clip in the Library Q Can I put a video/audio/animation in my movie clip and animate it in 3D? A You most certainly can Your best bet is to focus on creating your movie clip and doing whatever you need to do to it before working on the 3D side of things Q I tried... right, these settings control the appearance of the Timeline If you have 100 frames of animation and you want to see all 100 frames in the Timeline, choose Tiny or Small to shrink the size of the Timeline ruler It doesn’t change anything in your movie; it only affects the appearance of the Timeline Preview and Preview in Context—These options enable you to see your movie clips in the Timeline itself at... the easing using the Motion Editor Obviously, you can modify a lot more in the Motion Editor, including applying different filters and changing the location Take some time to play with things If you like your final effect, remember you can save it as a motion preset at any time Rubberizing Your Bouncing Object Sometimes the best way to see how a motion tween works is to look at it in the Timeline or... view things and changes nothing in your movie This was a rather longwinded review of the Timeline, but it’s definitely worth taking a few minutes to understand Now, let’s take a break and build our own motion tween to save as a preset ▼ TRY IT YOURSELF Modify and Save an Existing Preset In this exercise, you create a movie clip and apply one of the preexisting motion presets that came with your Flash. .. location of your clip in any keyframe by selecting the keyframe and moving your clip You now know how easy it is to use motion presets Sometimes there’s no point in recreating a motion tween if you can use or tweak an existing motion preset From the Library of Lee Bogdanoff Applying an Existing Motion Preset 219 Saving a New Motion Preset So far in this book, we’ve talked a lot about tweening and frames We... to find an existing sound, have one provided for you, or use sound software to record or create your own This means that in Flash, you can import sounds, but you can’t create them Two basic steps are involved in getting audio into a Flash movie First, you need to import the sound into the Library Then, you need to decide where and how to use it in your Timeline This is similar to importing raster graphics... versa WHAT YOU’LL LEARN IN THIS HOUR: Using ready-made motion tweens Saving your own motion tweens for re-use Modifying existing motion tweens The Motion Presets Panel For the remainder of this hour, keep in mind that motion presets can only be used in ActionScript 3.0 files This means you should select the first option, Flash File (ActionScript 3.0), when you create a new Flash file that will use... second effect is the dotted line, representing the Sine wave motion listed in the Motion Editor User Name/Library/Applications Support/Adobe /Flash CS 4/en/ Configuration/Motion Presets/ Changing the Easing Settings and on a PC, it’s likely under: C:\Documents and Settings\USERNAME\ Application Data\Adobe Now that Flash has a SWF file, it can show a preview for your motion preset in the Motion Presets panel... dotted line is the second motion, shown as 2-Sine Wave in the Motion Editor panel Let’s use the Motion Editor to change the easing settings used by one of the motion presets This is also useful when you are modifying your own motion tweens In this exercise, you create a movie clip and apply one of the preexisting motion presets that came with your Flash application Then, you modify the easing using the... without actually having to use the 3D rotation tool to do so In Hour 16, “Basic Interactivity,” we discuss the addEventListener code more in- depth, but for now, this should give you a taste of what you can do with ActionScript Start by creating a new movie clip, and giving it an Instance name in the Properties panel of myClip Then, click on the first frame in the Timeline, and choose Window, Actions This . ani- mated anything in 3D. In the next exercise, you find it’s like creating a mo- tion tween. FIGURE 11.7 The vanishing point is the point where you can no longer see the railroad tracks off in the distance. From. quickly learn the rules of using 3D in Flash. Following the Rules of 3D Animation Just as motion tweening has different rules than shape tweening, animating objects in 3D has its own set of rules I’m having trouble drawing bones in my shape. Flash wants to place the end of the bone only in specific spots. Can I tell Flash to enable me to put it wherever I want? A. Flash is setting the