Macromedia Flash 8 Bible

Bringing Bitmaps to Life with Multiplane Animation

Have you ever watched a documentary or motion graphics piece that uses old photographs but gives you the feeling that you're viewing a 3D or live-action scene? As the camera view changes, elements within the picture plane shift as if they exist in real space. By animating elements within the image at different speeds and applying different levels of blur, you can create the illusion that the elements from one flat image actually have depth. This is called a multiplane animation and you can create this effect in Flash using vector graphics or bitmap images.

The tricky part of setting up a multiplane animation using a bitmap is isolating individual elements from the same image so that you can modify them individually. This is where Photoshop or Fireworks can make your job easier. Ideally, you'll want to work with an image that has a few key objects that are not too difficult to mask that appear to be at different distances from the camera. If you start with a group shot of people on a plain background, this technique is not very successful, but if you start with a shot of one or two people standing in front of a cabin with some trees and some mountains in the distance, you'll have a nice variety of elements that help to establish depth of field in the shot.

To illustrate this technique, we'll start with a simple photograph. We've chosen an old family snapshot that includes elements at different distances from the camera. As shown in Figure 36-13, this image includes two figures with some landscape elements that recede naturally into the background.

Figure 36-13: You can separate a photograph with elements that recede from the camera into layers that represent different depths of the picture plane.

Using selection tools in Photoshop, we roughly cut out three key elements to establish the different depths of the image: the figures (layer 1), the tree on the right (layer 2), and the tree on the left (layer 3). Copying and pasting each of these elements onto its own layer enables you to fine-tune the silhouettes by adding masks to each of the cutouts. Of course, if you just animated these elements on top of the original photo, you would get doubled-up images that would interfere with the illusion of depth. One solution would be to use the figures and the trees on top of some other background or on white for a more abstract effect. However, we want to keep the context of the original photo, so we put the clone tool to work and "fudged" the background to create a complete surface that we can layer the cutouts on top of. The final result of our work in Photoshop is four separate files, as shown in Figure 36-14.

Figure 36-14: Each layer of the modified image is saved out as a separate file. The elements that will be layered and animated over the background landscape image are saved with transparent backgrounds.

The background landscape is now retouched to provide a solid backdrop (no repeated figures and no cutout blank areas), while the trees and the figures are isolated with masking and saved in TIFF format with transparent backgrounds. To save file size, we also cropped the trees and the figures as closely as possible.

Finally, we get to jump into Flash. Create a new file and import the individual TIFF files to Flash. To make it easier to work with the images, we've nested the original bitmaps on individual Movie Clip timelines. The final animation will be created by using individual tweens for each layered element, so to keep the Main Timeline uncluttered, we created a new Movie Clip to hold our animation. As shown in Figure 36-15, the first frame of each tween layer holds an instance of a Movie Clip, scaled and positioned to re-create the original photo composition.

Figure 36-15: In the first keyframe of the tweened animation sequence, Movie Clips for each image are layered on a Movie Clip timeline to re-create the composition of the original photo. The images are scaled to 50-percent size, and varying levels of Blur filter are added to set up the illusion of a cinematic zoom with changing focus.

By adding a tween to scale each element so that it appears to move at a slightly different speed, we can create the illusion of a zoom into the image with depth. If we started the animation with all the elements at 100-percent scale and scaled them up to create a zoom effect, the bitmaps would get very pixilated and jagged. The solution is to start with the images at a smaller size in the first frame of the tween. Select each Movie Clip in the first keyframe of each layer and use the Transform panel to set the starting scale at 50 percent. To enhance our tweened zoom effect, we also added a Blur filter to each Movie Clip with varying levels of Blur. The specific settings that you use will depend on the images you're using and the effect you want to achieve, but the basic idea of our example is to create a zoom animation that takes the images from a wide shot (small and blurry) to a close-up (bigger and sharper). Compare the final keyframe of the tween shown in Figure 36-16 with the first frame that was shown in Figure 36-15 to get a better idea of the transformations that were applied to each element.

Figure 36-16: In the final keyframe of the tween, the largest, closest element (the two figures) is scaled to 100 percent and the level of Blur is set very low. The other elements are zoomed less and left with more Blur to achieve the effect of multiplane motion — the further an item is from the viewer, the less change it will have from the first keyframe to the last.

The only rule that you'll want to follow is that images closer to the viewer should zoom faster and be less blurred than items further in the background. To achieve this in our animation, we set the final scale of the foreground figures to 100 percent and the final Blur level to 2, while we set the final scale of the background elements lower with higher levels of Blur so that they would appear to move more slowly and end up less "focused" over the same number of tweened frames.

To finish off our example file, we added a rectangular mask on the Main Timeline to give the animated Movie Clip a nice clean edge. As you work with transformations and tween settings to polish your animation, don't forget that you can set custom Easing curves to control the position of the tweened items separately from any filters that you apply.