Ch. 8 Web Page Design – Animation and Behaviors Mr. Ursone

Timelines Timelines use dynamic HTML (DHTML) to change the position of an AP element or the source of an image over time, or to call behavior actions automatically after the page is loaded Timelines are used to Alter an element’s position, size, visibility, and depth To apply Dreamweaver’s JavaScript behaviors To change the source for any image and replace it with another

Timelines Timelines are made up of a collection of frames Each frames represents a moment in time A frame is one cell or one point of time in a timeline The Web site developer controls the speed of the timeline The default is 15 fps (frames per second) If you decrease the number of fps, the animation takes longer to play; increase the number of fps and the animation plays faster AP elements and images are the only items that can be added to a Dreamweaver timeline However, you can add text, images, forms, tables, or other objects to the AP elements

Timelines & Keyframes A series of frames makes up a timeline Alt+F9 displays the timelines panel To add a frame in a timeline, click the frame, right-click the timeline, and then click Add Frame on the context menu. A keyframe is the main tool for controlling an animation. Keyframes allow you to change the properties of an object in an Timeline The Timelines panel shows how the properties of AP elements and images change over time. Keyframes are added to a timeline to show and hide each AP element. As a slide show plays Elements are displayed and then hidden. Clicking the Play button resumes a slide show presentation.

Creating Timeline Animation Animation Path: The route (or path) the object will take on the Web page Active Content: content in a Web page that is interactive or dynamic A basic animation moves from one point on the timeline to another. Any animation created in the timeline must have a start point and a stop point These start and stop points are marked on the timeline by small circles and are called Keyframes A keyframe contains specific properties for an object.

The Timelines Panel Timeline pop-up menu Playback head Frame Frame number Animation Channel Behaviors Channel

Timelines Panel Timeline pop-up menu Rewind Button Back Button Frame Number Play/forward button Fps box Autoplay Check box Loop check box

Adding Behaviors to a Timeline Use the behaviors panel to add sounds, show pop-up messages, showing and hiding AP elements, starting and stopping timelines, and other events Animation Requires Time and Movement You can create animation by dragging an image to create a nonlinear animation path. OnClick is an event you can assign as an animation control.

Behaviors & Timelines The Add Behavior pop up menu contains the timeline command To provide a Web site visitor with the ability to control a slide show requires that a Start button be added to the Web page.

Nonlinear Animations Nonlinear animation: an animation that does not follow a straight path To create a nonlinear animation you can just drag the element after you start recording the path

Linear Path Animations Linear path animations (straight line animations): Appears similar to a slideshow. Images take the place of another image on a Web page. A straight-line animation technique also is called a linear animation technique.

Auto Play & Loop When Auto play is checked, a timeline begins playing automatically when the current page loads in a browser. When the Loop check box is selected, the current timeline loops indefinitely while the page is open in a browser. Timelines and Miscellaneous The Timeline pop-up menu contains the names of a document's recent timelines. A slide show is not a self-running animation.