Open the Amsterdam01.fla file you saved earlier in the chapter. When it opens, you will see the vanishing point guides created earlier and the figurine image, which is a movie clip, sitting in the photo layer.

Select the figurine. Use the Free Transform tool or the Transform panel to resize the photo to about 65 percent of its actual size (approximately 100 × 100 pixels). Try to have the top and bottom corners on the right edge of the photo somewhat align with the guides. An easy way of doing this is to move the transform point to the bottom-right corner of the movie clips.

At this point, it's time to make use of the perspective lines in the guide layer. Using the Selection tool, click the figurine movie clip to select it. Twirl down the 3D Position and View area of the Properties panel, and note the Vanishing point values at the bottom of that area, next to a Reset button, as shown in Figure 9-12.

Until you adjust it otherwise, the vanishing point is centered on the stage. Click and scrub the X value slowly to see a set of crosshairs appear over the photo.

Figure 9-12. The vanishing point can be adjusted in the Properties panel.

The crosshairs represent the official vanishing point Flash uses to position 3D objects. When your goal involves matching up assets to actual background images, you'll find that helps to match Flash's vanishing point with the real-world vanishing point in your reference artwork. Let's do it.

Scrub the X value far to the left so that the horizontal portion of the crosshairs lines up with the point where the perspective lines intersect. When you're satisfied, do the same with the Y value to lift it a bit higher

Click the figurine to select it, and switch to the 3D Translation tool. You'll see a pair of arrows arranged in an L shape on the image.

Figure 9-13 shows the same set of arrows repeated four times, with the mouse pointer moving from area to area, changing as it does. The arrows and the heavy dot each have their own meaning. Hover near the horizontal red line (far left in the figure), and the mouse pointer turns into a black arrow with an X next to it. This arrow controls the x-axis position. Hover near the vertical green line, and you'll see the letter Y, which controls the y-axis position. You'll use this in just a moment.

Figure 9-13. Four views of the same interactive L shape, showing x-, y-, and z-axis position

The heavy dot takes a bit more dexterity. Hover in the center of the dot, and you'll see a Z, which controls movement along the z-axis. Hover near the edge of the dot, and you won't see any letters. Why? Dragging at this point lets you reposition the 3D center point for this object, which affects how translation is applied (the center point's position isn't nearly as obvious with translation as it is with rotation).

Hover near the green y-axis arrow, and then click and drag down until the photo appears to rest on the perspective line that runs along where the door meets the street.

Use the Transform panel to scrub the Y value in the 3D Rotation area until the bottom edge of the photo roughly follows the line of the pavement as it meets the buildings (see Figure 9-14). You can alternatively use the 3D Rotation tool to accomplish the same task, but the Transform panel gives you a bit better control. If you're surprised at how much the image gets stretched, don't worry. We'll show you how to fix that later in the chapter. The stretch is because of the "distance" of the vanishing point, off to the side. What you need to pay attention to is how the top and bottom edges of the image roughly follow the vanishing point guides.

Figure 9-14. Use the Transform panel for finer rotation control.

With the Transform panel open, scrub across the Resize values at the top to shrink the image. Be sure that the link icon is selected to ensure uniform scaling. As you scale the image, notice how the X and Y values shown in Figure 9-15 aren't the same. This is because of the 3D translation applied to the image that aligns it to the perspective.

Figure 9-15. Scale the image in the Transform panel and use the Y Translation arrow to move it into position.

Use the Y Translation arm to move the image so that its bottom edge sits on the bottom vanishing point guide.

With the image somewhat in place and resized, you are now going to put it into its final position. What you won't be doing here is changing over to the Selection tool and pulling and pushing the image into place. You will need to use the 3D Translation tool, the Transform panel, and the Properties panel to "slide" the image into position on the x-axis and to "push" it into the door on the z-axis.

