Scrolling Dimensional Perspective
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Scrolling Dimensional Perspective
In traditional hand-painted animation, the various objects in a scene are commonly drawn on different acetate cels and then are layered on top of one another. If all the cels are moved together, the scene looks flat and 2D. But by moving the cels at different rates, animators discovered that it was possible to create a motion-based dimensional perspective effect, giving the illusion of certain objects being closer or farther away.
In Flash, creating such effects is even easier because there can be any number of electronic layers. With scripting, the motion can be made automatic and even interactive.
The underlying principle is this: Objects that are larger and that are moving faster will appear closer than objects that are smaller and moving more slowly. By mimicking (and even exaggerating) the way we see perspective in real life, this can be re-created onscreen even with flat graphical layers.
This tutorial steps you through the process of building a scripted dimensional perspective effect, useful for Web site navigation or just entertainment. Click to download a ZIP file of the finished example (48k) here or an HQX file (67k) here, to give you an idea of what you'll be making..
Inside the Start File
To get you on your way, I've prepared a start file that includes all the basic symbols and movie settings required. Here is the list of movie clips and graphics as they appear in the Library:
Animation Controller—This will host the script that powers the animation. At present, it is just a simple movie clip containing a graphic for identification.
Cloud 1, 2, and 3—The cloud graphics are incidental and are used as part of the animation.
Background, midground, and foreground—These are the graphic layers that make up the effect. Its important that these symbols be movie clips because they are to be positioned using ActionScript and, therefore, need instance names.
The Movie properties—These must set to the correct frame rate and stage size with the four layers provided. (See Figure 1.)
){kind=link}
Figure 1 The Movie properties.
The movie itself is set to 30 frames per second, with a stage size of 590 x 400 pixels. The high frame rate will ensure smooth motion; because this animation is scripted rather than manual, the file size stays small as well.