Working with 3D art

Create 3D effects with the 3D Rotation and 3D Translation tools. Use the Perspective Angle property to control the appearance of 3D effects.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Flash Professional CS4

• Try
• Buy

Sample file

lrvid4059_fl.zip (ZIP, 508KB)

Prerequisite knowledge

Intermediate knowledge of Flash drawing and animation tools

Working with 3D art

Adobe® Flash® CS4 Professional allows you to create three-dimensional animations of two-dimensional surfaces. In this tutorial, you will learn how to use the 3D Rotation and Translation tools.

The 3D Rotation tool

The 3D Rotation tool allows you to manipulate and animate two-dimensional objects in a three-dimensional editing mode. To use the 3D Rotation tool:

1. Create a shape using Flash drawing tools, convert it to a symbol and place an instance of the symbol on the Stage.
2. Select the 3D Rotation tool in the toolbox.

   

   Figure 1: The 3D Rotation tool
3. With the 3D Rotation tool selected, click the movie clip symbol. A three-dimensional guide with vertical and horizontal markers appears. The red vertical marker represents the x axis. The green horizontal marker represents the y axis. The blue inner circle represents the z axis.

   

   Figure 2: The circular target area showing the x, y, and z axes
4. Drag the x-, y-, and z-axis markers to transform the movie clip symbol. Drag around the y axis to make the movie clip symbol pivot in a horizontal direction. Click and drag around the z axis to make the movie clip symbol pivot in a circular direction.

   

   Figure 3: Transforming the movie clip symbol using the 3D Rotation guide
5. The middle of the 3D Rotation guide also acts as the transformation point for the symbol. Drag the center point of the target area out of the movie clip symbol, and then drag the symbol along the z axis. The symbol pivots around the new location of the transformation point.
6. Double-click the transformation point to return it to its default position in the middle of the movie clip symbol.

   Note: The outer perimeter line represented by the orange circle acts as a 3D Free Transform tool, which allows you to rotate the movie clip symbol on all three axes at the same time. Also, when you move the transformation point of the movie clip symbol by selecting and dragging the center point to a new location, it will transform around its new center point. If you want to return the transformation point to the center of the object, double-click the guide.

Animating a movie clip symbol

Once you have learned to manipulate the movie clip symbol using the 3D Rotation tool, animating your symbol is simple. To animate a movie clip symbol:

1. Right-click the movie clip symbol. A context menu appears. Select Create Motion Tween to begin the animation process.
2. Position the playhead in the Timeline over the last frame of the tween.

   

   Figure 4: Positioning the playhead

   Tip: Motion tweens are represented in the Timeline by blue frames, as shown in Figure 4.

3. Scrub the Timeline to view your animation. You have animated a two-dimensional object inside a 3D space using Flash.
4. Continue to transform the movie clip symbol to fine-tune the animation. Remember that you can also move the transformation point if you want to change the direction of the rotation.
5. To simulate a field of view, look inside the updated Properties panel. In the 3D Position And View section, you’ll see a Perspective Angle icon. Drag the underlined value to change the focal view of the animation.
6. You can also rotate a movie clip, using the X, Y, and Z controls in the Properties panel. These controls are located just above the Perspective Angle.

   

   Figure 5: The updated Properties panel
7. To skew the animation, drag the underlined text next to the Skew icon in the Properties panel, directly below the Perspective Angle slider. You can skew along both the x and y axes.
8. Scrub the Timeline again to view how these properties change the animation.

Animating a bitmap image

In addition to animating a movie clip that contains a vector image, you can animate a bitmap image. To animate a bitmap image:

1. Turn off the visibility of the movie clip layer.
2. Navigate to the Library panel and drag a bitmap image to the stage that you have previously imported.
3. Scale down the image if necessary.
4. Choose the 3D Rotation tool.
5. Repeats steps 1-4 from the previous section of this tutorial.
6. Adjust the field of view by returning it to its default position of 50.

The 3D Translation tool

The 3D Translation tool allows you to move a movie clip symbol along the x, y, and z axes. To use the 3D Translation tool:

1. Press and hold the 3D Rotation tool in the toolbox and select the 3D Translation tool from the pop-up menu.
2. With the 3D Transform tool selected, drag the movie clip symbol around the Stage. You will see it move along the x, y, and z axes.

   Note: As with the 3D Rotation tool, you can animate your changes to movie clip symbols with the 3D Transform tool by creating motion tweens.

Where to go from here

• Flash CS4 Help and Support
• Learn Flash CS4
• Introducing Flash CS4 , by Todd Perkins
• Using inverse kinematics, by Chris Georgenes
• Using the decorative drawing tools, by Chris Georgenes
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors