Movement along a 3D axis is easily demonstrated using the 3D Translation tool. This tool, along with the related 3D Rotation tool, can be found near the top of the Tools panel, shown in Figure 8-2.

Figure 8-2. 3D tools

Using the Flash interface, you can manipulate only movie clips in 3D space. (ActionScript can also alter 3D properties of button symbol instances). To use the 3D Translation tool, click on any movie clip with the tool selected. The tool then displays 3D axes on the movie clip (Figure 8-3).

Figure 8-3. Moving an object in 3D space using the 3D Translation tool

Clicking and dragging any one of these axes constrains movement along that axis. Drag the red axis left or right to move the movie clip along the x-axis. Drag the green axis up and down to restrict the movie clip’s movement to the y-axis. The blue dot at the center of the axes is equivalent to looking directly down the z-axis, as it is perpendicular to the stage. Click the blue dot and drag your mouse up and down to move the movie clip closer to or further away from your viewpoint. The movie clip will get bigger or smaller, accordingly.

It’s also possible to translate movie clips in other ways. You can move in x and y directions just by dragging the movie clip with the Selection tool, or by adjusting the x and y properties of the movie clip in the 3D Position and View section of the Properties panel. To adjust the z value of a movie clip, change the z property in the Properties panel.

In addition to translating movie clips along 3D axes, it is also possible to rotate movie clips around these same axes. Figure 8-4 shows black arrows that indicate rotation paths around each axis. The direction of these arrows shows how the movie clip rotates when positive values are used for the x, y, or z rotation properties. For example, the arrow around the z-axis indicates that positive values of the z rotation property spin the movie clip clockwise, while negative values spin the movie clip counterclockwise.

Figure 8-4. Rotation along the 3D axes, x, y, and z

You can use the Transform panel for precise numeric adjustments to 3D rotation, but you can also use the 3D Rotation tool for a more interactive approach.

Using the 3D Rotation tool is somewhat similar to using the 3D Translation tool. When you click a movie clip, an interactive tool interface appears in the center of the movie clip. A bit more information must be conveyed to support rotation along any of three axes, however, so the interface for the 3D Rotation tool is a bit more detailed. Figure 8-5 shows four representations of the tool, and Figure 8-6 shows the effect of each corresponding manipulation on a movie clip.

Figure 8-5. Feedback provided by the 3D Rotation tool when rotating an object in 3D space

Figure 8-6. Rotating an image around each 3D axis, and freely

The labels in Figure 8-5 show that the red line controls rotation around the x-axis, the green line controls rotation around the y-axis, and the inner blue circle controls rotation around the z-axis. A cursor is also present at the outer orange circle in the lower-left corner of the illustration. This orange circle controls free rotation, or rotation that is not constrained along any single axis. Using this feature, you can drag your mouse around and manipulate x, y, and z rotations simultaneously, as shown in Figure 8-6. While this gives you more immediate freedom of movement, it is more difficult to precisely rotate your movie clip to a particular orientation.

For increased control, you can rotate around each axis individually. For example, Figure 8-5 shows rotation only around the x-axis. When you click the red line and drag it in a clockwise direction, the x rotation value increases and the image rotates toward you, shown in Figure 8-6. Figure 8-5 and Figure 8-6 show positive rotation along the y-axis, and Figure 8-5 and Figure 8-6 show positive rotation along the z-axis.

A gray wedge indicates the starting and stopping points of the rotation angle, allowing you to estimate the degree of rotation without consulting a panel. Because a circle consists of 360 degrees, a wedge that appears to occupy one quarter of the circle represents approximately 90 degrees of rotation along one axis (holding down the Shift key while using the 3D Rotation tool to snap rotation to 45-degree increments, making it easy to reach exactly 90 degrees, if desired).

The wedge display assists with x, y, and z rotation. However, because free rotation can include changes along any axes, the wedge cue is not helpful and is omitted for that tool adjustment.

Thus far, this chapter has focused on transforming single objects in 3D space. However, you can also manipulate multiple objects using the 3D Translation and 3D Rotation tools. For example, Figure 8-7 shows two movie clips rotating around the y-axis at their mutual center.

Figure 8-7. Rotating multiple objects in 3D space

To transform more than one movie clip in 3D space, you must first select all instances that you want to transform (by clicking with the Shift key pressed or by dragging over the objects) and then select the 3D Translation or 3D Rotation tool. Thereafter, all selected objects will be moved or rotated as a group. To rotate the objects around a common center point, double-click in the center of the chosen 3D tool, as described in the next section.

