Tutorial 7 Creating Animations

1. Tutorial 7Creating Animations

2. 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 7

3. 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 7

4. 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 7

5. 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 7

6. 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 7

7. Exploring the Timelines Panel Dreamweaver CS3 Tutorial 7

8. Exploring the Timelines Panel Dreamweaver CS3 Tutorial 7

9. 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 7

10. 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 7

11. 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 7

12. 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 keyframes—one at the first frame and one at the last frame. Dreamweaver CS3 Tutorial 7

13. Creating a Timeline Dreamweaver CS3 Tutorial 7

14. Creating a Timeline Dreamweaver CS3 Tutorial 7

15. 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 7

16. 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 7

17. Moving and Resizing Animation Bars Dreamweaver CS3 Tutorial 7

18. Moving and Resizing Animation Bars Dreamweaver CS3 Tutorial 7

19. 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 7

20. Resizing an Animation Bar Dreamweaver CS3 Tutorial 7

21. 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 7

22. 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 7

23. Adding Keyframes to an Animation Bar Dreamweaver CS3 Tutorial 7

24. Adding Keyframes to an Animation Bar Dreamweaver CS3 Tutorial 7

25. 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 7

26. 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 7

27. 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 7

28. Adjusting AP Div Visibility in the Timelines Panel Dreamweaver CS3 Tutorial 7

29. Adjusting AP Div Visibility in the Timelines Panel Dreamweaver CS3 Tutorial 7

30. 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 7

31. 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 7

32. 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 7

33. Previewing a Timeline in a Browser Dreamweaver CS3 Tutorial 7

34. Previewing a Timeline in a Browser Dreamweaver CS3 Tutorial 7

35. 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 7

36. 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 7

37. Adjusting AP Div Stacking Order in the Timeline Dreamweaver CS3 Tutorial 7

38. Adjusting AP Div Stacking Order in the Timeline Dreamweaver CS3 Tutorial 7

39. Adjusting AP Div Stacking Order in the Timeline Dreamweaver CS3 Tutorial 7

40. Adjusting AP Div Stacking Order in the Timeline Dreamweaver CS3 Tutorial 7

41. 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 7

42. Moving an AP Div in the Timelines Panel Dreamweaver CS3 Tutorial 7

43. Moving an AP Div in the Timelines Panel Dreamweaver CS3 Tutorial 7

44. 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 div’s overflow must be set to Hidden. • Resizing an AP div does not change the dimensions of images in the AP div. Dreamweaver CS3 Tutorial 7

45. Resizing an AP Div Over Time Dreamweaver CS3 Tutorial 7

46. 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 7

47. 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 7

48. Starting a Timeline with a Button Dreamweaver CS3 Tutorial 7

49. Starting a Timeline with a Button Dreamweaver CS3 Tutorial 7

50. 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 7