1. Tutorial 7 Creating Animations

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

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

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

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

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

7. XP Exploring the Timelines Panel Dreamweaver CS3 Tutorial 77

8. XP Exploring the Timelines Panel Dreamweaver CS3 Tutorial 78

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

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

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

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

13. XP Creating a Timeline Dreamweaver CS3 Tutorial 713

14. XP Creating a Timeline Dreamweaver CS3 Tutorial 714

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

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

17. XP Moving and Resizing Animation Bars Dreamweaver CS3 Tutorial 717

18. XP Moving and Resizing Animation Bars Dreamweaver CS3 Tutorial 718

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

20. XP Resizing an Animation Bar Dreamweaver CS3 Tutorial 720

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

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

23. XP Adding Keyframes to an Animation Bar Dreamweaver CS3 Tutorial 723

24. XP Adding Keyframes to an Animation Bar Dreamweaver CS3 Tutorial 724

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

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

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

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

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

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

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

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

33. XP Previewing a Timeline in a Browser Dreamweaver CS3 Tutorial 733

34. XP Previewing a Timeline in a Browser Dreamweaver CS3 Tutorial 734

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

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

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

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

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

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

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

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

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

44. 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 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 744

45. XP Resizing an AP Div Over Time Dreamweaver CS3 Tutorial 745

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

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

48. XP Starting a Timeline with a Button Dreamweaver CS3 Tutorial 748

49. XP Starting a Timeline with a Button Dreamweaver CS3 Tutorial 749

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

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

52. XP Adding Behaviors to the Behaviors Channel Dreamweaver CS3 Tutorial 752

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

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

55. XP Creating Multiple Timelines Dreamweaver CS3 Tutorial 755

56. XP Creating Multiple Timelines Dreamweaver CS3 Tutorial 756

57. XP Creating Multiple Timelines Dreamweaver CS3 Tutorial 757

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

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

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

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