Just as you can change the 2D transform point using the Free Transform tool, you can also change the location of the 3D center point. When selecting a movie clip with the 3D Rotation or 3D Translation, the white circle at the center of either tool’s on-Stage interface is the 3D center point. To move this point, simply drag around the white circle.

Figure 8-8, for example, shows the 3D center point moved to the top of a movie clip. By rotating the movie clip around the x-axis at its new center point, the movie clip appears to swing from its top—much like a sign hung from a support outside a dentist’s office.

Figure 8-8. Rotating an object around the x-axis after changing its 3D center point

To reset the 3D center point to the center of a selected movie clip, double-click on the white circle.

You can also change the 3D center point using the Transform panel. While it may be quicker and more intuitive to drag the center point around the x- and y-axes on Stage using the 3D Rotation or 3D Translation tool, the Transform panel adds the ability to easily move the 3D center point along the z-axis.

By default, 3D rotations and translations are made in global space, where all movie clips with 3D transformations share the same global coordinate system. That is, when using global transformations, you are manipulating a movie clip relative to the Stage. However, it’s also possible to transform a movie clip in local 3D space using coordinates that are relative to its parent movie clip or, when no parent exists, the main timeline.

For example, imagine a movie clip on the Stage. Adjusting its global z position would move the movie clip perpendicular to the Stage, as described earlier in the Translating 3D Objects section. Now imagine rotating the movie clip 90 degrees on the y-axis. The global z-axis is still perpendicular to the Stage, but the movie clip’s local z-axis, after the 90-degree rotation, is parallel to the Stage. Adjusting the movie clip’s global z position still moves the movie clip in and out of the Stage. Adjusting its local z position, however, moves the movie clip left and right.

To toggle between local and global 3D transformations, use the Global Transform button at the bottom of the Tools panel when a 3D tool is active (Figure 8-9). When you enable this option, movie clips will be transformed relative to the Stage. Otherwise, local coordinates will be used for transformations.

Figure 8-9. Rotating an object in local 3D space

The visual feedback provided by the 3D tools updates to reflect this change. Previous figures, including Figure 8-3 and Figure 8-5, show the global 3D tool on-Stage interfaces, while Figure 8-10 shows the local interfaces. The 3D Rotation tool (top) acquires a sphere-like quality, and the orientation of the 3D Translation tool axes (bottom) change with the orientation of the movie clip. Following the preceding z-axis discussion, note the blue z-axis in the bottom of Figure 8-10. Rather than a blue dot that points directly into the Stage, the local translation mode shows the z-axis clearly pointing somewhere behind you to the left.

Figure 8-10. Rotating (top) and translating (bottom) a movie clip in local 3D space

Switching between global and local transformations when adjusting the location of a movie clip can make it much easier to set its position more accurately in 3D space.

The vanishing point is the point on the Stage to which the z-axis is aligned. That is, if you pushed a movie clip along the z-axis, it would approach the vanishing point. It is called the vanishing point because objects reduce in scale as they move farther away from the viewer, become smaller and smaller as they approach the distant point, and eventually vanish from view. In scenes with horizon lines, for example, such as looking down a highway running through the desert, the horizon usually goes through the vanishing point.

The default vanishing point is the center of the Stage. Figure 8-12 illustrates the point by showing lines emanating from all four corners of a movie clip, converging on the vanishing point.

Figure 8-12. The default vanishing point, in the center of the Stage

You can change the global orientation of the z-axis in a 3D world, and thus the appearance of the scene, by changing the vanishing point. Figure 8-13 shows a before-and-after view of a vanishing point change. The original vanishing point is still depicted using purple dashed lines. Orange dashed lines indicate the new vanishing point.

Figure 8-13. Changing the vanishing point to point (410, 170)

Note the change in the movie clip’s appearance. It appears to have rotated a bit more on the y-axis. You can see where the previous corners of the movie clip were by looking at the ends of the purple dashed lines. In actuality, the movie clip’s rotation has not changed. Instead, the visual update was caused by the shift in the vanishing point.

Figure 8-14. Three vanishing points applied to a 550×400 Stage: point (275, 350) (a), point (275, 200) (b), and point (275, 50) (c).

