Tutorial 7 Creating Animations XP Objectives Learn about animation Create a timeline Add AP divs and graphics to a timeline Move and resize animation bars Add keyframes to an animation bar Adjust AP div visibility Preview a timeline in Dreamweaver and in a browser Dreamweaver CS3 Tutorial 72 XP Objectives Adjust the AP div stacking order Move and resize an AP div Delete an animation bar Start a timeline with a button Add behaviors to the Behaviors channel Create multiple timelines Dreamweaver CS3 Tutorial 73 XP Understanding Animation Adding animated elements to a Web site can create interest and interactivity. Animation is a series of graphics or images that appear to move over time. Adding too much animation to a page can distract users from the main message or information. Dreamweaver CS3 Tutorial 74 XP Understanding Animation You should not include more than one animated element in a page unless you have a compelling reason for doing so. You should not include more than three or four animations in a site. Dreamweaver CS3 Tutorial 75 XP Exploring the Timelines Panel The Timelines panel enables you to create animation using dynamic HTML code and AP divs. To open the Timelines panel, click Window on the menu bar, and then click Timelines. Timeline frames are the units of temporal measurement used in animation. Dreamweaver CS3 Tutorial 76 XP Exploring the Timelines Panel Dreamweaver CS3 Tutorial 77 XP Exploring the Timelines Panel Dreamweaver CS3 Tutorial 78 XP Exploring the Timelines Panel The playback head (the red bar) indicates which frame of the animation is visible in the Document window. Playback rate is the speed of an animation. The default setting for the playback rate is 15 frames per second (Fps). The Behaviors channel is where you insert any behaviors that will be called from a frame in the timeline. Dreamweaver CS3 Tutorial 79 XP Exploring the Timelines Panel Animation channels are the rows in which objects are animated. The Timelines panel toolbar includes the following buttons: Timelines Rewind Back Current frame number Playback Autoplay Loop Dreamweaver CS3 Tutorial 710 XP Creating a Timeline The first step in creating an animation is to create a timeline for the AP div you want to animate. You create a timeline for an AP div by dragging the AP div to the Timelines panel. The image or text that you want to animate must be in an AP div before you can add it to the Timelines panel. Dreamweaver CS3 Tutorial 711 XP Creating a Timeline When you drag an AP div to the Timelines panel, an animation bar and keyframes are added for the AP div. An animation bar is the purple line that appears in the channel to which the AP div is added. A keyframe is a frame in a timeline where an event occurs. Every timeline has at least two keyframesone at the first frame and one at the last frame. Dreamweaver CS3 Tutorial 712 XP Creating a Timeline Dreamweaver CS3 Tutorial 713 XP Creating a Timeline Dreamweaver CS3 Tutorial 714 XP Moving and Resizing Animation Bars You can move an animation bar to another animation channel or to another location within the same animation channel. You move an animation bar to another animation channel by selecting the animation bar and dragging it to the new channel. To select an animation bar, click the animation bar anywhere between the keyframes, but not on the keyframes. Dreamweaver CS3 Tutorial 715 XP Moving and Resizing Animation Bars You can select and move more than one animation bar at a time by using the Shift key. To move an animation bar to a new location within an animation channel, select the animation bar and then drag the animation bar to the frame you want. The horizontal position within the channel determines when that animation bar plays within the timeline. Dreamweaver CS3 Tutorial 716 XP Moving and Resizing Animation Bars Dreamweaver CS3 Tutorial 717 XP Moving and Resizing Animation Bars Dreamweaver CS3 Tutorial 718 XP Resizing an Animation Bar You can resize an animation bar by selecting the keyframe at either end of the bar and dragging the keyframe to a new position within the animation channel. Lengthening the animation bar increases the duration of the animation by adding more frames. Shortening the animation bar decreases the duration of the animation by reducing the number of frames. Dreamweaver CS3 Tutorial 719 XP Resizing an Animation Bar Dreamweaver CS3 Tutorial 720 XP Adding Keyframes to an Animation Bar Keyframes are where you input instructions for an animation. You need a keyframe in each frame of the timeline where something happens, for example: If you are moving an AP div, you need a keyframe each time the movement changes direction, stops, or starts. If you are changing the visibility of an AP div, you need a keyframe each time the AP div changes visibility. Dreamweaver CS3 Tutorial 721 XP Adding Keyframes to an Animation Bar To add keyframes to an animation bar: Select the animation bar to which you want to add a keyframe. Click in the frame to which you want to add the keyframe. Right-click the selected frame, and then click Add Keyframe. When you add a keyframe to an animation bar, the AP div name disappears. Dreamweaver CS3 Tutorial 722 XP Adding Keyframes to an Animation Bar Dreamweaver CS3 Tutorial 723 XP Adding Keyframes to an Animation Bar Dreamweaver CS3 Tutorial 724 XP Creating an Animation You create animation by doing one of three types of things: You can change AP div position. You can change the source of an image. You can automatically call behaviors without using Flash, ActiveX, Java, or any other plug-in application. Dreamweaver CS3 Tutorial 725 XP Creating an Animation Timeline actions, used to change AP div properties over time, are: Show or hide an AP div Change the z-index or stacking order Move an AP div Resize an AP div You can also change the image source with the timeline. Dreamweaver CS3 Tutorial 726 XP Adjusting AP Div Visibility in the Timelines Panel To change AP div visibility: Select the desired keyframe. In the AP Elements panel, click the visibility column until the appropriate icon appears. The three visibility attributes are visible, hidden, and default. The change in visibility is not gradual; it occurs immediately. Dreamweaver CS3 Tutorial 727 XP Adjusting AP Div Visibility in the Timelines Panel Dreamweaver CS3 Tutorial 728 XP Adjusting AP Div Visibility in the Timelines Panel Dreamweaver CS3 Tutorial 729 XP Previewing a Timeline You should preview an animation in Dreamweaver as you create it. It is also important to preview the animation in a browser window. You should also test a finished animation on a number of computers after you have posted the animation. Dreamweaver CS3 Tutorial 730 XP Previewing a Timeline in Dreamweaver There are two ways to preview a timeline in Dreamweaver: You can drag the playback head across the timeline in the Timelines panel. You can click and hold the Playback button on the Timelines panel toolbar. Dreamweaver CS3 Tutorial 731 XP Previewing a Timeline in a Browser To preview a timeline within a browser window, you must add a behavior to the Web page that instructs the browser to play the timeline. When you check the Autoplay check box, Dreamweaver inserts the Autoplay behavior into the code of the Web page. The Autoplay behavior tells the browser to play the timeline as soon as the page is finished loading. Dreamweaver CS3 Tutorial 732 XP Previewing a Timeline in a Browser Dreamweaver CS3 Tutorial 733 XP Previewing a Timeline in a Browser Dreamweaver CS3 Tutorial 734 XP Adjusting AP Div Stacking Order in the Timeline You adjust the z-index number of AP divs to change their stacking order. You can change the order in which AP divs are stacked during a timeline. The change in stacking order occurs immediately when the timeline encounters a keyframe with instructions to change the z-index number of an AP div. Dreamweaver CS3 Tutorial 735 XP Adjusting AP Div Stacking Order in the Timeline To change the AP div stacking order: Select the keyframe in which you want the stacking order to change in the animation bar. Type the desired z-index number in the Z column in the AP Elements panel, and then press the Enter key. Dreamweaver CS3 Tutorial 736 XP Adjusting AP Div Stacking Order in the Timeline Dreamweaver CS3 Tutorial 737 XP Adjusting AP Div Stacking Order in the Timeline Dreamweaver CS3 Tutorial 738 XP Adjusting AP Div Stacking Order in the Timeline Dreamweaver CS3 Tutorial 739 XP Adjusting AP Div Stacking Order in the Timeline Dreamweaver CS3 Tutorial 740 XP Moving an AP Div in the Timelines Panel The timeline enables you to move an AP div from one position to another position in the page over a period of time. You move an AP div by selecting a keyframe and changing the position of the AP div. Dreamweaver moves the AP div in such a way that the AP div arrives at its new position as the playback head reaches the keyframe that has instructions to change the AP div position. Dreamweaver CS3 Tutorial 741 XP Moving an AP Div in the Timelines Panel Dreamweaver CS3 Tutorial 742 XP Moving an AP Div in the Timelines Panel Dreamweaver CS3 Tutorial 743 XP Resizing an AP Div Over Time Changing the dimensions of an AP div over a period of time is another way to add animation to a page. Adding a background color to an AP div enables you to see the AP div change dimensions over time. To see the AP div shrink or grow, the AP divs overflow must be set to Hidden. Resizing an AP div does not change the dimensions of images in the AP div. Dreamweaver CS3 Tutorial 744 XP Resizing an AP Div Over Time Dreamweaver CS3 Tutorial 745 XP Deleting an Animation Bar To delete an animation bar: Select the animation bar you want to delete. Press the Delete key. In the AP Elements panel, select the AP div, and then press the Delete key. Dreamweaver CS3 Tutorial 746 XP Starting a Timeline with a Button Buttons are a good way to start a timeline because they enable you to tie the animation to a user decision. You start a timeline with a button by adding a behavior to the button that triggers the timeline to begin playing, such as the Play Timeline behavior. The button can be a rollover image. Dreamweaver CS3 Tutorial 747 XP Starting a Timeline with a Button Dreamweaver CS3 Tutorial 748 XP Starting a Timeline with a Button Dreamweaver CS3 Tutorial 749 XP Adding Behaviors to the Behaviors Channel You can add many of the behaviors from the Behaviors panel list within a timeline. Placing behaviors in a timeline enables you to make things that are not necessarily triggered by user interaction (such as a mouse click) happen over time within a Web page. Dreamweaver CS3 Tutorial 750 XP Adding Behaviors to the Behaviors Channel To add behaviors to the Behaviors channel: Select the frame to which you want to add the behavior in the Behaviors channel in the Timelines panel. Select the behavior from the behaviors list in the Behaviors panel, and then set any required parameters. Dreamweaver CS3 Tutorial 751 XP Adding Behaviors to the Behaviors Channel Dreamweaver CS3 Tutorial 752 XP Creating Multiple Timelines You can create more complex interactions in a Web page by adding multiple timelines in the same page. You add additional timelines to a page in the same way that you added the first timeline to the page. You toggle between timelines using the Timelines list on the Timelines panel toolbar. Dreamweaver CS3 Tutorial 753 XP Creating Multiple Timelines With multiple timelines, all of the timelines can run at the same time, or you can use behaviors to make one timeline start another timeline and so forth. When using multiple timelines in one page, each timeline should be fairly simple so that the page will be able to run at a reasonable speed. Dreamweaver CS3 Tutorial 754 XP Creating Multiple Timelines Dreamweaver CS3 Tutorial 755 XP Creating Multiple Timelines Dreamweaver CS3 Tutorial 756 XP Creating Multiple Timelines Dreamweaver CS3 Tutorial 757 XP Updating the Web Site on the Remote Server To update: Connect to the remote server using the Connects to Remote Host button on the Files panel toolbar Click the View list arrow, and then click Local View Select the tourdates.htm file, and then click the Put File(s) button Click the Yes button when asked if you want to include dependent files Dreamweaver CS3 Tutorial 758 XP Updating the Web Site on the Remote Server To update (cont.): Disconnect using the Disconnects from Remote Host button Click the View list arrow, and then click Local View Dreamweaver CS3 Tutorial 759 XP Tutorial Summary Add AP divs to a timeline Move AP divs Change the duration of AP divs Insert additional keyframes into animation bars Move and resize AP divs Dreamweaver CS3 Tutorial 760 XP Tutorial Summary Change the visibility and the stacking order of AP divs Use a button to start your timeline Add behaviors to the timeline using the Behaviors channel Add multiple timelines to a Web page Dreamweaver CS3 Tutorial 761