Working with the 3D Rotation and 3D Translation tools

In the past, many developers submitted feedback requesting 3D functionality in Flash Professional. With the new features available in Flash CS4 Professional, it is now a simple process to create stunning 3D effects.

To get started, select a vector shape or a bitmap graphic and convert it to a movie clip symbol. When you are working within the authoring environment, only movie clip instances can be transformed using the new 3D tools in Flash.

Note: When you write code in ActionScript 3.0 for Flash Player 10, 3D properties are not limited to movie clip symbols. I will explain this in more detail later in this article. For now, just keep in mind that the 3D Rotation tool and 3D Translation tool can be applied only to movie clips.

3D Rotation tool

Drag a movie clip instance to the Stage from the Library. Then select the 3D Rotation tool from the Tools panel (see Figure 1).

Figure 1. 3D Rotation tool from the Tools panel

After selecting the tool, you'll see the 3D Rotation tool interface displayed on top of the movie clip on the Stage (see Figure 2).

Figure 2. Interface of the 3D Rotation tool on top of the selected movie clip instance

Experiment with dragging the handles of the 3D Rotation tool. The red handle represents the x axis, the green handle represents the y axis, and blue inner ring represents the z axis. Additionally, you can drag on the orange outer ring to access free transform functionality. The orange ring allows you rotate an object around both the x and y axes simultaneously.

The default state of this tool (accessed in the options area of the Tools panel) represents Global Transform mode. When you work in this mode, it means that any xyz rotations you make will move in relationship to the xyz coordinates of the Stage (see Figure 3).

Figure 3. Default 3D setting: Global Transform mode

Select the other transform mode setting for the 3D Rotation tool by deselecting the Global Transform button in the options area of the Tools panel. This state is called Local Transform mode. When you are in this mode, the Tools panel displays an "off state" message next to the Global Transform button (see Figure 4).

Figure 4. Global transform mode currently off

When you use the 3D Rotation tool in Local Transform mode, you can rotate any movie clip instance on the Stage around the object's center point (see Figure 5).

Figure 5. 3D Rotation tool in Local Transform mode

Try using the 3D Rotation tool in both the default (Global Transform mode) and alternate setting (Local Transform mode). Notice the differences in the 3D Rotation tool and its ability to rotate the movie clip when both Global Transform mode and Local Transform mode are enabled.

3D Translation tool

Let's move on to the 3D Translation tool to see how it works. Select the 3D Translation tool from the Tools panel (see Figure 6).

Figure 6. 3D Translation tool from the Tools panel

While the movie clip and 3D Translation tool are selected, you'll see the interface of the 3D Translation tool displayed on top of the movie clip on the Stage (see Figure 7).

Figure 7. Interface of the 3D Translation tool

Just like the 3D Rotation tool, the red handle represents the x axis, the green handle represents the y axis, and the blue circle represents the z axis. Click and drag one of the arrows to move the object to the x and y axes, and drag the blue circle upward or downward to translate the object on the z axis.

By default, the 3D Translation tool uses the Global Transform mode. This means that the 3D transformations move in relationship to the Stage's coordinates. The direction of the x, y, and z axes will not change unless you choose to turn the Global Transform mode off. Similar to the 3D Rotation tool, you can change modes by toggling the Global Transform button in the Options section of the Tools panel.

If you deselect the Global Transform button, you can use the 3D Translation tool to move an object around the xyz axes relative to the selected object's coordinates.

To see the 3D Translation tool axes as they appear in Figure 8, use the 3D Rotation tool to rotate the object first and then switch to the 3D Translation tool to transform the object using the object's coordinates.

Figure 8. 3D Translation tool in Local Transform mode

To learn more about working with the 3D transformation tools, watch the following video by "Flash Downunder" host Paul Burnett on doing 3D rotations and translations in Flash CS4:

Page 2 of 8

Previous Page

Next Page