# Flash CS4 Professional in 24 Hours- P8

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

0
58
lượt xem
7

## Flash CS4 Professional in 24 Hours- P8

Mô tả tài liệu

Flash CS4 Professional in 24 Hours- P8: The creation of this book could not have happened without the skill and patience of many, many people at Sams Publishing. Most of all, I want to thank Mark Taber for offering me this opportunity and Philip Kerman for writing such a great book. I also greatly appreciate the efforts of Songlin Qiu for keeping me on track and organized, not an easy task.

Chủ đề:

Bình luận(0)

Lưu

## Nội dung Text: Flash CS4 Professional in 24 Hours- P8

3. HOUR 11 Simulating 3D Animation Prior to this version of Flash, to make an image appear to rotate in 3D WHAT YOU’LL LEARN IN space, you had to use the Free Transform tool and fake it. In this version, THIS HOUR: the 3D tool takes care of the tedious work of simulating 3D for you and ac- . Creating 3D clips tually moves and rotates your movie clips on all three axes. With the 3D . Simulating 3D positions 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- . Animating objects in mations on anything you can put in a movie clip, even on movie clips com- 3D space 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
4. 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. 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. 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
5. Creating a 3D Movie Clip 205 when you manually adjust the handles in the two tools. This section con- tains the following settings: FIGURE 11.3 When you create and select a movie clip, the 3D Position and View section of the Properties panel appears. . 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
6. 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. 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. 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 FIGURE 11.5 To build a structure that has height, the Translation tool, remembering that your clip is moving in 3D space. You width, and depth, you need to com- can use the Free Transform tool as well. Basically, anything you can do in a bine movie clips. 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
8. 208 HOUR 11: Simulating 3D Animation ▼ TRY IT YOURSELF Create a 3D Movie Clip FIGURE 11.6 Select a movie clip with the 3D Rotation tool. 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. 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.
9. 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. FIGURE 11.7 The vanishing point is the point where you can no longer see the railroad tracks off in the distance. 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.
10. 210 HOUR 11: Simulating 3D Animation ▼ TRY IT YOURSELF In this task, you create a movie clip and move it around in 3D space. You Use the 3D Transla- also get a chance to adjust how Flash centers the rotation and motion. tion Tool to Create an 1. Open a new file, and make sure it’s ActionScript 3.0. Draw a rectangle Animation 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. 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 In this task, you create two movie clips that animate and rotate at the Create Multiple Ro- same time. tating Movie Clips 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 FIGURE 11.8 both movie clips at once. You now discover that both of them move as With the Shift key, you can select you rotate with the overlay handles. multiple movie clips to work on with the 3D tools at the same time.