Articles of Interest

Creating Streaming Flash Animations - A real life example
by Vera Britto

This article covers a real life example of developing interactive Flash animations to be streamed over the web to convey a message much more effectively than a simple static web page. It covers the challenge of having to develop 4 animations in a very short period of time. Flash (from Macromedia) is an animation/interactive authoring software. With Flash, developers can create animation, "hot spots" and text fields, track mouse activity, add sound, etc. that allow for games or web and presentation interfaces. It is particularly effective for developing animations and interactive interfaces on the web because it uses vector graphics which allows you to create files containing many images that download quickly, much faster than bitmap images such as JPEGs and GIFs. A vector image/animation is the mathematical description of shapes and colors and how they move in space. That's why the overall information is much more compact than a bitmap. Pixel size of images themselves are not an issue, it's the complexity of shapes that will increase download size in Flash.

I had to develop 4 animations for the Alliance to Save Energy, a coalition of organizations who promote the efficient and clean use of energy worldwide. ASE works to create awareness on ENERGY STAR products. ENERGY STAR products use less energy, are better for the environment, and consequently make utility bills smaller and these main points were the key messages in the project. 3 of the animations were similar and are described below. The fourth is a completely different idea, not a movie-like sequential animation, but a single frame environment, where the user interacts with different objects in a house (not covered in this article).

The person initially coordinating this project left the company and it was passed on to me, with the deadline a short 8 days away. There was no storyboard, but the client had already signed off on the copy, which consisted of three large blurbs of text for each animation. The gist of the animations was to have an "Appliance Olympics" with 3 races between "good" and "bad" appliances. The "good" ENERGY STAR appliances would win the races, while the "bad" appliances would tire out and collapse in a funny dramatic fashion. An illustrator had developed a background for a race track, a newscaster, and each of the "good" and "bad" appliance characters, which had been hand drawn on paper.

Given that there was so little time until the project deadline, I chose to keep the entire animation on a wide shot of the race track and not recreate the text to spread it out over the story line or have the luxury of creating a series of different camera angles. I divided the story into 4 scenes: an introduction with the start of the race, a mid race scene where the "bad" appliance starts to tire, a crossing the finish line and konking out of the old appliance, and a final scene with a podium where the winning appliance displays a big gold medal.

Given Flash's authoring environment, once the background and scene structure was developed for one race, it was easily replicated for the remaining 2 races. At every point of development I used several Flash techniques to automate animation and leave time to develop a few more important frame-by-frame animation sequences.

The background and each of the characters were imported into Flash. Most of them had to be redrawn or optimized with Flash techniques for better animation performance. Using Flash's symbol technique, every repeated shape was also optimized to decrease download time.

Using Flash's capability for creating movie clips, I created clips for the appliances running, for eyes blinking, mouth talking, sun shining, and other details that would give life to the scene but not take too much time to develop. A movie clip in Flash is a sequence of animation that you create only once and then place as many times as you need on the storyboard and it will repeat the animation enclosed in it.

From the static drawing of the newscaster, I created a side version that walked. This way I could bring him into and out of the scene, instead of just having a static figure in the frame. Since the look and feel of the illustrations was very cartoony, I wanted to use a similar animation style of the characters that would keep up with the fun visual style (similar to a Flinstone cartoon where the bodies remain static and the legs move very quickly when characters run).

Because I was also racing against time regarding the deadline, I made full use of several of Flash's capabilities to automate the animation and inbetweening work. I allotted as much time as I could to developing frame by frame sequences for the more "dramatic" fragments of the race: the start off, the tiring of the "bad" appliance, and the final collapse. For a fun effect of the "death" of the three "bad" appliances, the lamp burns out with a small explosion, the washer pirouettes, swishes over and spills out suds and water, and the fridge collapses down and several ice cubes fall from its freezer. Although these are simple ideas, they add a lively fun touch to each race.

One of the drawbacks of Flash and bandwidth restraints is its limitation regarding sound. I recommended to the client that we keep sound effects to a minimum since they were targeting a wide audience which would include slow connections and computers. We added a gun shot for the start off and the sound of running feet.

This is an example of how reasonably simple animations can add a great deal of spark to a web site. Compare these 3 animations to a static page with a few images and text blurbs. Which is more engaging? Which conveys the message more effectively?

Another advantage is that developing short animations can be accomplished in a relative short period of time and reasonable budget, from initial conception, story and character development, to final production and testing.

Obviously with more time and financial resources, characters and stories can be developed much more fully, but it's nice to know that smaller projects are quite feasible. Aside from the fact that Flash can also be output to a CD-Rom, one somewhat unknown feature of Flash is that one can also output it to video. Companies and organizations should exploit these new technologies as much as possible to achieve greater impact with their audiences.