SAN FRANCISCO (04/19/2000) - After the initial blush of creating your first Web site wore off, you realized that the picture of your cat on the sofa didn't make a compelling presentation. You tried the conventional tricks for spicing up a Web page: background images; colored text; and of course, animated GIFs.
But now you're ready to give your visitors a more engaging experience. To really bring your Web site to life, nothing beats motion-graphics flying across the screen, scrolling text, and images fading in and out. Though animating an otherwise lifeless Web page may seem daunting, Macromedia Inc.'s Flash 4 can make the job easier with tools that do the most tedious and time-consuming parts for you.
Macromedia built Flash with the Web in mind; it generates small file sizes that perform well in almost all browsers. The Flash format-designated SWF-offers several advantages over other animated-graphics file formats. For starters, Flash is vector based. Unlike bitmapped images such as GIFs and JPEGs that must store information for every single pixel of a graphic, vectors use a mathematical formula to describe the shape, color, and position of an image.
This takes up much less room. And smaller file sizes mean even complex animations will download quickly.
Flash files require that visitors to your site have the free Flash Player installed before they can view a Flash movie. But once they have it, you can rest assured that everyone is seeing the same thing. Unlike other Web animation tools, such as Dynamic HTML, which don't work with early browsers and often act inconsistently in later browsers, movies you create in Flash look and behave the same in every browser and platform that supports the plug-in.
A Moving Experience
In the early days of animation, illustrators had to draw tens of thousands of frames by hand to produce a feature-length animated movie-an excruciatingly tedious process. Senior artists didn't bother with this grunt work. They drew only the crucial frames needed to portray the action-for instance, a picture of an archer before he draws his bow and a picture after he has pulled the arrow back. Junior illustrators drew all the intermediate frames needed to simulate the motion. This process became known as tweening.
Thankfully, we no longer need an army of junior animators to take care of the tiresome drawing details. Flash has its own set of tweening tools that make creating animations for the Web a cinch. Although you can draw animations frame by frame in Flash, not only is it time-consuming and monotonous but it also significantly increases the file size of your final animation because Flash must store much more information. With tweening, you need to define only a beginning frame and an ending frame for your animation, and Flash creates all the frames in between.
Flash offers two kinds of tweening: motion tweening and shape tweening. As its name suggests, motion tweening animates an object's movement-a baseball thrown across the screen, for example. But motion tweening does much more than that.
It can change other attributes of a drawing, including size, rotation, skew, color, and opacity, even when the object doesn't move. For instance, you can use motion tweening to make a white cat gradually turn black.
Shape tweening, on the other hand, animates the transformation of one object into another-a cat that morphs into a pumpkin, for example. But shape tweening can also incorporate motion. When you transform a cat at the bottom left of the screen into a pumpkin at the top right, you use the shape-tweening tool. To keep these two types of tweens straight, just focus on your primary goal. If you want to animate changes in one drawing, use motion tweening. If you want to change one drawing into another, use shape tweening.
Before you can create your own online animations, you have to acquaint yourself with Flash's terminology and tools. The main work area is called the stage. You can use Flash's drawing tools to create graphics and text on the stage, or you can import graphics from other vector-based programs such as Macromedia FreeHand and Adobe Illustrator. You can also import bitmapped-image files such as PICTs and JPEGs into a Flash movie, but you'll sacrifice the small file sizes of Flash's native vector-based drawings.
Above the stage is the timeline, which displays the layers and frames of your Flash movie. Layers appear on the left side of the timeline and-like layers in programs such as Adobe Photoshop and FreeHand-they organize your images. In Flash it's especially important to keep objects on separate layers so that you can move them independently in your animation. Frames are what make a movie-a single frame is just one image, but a series of frames is the sequence of images that make an animation. The timeline lays out frames horizontally from left to right. When you click on a frame in the timeline, you see the stage at a particular moment in the movie.
Flash lets you control how many frames per second (fps) your movie plays. The higher the fps rate, the smoother the animation. By default, Flash sets the frame rate for its movies to 12 fps-a good setting for the Web, as it balances smooth animation with reliable playback.
Unlocking Keyframes While frames make up your movie, you can adjust the images only in a special kind of frame: the keyframe. Keyframes can control any kind of change in your animation, including an object's movement, shape, size, and color. A simple animation, such as a ball rolling across the floor, might require only two keyframes-one for the beginning and one for the end. But to make the ball bounce back and forth across the screen while changing colors might require a dozen or more keyframes controlling changes in direction, speed, and shade.
Size-Slimming Symbols Flash is able to maintain its fast downloads despite complex motion tweenings with the use of symbols, single objects such as text or drawings used multiple times in the same movie. Symbols don't add to the file size. When you motion-tween an object, Flash converts the image into a symbol and places it in the movie's library, a convenient storage space for repeated elements. When Flash needs to use the graphic again, it inserts an instance of the symbol.
Adding an instance to your movie doesn't change the movie's file size, because you're not adding the actual information for the drawing (all the lines, curves, and colors that make it up)-you're just adding a pointer to that information. For example, by turning a 2K bitmapped image of a star into a symbol, I could place a thousand instances of that star onto the dark nighttime background of my movie without increasing the file size.
Connecting the Dots
Tweening is the backbone of Macromedia Flash's animation power. Once you've mastered these basics, you can quickly develop complex animations that infuse life into a formerly flat, dull Web site. Try combining changes in a drawing's size, rotation, color, and transparency in one tween, or tween drawings on separate layers to animate many elements on the screen simultaneously. Tweening is as easy as letting Flash connect the dots.µ DAVE McFARLAND is a partner in SkyMind Development (http://www.skymind.com), a Web development company. He also teaches Web-site design at the Academy of Art College and the Center for Electronic Art in San Francisco.
Sidebar: Animation Alchemy
Shape tweening's magical formula saves you timeYOU MIGHT not have the power to turn a lump of coal into the Solid Gold Dancers, but with its handy shape-tweening tools, Flash 4 does. However, there are limitations -- shape tweening doesn't work with every type of image.
Flash's shape tweening supports only vector shapes, such as objects drawn with Flash's drawing tools or other vector-based illustration programs.
In this project, I used Flash's shape-tweening tools to transform a square into a star. I started with the opening image of a square against a distant mountain range. To control the elements independently, I placed each piece -- sky, ground, and square -- on a separate layer (represented by a horizontal bar in the timeline). (The final version of this Flash movie is available on Macworld's Web site at http://www.macworld.com/2000/06/create/.)1. You must first decide how long to make your movie by adding frames to the timeline. Let's say you want a fast animation, lasting only a second or so.
Since the Flash file is set to run at 12 fps (the default setting), the movie will require at least 12 frames. To add them, click on the timeline at frame 12 of the top layer and drag downward until you've selected frame 12 in all the layers. From the Insert menu, select Frame. This inserts frames from the beginning of the movie to the specified point.
2. Clicking on any of the newly inserted frames shows a duplicate of the original image. To change this image, you have to add a keyframe. Keyframes (indicated by a black dot in the timeline) are the only kind of frame you can alter; Flash controls the other frames. To add a keyframe to the end of the movie, click on frame 12 of the square layer and select Blank Keyframe from the Insert menu.
A blank keyframe removes the image that previously appeared on the layer -- in this case, the square. If your change requires altering the original image -- giving a monster a second head, for example -- you may not want to start with a blank keyframe. In that case, choose Keyframe from the Insert menu, and you'll have an editable copy of the previous image.
But since this project calls for an entirely new drawing -- the star -- a blank keyframe is the best choice. Then you just use the pencil tool to draw a simple star in the blank keyframe, and you've got the two shapes in place and ready for tweening.
3. To begin the metamorphosis, open the Frame Properties dialog box by double-clicking on the first frame of the square's layer. Select the Tweening tab and choose Shape from the pull-down menu to turn on shape tweening. Below this menu is the Blend Type option. This setting adjusts how Flash draws angles, corners, and lines in the tweened intermediate frames. If you're tweening shapes that have smooth curves, the Distributive option will preserve the curves of objects.
Since this project involves tweening two shapes with sharp angles and no curves, you should choose the Angular option, as it preserves corners and straight lines in intermediate frames. The Easing slider adjusts the speed of the animation's beginning and end: if you want the tween to begin slowly and end at a faster pace, set the slider to In. For the reverse effect, move the slider toward Out.
4. The tweened layer in the timeline now displays a solid line between the two keyframes, and it's green, indicating that the shape tween is active. You can play the animation to test how successful the tween was -- just press the return key. You can also select individual frames in the timeline to compare each step of the transformation. Unfortunately, this shows that the transformation is not very smooth: the square looks like a crumpled piece of paper as it turns into the star.
5. You can help Flash maintain a smooth transition by using shape hints. A shape hint tells Flash how to transform one shape into another by mapping individual points on the starting shape to points on the ending shape.
With the square in the first keyframe selected, open the Modify menu and select Add Shape Hint from the Transform menu. A red circle containing the letter A appears in the center of the square. (Flash labels hints alphabetically starting with A.) Move the hint to the upper left corner of the square. When the first hint is in place, return to the last keyframe and move the corresponding red-circle hint to the top left point of the star. The red circle turns green, indicating that the shape hint is complete. Repeat this process for the other three corners of the square. Shape hints work best placed in counterclockwise order, with the first hint beginning in the top left corner of the shape. After you've placed four hints on the square and the star, the animation tweens much more gracefully.
Sidebar: On The Move
Bring Web animations to life with motion tweeningANIMATION can be monotonous work. Fortunately, Flash 4's motion-tweening abilities will do most of the work for you. With motion tweening, you can easily animate changes in an object's position on the screen and its rotation, size, and even color and opacity. You need to define only the starting and ending points of your animation, and you can tell Flash to take care of the rest.
In the following example, I wanted a spaceship to zoom into the scene, turning and shrinking as it flies off into the distance. As with the shape-tweening project, I started by placing all of the illustration's elements -- hills, sky, stars, and UFO -- in their own layers for independent animation. (The final version of this Flash movie is available on Macworld's Web site at http://www.macworld.com/2000/06/create/.) 1. To send your UFO flying into action, you have to add some frames to the movie. To produce a 2-second animation at 12 fps, you need 24 frames. Once you've inserted the frames, you can play the movie by pressing the return key.
But since all 24 frames currently show the same image, nothing happens.
2. To move the UFO across the stage, you first need to indicate where the motion starts. In the timeline, select the first frame of the UFO layer and choose Create Motion Tween from the Insert menu. In the timeline, all the frames on that layer turn blue, and a dashed line appears. The blue indicates that those frames are part of a motion tween, and the dashed line means the tween is still incomplete--you've defined only the starting position of the UFO.
3. Next you must define where the animation should end. To make the animation span the entire 2-second movie, you must insert a keyframe in the final frame.
Click on frame 24 of the UFO layer and select Keyframe from the Insert menu. On the timeline, a solid dot appears in the frame, indicating that it's a keyframe. You'll also notice that the dashed line turns solid with an arrow at the end, telling you that the motion tween is complete.
At this point, if you preview the movie, you'll find that the UFO hasn't actually gone anywhere. To make it take flight, you have to alter the UFO's position in the second keyframe. Simply grab the UFO in the last frame and drag it to the new position. Flash redraws all of the in-between frames. Now when you play the movie, the UFO streaks diagonally across the screen.
4. Although the UFO now moves in the right direction, the animation still looks very flat. To spice things up, you can make the UFO seem to zoom past the viewer and recede into the distance. In a motion tween, you're not limited to moving an object across the screen. You can tween size, rotation, and color as well.
For this effect, you need to open the first frame in the UFO layer. The UFO graphic is automatically selected on the stage. First drag the UFO to the lower left edge of the movie, just outside the stage. Increase the UFO's size by selecting the Scale Modifier tool from the drawing tool bar. Eight square handles appear around the UFO's selection box; moving any of the four corner points resizes the UFO proportionally. To make the UFO rotate slightly as it travels across the night sky, select the Rotate Modifier tool. Drag one of the eight round handles that appear around the selection, and then rotate the UFO to about a 45-degree angle.
You can continue fine-tuning the animation by adjusting the UFO's flight pattern, size, and speed. Simply insert new keyframes at any point in the animation to signal a change.