Review of Macromedia Flash Web Animation Software
Macromedia Flash 3:
$299.00
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
800-457-1774
macromedia.com
Tom Connell does Web stuff, music and writing in Baltimore. Ideas or
questions? Contact him at tconnell@qis.net.
|
|
|
Vector Animation for The Web
Macromedia Flash 3
by Tom Connell
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.
I learned the essentials of Flash in under an hour, then put it through some
basic paces by creating the simple animated banner below, and a slightly more
elaborate splash page. Both were commissioned by Sassy's Worldwide
Dogbite Service.
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.
|
|
|