You can use the vanishing point to great effect to alter the viewpoint of a camera or viewer. For instance, Figure 8-14 shows three different examples of vanishing points applied to a 550×400 Stage. Figure 8-14(a) shows a vanishing point near the bottom of the Stage. This orients objects downward and gives the impression that the viewer is below ground, perhaps looking up at the ceiling. Figure 8-14(b) shows a vanishing point in the center of the Stage. This vantage point makes the viewer feel he or she is at ground level. Finally, a vanishing point at the top of the Stage, shown in Figure 8-14(c), implies that the user is aboveground, maybe looking down from a tall tower.

Choosing a perspective angle for a 3D scene is similar to choosing a lens for a camera. If you need to include a wide field of view in a picture, you will need a wide-angle lens. If you need a narrower field of view, to focus on something farther away, you will need a telephoto lens. A normal, or standard, lens falls somewhere in between.

Because different angles of view are optimized for different distances of viewing, changing the angle can often change the perspective of objects seen through a lens. For this reason, the field of view in a virtual 3D camera is often referred to as the perspective angle.

Figure 8-15 shows three examples of perspective angles using three rows of movie clips. In each example, four vertical rectangular movie clips are displayed with a 3D y rotation of 90 degrees. In the horizontal center of the screen, they would be invisible, as you would be looking at the very edge of the movie clip. Because the vanishing point is in the center of the four movie clips, you can see more of the sides of the rectangles that are farther to the left or right of center.

Figure 8-15. Four movie clips displayed using perspective angles of 15 (top), 55 (middle), and 105 (bottom) degrees

The top row of Figure 8-15 shows a perspective angle of 15 degrees. This is equivalent to a 100mm telephoto lens. The middle row shows a perspective angle of 55 degrees. This is Flash’s default perspective angle and is equivalent to a standard 35mm lens. The bottom row shows a perspective angle of 105 degrees, which is equivalent to a 20mm wide-angle lens.

Because perspective angle and vanishing point settings affect all 3D objects, and because global 3D transformations are based on these values, Flash intelligently updates the appearance of every 3D object when any of these values change. You can take advantage of this by placing related 3D objects into container movie clips. By adjusting the location of the container movie clip, all its 3D children also update.

Figure 8-16 shows a movie clip with three 3D children being dragged up and away from the vanishing point. Changes caused by the leftward movement are evident in the horizontal skewing. In particular, the left square is becoming broader and the right square is becoming shallower. The upward movement is affecting the vertical skewing. The angles at all corners are more acute, and the center object appears flatter.

Figure 8-16. Moving a movie clip with children in 3D space

The basic example shown in Figure 8-16 can’t convey the full impact or simplicity of manipulating 3D children just by positioning the parent container. 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.

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 listener links mouse movement with a 3D property that manipulates a movie clip with an instance name of mc.

1 this.addEventListener(Event.ENTER_FRAME, onLoop);
2 function onLoop(evt:Event):void {
3     mc.rotationY = mouseX;
4 }

1 this.addEventListener(Event.ENTER_FRAME, onLoop);
2 function onLoop(evt:Event):void {
3     mc.z = mouseY;
4 }

1 mc.rotationX = 10;
2 mc.rotationY = −20;
3 mc.rotationZ = 5;
4
5 this.addEventListener(Event.ENTER_FRAME, onLoop);
6 function onLoop(evt:Event):void {
7     var mouseLoc:Point = new Point(mouseX, mouseY);
8     root.transform.perspectiveProjection.projectionCenter = mouseLoc;
9 }

1 mc.x = 140;
2 mc.rotationY = −45;
3
4 this.addEventListener(Event.ENTER_FRAME, onLoop);
5 function onLoop(evt:Event):void {
6     root.transform.perspectiveProjection.fieldOfView =
 mouseY / 4 + 40;
7 }

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:

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:

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.

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 animation when the three component frames come into view, and then you’ll add a script to react to user button clicks.

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.

This script adds a mouse-click event listener to the more button inside the gallery 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 button will cause the movie to return to the first item (the UILoader component frame).

After you have finished testing, compare your file with gallery_04.fla from the companion source files.

When testing the interface, you may notice that the parallax movie clip is visible to the left of the viewing wheel depicted in the guide layer. When you integrate your gallery assets into the main project file, this will be a problem, as the gallery interface will appear from under the wheel as you scroll. To prevent this, you’ll add a layer mask to show the parallax movie clip only within the desired frame.

Once your parallax scrolling effect is working, you’ll need to add the necessary content to the main project file:

In the next chapter, you’ll add two of the three components 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.