To understand X and Z movement—at least in the current scenario—think of those perspective lines in terms of the ones shown in Figure 9-3 in the square in front of the museum. In that earlier figure, the line seems to be growing out of the image toward you, because its vanishing point is at the "back" of the square. In that case, or when the vanishing point is centered on the stage, Z movement causes the object to get bigger or smaller as it moves "out" or "in." The apparent scaling is a perspective effect that happens because the z-axis is pointing at you. In this case, the z-axis is pointing somewhere over your right shoulder. It's as if you're looking at the figurine image from the side. Why? Because the vanishing point is over to the left.

Let's illustrate this.

Hover over the heavy dot until you see the letter Z appear in the mouse pointer. Slowly drag up and down. The image still changes scale, but more important, it moves sideways, zooming along the pavement. That's because the "front" of the z-axis is pointing toward the right, and the back is pointing toward the vanishing point at left.

Now hover over the horizontal red line until you see the mouse pointer acquire an X. Click and drag slowly left and right. At first, the movement might look similar to Z movement, but there's an important difference. Yes, there is some left-and-right movement, but because of the position of the vanishing point, the photo seems to be moving "onto the street" or "into the door," as depicted in Figure 9-16.

Select the image on the stage and open the Properties panel.

Twirl down the 3D Position and View options.

Switch to the 3D Translation tool, and scrub across one of the handles. Pay attention to how the values in the X, Y, and Z areas, as shown in Figure 9-17, in the Properties panel change as you drag the arrow. Now scrub across the values in the Properties panel. The selection moves on the axis you are scrubbing.

What does that little camera in the 3D Position and View properties do? Scrub across the value. That little gem is the Perspective Angle, and as, you have seen, it moves the selection along the sight line of the vanishing point.

Figure 9-17. Use the Properties panel to "do it by the numbers."

To finish, get the image into position as shown in Figure 9-17. To get the bottom to line up with the road, open the Transform panel, and adjust the Y value in the 3D rotation area.

With the image selected, twirl down the Color Effect properties and select Alpha from the Style drop-down. Reduce the Alpha value to 50%.

Turn off the visibility of the guide layer, and deselect the image. It now looks, as shown in Figure 9-18, like someone is projecting the image onto that garage door.

Open the SpaceFinal.png image in your Exercise folder in Fireworks CS5 or Photoshop CS5. When the image opens, as shown in Figure 9-19, you will see that we have created the scene to be used in this project. Each of the images has been placed on its own layer, and the background for the images is transparent. Feel free to move things around. When you finish, save the file as a PNG image, and quit Fireworks or Photoshop.

Figure 9-19. You start with a multilayer composite image using images downloaded from NASA.

Open the Space.fla file in your Exercise folder. When the file opens, you will see we have imported the Fireworks image into the Library.

