Chapter 18. Animating Layers

CONTENTS

graphics/01icon01.gif

 

  •  How JavaScript Animation Works
  •  The Timeline Interface
  •  Animating Layers
  •  Animating Images
  •  Timelines and Behaviors
  •  Working with Multiple Timelines
  •  Summary

Probably the most glamorous and eye-catching DHTML effect is JavaScript-based animation of document contents. The concept of JavaScript animation is simple any page element that can have its properties altered by scripting can be animated by having its properties changed repeatedly over time. The actual JavaScript code required to create animations is complex enough to deter all but the most intrepid code writers. Luckily for the rest of us, Dreamweaver provides an intuitive and efficient interface for creating JavaScript animations and writes fairly robust cross-browser code to bring animated pages to life.

This chapter covers the Dreamweaver timeline interface for JavaScript animations and discusses how to create DHTML animations. You'll learn how to animate layer and image properties, how to execute behaviors over time, and how to integrate multiple timelines in one document. In this chapter, you also come up against the limits of DHTML animation, and learn ways to implement it wisely.

How JavaScript Animation Works

Before plunging into Dreamweaver timelines, tweening, and sprites, it's important to have a basic idea of how JavaScript animation works. From the previous chapters, you know how a JavaScript statement can alter the properties of a layer or other page element in reaction to some event. You also know that different browsers require different syntax to make this happen. For Internet Explorer, the following very basic function will move the layer on the page by changing its left property:

function moveLayer() { var pos1 = myLayer.style.left;  var pos2 = parseInt(pos1) + 20;  myLayer.style.left = pos2;  }

To animate the property change, the script must repeatedly call this function, with a time delay between each call. JavaScript's setTimeout() window method creates the time delay; by having the function recursively call itself using setTimeout(), the property will repeatedly change, creating animation, as follows:

function moveLayer() { var pos1 = myLayer.style.left;  var pos2 = parseInt(pos1) + 20;  myLayer.style.left = pos2;  window.setTimeout("moveLayer()",100);  }

After called, this function will move the layer myLayer 20 pixels to the right every 100/1000ths of a second, or 10 times a second.

Of course, to work properly across all browsers and platforms, this simple code must become much more complex and robust. For every page element being animated at once, a setTimeout() function must be called repeatedly. The browser must recalculate position and other properties and redraw the screen 10 15 times per second. Sophisticated JavaScript animations often require long, complex code to execute. As Figure 18.1 shows, complex animations can overwhelm the browser's capabilities, causing improper display and sometimes even crashing the browser entirely. The moral of this story is, treat JavaScript animations with respect. Dreamweaver makes the entire process easy for you, but it's never easy for the browser.

Figure 18.1. When good animations go bad an example of what can happen to the browser display when a JavaScript-based animation overwhelms it.

graphics/18fig01.gif

Note

graphics/01icon07.gif

IE/Mac is notorious for breaking under the weight of complex JavaScript layer effects, especially animations.

The Timeline Interface

Dreamweaver enables you to create and manipulate JavaScript animations within a timeline interface, using the Timelines panel (accessible from Window > Others > Timelines) and the Modify > Timeline menu for creating and manipulating timelines. Timeline interfaces are not the only way to approach computer animations, but they do provide an easy-to-grasp, visual representation of the time dimension that many developers are already familiar with from animation programs such as Director, Flash, and Fireworks.

The Timelines Panel

Figure 18.2 shows the Timelines panel and its various elements. The timeline looks something like a spreadsheet, showing units of time as columns and each animated element as a row. Note that, though the figure shows the panel in its undocked state, if you're using Dreamweaver/Windows with the integrated workspace it might initially appear docked at the bottom of the application window.

Figure 18.2. The Timelines panel with interface elements annotated.

graphics/18fig02.gif

Frames and the Playback Head

Each time unit, or column in the spreadsheet, is a frame. Like the frames in a movie reel, each frame represents how the stage (the HTML document) will look for that unit of time. The playback head (red vertical line) determines which frame is currently being shown. The animation effect is created by moving the playback head through the frames in sequence, at a set rate of frames per second (fps). For JavaScript animations, which will be played back through a web browser, the fps should be kept at 15 or lower, as this is the best speed most browsers can handle. (In contrast, film animations play at about 24 fps, and video animations at about 30 fps.)

Note

graphics/01icon07.gif

So, what happens if you set your fps higher than the browser can play back? The browser will try its best to play the animation as quickly as it can, probably not any faster than 15 fps. For very complex animations, browsers might not even be able to keep up with that speed. Complex animations lead to slow, sometimes lurching playback.

Sprites

Each page element to be animated appears in the timeline as a purple bar called a sprite. (That bit of terminology is borrowed from Director.) The sprite's length determines the duration of the object's animation on stage. The scripting tools in Dreamweaver enable you to animate layers and images; therefore, each sprite in a Dreamweaver timeline is a reference to one of the document's images or layers.

Keyframes and Tweened Animation

Two more concepts are borrowed from animation programs and adapted for use with JavaScript animation. In animation terminology, a frame is a unit of time that passes during the animation. A keyframe is a frame in which some element onstage changes (appears, disappears, changes its properties, and so forth). Tweening means creating two keyframes showing distinct property states of a page element and telling the computer to interpolate the change in property across the intervening (or in-between) frames. Circles within a sprite represent keyframes in the Dreamweaver timeline.

For Flash and Director Users

graphics/01icon07.gif

If you're used to working in true animation programs such as Flash or Director, you need to unlearn a few things. Remember, the Dreamweaver timeline interface for animation is merely a convenience to make authoring more intuitive; it does not represent how the JavaScript animation is built, the way a Flash or Director timeline would. In particular, note the following:

  • The Dreamweaver JavaScript-based timeline must be explicitly started, unlike other timelines that automatically play unless told to stop.

  • A sprite's length on the timeline does not indicate when it appears or disappears from the stage (that is, the document), as it does in Flash and Director. Instead, the length of the sprite indicates when the object's animation begins and ends. To create the illusion that an animated layer is appearing and disappearing, you need to alter its visibility property (as discussed later in this chapter). To create the illusion that an image is appearing or disappearing, you need to change its src to an invisible image (as discussed later).

  • Unlike Flash or Director, no "master timeline" governs the entire document presentation. Multiple timelines can coexist, to control different page elements at different times.

  • Because tweening is presented for ease of authoring only, a tweened animation does not provide the same efficiency in JavaScript that it does in Flash or Director. (That is, tweened animations are not necessarily less processor-intensive or more memory-efficient than frame-by-frame animations.)

  • Unlike Flash but like Director, if tweening is possible between two properties, it occurs automatically between keyframes. Tweening doesn't need to be turned on, and it can't be turned off. Also like Director rather than Flash, keyframes exist only within sprites. It's not possible to select an empty frame in the timeline and convert it into a keyframe.

The Timelines Menus

In addition to the interface of the Timelines panel itself, Dreamweaver offers a variety of commands for manipulating animation timelines. The main menu containing these commands is the Modify > Timeline submenu. The same commands are also available from the Timelines panel's options menu and from the timelines contextual menu, accessed by right-clicking (Windows) or Ctrl-clicking (Mac) within the Timelines panel. Throughout this chapter, instructions will refer to the Modify > Timeline submenu. If you prefer using the panel or contextual menus, feel free to choose the same commands from those locations instead of from the Modify menu.

Animating Layers

Are you ready to start some animation? Think of this next section as Animation 101.

Animating Layer Position

Most people, when they think of animation, think of things moving around on the page. Although this isn't the only kind of animation you can create, it's useful and straightforward, and serves as a good introduction to working with the timeline. Animating a layer's position involves three main steps:

  1. Adding the layer to the timeline.

  2. Establishing its starting position (at the first keyframe).

  3. Establishing its ending position (at the second keyframe).

Adding a Layer to the Timeline

To be animated, a layer must be present on the timeline as a sprite. Create a layer, access the timeline (choose Window > Timelines), and do one of the following:

  • Drag and drop. In the Document window, grab the layer by its edge or its tab, and drag it into the timeline. Figure 18.3 shows this happening. This doesn't disturb the position of the layer in the document, but it does create a sprite representing the layer in the timeline.

    Figure 18.3. Using drag and drop to add a layer to the timeline.

    graphics/18fig03.gif

  • Using a Menu Command. In the Document window, select the layer. Choose Modify > Timelines > Add Object to Timeline. Figure 18.4 shows this happening.

    Figure 18.4. Using a menu command to add a layer to the timeline.

    graphics/18fig04.gif

Creating Tweened Motion

After the layer is in the timeline, note that its sprite begins and ends with a keyframe (a tiny circle icon in the sprite). Clicking in the middle of the sprite selects the entire sprite, but clicking either keyframe selects only that keyframe. Animated motion in the Dreamweaver timeline is created by specifying a starting and ending position and letting Dreamweaver tween the intermediate positions.

  • To establish the starting position: In the timeline, select the first keyframe of the sprite. In the Document window, drag or nudge the layer to its starting position; alternatively, in the Property inspector, change the L and T properties to reposition the layer.

  • To establish the ending position: In the timeline, select the second keyframe of the sprite. In the Document window, drag or nudge the layer to its starting position; alternatively, in the Property inspector, change the L and T properties to reposition the layer.

That's it! If you correctly selected the individual keyframes before repositioning your layer, and you have the layer selected, you will see a thin gray line in the Document window, indicating the path the tweened motion will follow. Dreamweaver will automatically supply the tweening between the two positions.

Figure 18.5 shows a sprite correctly set up for tweening between two keyframes. The timeline shows the sprite with its two keyframes. In the Document window, the motion line indicates how the layer will animate.

Figure 18.5. A Dreamweaver document set up for tweened layer animation.

graphics/18fig05.gif

Changing the Speed of the Animation

The number of frames involved and the frame rate, or fps, determines animation speed. The simplest way to slow down or speed up a particular animation is to alter the sprite length so that it occurs over more or fewer frames. To do this, just grab and drag the final keyframe of the sprite.

Although it is also possible to change speed by changing the frame rate, remember that the fps governs the quality of the animation as much as its speed. The lower the fps, the more jerky the animation will become. The higher the fps, the smoother the animation but browsers cannot usually keep up with speeds higher than about 15 fps. Figure 18.6 shows different ways of changing an animation's speed.

Figure 18.6. Timelines showing a tweened animation being slowed down by lengthening the sprite and by lowering the frame rate.

graphics/18fig06.gif

Creating Complex Motion Paths

Dreamweaver tweens motion in a straight line between two keyframes. Every change of direction in the motion path requires a new keyframe.

To add a keyframe to a sprite, do one of the following:

  • Hold down the Ctrl key (Windows) or the Cmd key (Mac) and position the cursor over a sprite. The cursor turns into a tiny circle. Click on the sprite to add a keyframe. Figure 18.7 shows a keyframe being added to a sprite using this simple, quick method.

    Figure 18.7. Ctrl/Cmd-clicking to add a keyframe to a sprite in the timeline.

    graphics/18fig07.gif

  • Select the sprite. Move the playback head to the frame where you want the keyframe inserted. Choose Modify > Timeline > Add Keyframe.

To remove a keyframe from a sprite, select the keyframe to remove. Choose Modify > Timeline > Remove Keyframe.

Figure 18.8 shows an animation with a fairly complex motion path and the keyframes needed to create it. Note that after keyframes have been added within a sprite, they can be dragged back and forth to adjust the timing of the motion.

Figure 18.8. The Timelines panel, showing a complex motion tween consisting of several keyframes.

graphics/18fig08.gif

Making the Animation Play

When you add sprites and keyframes to the timeline, you're telling Dreamweaver how to write the JavaScript function that will control your animation. Like all JavaScript functions, however, the animation function has to be called before it will execute. You can choose to have the animation play as soon as the page loads. You can also choose to have the user start the animation by clicking or rolling over a button, or performing any other standard event.

To set the animation to play as soon as the page loads, in the Timelines panel select the Autoplay option (see Figure 18.2). When you do this, the Play Timeline action is being added to the document using an on onLoad event so that the timeline will start where the page loads.

To set the animation to play only when a user triggers it, perform the following steps:

  1. In the Timelines panel, make sure the Autoplay option is not selected.

  2. Elsewhere in your document, create an image, text link, or form element that will trigger the animation.

  3. With the triggering object selected, open the Behaviors panel and choose Timeline > Play Timeline from the plus (+) list.

Starting and stopping the timeline is discussed in greater detail later in this chapter.

Looping the Animation

By default, the timeline will play through once and stop. To make an animation loop, select the Loop option in the Timelines panel. When you do this, Dreamweaver might open an alert window explaining that a new behavior is being added to the timeline. You'll also see an indicator in the B (behaviors) channel of the timeline, representing the looping behavior. (refer back to Figure 18.2). Looping and other timeline behaviors are discussed in more detail later in this chapter.

Managing Sprites

Sprites hold animation instructions in the form of keyframes. Each sprite is associated with an object (for example, a layer) that it animates. After you get used to these concepts, you can be sneaky and manage your sprites efficiently.

  • To change the object that a sprite animates: Select the sprite and choose Modify > Timeline > Change Object. This can be especially useful if you've already created a complex motion path in a sprite and don't want to recreate it just because you've changed your mind about what layer you want to animate.

  • To duplicate a sprite: Select the sprite and choose Edit > Copy, then Edit > Paste. The duplicated sprite will appear immediately following the original in the timeline. You can then move it to where you want it. Used in conjunction with changing a sprite's target object, this means you can create a complex motion path and then use that path animate to multiple layers in your document.

  • To remove a sprite entirely from the timeline: Select the sprite and choose Modify > Timeline > Remove Object. Note that this doesn't delete the layer the sprite is animating. It only deletes the animation instructions.

Note

graphics/01icon07.gif

When you delete a page element that is associated with a sprite, that sprite disappears from the timeline.

Exercise 18.1 Animating a Title Banner

This exercise adds a snazzy slide-on title banner, as well as some floating balloons, to a home page. You put the title in its own layer and have it slide onto the page after the rest of the document has loaded. Then you'll animate the balloons floating from the bottom of the page to the top. Along the way, you'll experiment a little with the Timelines panel.

Before you begin, copy the files from the chapter_18 folder on the CD to your hard drive. Define a site called Chapter 18, with this folder as the local root folder.

  1. Start by opening party_home.html and examining its contents and structure. The page layout is created from five layers one for the title banner, one for the text, and three more containing balloons. Access the Timelines panel and you'll see that none of these layers is set up for animation yet. Browse the page and see that all five layers just appear, in position, when the page loads.

  2. Prepare the title layer for animating by dragging it into the timeline to create a sprite for it (refer back to Figure 18.3). To give yourself an idea how sprites and timeline work in Dreamweaver, try this: Move the sprite to the right so that it begins at around frame 16 (about 1 second into the animation). Then preview the page in a browser. Especially if you're used to animating in Flash or Director, you might expect that the title layer won't appear until about 1 second after the text layer. But that's not what happens. Instead, the page will load and behave exactly as it did before you created the sprite. Remember, sprites in Dreamweaver timelines control only animation timing. They don't make page items appear and disappear.

  3. Animate the title layer so that it slides from bottom to top as the page loads. Do this by selecting the first keyframe of the sprite and then, in the Document window, dragging the layer down to the bottom of the page. Note the gray motion path line that appears as you move the layer. (If that line doesn't appear, check the Timelines panel and make sure you have selected only the first keyframe of the sprite, not the entire sprite.) If you want the layer to slide straight up, tweak the layer's opening position until the gray line is perfectly vertical. Remember, you also can use the Property inspector or your arrow keys to tweak the layer into position.

    Note

    graphics/01icon07.gif

    Here, as always when dealing with layers, it's crucial that you grab and move the layer itself and not the image inside it. Always drag layers by their edges, or by the little tab in the upper-left corner. If you drag from the center, you risk dragging the image out of the layer.

  4. Trigger the animation to play automatically by selecting the Autoplay option in the Timelines panel, then preview in a browser.

  5. Sliding from bottom to top isn't that exciting. A nicer effect is to slide in from "offstage"-left to its proper position. To make this happen, all that's needed is to select the first keyframe of the sprite and adjust the title layer's position. The tricky bit here is that you can't drag the layer to position it offstage. Instead, use the Property inspector to reassign the L (left) and T (top) values. The new T value for the first keyframe should match the T property from the final keyframe. (You want the layer to slide sideways only, not up and down.) For the new L value, assign a negative number that's greater than the layer's width. Figure 18.9 shows the new values being entered to create the horizontal slide effect.

    Figure 18.9. Animating the title banner so it slides in from offstage-left.

    graphics/18fig09.gif

  6. Animate the balloons next. Each balloon should float slowly up from the bottom of the page to end up in its position as part of the banner. Following the steps outlined already, add each balloon layer to the timeline and adjust the keyframes so that the balloons slide from below the bottom edge of the screen to the top of the screen. To make the balloons float up one at a time, stagger the sprites in the timeline. Figure 18.10 shows the final timeline to create this animation.

    Figure 18.10. The Timelines panel for party_home.html file, showing sprites for the animated title banner and floating balloons.

    graphics/18fig10.gif

  7. Finally, how about adding a few keyframes to the balloon sprites so that they don't float straight up but waft in a slight breeze as they go? For each balloon sprite, do this:

    • Lengthen the sprites to slow down the motion of the rising balloons.

    • Ctrl/Cmd-click to add an extra keyframe or two in the sprite. Space the extra keyframes evenly along the duration of the sprite for a nice, smooth motion.

    • Select each new keyframe, and in the Document window scoot the balloon layer to the right or left slightly. The gray motion path line should arc slightly to show the altered movement.

Figure 18.11 shows how one of your altered sprites and motion paths might look for a wafting balloon effect. (To see a completed version of the file, find party_home.html in the chapter_18/completed folder of the CD.)

Figure 18.11. The timeline and Document window for party_home.html, showing extra keyframes in the balloon sprites to create more complex motion paths.

graphics/18fig11.gif

Recording Layer Animations

The more complex a motion path, the more keyframes it requires. If you want to animate a layer along a complex motion path, you might not want to add all those keyframes individually. For such occasions, you can show Dreamweaver what motion path you want to create and have the program automatically create all necessary keyframes. This is called recording a motion path.

Basics of Recording Motion Paths

This procedure is slightly different from the steps outlined earlier, because you don't begin by adding the layer to the timeline. Instead, begin by positioning the layer in the Document window where you want it to be at the start of the animation. Then follow these steps:

  1. In the Document window, select the layer.

  2. From the Timelines panel options menu, choose Record Path of Layer; or right-click (Windows) or Ctrl-click (Mac) to access the Layer contextual menu and choose Record Path.

  3. In the Document window, drag the layer along the path you want it to follow in the animation. As you're dragging, you'll see the dotted gray line of the motion path appear behind you. When you're done, release the mouse button and a new sprite (with all keyframes in place) should appear in the timeline.

Figure 18.12 shows an animation path being recorded and the resulting sprite that is added to the timeline. Note how many keyframes have been added to reproduce the complex motion.

Figure 18.12. Recording a motion path, and the sprite created with this method.

graphics/18fig12.gif

Strategies for Recording Motion Paths

Although the basic steps for recording the motion path are simple, the procedure can produce unwanted or unexpected results if you aren't careful:

  • How to begin and end: The recording doesn't begin until you start dragging the layer; after it begins, it ends when you release the layer. If you accidentally deselect the layer after you've chosen the Record Path of Layer command, your recording session has ended. Depending on when you accidentally deselected, you might end up with a truncated animation or no animation at all. If this happens, remove any incomplete sprite from the timeline (select the sprite and choose Modify > Timeline > Remove Object); then choose the Record Path of Layer command again and start the recording process over.

  • Timing is important: After you've started dragging and Dreamweaver has started recording, the speed of your motions will be translated into the timing of the animation. Quicker movements will result in keyframes placed close together, sometimes one right after the other; slower movements will create keyframes placed further apart. Remember, you can always adjust the timing of the animation after it has been recorded by moving keyframes closer together or farther apart.

  • Drag slowly, add speed later: The more slowly you drag when creating the motion path, the more you'll be able to control it; but you'll probably end up with an animation that's just much too slow. That's okay! After you have finished recording, you can adjust the overall speed of the animation by dragging the last keyframe of the sprite to the right (to slow things down) or left (to speed things up). Dragging the last keyframe will stretch or compress the entire sprite, without distorting the relative timing between keyframes any more than is necessary.

    Tip

    graphics/01icon07.gif

    If you want to adjust the final keyframe in a sprite without altering any other keyframes in the sprite, Ctrl-drag (Windows) or Opt-drag (Mac) when repositioning the keyframe.

     

  • Reshape or reposition the motion path, if needed: To reshape the motion path, go to the Timelines panel and select an individual keyframe; then, in the Document window, reposition the layer. To move the entire animation without reshaping the path, go to the Timelines panel and select the entire sprite by clicking between any two keyframes. Then, in the Document window, reposition the layer. The gray motion line should move without reshaping.

Exercise 18.2 Animating a Complex Motion Path

In this exercise, you create another animated title banner for a web page. Instead of having balloons floating gently (and simply!) up the page, however, this page will include a firecracker hurling in from the right, along a curly-cue flight path.

If you haven't done so already, copy the files from the chapter_18 folder on the CD to your hard drive. Define a site called Chapter 18, with this folder as the local root folder.

  1. Start by opening party_surprise.html and examining its contents and structure. You'll see that it's built similarly to the party_home.html page used in the previous exercise, with a banner layer sliding in from the left. Preview the page in a browser and you'll see that the banner animation has already been created. The little firecracker graphic has not yet been animated. You want the firecracker to fly in from "offstage"-right, doing a little loop-the-loop before landing in its position at the left side of the banner. You'll use a recorded motion path to make this happen.

  2. To prepare for the animation, open the Timelines panel if it's not already open, and make sure you either have all panels docked (Windows integrated workspace only) or position all free-standing windows and panels so that you can see the upper half of your page in the Document window as well as the Timelines panel. Remember, don't add the firecracker layer to the timeline Dreamweaver will do that for you when you record the motion path.

  3. Position the cracker layer where you want it to begin its animation, as far to the right as you can see and about halfway down the page. Make the Document window as wide as you need it to be, to scoot the cracker beyond the page contents to the right.

    Tip

    graphics/01icon07.gif

    To reposition the playback head without selecting a sprite, click in the row of frame numbers above the sprite area of the timeline.

  4. In the Timelines panel, position the playback head on the frame where you want the animation to start (frame 15 is a good choice, so the cracker animation won't start until the banner animation has finished). Then access the panel menu and choose Record Path of Layer.

  5. In the Document window, drag the cracker layer along a path similar to that shown in Figure 18.13, ending up in the upper-left corner of the page. For best control, drag slowly but evenly. Remember, timing can always be adjusted later. After you have finished, release the mouse; recording will stop automatically.

    Figure 18.13. The party_surprise.html page, recording the "cracker" layer's motion path.

    graphics/18fig13.gif

  6. Refine the animation path as needed, which might involve the following:

    • If the path looks good, but the cracker ends up in the wrong position, move the entire path. In the Timelines panel, click between keyframes in the fire cracker sprite (this should select the entire sprite); then move the playback head to the final frame (so that you can see where the cracker should end up); then, in the Document window, move the cracker layer until it looks good.

    • If the path looks good, but it's going too slowly, find the last keyframe in the sprite and drag it to the left to make the sprite shorter. If you compress the sprite until it consists only of keyframes, and the animation still moves too slowly, remove some of the internal keyframes (select each keyframe to be removed and choose Modify > Timeline > Remove Keyframe) so that you can compress it further.

    • If the internal timing or positioning is off, select and adjust individual keyframes.

  7. You'll probably want to adjust the overall timing of the page animation so that the cracker hurls into place after the banner has slid into position.

Figure 18.14 shows how the final timeline for this animation might look. To see a completed version of the file, find party_surprise.html in the chapter_18/completed folder of the CD. (Would you like the cracker to spin while it's coming in? That's a little harder to achieve. You'll tackle that later in this chapter, in Exercise 18.4.)

Figure 18.14. Timeline for the party_surprise.html page.

graphics/18fig14.gif

Animating Other Properties of Layers

When you animate a layer's position, what you're actually doing is changing its left and top properties over time. While people generally think of animation as involving motion, left and top position aren't the only layers properties that can be animated. Any property of a layer that can be controlled through scripting can, theoretically, be controlled over time to create an animation. You can use the Dreamweaver timeline interface to alter width, height, z-index, and visibility. Changes in width and height will even partake of tweening, making the layer appear to grow or shrink as the animation progresses, although these effects will work properly only in IE4+ and NN6+.

Basics of Animating Layer Properties

The procedure for altering width, height, z-index, and visibility over time is basically the same as that for altering position, as follows:

  1. Start by adding the layer to the timeline, using one of the methods outlined earlier in this chapter.

  2. In the Timelines panel, add any extra keyframes to the sprite, as described earlier.

  3. Select a keyframe where you want the property change to occur.

  4. In the Layer Property inspector, change the desired property. The width and height properties also can be changed by dragging the layer to resize it in the Document window.

Strategies for Animating Layer Properties

Be aware of the following when using the timeline to animate layer properties:

  • When changes will occur: Changes to visibility and z-index will occur on the specified keyframe. Changes to width and height will be tweened from previous values.

  • Browser compatibility issues: Changes to width and height will show up only in IE4+ and NN6+. Neither NN4.x nor Opera supports changing these properties.

  • Clipping values: Although it is possible, using scripting, to alter the clipping values of a layer, the scripting created by the Dreamweaver animation timeline doesn't support animation of this property change.

Exercise 18.3 Animating a Title Banner's Dimensions and Visibility

This exercise creates a variant of the sliding banner animation created in Exercise 18.1. Instead of creating a title banner that slides on, as you did in that exercise, here you create a solid color banner that grows from nothing to full width. When the banner is at full size, the title pops into visibility on top of it, completing the effect.

If you haven't done so already, copy the files from the chapter_18 folder on the CD to your hard drive. Define a site called Chapter 18, with this folder as the local root folder.

  1. Start by opening party_cakes.html and examining its structure and contents. You'll see that the title banner is built from two layers an empty banner layer with a colored background and a title layer containing a graphic with transparent background so the banner layer shows through. The candle graphic in the upper left is in its own layer, as is the page's main text block. None of these layers has been added to the timeline for animation.

  2. You want the title, banner, and candle layers to be invisible when the page loads. Use the Layers panel or Property inspector to set the visibility property of each layer to Hidden.

  3. As soon as the page loads, you want the banner layer to become visible but only as a thin vertical strip at the left edge of the document. You then want the layer to animate to its full width, all the way across the top of the page.

  4. To prepare the layer for animation, add it to the timeline as a sprite, using any of the methods outlined earlier in this chapter, and enable the timeline's Autoplay option.

    To create the banner animation, give the sprite the following keyframes, with the following properties set:

    • Keyframe 1 (the first frame of the sprite). Set the W value to 10. Leave the visibility at Hidden.

    • Keyframe 2 (the second frame of the sprite). Leave the W value at 10. Set the visibility to Visible.

    • Keyframe 3 (the last frame of the sprite). Set the W value to 600. Set the visibility to Visible.

    Figure 18.15 shows the proper structure for the sprite. With this setup, the sprite should become visible at its second frame and then tween its width from 10 to 600 pixels. Before proceeding to the next step, make sure this animation effect is working properly. (Remember, the effect will show up only in IE4+ and NN6+.)

    Figure 18.15. The banner sprite for party_cakes.html, showing settings for a layer that will start out skinny and invisible and end up full-width and visible.

    graphics/18fig15.gif

  5. After the banner has grown into position, the title should pop into visibility. To accomplish this, add the title layer to the timeline as a sprite. As is shown in Figure 18.16, the new sprite can begin and end with the banner sprite. Set the following keyframes and properties for the title layer:

    Figure 18.16. Creating the title and candles sprites for party_cakes.html.

    graphics/18fig16.gif

    • Keyframe 1 (the first frame of the sprite). Make sure the visibility is set to Hidden.

    • Keyframe 2 (the last frame of the sprite). Set the visibility to Visible.

  6. The candles should appear after the title has appeared. To create this animation effect, add the candles layer to the timeline. Set its sprite to end a few frames after the title layer ends. Set its keyframes and properties to match those of the title layer (Hidden and then Visible). Figure 18.16 shows this sprite in place.

That's it! Preview your page in a browser to make sure it animates correctly, with everything growing or popping into position at the desired time. (To see a completed version of the file, find party_cakes.html in the chapter_18/completed folder of the CD.) Don't forget, this effect will not work in all browsers. For alternative strategies that are more browser-compatible, see the section on "Animating Behaviors" later in this chapter.

Animating Images

In addition to animating layer properties, you can use the Dreamweaver timeline interface to animate the src property of images. Any named image, whether or not it is in a layer, can be used for animation.

Basics of Animating an Image's src Property

The basic procedure for animating images is the same as that for animating layer properties, as follows:

  1. Select the image to be animated and add it to the timeline using one of the methods outlined earlier (drag it into the Timelines panel, select Modify > Timeline > Add to Timeline, and so on). The image will be represented on the timeline as a sprite.

  2. Add as many keyframes as desired to the sprite, by Ctrl/Cmd-clicking or using one of the other methods outlined earlier.

  3. Select the keyframe where you want the image src to change.

  4. In the Property inspector, choose a new src for the image.

Figure 18.17 shows the proper setup for animating an image using this method.

Figure 18.17. Animating an image's src property over time, using the timeline.

graphics/18fig17.gif

Strategies for Animating Images

Here are a few items to be aware of when using the timeline to animate images:

  • Name your images: Only named images can be animated. Before attempting to animate an image, select it and use the Property inspector to give it a name. As with all names intended for use by scripts, the name must be one word only and contain no special characters.

  • Layers aren't necessary: Images do not need to be placed in layers to have their src properties animated. (See the sample in Figure 18.17.)

  • Only the source file can be animated: The src property is the only property of an image that can be animated in this way. To create the illusion of a picture growing, shrinking, or rotating, you'll have to animate between several separate source files, each with the same dimensions but containing different versions of the picture. To animate an image's position on the page, place the image inside a layer and animate the layer (like you have been doing in the exercises).

Note

graphics/01icon07.gif

If all you need is a simple automatic slide show effect separate images replacing each other in sequence an animated GIF is a much simpler solution than JavaScript animation, but it does limit you to using GIF images. If you want to create a slide show comprised of JPG images, use the Dreamweaver timeline as described here.

Exercise 18.4 Animating Images in an Animated Title Banner

This exercise builds on the animation created in Exercise 18.2. For that animation, you made a firecracker loop across the page to land on top of the title banner. Now you will spiff up that animation so that the firecracker looks like it's spinning as it flies and explodes on impact.

If you haven't done so already, copy the files from the chapter_18 folder on the CD to your hard drive. Define a site called Chapter 18, with this folder as the local root folder.

  1. Start by opening the party_surprise.html file you created in Exercise 18.2. If you didn't finish that exercise, find and open party_surprise.html in the chapter_18/completed folder.

  2. Although you could create multiple, rotating versions of the cracker picture and use them to build an animated "spin" effect, it's simpler to use an animated GIF that shows a spinning cracker. This much animation can be done without using the timeline at all. In the Document window, select the crackerpic image and change its src to cracker_spin.gif. (You can browse to this file; it's in the chapter_18 folder.)

  3. To create the "exploding-on-impact" effect, use timeline animation. Add the crackerpic image to the timeline using one of the methods outlined earlier. Note that although the cracker layer has already been added to the timeline, the image itself must be added separately. Figure 18.18 shows this happening.

    Figure 18.18. The timeline of party_surprise.html, showing the crackerpic image and the layer containing as separate sprites in the timeline.

    graphics/18fig18.gif

  4. Make the image sprite begin and end at the same time as the cracker layer sprite. (This isn't necessary, but will help you synchronize the timing between layer movement and image properties.)

  5. In the timeline, select the final keyframe of the crackerpic sprite and change the src property for the image to cracker_open.gif. (This file also is in the chapter_18 folder.)

Try out your animation! If all went as planned, the cracker should spin (slowly) as it flies into position and then change to a static "burst" image when it lands on the banner. To see a completed version of the file, find party_surprise_2.html in the chapter_18/completed folder of the CD.

Timelines and Behaviors

In addition to straightforward animation effects, timelines can be combined with behaviors to create complex interactive animations. Timeline frames can contain behaviors that will be triggered when the playback head reaches them. And timelines can be started, stopped, and have their looping controlled interactively through Timeline behaviors triggered by user events (such as onMouseOver or onClick) or window events (such as onLoad).

Animating Behaviors

Just as you can use the timeline to change image and layer properties at specified times, you can set any Dreamweaver behavior to execute at a certain time by attaching it to the timeline. (Flash users: This is similar to using frame actions, except that no keyframes need be set.) Referring back to Figure 18.2, note the channel labeled B. This is the behavior channel. Any Dreamweaver behavior can be attached to any frame in this channel, and will execute when the playback head passes that frame.

Adding a Behavior to a Timeline

The procedure for attaching a Dreamweaver behavior to a timeline frame is basically the same as the procedure for adding a behavior to any page element. Follow these steps, as illustrated in Figure 18.19:

Figure 18.19. Adding a behavior to a frame in a timeline.

graphics/18fig19.gif

  1. Open any document that contains a timeline. Open the Timelines panel and the Behaviors panel, and either dock them (Windows only) or arrange them so that you have a clear view of both.

  2. In the Timelines panel, click in any frame in the B (behaviors) channel to select it. The frame will highlight to show that it is selected.

  3. From the plus (+) menu, choose any behavior. Enter data into the behavior's dialog box and click OK, as you normally would when attaching a behavior to an image, text link, or other page element.

  4. After you have finished, examine the Timelines panel. In the B channel for your chosen frame, an icon appears indicating that a behavior has been added (see Figure 18.19).

Editing Timeline Behaviors

After you've created the timeline behavior, you can change its parameters any time, the same as you would with any behavior. Follow these steps, as shown in Figure 18.20:

Figure 18.20. Editing behaviors that have been attached to timeline frames.

graphics/18fig20.gif

  1. In the Timelines panel, select any B channel frame that shows a behavior icon.

  2. The Behaviors panel will now show all behaviors attached to that frame, using the onFrameN event handler. (Note that this is not a real JavaScript event handler; Dreamweaver shows it this way only to help the authoring process.)

  3. In the Behaviors panel, double-click the behavior to change its parameters; or select the behavior and click the minus sign (-) button to remove it entirely.

Exercise 18.5 Adding a Behavior to an Animation Timeline

Any behavior can be added to a timeline, as long as it's appropriate for your page. For this exercise, you create another animated opening banner similar to the one created in Exercise 18.4. For this exercise, however, instead of changing layer visibility, you'll use the Show/Hide Layers behavior to reveal the banner. The advantage of using this method over the method in the previous exercise is that this animation will work in all 4+ browsers.

If you haven't done so already, copy the files from the chapter_18 folder on the CD to your hard drive. Define a site called Chapter 18, with this folder as the local root folder.

  1. Open the party_activities.html file and examine its structure and contents. The sliding banner animation has already been added to the timeline. The streamers should be invisible until the main banner has slid into place, which means that your job for this exercise is to hide and then show the streamers layer, using a timeline behavior.

  2. Using the Layers panel or Property inspector, set the streamers layer's visibility to Hidden. (Because the layer should start out hidden, you don't need a behavior to hide it it's more efficient to establish visibility as an HTML attribute than to create it with scripting.)

  3. Open the Timelines and Behaviors panels, if they're not already open.

  4. In the Timelines panel, go to the B (Behaviors) channel and select a frame a few frames after the banner has finished sliding on.

  5. In the Behaviors panel, from the plus (+) menu choose Show-Hide Layers. Set the behavior to show the streamers layer. Figure 18.21 shows this behavior being applied.

    Figure 18.21. Adding a Show-Hide Layers behavior to the timeline of party_activities.html.

    graphics/18fig21.gif

  6. Try the new animation in various browsers. It should animate properly in all browsers that support layers, including NN4+ and Opera 5.

  7. To adjust the timing of the animation, try moving the behavior to a different frame in the B channel. To do this, just select the behavior's frame and drag left or right to a new frame.

To see a completed version of the file, find party_activities.html in the chapter_18/ completed folder.

Controlling Timeline Playback with Timeline Behaviors

As described earlier in this chapter, timeline animations are built from JavaScript functions, and like all JavaScript functions they must be triggered by some event before they will play. When you enable Autoplay in the Timelines panel, you're creating code that will trigger the animation to play onLoad, which means as soon as the page loads. But that's not the only event you can use. You can use any of the standard event triggers onMouseOver, onClick, and so on to tell your timeline to start, stop, or go to a specific frame based on browser or user action. Timeline playback is controlled by the Play Timeline, Stop Timeline and Go to Timeline Frame behaviors, all located in the Behavior panel's actions menu under the Timelines submenu (see Figure 18.22).

Figure 18.22. The Behaviors panel, showing the Timeline submenu of behaviors.

graphics/18fig22.gif

The Play Timeline Behavior

The Play Timeline behavior starts a timeline playing from its current frame. When you choose Autoplay from the Timelines panel, this behavior is automatically added to the <body> tag of your document, to be triggered onLoad. But you don't have to start your animations onLoad. If you disable Autoplay so your animation doesn't start onLoad, you can place a "Start" button, or image, or text link, in your document and use the Behaviors panel to assign the Play Timeline behavior to that element, to be triggered onClick, or onMouseOver, or on any event those items will support.

The Stop Timeline Behavior

As its name indicates, the Stop Timeline behavior stops playback of a timeline (or all timelines) at the current frame. The browser will remember this current frame as long as the page is loaded in memory. If a timeline is stopped and then told to play again, it will begin playing from the current frame.

Note

graphics/01icon07.gif

Don't get tangled up in your stopping and starting! If a timeline that has not been set to loop stops at its final frame, and then another event triggers the timeline to play, the timeline will attempt to play starting from that final frame. But since there is no looping, and this is the end of the animation, there are no frames left to play! It will seem as though the behavior is broken, because no animation will happen.

The Go To Timeline Frame Behavior

The Go To Timeline Frame behavior sends a timeline's playback head to a specified destination frame. What the playback head does when it gets to that frame depends on whether Autoplay, Looping, or the other Timeline behaviors are also controlling this timeline. Possible results include:

  • If the timeline is stopped when the Go To Timeline Frame behavior is triggered (for example, if Autoplay is not enabled and no other triggers have called Play Timeline), the playback head will move to the destination frame and stop.

  • If the timeline is already playing when Go To Timeline Frame is triggered (for example, if Play Timeline has been executed and Stop Timeline has not), the playback head will move to the destination frame and continue playing.

  • If the playback head is not moving because it has reached the animation's final frame and looping is not enabled, the timeline is officially still playing. When Go To Timeline Frame is triggered, the playback head will move to the destination frame and continue playing.

Controlling Timeline Looping.

Looping occurs when the Go To Timeline Frame behavior is triggered from within the timeline itself (from a frame in the Behaviors channel) and is configured to send the playback head to a frame before the frame containing the behavior. When the playback head reaches the frame containing the behavior, it will automatically be bounced back to the destination frame. Because behaviors attached to timeline frames will only be triggered if the timeline is playing, and because a playing timeline will always continue playing after going to the destination frame, the playback head will continue playing after it reaches the destination frame. Because the destination frame is earlier in the timeline than the frame calling the Go To Timeline behavior, the playback head will eventually again run into the behavior, and will again be bounced back to the destination frame. In other words, it will loop.

You can add looping to a timeline in one of two ways:

  • by selecting the Timelines panel's Loop option.

  • By selecting a frame in the timeline's B channel and using the Behaviors panel to attach the Go To Timeline Frame behavior to that frame.

In fact, when you select the Loop option in the Timelines panel, Dreamweaver adds a Go To Timeline Frame behavior to the frame following your animation's final frame, set to loop back to frame 1 (see Figure 18.23). No matter which of these two methods you use to create your timeline looping (manually setting up the behavior or using the Timelines panel's Loop option), after it's in place it's a regular Go To Timeline Frame behavior. To edit it, select the B channel frame that contains it and, in the Behaviors panel, double-click on its name to open the Go To Timeline Frame dialog box.

Figure 18.23. Editing a timeline's looping.

graphics/18fig23.gif

A few notes about configuring looping using Go To Timeline Frame:

  • There's no reason you need to loop all the way back to frame 1. You just need to loop back to a previous frame in the animation. (If you send the playback head forward in the animation, that's not looping!)

  • If you leave the Loop input field empty, the animation will loop forever. If you fill in a numeric value, it will loop only that number of times.

Note

graphics/01icon07.gif

By definition, a looping behavior must be triggered from within the timeline that's being looped. Even though you can attach the Go To Timeline Frame behavior to any page element, if you try to enter a value into the loop field as you're configuring that behavior, you'll get an error message.

Working with Multiple Timelines

If you think having one timeline is fun, guess what? You can have more than one! Each timeline in a Dreamweaver document controls one animation. For more complex documents, you might want to include several animations, each triggered by a different event. To support this, Dreamweaver allows multiple timelines to be defined for each document. You might, for instance, want one animation to play when the page loads, and another to play when the user rolls over or clicks a button. You might even want one animation for each of several navigation buttons. Each timeline operates independently of the others. Two or more timelines can even be used to control the same page element (layer or image) but be triggered by different events.

Adding a Second Timeline to a Document

Every Dreamweaver document starts out with one timeline Timeline1 already set up in the Timelines panel. That's why, if you only need one timeline for a document, you don't have to create one before dragging sprites to the Timelines panel. To add more timelines, follow these steps (see Figure 18.24):

Figure 18.24. Adding a second timeline to a document.

graphics/18fig24.gif

  1. Open the Timelines panel, if it's not already open, and choose Modify > Timeline > Add Timeline. A new, empty timeline will appear in the Timelines panel, with the default name Timeline2.

  2. (optional) Repeat this procedure to create additional timelines. Each new timeline will be added with incremental names (Timeline3, Timeline4, and so on).

Managing Multiple Timelines

Extra timelines require extra management tools. You can rename them, copy and paste animations between them, and (of course) delete them.

  • To switch between timelines: Use the pop-up menu in the Timelines panel's upper-left corner to edit and view different timelines.

  • To rename any of your timelines: Choose it as the active timeline and either enter a new name in the Timelines panel's Name field or choose Modify > Timeline > Rename Timeline.

If you rename a timeline after having created behaviors that refer to it (Play Timeline, Stop Timeline, Go To Timeline Frame), you'll need to amend those behaviors to refer to the new name. For each behavior, open it from the Behaviors panel and select a new target timeline. (You might have to wade through a few error messages as you do this, as Dreamweaver lets you know that the original timeline name no longer exists.) Note that this only applies to behaviors you've created yourself. Autoplay and Loop, if enabled in the Timelines panel, will update automatically to reflect the new name.

  • To move or duplicate sprites between timelines: Select the sprite you want to move or duplicate and choose Edit > Copy. Switch to the timeline you want the sprite copied to, and choose Edit > Paste. If you are moving instead of duplicating, return to the original timeline and delete the original sprite (select the sprite and choose Modify > Timeline > Remove Object).

  • To remove a timeline: Make it the active timeline and choose Modify > Timeline > Remove Timeline. Note that this doesn't delete any objects from your document! It only removes all animation instructions contained in the timeline.

Exercise 18.6 Adding Multiple Timelines to a Document

This exercise builds on the PartyTime Activities page you started in the preceding exercise. In addition to the animated banner you have already added to the page, you want each of the other illustrations (clown, game pieces, party favor) to be hidden offstage-left until the user interacts with the related text link. To do this, you need three additional timelines one to be triggered by each text link. All exercise files can be found in the chapter_18 folder on the CD. If you haven't yet completed Exercise 18.5, find and open the party_activities.html file in the chapter_18/completed folder.

  1. Open party_activities.html and examine its contents. The text portion contains three links Clowns, Games & Toys, and Party Favors. Each of those links matches one of the pictures (each in its own layer) at the left of the page. The goal is to position each layer offstage-left and have it slide into view when the user clicks, or rolls over, the appropriate text link.

  2. Start with the clown. To create a new timeline for the clown, open the Timelines panel; from the panel menu, choose Add Timeline. When the new timeline appears, change its name to clowntime.

  3. Drag the clown layer onto the timeline. The clown should start offstage-left and then slide into partial view, pause for a moment, and then slide back offstage. To create this effect, you need a total of four keyframes (see Figure 18.25). Tweak the timing and positioning until you like it.

    Figure 18.25. Adding the clown layer to the clowntime timeline. Each keyframe contains a different left (L) value for the layer.

    graphics/18fig25.gif

  4. This animation will be triggered when the user rolls over the Clowns text link in the main text layer. First, make sure the Timelines panel does not have Autoplay enabled for this timeline. Then select the text link. In the Behaviors panel, click the plus (+) button and choose Timeline > Play Timeline (see Figure 18.26). In the dialog box that appears, choose Clowntime from the Timelines pop-up menu. After you have finished, change the default event in the Behaviors panel from onClick to onMouseOver.

    Figure 18.26. Attaching the Play Timeline behavior to the Clowns text link.

    graphics/18fig26.gif

  5. Try your animation in the browser! Mousing over the text link should result in the clown peeking out and then retreating. There's still one problem, however. The effect works only once. The second time the user mouses over the text link, nothing happens. This is because the clown's timeline has already finished playing, and is not set to loop.

    To solve this problem, add two behaviors to the timeline. First select the Loop option, to add a Go To Timeline Frame behavior to the end of the animation. Then set the timeline to stop on the frame immediately preceding the loop. Do this by selecting the B channel frame immediately preceding the frame containing the looping behavior. In the Behaviors panel, click the plus (+) button and choose Timeline > Stop Timeline. In the dialog box that appears, choose to stop the clowntime timeline. What's going to happen here? The first time the animation is triggered, it will stop at your stop action frame. The next time it's triggered, it will continue playing from that frame which will take it to the frame containing the loop command, which will send it back to the beginning. Figure 18.27 shows the correct setup to stop the timeline.

    Figure 18.27. The clowntime timeline, revised to stop and loop so it can be triggered repeatedly.

    graphics/18fig27.gif

Optional: If you're up for a challenge, set up the other two illustrations on this page to animate when the user interacts with the associated links. You can set them up to match the clown animation (slide out onMouseOver, slide away onMouseOut), or create your own different animation. To see a completed version of the file, find party_ activities_2.html in the chapter_18/completed folder of the CD.

Note

graphics/01icon07.gif

Note for Flash/Director users: Because there are no frame labels in the Dreamweaver JavaScript-based timeline interface, the Go To Timeline Frame behavior must always refer to frame numbers.

Summary

In this chapter, you have seen how the Dreamweaver timeline interface makes it possible to create robust, cross-browser-compatible JavaScript animations efficiently. The timeline interface is, of course, only a convenience for authoring purposes. JavaScript animations will never display as smoothly, or achieve the complexity, available using dedicated animation formats such as Flash, Director, or QuickTime. But thanks to Dreamweaver, you can integrate animation effects seamlessly into your web pages, and your visitors won't need plugins to take advantage of them.

CONTENTS


Inside Dreamweaver MX
Inside Dreamweaver MX (Inside (New Riders))
ISBN: 073571181X
EAN: 2147483647
Year: 2005
Pages: 49

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net