ch. 8 web page design – animation and behaviors mr. ursone
TRANSCRIPT
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.