Ch. 8 Web Page Design – Animation and BehaviorsMr. 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 MovementYou 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 MiscellaneousThe Timeline pop-up menu contains the

names of a document's recent timelines.A slide show is not a self-running animation.