Adobe Dreamweaver CS3 Unleashed- P17

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

1.923
lượt xem 8
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe Dreamweaver CS3 Unleashed- P17: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why so many windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowing developers complete control when building websites and applications....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Adobe Dreamweaver CS3 Unleashed- P17

background color of a text box simply by 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 you are 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 an AP Element), manipulate a few timeline elements, and we're done. Next, let's review the various elements of the timeline and then discuss the process involved with adding AP Elements to the timeline. Elements of the Timeline If you haven't done so already, access the Timelines panel by choosing Window, Timelines. Pictured with more detail in Figure 16.1, a timeline in the Timelines panel seems overwhelming at first glance. Figure 16.1. The timeline in Dreamweaver provides a central interface for adding, changing, and managing animations. [View full size image] Observe the callouts in Figure 16.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, Timeline. 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 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 when the animation reaches a conclusion. Behavior Channel— As you'll see toward the end of this chapter, behaviors aren't limited to images, text, or form objects. 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. Note Some features in the timeline will automatically add behaviors for you. The Autoplay and Loop check boxes, for instance, add behaviors to the timeline that tell the browser to play the animation when the page loads initially and/or replay the animation when 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/movie is projected onto a wall. Playback head— Like the playback head 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. Animation Channels— Elements on your page are added to the timeline in one of these animation channels. In most cases, you'll work with one animation and therefore take advantage of animation channel 1. However, 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 an AP Element (representing the first animation) in channel 1 and then add a second AP Element (representing the second animation) to channel 2. However, it doesn't stop there; channels in the timeline are virtually limitless. You can add as many AP Elements 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 AP Elements can be added to a timeline. Adding Layers to the Timeline All animations created within a timeline begin with AP Elements. Because Dreamweaver requires something tangible to manipulate, AP Elements become the foundation for our animations and must be added to the document before other elements. To work with AP Elements in a timeline, follow these steps: 1. Create a new HTML document by choosing File, New. Select Blank Page, HTML, , and click Create. 2. Insert a new AP Element on the page by choosing Insert, Layout Objects, AP Div. 3. Locate the fly.gif image located in the Images folder in the Files panel and drag it into the new AP Element as shown in Figure 16.2. Figure 16.2. Drag an image into the new AP Element. [View full size image]
4. Click, hold, and drag the AP Element (complete with the image) into the first animation channel of the timeline. The result will resemble Figure 16.3. Figure 16.3. Drag the new AP Element, complete with the image, into the first channel in the timeline. [View full size image]
As you can see from Figure 16.3, the AP Element is represented as a blue bar with dots on either side when it's in the timeline. The blue bar you're seeing is the animation bar, 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 an AP Element to the first channel of the timeline, which resulted in the addition of a blue animation bar 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 animation channel so that the end of the animation stops at the 45th frame: 15 FPS x 3 seconds = 45 frames. Tip The default frame rate in Dreamweaver is 15. Even though video and film play at roughly 30 FPS and 24 FPS, respectively, these media don't have the bandwidth restrictions that 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 rest of 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 bar, 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, click and hold the last keyframe in the animation bar and drag it to the 45th frame. The result resembles Figure 16.4. Figure 16.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. [View full size image] 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. 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 then position the AP Element 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 bar within the timeline. 2. Select the AP Element in the Document window and drag it to your right. A line should appear, similar to the one shown in Figure 16.5, representing the path that the animation will take. Figure 16.5. A line is drawn representing the path the animation will take. [View full size image] 3. Enable both the Autoplay and Loop check boxes. 4. Save your work as sample.html. To see the animation, preview your page in the browser by choosing F12. 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 AP Element 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 animation's 27th frame in the timeline. The animation bar 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 16.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's Options menu. Figure 16.6. Add a keyframe to the 27th frame of the animation. [View full size image] 3. Keyframes mark a major change in the animation. Select the keyframe you just added to the Timelines panel. Then select the AP Element in the Document window and drag it straight down. Dreamweaver tweens a smooth curve for the fly image to follow, as shown in Figure 16.7. Figure 16.7. With the new keyframe selected, drag the AP Element straight down to create a smooth curve. [View full size image]
4. Save your work. Preview the page in the browser by choosing 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 an AP Element, 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 AP Elements, AP Elements 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's 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 an AP Element 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 AP Element 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 AP Element— Choose this option (discussed in more detail in the next section) 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 contain 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 an AP Element One of the more interesting features of working with animations in Dreamweaver is the Record Path of AP Element feature. You can use this option to have Dreamweaver automatically build an animation simply by recording the act of you dragging an AP Element 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. Remember, you can also select the Remove Object option from either the Timelines panel's Options menu or by selecting the option from the Modify, Timelines submenu. 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 AP Element in the Document window and choose Modify, Timeline, Record Path of AP Element. 4. Click, hold, and drag the AP Element 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 16.8 in both the Document window and the timeline. Figure 16.8. The Record Path of AP Element option allows you to drag and record the path your cursor takes in the Document window. [View full size image] 5. Increase the FPS to 50. 6. Make sure that both the Autoplay and Loop check boxes are selected. 7. Save your page as recordpath.html. Preview your work in the browser by choosing F12. Watch the fly move 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 AP Element are still present in the Document window. Remember, the timeline controls only 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 AP Element 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 it to the 45th frame. Then select the AP Element 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 16.9. Figure 16.9. Drag the AP Element from the left side of the screen to the right side to create a 45-frame animation. [View full size image] 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). Preview the page in the browser by choosing 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 control 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:
5. Save your work as multipletimelines.html. Preview the page in the browser by choosing 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 control 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 16.10. Figure 16.10. Switch to Timeline1 by choosing it from the Timelines menu. [View full size image] 3. With Timeline1 selected, disable the Autoplay option. 4. Save your work. Preview the page in the browser by choosing F12. 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. However, 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, enable the Autoplay option for both timelines.
Part IV: Incorporating Multimedia and Animation CHAPTER 16 Working with the Timeline CHAPTER 17 Incorporating Video and Audio CHAPTER 18 Integrating with Fireworks and Photoshop CHAPTER 19 Integrating with Flash Chapter 16. Working with the Timeline IN THIS CHAPTER Animation with the Timeline Behaviors and the Timeline As you know, HTML presents data within a browser window in a multitude of shapes, sizes, and colors, and provides extra features such as forms, hyperlinks, and the capability to work with images. But most computer programming languages have more functionality than HTML does. They have a powerful range of commands and can produce far more spectacular effects than HTML can alone. One such language is JavaScript. JavaScript was developed with the Internet in mind. As you saw in Chapter 10, "Using Dreamweaver Behaviors," JavaScript affords us the capability to create pop-up messages, calculate values based on user input, create images that change color when the user's cursor rolls over them, and more. Beyond these simple features, however, web developers want a way to animate HTML elements on the screen, show or hide elements from view, and even change the physical style characteristics of HTML elements dynamically. But these more advanced features can't be accomplished with JavaScript alone. Instead, we must use a combination of technologies to achieve this goal. This is where DHTML comes in. DHTML, or Dynamic HTML, is the harmonious union of HTML, CSS, and JavaScript. With DHTML, we can alter the physical style characteristics of elements in an HTML page while it is being displayed. We can create animated objects, and we can show or hide objects. Take a text box and a button on an HTML page as an example: the text box and button alone, represented by the and tags, are just plain old HTML. But suppose that you wanted to change the physical characteristics of the text box when the user clicks the button. Perhaps you want to change the background color. To do this, we'd simply attach a JavaScript onClick event to the button that calls a function residing in the tag of our HTML page. The JavaScript function would be responsible for changing the background color of the text box using CSS on-the-fly. That's DHTML: JavaScript using CSS to change the physical characteristics of an HTML element (in this case, the background color of the text box). But it doesn't have to be that simple. For instance, you might decide to animate text—maybe a marquee at the top of the page that displays sports scores to users when they visit your page. This is another great example of DHTML. In this case, when the page loads, the onLoad event is fired, a function is called, and code gets executed, written in such a way that text within a tag is animated from the left side of the screen to the right. Although this example is much more complex than the first example, it's just another example of what's possible with DHTML. Dreamweaver provides numerous features for working with animations such as these. Throughout this chapter, we'll focus on the tools used for working with DHTML
and, more specifically, animation in Dreamweaver. As you'll learn, the timeline, like timelines in other Adobe programs, is intuitive, flexible, and can provide a rich user experience for your users. As you've found in the other chapters in this book, you can work with the examples in this chapter by downloading the files from www.dreamweaverunleashed.com. You'll want to save the files for Chapter 16 in an easy-to-find location. I'll place mine in C:\VectaCorp\Chapter16. Also, be sure to update your site reference in Dreamweaver to point to the newly created folder. Animation with the Timeline As a leader in vector-based animation programs, Adobe'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 preinstalled. Although Flash, Director, and Dreamweaver all provide the capability 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 elements 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 layers—the and tags. If you code using these tags, the elements 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 an AP Element (essentially a ). 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 AP Elements 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 AP Elements. Recall that AP Elements are essentially tags. So where's the DHTML in animating AP Elements? The positioning of AP Elements (which are HTML elements) is controlled by CSS positioning attributes. JavaScript controls these positioning attributes, usually within a callable function in the tag of the web page. Called repeatedly, JavaScript can move the AP Element by changing the positioning properties of the AP Element 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 simply by 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 you are 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 an AP Element), manipulate a few timeline elements, and we're done. Next, let's review the various elements of the timeline and then discuss the process involved with adding AP Elements to the timeline. Elements of the Timeline If you haven't done so already, access the Timelines panel by choosing Window, Timelines. Pictured with more detail in Figure 16.1, a timeline in the Timelines panel seems overwhelming at first glance. Figure 16.1. The timeline in Dreamweaver provides a central interface for adding, changing, and managing animations. [View full size image] Observe the callouts in Figure 16.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, Timeline. 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 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 when the animation reaches a conclusion. Behavior Channel— As you'll see toward the end of this chapter, behaviors aren't limited to images, text, or form objects. 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. Note Some features in the timeline will automatically add behaviors for you. The Autoplay and Loop check boxes, for instance, add behaviors to the timeline that tell the browser to play the animation when the page loads initially and/or replay the animation when 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/movie is projected onto a wall. Playback head— Like the playback head 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. Animation Channels— Elements on your page are added to the timeline in one of these animation channels. In most cases, you'll work with one animation and therefore take advantage of animation channel 1. However, 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 an AP Element (representing the first animation) in channel 1 and then add a second AP Element (representing the second animation) to channel 2. However, it doesn't stop there; channels in the timeline are virtually limitless. You can add as many AP Elements 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 AP Elements can be added to a timeline. Adding Layers to the Timeline All animations created within a timeline begin with AP Elements. Because Dreamweaver requires something tangible to manipulate, AP Elements become the foundation for our animations and must be added to the document before other elements. To work with AP Elements in a timeline, follow these steps: 1. Create a new HTML document by choosing File, New. Select Blank Page, HTML, , and click Create. 2. Insert a new AP Element on the page by choosing Insert, Layout Objects, AP Div. 3. Locate the fly.gif image located in the Images folder in the Files panel and drag it into the new AP Element as shown in Figure 16.2. Figure 16.2. Drag an image into the new AP Element. [View full size image]
4. Click, hold, and drag the AP Element (complete with the image) into the first animation channel of the timeline. The result will resemble Figure 16.3. Figure 16.3. Drag the new AP Element, complete with the image, into the first channel in the timeline. [View full size image]
As you can see from Figure 16.3, the AP Element is represented as a blue bar with dots on either side when it's in the timeline. The blue bar you're seeing is the animation bar, 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 an AP Element to the first channel of the timeline, which resulted in the addition of a blue animation bar 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 animation channel so that the end of the animation stops at the 45th frame: 15 FPS x 3 seconds = 45 frames. Tip The default frame rate in Dreamweaver is 15. Even though video and film play at roughly 30 FPS and 24 FPS, respectively, these media don't have the bandwidth restrictions that 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 rest of 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.