Backgrounds and Scenery Flash

In Flash, you work in an area that is called the Stage (or Movie) area. For broadcast (or any other kind for that matter) animation it is better to think of it as the viewfinder of a camera. The main difference between this camera and the traditional kind, or even those used in 3D animation, is this: You can’t move it. So, to give the illusion of camera movement, everything within the view must move. This is not as hard as it might seem with Flash’s capability to use animated graphic symbols. A good example is in the Weber cartoon, in the scene where there’s a malfunction in the control room and everything is shaking. Here’s how this effect was created :

  1. A graphic symbol of the entire scene of animation that was larger than the camera’s view was made (so that white space wouldn’t show at the edges),
  2. The symbol was placed in the Main Timeline.
  3. Every frame was keyframed and moved in a jarring fashion to give the jerking look needed to convey that everything had run amok.
  4. Here are a few shots from the control room scene of the Weber cartoon.

    Here are a few shots from the control room scene of the Weber cartoon.

As mentioned previously, when designing with Flash for the Web, the use of raster (bitmap) images should be kept to an absolute minimum. But for broadcast output there’s no limit. Not only can you use as many images as you’d like (within system constraints), but doing so will make a richer, far more attractive finished product.

And, unlike the .SWF format, when output as raster video, animations built with such bitmap image intensity will always play at the proper frame rate. So move, animate, scale, and rotate them even play sequences of them. The sky and RAM are the only limits.

QuickTime limitations
With Flash 4, Flash expanded its import capabilities to include raster video QuickTime and .AVI. When using video output for broadcast you can export to these formats too, but video that’s been imported into Flash will not show up when output to the .SWF format. Unfortunately, Flash does not recognize alpha channels embedded in the QuickTime 32-bit animation codec (which supports traveling mattes, or alphas). However, you can use Mask layers on the video in Flash. Remember that Flash doesn’t save the video file within the project file (thank goodness) it makes a pointer to it instead. This addition brought tremendous functionality to Flash because animations can be keyed (composited) over (or behind) live video without having to recomposite in After Effects. To take advantage of this, keep your live video at the same frame rate as the Flash project. Note, however, that Flash will only export the video audio from the video clip will need to be reapplied in a video-editing application. An alternate solution is to bring the video and audio tracks into Flash separately and to synchronize them there.

Building layered backgrounds in Flash with Photoshop
By using layers in Photoshop, multiplane shots are easily accomplished in Flash. Using layers is very important to the organization of the animation. Some shots in Weber employ more than 20 layers to keep things where they need to be. When designing backgrounds (or scenery, to be more precise) remember that, at some point, background elements may need to be foreground elements. For instance, in the introduction to Weber, the sky will always be in the background so it is on a layer furthest down in the stack. Unlike the sky, however, the pier, which is also a background object, may sometimes need to be in the foreground to facilitate movement of the character either in front or behind it. Thus, the pier gets a layer (actually a group of layers) of it’s own, placed further up in the layer stack, above the sky. When creating such backgrounds, use of Photoshop and alpha channels delivers the most versatility. When using Photoshop for scenery elements, it’s mandatory to work in layers and to save a master file with all layers intact.

Elements can then be exported to individual files (with alpha channels) as needed. (Retaining the master layered Photoshop file gives you maximum options later, if edits or changes occur. It can also be used as a resource for subsequent animations, so don’t flatten or discard your master layered Photoshop file. Instead, number and archive it!) Why the alpha channels? When translating the Photoshop elements into Flash vector scenery they automatically mask themselves so a little preplanning in Photoshop can save lots of time later.

Flash Mask layers
Whoops! You got to a point where you didn’t use layers and now you need a mask. Some situations may be either too complicated or else unforeseeable in the original design. Flash Mask layers can come to the rescue. Here’s the good news: You can mask (and animate the mask) interactively with the other elements while in Flash. The bad news is that you can’t feather (soften the edges) the mask. In the Weber cartoon, an example where masks are used to good effect is the ending, where black circles in as the scene closes.

Long pans
Long pans are a standard device of animated cartoons, as when Fred Flintstone runs through the house and furniture keeps zipping past (that must be one looooong living room, it just keeps rockin’). This can be done in a couple of ways in Flash. For landscape backgrounds, it’s usually best to first create a very wide bitmap of the landscape and then to Motion Tween it horizontally, with keyframes for stopping and starting as needed within the tween. If something is either falling or ascending, use a tall bitmap and Motion Tween vertically. Another solid technique is to create art of the objects that will pan (such as clouds) and then loop them as the background layer, across the view. A good example of this is the chase scene from the Weber cartoon, which is shown below. To get smooth results when using looping, don’t use easing in or out with the tween setup. Also, to maintain constant speed, maintain the exact number of frames between the keyframes. Then, copy the tween by Alt (Option) dragging the selected tween frames to the desired area in the timeline. Repeat copying until you’ve covered the time needed.

The chase scene from the Weber cartoon

The chase scene from the Weber cartoon

Multiplane pans
To provide 3D-motion depth during the pan, keep this rule in mind: An object that is further away appears to move slower (than a nearer object) as it moves across the view. This takes some experimenting to get it right, but once mastered, this will add a professional touch to your animations. For example, in a 100-frame pan:

  • The sky moves very slowly, 100 pixels total
  • The water moves more quickly, 125 pixels total
  • The character on the beach moves more quickly than the water, 150 pixels total
  • A parked car in the immediate foreground moves most rapidly, 250 pixels total

Blurring to simulate depth
The multiplane camera was used in early Disney films to give a feeling of depth in the animation of flat artwork. There was physical space between the individual cels when photographed. By using a short depth of field lens, the artwork that was further away from the lens lost focus slightly. (You may have noticed this in still photography yourself.)

If you set up your scenery using bitmaps, you can recreate this effect. A good example of this is the pier scene from the Weber cartoon, which is shown below. In Photoshop, it’s a simple case of using incrementally higher doses of Gaussian blur on the layers of your scenery that are further way. The further the object is, the more blur that is applied just be sure that the blur is applied to the alpha channel that Flash will use in compositing. Use this technique as a photographer brings attention to the element in the shot that is in focus. Using it in animation tends to generate the illusion of depth. However, using it in the foreground can also portray various elements such as fog.

The opening pier scene from the Weber cartoon

The chase scene from the Weber cartoon

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics