Animation with the Timeline


As a leader in vector-based animation programs, Macromedia's Flash and Director applications provide developers with uncompromised flexibility. Developers create their animated applications, export them as either SWF or SWD files, and then import them into Dreamweaver so that they can be presented to users in a browser that has the appropriate plug-in pre-installed. Although Flash, Director, and Dreamweaver all provide the ability to work with animations, the difference in file output and complexity between the three programs is unmistakable. The one similarity these applications share, however, is frame-based animation controlled using a timeline.

Make no mistake about it, Flash and Director are still considered the standard for vector-based web animation. The only drawback to using these programs is that the user's browser must have the appropriate plug-in to see the specific animation. If the user's browser doesn't have the appropriate plug-in installed, the animation won't be visible, resulting in a negative user experience. Because the Dreamweaver timeline is essentially an interface for managing HTML-based animations, no plug-ins are required, thus it might be a viable alternative to technologies such as Flash or Director that require plug-ins.

Should you decide to use timelines for animations, consider the following guidelines:

  • Animated layers require Internet Explorer 4.0 or later and Netscape 6.0 or later. Although Netscape 4.x can be used, that version of Netscape uses its own propriety tags to generate layersthe <layer> and <ilayer> tags. If you code using these tags, the layers will not appear in specific versions of Internet Explorer or Netscape (Netscape 6.0+).

  • If you want to animate an object in your HTML document, it must first be inserted into a layer. Although Dreamweaver allows you to add images straight to the timeline, it does not allow you to animate objects within the timeline unless they're inserted into layers first.

  • When selecting a frame rate (discussed later in the chapter), keep in mind that this will be considered a "desired frame rate," which means that the animation will play at the specified frame rate or as close to that specified frame rate as possible. Ultimately, the frame rate depends on the power of the end user's machine.

NOTE

As mentioned, the timeline animates layers. Recall that layers are essentially <div> tags. So where's the DHTML in animating layers? The positioning of layers (which are HTML <div> elements) is controlled by CSS positioning attributes. JavaScript controls these positioning attributes, usually within a callable function in the <head> tag of the web page. Called repeatedly, JavaScript can move the layer by changing the positioning properties of the layer incrementally, decrementally, or both, resulting in an animation.


How the Timeline Works

In the previous section, I outlined a simple scenario in which we could allow the user to change the background color of a text box by simply clicking a button. In that example, the amount of code needed to achieve the goal is minimal. Animations however, require much more code because JavaScript must control the placement of the element pixel by pixel. The code can become extremely complex when animating curves, circles, and the like. Fortunately, the timeline does all the hard work for us. Not only does it allow you to edit and manage animations using a slick and intuitive interface, but regardless of the animation's complexity within the timeline, Dreamweaver writes all the code for us. All we have to do is add our elements to the timeline (contained within a layer), manipulate a few timeline elements, and we're done. With that said, let's review the various elements of the timeline and then discuss the process involved with adding layers to the timeline.

Elements of the Timeline

If you haven't done so already, access the Timelines panel by choosing the Timelines option from the Window menu or by pressing Alt+F9 in Windows and on a Mac. Pictured with more detail in Figure 17.1, a timeline in the Timelines panel seems overwhelming at first glance.

Figure 17.1. The timeline in Dreamweaver provides a central interface for adding, changing, and managing animations.


Observe the callouts in Figure 17.1 and refer to the following bullet points as explanations for each feature:

  • Options menu: Like all panels in Dreamweaver, you can access advanced features for interacting with the timeline as well as animations within the timeline from this menu. Most of the options in this menu can also be accessed directly by choosing Modify, Timelines.

  • Timeline menu: When working with animations in Dreamweaver, you're not limited to one specific animation contained within one timeline. Instead, the Timelines panel allows you to work with multiple animations contained within multiple timelines. If you are working with more than one timeline, you can access them from this menu.

    TIP

    As is the case with other timeline-based programs (Flash and Director), you might find that your project has grown far beyond the limiting scope of a single timeline. When this is the case, add a timeline to the Timelines panel (covered with more detail later). Doing this can help you manage complex animations and sets of animations.


  • Frame Navigator: As you'll learn in this chapter, animations are frame-based, meaning that each frame in the timeline represents a point in time for the animation. You can use the Frame Navigator as a way of jumping to the beginning, to the end, or to a specific frame within the animation.

  • Fps: Animations are frame-based, and each frame represents a point in time for the animation. But how do you control how fast an animation will play? The answer lies in the total frames per second (FPS) at which an animation should play. You can control the FPS, or speed of the animation, using this text box. The higher the number, the faster the animation. The lower the number, the slower the animation.

  • Autoplay: Enable this check box when you want your animations to automatically begin playing when the page loads for the first time and every time the page is refreshed in the browser.

  • Loop: Enable this check box if you want your animations to replay or loop once the animation reaches a conclusion.

  • Behavior Channel: As you'll see towards the end of this chapter, behaviors aren't limited to images and text. You can add behaviors to the timeline in an effort to control how the timeline should play. The Behavior Channel is where you'll want to associate behaviors with particular frames in the timeline. For instance, you might want a pop-up message to appear when the animation reaches a conclusion. To do this, you add the Popup Message behavior to the particular frame in the Behavior Channel where the animation ends.

  • Frame Numbers: This bar merely acts as a visual aid indicating the numeric value of the frame in relation to your animation.

  • Frames: Every square you see in the Timelines panel is a frame and represents a point in time for the animation. Think of these frames as cells within a film strip. Your film strip might contain thousands of still cells. Place that film strip containing those still cells in a reel-to-reel player, push the play button, and an animation is projected onto a wall.

  • Playhead: Like the playhead on a VCR, this bar allows you to click, hold, and drag sideways to move (scrub) through the animation, displaying the current frame's information in the page.

  • Layer Channels: Layers on your page are added to the timeline in one of these channels. In most cases, you'll work with one animation and therefore take advantage of channel 1. Of course, you're not limited to a particular channel number, even if you are working with only one animation.

TIP

It's important to understand that you're not limited to the number of animations that a single timeline can contain. For instance, if you wanted two animations to play at the same time in the same timeline, simply add a layer (representing the first animation) in channel 1 and then add a second layer (representing the second animation) to channel 2. Of course, it doesn't stop there; channels in the timeline are virtually limitless. You can add as many layers to multiple channels and create as many animations in a single timeline as your project requires.


Now that you have an understanding as to what the Timelines panel consists of, let's examine how layers can be added to a timeline.

Adding Layers to the Timeline

All animations created within a timeline begin with layers. Because Dreamweaver requires something tangible to manipulate, layers become the foundation for our animations and must be added to the document before other elements. To work with layers in a timeline, follow these steps:

1.

Create a new HTML document by choosing the New option from the File menu. Select the HTML option from the Basic page category and click Create.

2.

Insert a new layer on the page by choosing Insert, Layout Objects, Layer.

3.

Locate the fly.gif image located in the Assets folder in the Files panel and drag it into the new layer as shown in Figure 17.2.

Figure 17.2. Drag an image into the new layer.


4.

Click, hold, and drag the layer (complete with the image) into the first channel of the timeline. The result will resemble Figure 17.3.

Figure 17.3. Drag the new layer, complete with the image, into the first channel in the timeline.


As you can see from Figure 17.3, the layer is represented as a blue bar with dots on either side when it's in the timeline. The blue bar you're looking at represents the animation, and those dots on both ends represent keyframes. Let's discuss those terms now.

Frames, Frame Rate, and Keyframes

Three concepts are crucial when working with animations in the timeline: frames, the frame rate (measured in frames per second, or FPS), and keyframes. To define these concepts, remember what you accomplished in the previous section. You added a layer to the first channel of the timeline, which resulted in the addition of an animation that spanned a series of frames. Remember that the timeline is constructed of frames, each representing a point in time in the animation.

The frame rate governs the speed of the animation, or frames per second. If you want your animation to play for 3 seconds at 15 frames per second, you must extend the animation in the first channel so that the end of the animation stops at the 45th frame: 15 FPS * 3 seconds = 45 frames.

TIP

The default frame rate in Dreamweaver is 15. Even though video and film play at roughly 30fps and 24fps, respectively, these media don't have the bandwidth restrictions web pages do, and the manner in which film and video are viewed is more standardized. When animating for the web, your animation is at the mercy of the end user's machine. The processor speed, the speed of the Internet connection, how much memory is available, and the quality of the video card all play crucial roles in the appearance of an animation. So if you're developing on the latest and fastest computer, you're not getting an accurate representation about how your animation will look to the world. That's why it is especially important to test your page on several types of computers. If it chokes on a fairly standard computer, you might want to reconsider the frame rate of the animation, as well as the content you're trying to animate.


Keyframes, represented by the small white dots on both ends of the animation, represent a change within the animation. In our case, the first keyframe dot represents the start of the animation and the last dot represents the end of the animation. The frames between the two keyframes are known as in between frames.

Knowing what you know now of frames, frame rate, and keyframes, let's extend our animation so that it plays for 3 seconds at 15 FPS. To do this, simply click and hold the last keyframe in the animation and drag it to the 45th frame. The result resembles Figure 17.4.

Figure 17.4. Drag the last keyframe of the animation to the 45th frame. Doing this causes the animation to play for 3 seconds at 15 FPS.


NOTE

The default frame rate for our animation is 15 FPS. That's not to say that you're stuck with that frame rate. If you want your animation to play faster, change the value in the FPS text box to a higher number and press click Enter. If you want it to play slower, change the value to a lower number.


Creating an Animation

With the length and frame rate set for our animation, we're ready to actually create the animation. Remember that keyframes represent the points in time where our animation changes. Because this is the case, we'll want to select the last keyframe in our animation and position the layer in the Document window where we want our animation to end. To do this, follow these steps:

1.

Select the last keyframe in the animation in the timeline.

2.

Select the layer in the Document window and drag it to your right. A line should appear, similar to the one shown in Figure 17.5, representing the path that the animation will take.

Figure 17.5. A line is drawn representing the path the animation will take.


3.

Choose both the Autoplay and Loop check boxes.

4.

Save your work.

To see the animation, preview your page in the browser. The fly image should move from the left side of the screen to the right side of the screen and then back again.

As you can see, creating an animation is a fairly simple process. All you had to do was select the last keyframe and then position the layer in the Document window where you want the animation to end. All the in-between frames are created by Dreamweaver using a process known as tweening. Short for in-betweening, tweening is the process of generating intermediate frames between two keyframes, giving the appearance that the first frame evolves smoothly into the last frame.

Creating Curves in an Animation

Of course, your animations don't have to be as simple as the one you created in the previous section. Dreamweaver also allows you to specify curves in an animation to create a smoother and much more natural effect. To create a curve in your animation, follow these steps:

1.

Select the animations's 27th frame in the timeline. The animation will highlight, and the playback head should appear over the 27th frame.

2.

Choose Modify, Timeline, Add Keyframe. A new keyframe appears within the 27th frame, similar to Figure 17.6. Alternatively, select the Add Keyframe option by right-clicking the 27th frame in the animation and choosing the Add Keyframe option from the context menu. As a third option, select the Add Keyframe option from the Timelines panel Options menu.

Figure 17.6. Add a keyframe to the 27th frame of the animation.


3.

Keyframes mark a major change in the animation. With that said, select the keyframe you just added to the Timelines panel. Then select the layer in the Document window and drag it straight down. Dreamweaver tweens a smooth curve for the fly image to follow, as shown in Figure 17.7.

Figure 17.7. With the new keyframe selected, drag the layer straight down to create a smooth curve.


4.

Make sure that both Autoplay and Loop check boxes are checked.

5.

Save your work.

Preview the page in the browser by choosing the Preview in Browser option from the Document bar or by pressing F12. Your fly image should animate, curving straight down as it animates.

Managing Animations in a Timeline

Up to this point, we've discussed the basics of creating and working with animations. As we progress through the chapter, we'll discuss more advanced topics, such as recording the path of a layer, working with multiple timelines, and working with behaviors in conjunction with the timeline. Aside from those topics, however, Dreamweaver offers other options for managing objects within layers, layers within a timeline, and the timeline as a whole. Most of the options are similar and can be found in either the context menu that appears when you right-click the animation in the timeline, when you select the Timelines panel Options menu, or when you choose Modify, Timeline.

TIP

Depending on which method you use to access various options, the options might be named differently. Although the options perform the same task, they are named slightly differently to coincide with the selected object. For this reason, the option name is given in the following sections using both names that appear in their respective menus.


The options you can use to manage objects, layers, and timelines include the following:

  • Add Object/Add Object to Timeline: Use the Add Object option when selecting a layer or image in the Document window. Selecting this option creates an animation within the timeline. Select the Add Object to Timeline option from the context menu to add an object to the Document window, starting within a selected frame in the timeline.

  • Remove Object: Removes a selected object from the timeline. This feature works the same no matter what method you use to access the option.

  • Add Keyframe: Select this option to add a new keyframe to an animation in the timeline. The keyframe is added to the selected frame in the animation.

  • Remove Keyframe: Removes a selected keyframe from an animation in the timeline.

  • Change Object: Choose this option to replace the object in an existing animation with a different object. When you choose this option, the Change Object dialog box opens, allowing you to choose the replacement layer from an Object to Animate menu.

  • Add Behavior/Add Behavior to Timeline: Choosing either of these options forces the Behaviors panel to open, allowing you to add a behavior to the Behavior channel in the timeline. This functionality is covered with more detail later in the chapter.

  • Remove Behavior: Select this option while a behavior within the Behavior channel is selected to remove it.

  • Record Path of Layer: Discussed with more detail in the next section, choose this option to allow Dreamweaver to record a path and subsequently create an animation in the timeline; as you drag an object in the Document window, Dreamweaver records the path and creates the animation.

  • Add Frame: Choose this option to add a frame to the animation within the timeline. Alternatively, click, hold, and drag the last keyframe within the animation to add numerous frames at once.

  • Remove Frame: Choose this option to remove a frame from an animation within a timeline.

  • Add Timeline: As you'll see later in the chapter, you can use this option to add a timeline to the Timelines panel. Remember, the Timelines panel can contains as many timelines as your page needs.

  • Remove Timeline: Choose this option to remove a timeline from the Timelines panel.

  • Rename Timeline: Choose this option to launch the Rename Timeline dialog, which allows you to rename the selected timeline within the Timelines panel.

As you'll see, these options provide great flexibility when you're working with an animation in a timeline as well as with timelines as a whole.

Recording the Path of a Layer

One of the more interesting features of working with animations in Dreamweaver is the Record Path of Layer feature. You can use this option to have Dreamweaver automatically build an animation simply by recording the act of you dragging a layer in the Document window. To use this feature, follow these steps:

1.

Remove the existing animation from the timeline by right-clicking the animation in the timeline and choosing the Remove Object option from the context menu. The animation disappears from the timeline.

2.

Remove the loop behavior from the Behaviors channel by right-clicking the behavior and choosing the Remove Behavior option from the context menu. The behavior disappears from the timeline as the animation did in the previous step.

3.

Select the layer in the Document window and choose Modify, Timeline, Record Path of Layer.

4.

Click, hold, and drag the layer in the Document window, creating numerous circles, simulating the natural movement of a fly. When you've added a few circles, release the mouse. The animation path is created and will resemble Figure 17.8 in both the Document window and the timeline.

Figure 17.8. The Record Path of Layer option allows you to drag and record the path your cursor takes in the Document window.


5.

Increase the FPS to 50.

6.

Make sure that both the Autoplay and Loop check boxes are selected.

7.

Save your work.

Preview your work in the browser by choosing the Preview in Browser option within the Document bar or click F12. Watch the fly moving around the browser in a natural movement.

Managing Multiple Timelines

On rare occasions, you might find that managing multiple animations in one timeline instance is arduous at best. When this becomes the case, consider branching out of the restricting confines of a single timeline instance into two or more timelines. Remember that the Timelines panel is simply a container for timelines. The number of timelines you have within the Timelines panel is restricted only by the needs of your web page. To demonstrate how multiple timelines work in Dreamweaver, follow these steps:

1.

To add a second timeline to the Timelines panel, select Modify, Timeline, Add Timeline.

2.

The fly image and layer are still present in the Document window. Remember, the timeline only controls animations and has nothing to do with the content in the Document window. This way of thinking is contrary to programs such as Flash or Director, where an object in the workspace is directly represented by its instance in the timeline. In these programs, removing an object's instance from the timeline also removes the instance from the workspace. Knowing that, select the layer in the Document window and drag it into Timeline2 to create a simple 15-frame animation.

3.

Select the last keyframe in the animation and drag the layer to the 45th frame. Also, select the layer in the Document window and drag it from the left side of the screen to the right side of the screen to create an animation similar to Figure 17.9.

Figure 17.9. Drag the layer from the left side of the screen to the right side to create a 45-frame animation.


4.

Make sure that the Autoplay check box is disabled and that the Loop check box is enabled for Timeline2. If you enable the Autoplay check box and preview the page in the browser, the browser attempts to play both timeline instances at once, resulting in an undesired animated effect (unless you want two flies buzzing around at the same time).

5.

Save your work.

Preview the result in the browser by choosing the Preview in Browser option located in the Document bar (or by pressing F12). Notice that the animation in the first timeline plays while the animation in the second timeline doesn't play at all. To play the second animation, we can do one of two things: we can add a button complete with behaviors that controls which timeline to play (as explained in the next section). Alternatively, we can switch to the first timeline, disable the Autoplay option for that timeline, then switch to the second timeline and enable the Autoplay check box, resulting in the second timeline's animation playing instead of the first. To do this, follow these steps:

1.

With Timeline2 selected, enable the Autoplay check box.

2.

Switch to Timeline1 by selecting it from the Timelines menu similar to Figure 17.10.

Figure 17.10. Switch to Timeline1 by choosing it from the Timelines menu.


4.

With Timeline1 selected, disable the Autoplay option.

5.

Save your work.

Preview the result in the browser by choosing the Preview in Browser option from the Document bar. This time, the second timeline plays, resulting in an animation that flows in a straight line from the left side of the screen to the right. Of course, the process of getting the second animation to play instead of the first wasn't all that intuitive. In the next section, we'll review how behaviors can interact with timelines. Using behaviors, you can easily allow the user to choose which timeline to play. If you want both timelines to play simultaneously, just enable the Autoplay option for both timelines.




Macromedia Dreamweaver 8 Unleashed
Macromedia Dreamweaver 8 Unleashed
ISBN: 0672327600
EAN: 2147483647
Year: 2005
Pages: 237
Authors: Zak Ruvalcaba

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