Adobe Dreamweaver CS3 Unleashed- P17 docx

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, <none>, 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: [...]... 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... 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... files, Dreamweaver will get you off and running quickly and effortlessly As you've done with the rest of the 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 17 in an easy-to-find location I'll place mine in C:\VectaCorp\Chapter17 Also, be sure to update your site definition in Dreamweaver. .. 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... frames are created by Dreamweaver using a process known as tweening Short for inbetweening, 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... 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... 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... feature, a fully animated pop-up menu, and an image-based slideshow In the next chapter, we'll move away from the timeline and begin our review of the audio and video capabilities built into Dreamweaver We'll then explore how Dreamweaver interfaces with the complementary programs Flash, Photoshop, and Fireworks Chapter 17 Incorporating Video and Audio IN THIS CHAPTER Video on the Web Media Players Working... years, companies such as Microsoft, Apple, Real, Autodesk, Adobe, and Sorenson, DivX, and so on have made strides in delivering on that promise With streaming technologies, better codecs (compression algorithms), and generally higher bandwidth in our homes, the promise of delivering small-sized, high-quality web video is coming to fruition Dreamweaver offers unprecedented support for incorporating... 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 . 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. 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. 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