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.

On the CD-ROM 

A layered PSD file along with the individual TIFF files and the final Flash files (.fla and .swf), are included in the MultiplaneAnim folder inside the ch36 folder in the CD-ROM.

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.

Caution 

Our original file was a scan from an old photograph so the image quality was somewhat rough and blurry, but the actual file size was much too large to animate in Flash. You may find it easier to work with the image in Photoshop at a high resolution, but be sure to downsample to a more Web-friendly size before you save the individual layers as TIFF files.

Tip 

To ensure that the files will match up when they are imported and layered in Flash, resize or change the resolution of the images consistently. The easiest way to do this is to use the percent option in the Image Size dialog box. Rather than setting a specific pixel width or height, simply down-sample the images to a consistent percentage — such as 50 percent. This will give you smaller files that still have the same size relationship to each other.

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.

On the CD-ROM 

To see our final multiplane zoom effect, open layeredBitmaps.swf from the MultiplaneAnim folder inside the ch36 folder on the CD-ROM. Open up the .fla file from the same location to look at the individual settings that were applied to each Movie Clip on the start and end keyframes of the tweens.