Home > Articles

  • Print
  • + Share This
This chapter is from the book

Animation, Navigation and Interaction

You can create animation as a Dynamic HTML (DHTML) file, an animated GIF, or an SWF.

DHTML is the most limited in what it can do: just vary the style, position, and display of HTML elements, such as text or graphics. On the positive side, it uses standard JavaScript, so most modern browsers support it with no problems. Use Dreamweaver behaviors to apply DHTML without having to write any JavaScript.

Animated GIFs present even fewer potential compatibility problems—even older browsers support them. On the downside, GIF is a bitmap format; you can't use vector graphics to reduce file sizes. (Vectors define shapes using compact mathematical formulas, whereas bitmaps define the properties of each and every pixel, one by one. Bitmaps are often ten times as big as equivalent vectors. On the other hand, the Flash SWF vector format requires the Flash plug-in in the browser.) Files get bigger as animations get more complex, so animated GIFs are generally used only for very simple animations.


For more on the differences between vector and bitmap graphics, see " Understanding Vector Graphics," page 352, in Chapter 16, "Working with Vector Graphics and Bitmaps."

You can create animated GIFs in either Flash or Fireworks. Flash's "timeline effects" feature makes it ridiculously easy to apply effects such as bouncing, fading in or out, and exploding. Tweening offers a nearly infinite variety of animation possibilities, but does involve a learning curve, even with Macromedia's intuitive visual tools. (If you use ActionScript to apply animation, it is lost in animated GIFs.)

Fireworks animation is limited to varying the position, rotation, scale, and opacity of an object over a particular number of frames—much more limited than Flash, but very easy to use.

The SWF file format, which uses vector graphics, can reduce file sizes, so it is the usual choice for more complex or longer animations. On the other hand, people viewing your site must have the right version of the Flash Player installed in their browser.

Flash was created for making SWFs, and it offers stunning breadth and power for creating animations, using not just visual tools and tweening (as with animated GIFs), but also ActionScript. Almost anything that can be done on the Web today can be done with Flash and SWFs. The learning curve can be lifelong. On the other hand, you can also do the same easy yet impressive things with SWFs that you can with animated GIFs, and the file sizes will likely be much smaller.

For FreeHand and Fireworks, SWF output is just a feature, not the central purpose of their existence. Fireworks offers the same position-rotation-scale-opacity functionality for SWFs as for animated GIFs. FreeHand enables you to use the Animate Xtra feature to animate the position of objects, and you can also apply some simple ActionScript to do things such as go to a particular frame and either stop or continue play, load movies or sounds, drag and drop movie clips, or go to a particular URL. These actions are more navigation/interaction than animation.

As with animation, there's not much you can't do with Flash when it comes to navigation and interaction. Flash supports drag-and-drop "behaviors" that enable you to easily create buttons to do things such as jump to a URL, play a sound, go to a particular frame of a movie, and pause a video stream—all without writing a line of ActionScript.

By dragging and dropping Flash components onto the Stage and setting a few parameters, you can create professional-quality user interface elements such as scrolling list boxes, drop-down menus, and combo boxes. Components can save you a lot of work. Most of them are useful only in the context of an ActionScript program.

  • + Share This
  • 🔖 Save To Your Account