Dreamweaver MX: The Missing Manual

Animating Layers

Nobody looks at banner ads anymore, but how about a banner ad that flies across the top of the page—towed by a tiny airplane graphic? The latest crop of Web browsers lets you move layers around the screen to produce exciting animated designs.

This kind of dynamic behavior generally requires a deep knowledge of JavaScript and Cascading Style Sheets, as well as the experience and patience to deal with the differences between the various browser brands.

All of the programming skill and Web development experience needed to create animations is built right into Dreamweaver. With Dreamweaver’s Timeline tools, you can create elaborate and complex animations, and even time-based actions like automated slide shows.

Tip

If you’ve used Macromedia’s animation-driven programs, Flash and Director, picking up Dreamweaver’s tools is a snap. Dreamweaver uses an animation interface very similar to those programs’.

Understanding Animation

Programming animation requires that you specify two things: movement and time. Imagine a ball moving across the screen; it takes the ball two seconds to travel from the left side to the right. A Web browser creates animation by drawing the ball in several different positions over several fractions of a second, so that you see the effect of smooth motion across the screen.

Each of these drawings occurs in a moment of time, referred to as a frame —the fundamental building block of computer (or Disney) animation. A collection of frames makes up a timeline. ...