In the Properties panel, change the stage color to black (#000000).

Open the SpaceComposition movie clip found in the Fireworks Objects folder. We are going to do a little house cleaning before we start moving stuff around.

Select layer 1, and delete it from the timeline. There is nothing n this layer, so it isn't needed.

Select each object on the screen—Astronaut, Earth, and each of the four planets—and convert them, as shown in Figure 9-20, to a movie clip.

Figure 9-20. The images are converted to movie clips.

Open the Properties panel, and twirl down the 3D Position and Size properties. Select each object on the screen, and use the following Z values:

When you finish, the scene will look a bit different, as shown in Figure 9-21, because you have used depth to move the objects in the movie clip closer to or farther away from the surface of your computer screen.

Figure 9-21. Each movie clip is positioned in 3D space by changing its z-axis value.

The next step is to get the whole thing into motion and give the project the appearance of a camera panning through space.

Click the Scene 1 link to return to the main timeline. When the timeline opens, right-click frame 1, insert a motion tween, and drag the span out to frame 350.

The "magic" happens here. Select the movie clip on the stage, open the Properties panel, and change the X, Y and Z axis settings in the 3D Position and View area to bring the movie clip "closer" to the viewer.

Open the Transform panel, and in the 3D Rotation area change the X, Y, and Z values, as shown in Figure 9-22, to create the illusion of a "fly through" and rotation.

Test the movie.

Open the swingDoors.fla file from the Exercise folder for this chapter. You'll see three layers in the main timeline—image, Door Right, Door Left —and a handful of items in the Library.

Select the 3D Rotation tool, and click the movie clip that contains the left door. Hover over the center of the bull's-eye so that no letters show in the mouse pointer, and drag the bull's-eye—or use the Transform panel—to move the 3D center point to the middle of the left side of the door, as shown in Figure 9-23.

Why the left side? Because this door naturally swings on its hinges, and the 3D center point is roughly analogous to a hinge. Why the middle, rather than a corner? That's just an arbitrary choice. Given the angle of the doors, there really is no perspective. In this case, hinging the middle is the way to go. Click the movie clip that contains the right door. Reposition this movie clip's 3D center point in the upper right. This time, the hinge is on the other side, which makes sense. If you leave the 3D center point at its default value for each movie clip, the doors will spin like ballerinas.

Figure 9-23. Changing the 3D center point alters where an object rotates

Right-click (Windows) or Control+click (Mac) frame 1 of the Door Left layer, and select Create Motion Tween. This converts the layer to a tween layer, but it's not quite enough.

Right-click (Windows) or Control+click (Mac) the Door Left layer again, and select 3D Tween, which puts a check mark in that choice whenever you open the context menu again. (You can remove the check mark if you ever change your mind.)

Repeat steps 2, 3, and 4 for the Door Right layer.

Extend the two tween layers to frame 30, and add a frame to frame 30 of the Image layer. Select the left door's movie clip, and use the 3D Rotation tool or the Transform panel to "swing the door in" about 90 degrees (see Figure 9-24). Do the same thing for the right door.

Figure 9-24. Swinging the door inward toward 90 degrees

To improve the illusion, darken the doors while they're swinging in. Still at frame 30, use the Selection tool to select each door in turn. In the Properties panel, choose Brightness from the Style drop-down list of the Color Effect area, and set its value to −34%.

To add some polish, add a new layer, and name it Audio.

Select Window

Using the Selection tool, click into frame 80 of each layer, and press the F5 key to pad out the frame span of each layer. This allows the audio to fully play out, without looping too early, when you test your movie.

Select Control

Open the AirheadMail.fla file from the Exercise folder for this chapter. You'll see an envelope with a couple postage stamps above it, one stacked behind the other, as shown in Figure 9-25. There's another stamp in a hidden layer behind the envelope, but we'll get into that in a moment. Just be aware that both of the visible stamps are located in the same timeline layer.

Figure 9-25. Depth is determined more by layer and stacking order than z index (envelope photo by Cris DeRaud).

Select the 3D Translation tool, and click the unobscured stamp (the one on top) to select it. Adjust its z index to scale the stamp smaller and larger.

In terms of 3D space, a higher z-index value seems to "push the stamp away," making it smaller. No matter how far you "push," you'll find that you cannot move the upper stamp behind the lower one. To do that, you'll have to use the old-fashioned approach.

Right-click (Windows) or Control+click (Mac) the upper stamp, and select Arrange

Unhide the bottom timeline layer (named stamp, just like the top timeline layer). This reveals a third stamp partially obscured by the envelope.

Using the 3D Translation tool again, adjust the z index of either stamp in the upper stamp layer. As in step 2, nothing you do moves either stamp behind the envelope or the stamp in the bottom stamp layer.

To bring the lowest stamp above the other two, you'll need to move its layer. Click the lower stamp layer, and drag it above the other stamp layer, as shown in Figure 9-26.

Figure 9-26. Drag layers to move lower content above higher content.

This is all well and good for still compositions, but how does it work for animation? You can't very well drag layers around in the middle of a tween. The trick is to split your animation over two layers, as shown in Figure 9-27. Check out AirheadMailAnimated.fla in this chapter's Complete folder to see the animation in action.