Macromedia’s Flash and Adobe’s Live Motion have stolen much of the spotlight for animation. “Hey,” the programs tell you, “it’s easy!” Both these options require that the user has the Macromedia Flash player installed on their computer. But there is another way…

Macromedia’s Dreamweaver does support animation in a little known inspector call the “TimeLine Inspector”, which is shown below.

The Dreamweaver Timeline is the critical inspector for creating animation in a Web page.

Dreamweaver is able to create animation through clever use of JavaScript. Unlike Flash, which creates animation along Vector paths and timelines, JavaScript creates animation by plotting the location of an object in conjunction with time between each plot. At the bare minimum, any animation created in a Web page must have a start and an end point.

Animating From Point A to Point B

Let’s get started — we’ll create a simple animation. The most basic animation moves from one point on the screen to another. We’ll use this to help explain how the various animation tools in Dreamweaver work.

Begin by opening a new page in Dreamweaver and type your company name onto the page. We want the company name to animate onto the top of the page from the left hand border. For any animation to work, the content that’s being animated must be inside a Dreamweaver layer.

Select Insert — Layer, which will immediately add a rectangular layer to the page. The Properties Inspector changes to reflect the new layer’s properties. By default, the layer is called “Layer1”. You will find that if a second layer is added, the new layer will be called “Layer 2” and a third will be called “Layer3”. Each name is alphanumeric and contains no spaces. The name for a layer is very important, as it’s used as the reference point from which all animations will be created. It’s worthwhile to give your own name to a layer, so next, change the name of the layer in the Layers’ Property Inspector to “CompanyLogo”.

With the layer now named correctly, drag the text of your company name into the layer. This provides the basic setup for any animation. Anything you add to a layer can be animated, whether it’s text, images, plugins, forms or tables. If you want to include HTML in a layer, it can be animated too. Now let’s work with the Timeline Inspector, the core manager for animation.

Open the Timeline Inspector by selecting Window — Timelines. Alternatively, you can select SHFT+F9 (Windows) or CMD+F9 (Macintosh). If you’ve worked in Flash or Director you’ll recognize some of the features of the Timeline Inspector. To begin with, the Timeline is made up of two distinct parts: the layers upon which an element can be animated in time, and the Timeline’s commands along the top.

The commands control the speed of the animation, and some basic functions. Moving from left to right, the first set of commands indicates where you are in the animation. If you select either the right or left arrow, you’ll move the animation along one frame at a time. The frame number is highlighted in the box in between the navigation arrows. If you enter a specific frame number into that box, you’ll immediately be moved to that frame. Before you add an animation, the FPS (Frames Per Second), AutoPlay and Loop features are grayed out. Flash developers will be used to the FPS being 15, as this is the default speed for Flash movies, but this number can be increased to speed up the animation or decreased to slow it down. The AutoPlay checkbox will force an animation to begin playing when a Web browser loads a page. The Loop check box forces any animation to begin playing from frame 1 when it reaches the final frame.

A bold red line is, by default, rested on the first frame. The red line is a place-holder to show where in the animation you are currently positioned. Along the right hand side you’ll see a scroll bar that you can use to move between frames. Up to 32 separate animations can be managed simultaneously per timeline.

 But enough talk. Let’s create an animation.