|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
ActionScript for Non-Coders
A Virtual Camera
One of the systems that Flash doesn't have that many other animation environments have is a virtual camera. Many professional animation systems allow you to set up a virtual camera that can itself be animated. This allows you to create the sort of camera work seen in traditional films, including pans, zooms, and fades.
Flash uses a more old-fashioned system based around a stage. Rather like a theater stage, the audience view is fixed, and it becomes harder to create the sort of close edits and camera effects we are used to seeing in Hollywood films.
Adam mentioned this one day in passing, to which I replied, "OK. If Flash doesn't have a camera, let's make our own."
Although a virtual camera sounds like a world away from the simple particle effect we just looked at, the way I did it is almost exactly the same. Again, there is no complex code, and the time to develop the camera was insignificant. It will, however, most likely save Adam literally days in some of his longer animations, because the alternative to a scripted camera is to simulate the camera pans, fades, and zooms using only tweens, and this can take a very long time to set up or change.
Adam sent me the animation in Figure 7 to illustrate the need for a virtual camera. The Flash stage is set up here to show a short scene in Adam's next production. The trouble is, he would like to create a number of camera movements and effects that are difficult with tweening. Although using embedded movie clips is one solution, the large number of separate animations needed in a typical animation make their use just as troublesome. We really need that Vcam to create a clean solution.
After some discussion (and a few failed trains of thought regarding what a Vcam should look like and do), we settled on the following implementation.
The Vcam will appear in the authoring environment as a rectangle that defines the Vcam viewfinder. You can download the source FLA for this animation here. Note that if you test the FLA, you will see the best results if you publish to the browser rather than view the result in the authoring environment (text movie will not cut out the content that appears outside the viewfinder, whereas the final effect when seen in a browser does). See Figure 8.
All the animator has to do to use the camera is to tween the viewfinder around the stage. In the final animation, the code inside the camera component scales and pans the stage such that only the content within the viewfinder is seen. See Figure 9a.
The Vcam is nothing more than a simple component -- a rectangle with a short script attached to its first keyframe.
Here's the code that drives the camera:
As well as zooming and panning, we decided it would be cool to have some way of
applying video transitions to the final content, allowing the camera to add fade effects as
well as color tints (tinting can be important in adding ambience to an animation).
Although using the color class in Flash can be daunting, the way the camera does it
makes it very easy -- all the animator has to do is apply a color tween to the camera, and
the following line (first line of
When the camera is no longer needed, the animator can delete it from the timeline. The
code uses the event that occurs when a movie clip is removed in this way (onUnload) to
cause the stage to be returned to the normal size. This is performed via the function
It cannot be understated how useful we found the virtual camera in creating Flash animations that have the sort of pace and movement associated with mainstream cartoons and live-action movies. Although it may seem like a minor piece of code to a scripter, it is something that many animators have always found missing in Flash.
Of course, that's not a problem, because the Flash environment not only allows you to create your own content-creation building blocks, but in most cases, almost requires you to create them.
Finally, it is worth noting that, unlike a real camera, our virtual camera allows you to create distorted viewfinders. These result in stretched animations.
Although this may seem like a minor point to some (you can keep the viewfinder proportions the same throughout the animation if you hold down CONTROL every time you scale the camera with the scale tool), and a bug to others (it would be easy to add some code to the camera to make sure that the view was never distorted in this way), we left it in because it led Adam to a rather surprising hack: distorting an image as you zoom and pan can give a very cool, faux 3D effect.
This works because the distortion makes the scene appear as if it is mapped onto a curved 3D surface rather than onto a flat plane.
So, in setting out to create a 2D virtual camera, we seem to have also stumbled onto a hacky 3D camera as well.
Also, I am working on integrating the camera as a custom tool in the Flash toolbar (via JSAPI), given that it is proving to be such a useful animation tool. It just goes to show how far Flash can be altered through scripting to make the process of creating content easier for both scripters and non-scripters.
Although many people wonder how the Flash authoring tool is used to create some of the Flash content out there, one of the big secrets is the way the authoring tool can be used to create building blocks to aid development via components, as well as optimize the authoring environment in other ways.
Despite the fact that many non-scripters find ActionScript off-putting, there is nothing wrong with that, and it shouldn't prevent them from gaining the advantages of scripting. ActionScript can easily be written and encapsulated within the workflow such that a designer or animator doesn't have to know about the code at all.
The creation of tools to change your workflow is not only useful in accelerating content creation, but can often throw up totally new techniques, as illustrated by our stumbling on a 3D-camera effect whilst developing a 2D camera. Working with Flash is like that!
Sham Bhangal is an author of and contributor to numerous books on Flash and ActionScript, including Foundation ActionScript for Flash MX, Flash MX Designer's ActionScript Reference, and Macromedia Flash MX Upgrade Essentials.
Return to the Web Development DevCenter.
In June 2004, O'Reilly Media, Inc., released Flash Hacks .