In the beginning, there was blinking and scrolling text. Then came the animated GIF, squatting on the pages of many a Web tyro. The Neolithic era of Web animation quickly wore out its welcome, to be replaced by a number of competing and often incompletely implemented technologies. Java applets promised self-contained and intricate presentations that could run independently. But they were slow loading, tough to author, and many browsers refused to display them. JavaScript showed promise with image-swapping, pop-up, and color-changing functions but also suffered from non-compliance problems.
April 23, 1999
Macromedia's Flash was one of the first attempts to provide true animation capabilities to Web authors. Building on a base of multimedia designers who were familiar with the venerable Director authoring package, Flash's Shockwave vector animation format enticed cutting edge designers who wanted to perk up otherwise staid Web pages with sophisticated motion effects.
Now that the Shockwave plug-in is standard with newer browsers, "shocked" sites are popping up everywhere and Macromedia has now pretty much displaced its competitors. And with better streaming performance and improved authoring features, Flash has emerged as the animation package of choice for many Web designers.
Flash 3 is the latest version. New animation, playback and publishing features make it easier to produce rich content and complex animations and publish them to the Web in optimized form. It's a complete, object-oriented authoring tool for producing anything from animated banners and splash pages to complex, fully interactive multimedia presentations.
Flash's workspace is straightforward. The Stage is a resizable window for creating and positioning objects. A multi-layered timeline runs along the top. Much like tracks in an audio sequencer or multi-track recorder, each layer of the timeline contains and controls elements or groups of elements you want to control on the stage. All layers are synced to this common timeline, which is subdivided into frames. The default frame rate is 12 per second, but you can choose whatever rate you want. A floating transport control bar features standard play, stop, jump-to-start or -end controls. You can also advance or back up frame-by-frame. A suite of drawing tools - adjustable pencils and brushes, eraser, ink bottle, color filler and eyedropper, text formatter, scaling and skewing tools - allows you to create and modify text blocks, geometric shapes, and full-blown drawings. You can import images, audio and video files, and even other Shockwave movies. Bottom line: you've got everything you need here to start creating animated movies, frame by frame, scene by scene.
Elements you want to animate are stored as reusable symbols or symbol groups in a common library. Select a layer and drag these symbols onto the stage at whatever frame of the timeline you want them to appear. Each frame of the timeline represents a particular state for all the symbols on the stage - their positions, colors, shapes, actions attached to them. Say you wanted to fling a square from one side of the stage to the other: mark its starting position at keyframe x, jump to keyframe y on the timeline ("keyframes" are points at which objects change states or initiate actions), grab and drag the object across the stage. Play the movie from x and the square jumps over at y. Likewise, you could change the square to a triangle at the same points, or change its color.
You may want a smoother, more traditional animation. You could literally move the square frame-by-frame (designating keyframe after keyframe to describe its movement) but this would prove a bit tedious. Flash employs "tweening" to interpolate changes over time smoothly. Designate a starting and ending keyframe which correspond to the starting and ending state of the object, apply the tween to the frames separating them, and voila!! you've got smooth, animated motion. The square now slides smoothly across the stage, or morphs into a triangle, or fades in and out, or changes tint. You can also draw out complex paths (motion guides) for non-linear movement. You can very quickly build up pretty complex animations using multiple objects - shapes, images, text blocks - each of which can be choreographed independently along the common timeline.
You can also attach JavaScript-like actions to objects to provide a measure of control and interaction to the presentation. Typical would be attaching mouseover and onclick image changes or audio triggers to buttons. You can create and invoke elaborate pop-up menus, trigger scene changes, start other Shockwave movies, jump to URLs. The possibilities are manifold for creating fairly full-blown interactive presentations or tutorials designed to run on the Web.
You can test your movie from within Flash with the Bandwidth Profiler and get a look at what parts of the presentation are bandwidth-intensive at what time. You'll see the total size and kilobyte profile for each frame of the movie. This helps you optimize your presentation for the Web and takes some of the guesswork out of seeing where and how you might save some bytage.
When you're done, export your .fla file as a Shockwave movie or an animated GIF. If you're ready to publish to the Web, Flash 3 comes with a highly useful utility - Aftershock - which auto-generates the HTML necessary to display a Shockwave object on the Web.
For the banner, I first created a standard banner-size stage area where all the action would take place. I created the text elements in Flash, imported images of the dogs, then started manipulating and tweening them. In about an hour I had a full-blown banner ad that really bit. I exported it as a looping animated GIF and that was that.
The splash page was essentially the same process, with a bigger stage (the default 550 x 400 pixels), more elements, some fancier tweening. I also added sound effects - a background that ran the length of the movie and a frame-accurate insert effect at one keyframe. I created some resting and pushed-state buttons in PhotoShop, imported them, and attached audio clips and a replay scene action to one, a go to URL action to the other (it also could have been go the next scene, or launch another movie, or bring up a pop-up menu, or text-block, or bring on a new element). Being the Flash tyro I am, I was fairly pleased that I was able to do so much so quickly. There's real power here and more experienced Flashers have created some pretty wild effects and presentations.
Flash 3 is a new and improved version of the best program out there for creating animated Web content. The drawing and shaping tools are flexible and useful, the tweening for motion control, shape morphing and alpha effects flawless, and the frame-by-frame timeline rock steady for synchronizing everything. Once you've got the hang of the methodology it's easy to start creating animations. Highly sophisticated effects and elaborate presentations will take more time, but there's no great mystery to it. Aftershock makes it a cinch to get it up on the Web in good form. The manual, help and onboard lessons are thorough and clearly written, and there's a ton of online info, examples and tutorials available from both Macromedia and third parties.
Though not as powerful and flexible as Director - its massive and sophisticated big brother - Flash is ideal for producing animated Web content, where bandwidth and complexity dance a delicate tango. If you want to animate your Web site beyond the same old thing, get it.
Macromedia's Flash was one of the first attempts to provide true animation capabilities to Web authors. Building on a base of multimedia designers who were familiar with the venerable Director authoring package, Flash's Shockwave vector animation format enticed cutting edge designers who wanted to perk up otherwise staid Web pages with sophisticated motion effects.
