Introduction to timeline animation
In addition to introducing you to the Timelines panel, this TechNote provide instructions for creating simple DHTML animations using layers. The word timeline, as used in Dreamweaver, refers to the changing of properties of layers and images over time. This changing of HTML elements with a scripting language (in this case, JavaScript) is commonly referred to as DHTML ("D" representing dynamic). The Dreamweaver Timelines panel makes what otherwise might be a complicated procedure rather simple. Following the sections below will help you to easily create a timeline animation:
 |
Basic features of the Timelines panel |
| |
The Timelines panel play options |
| |
Basic features of the Timelines panel
Choose Window > Timelines to open the Timelines panel. This panel gives you a visual representation of the properties of objects (images and layers) which have been added to a timeline.
 |
Glossary of Timeline panel terms
| |
Timelines menu
This menu allows you to select from a list of timelines present in a document. Only timelines contained in the current document will be listed. |
| |
Playback head
The Playback head indicates the currently displayed frame. |
| |
Animation bar
|
| |
Keyframes
|
| |
Behaviors channel
The behaviors channel contains behaviors to be executed when a specific frame is played. |
| |
Frame numbers
Indicates the sequence of frames. |
The Timelines panel play options
Listed below are the playback options for viewing the animation.
| |
|
 |
Rewindmoves the playback head back to the first frame. |
 |
Backmoves the playback head back one frame to the left. Holding down the back button allows you to play the timeline in reverse. |
 |
Playmoves the playback head one frame to the right. Hold the play button down to play the timeline continuously. |
 |
Autoplay ( if option is selected) makes the timeline play automatically when the page is loaded in the browser. |
 |
Loop ( if option is selected) makes the current timeline loop continuously in the browser. Loop inserts the Go to Timeline Frame behavior in the Behaviors channel after the last frame of the animation. |
Creating a simple timeline animation using layers
Practice creating a simple timeline animation with these tutorial-style steps.
| 1 | With a new document open, insert a layer by choosing Insert > Layer. (You can also click the Draw Layer icon on the Objects panel. Position the layer where you want the animation to start. |
| 2 | Click within the layer and type the following text: "my first timeline animation". |
| 3 | Select the layer. Layers can be selected several ways, including: Clicking the layer name in the Layers panel (choose Window > Layers to open the Layers panel). Clicking on the selection handle located on the top left corner of the layer. Clicking on the layer icon in the document. To view invisible icons, choose View > Visual aids > Invisible Elements. |
| 4 | With the desired layer selected, choose Modify > Timeline > Add Object to Timeline. You should now see an animation bar added to the first channel of the timeline. Note:The animation plays from left to right. The keyframe on the left represents the position of the layer in the first frame of the timeline. The Keyframe on the right represents the position of the layer in the last frame. |
| 5 | Direct line movement
|
| 6 | Making more complex animations
Note:If you want to create an animation with a complex path, it may be more efficient to record the path as you drag the layer instead rather than creating individual keyframes. For an animation created by dragging a path, choose Modify > Timeline > Record Path of Layer in step 4 above. Then, drag the layer around the page to create a path, releasing the mouse at the point where the animation should stop. |
| 7 | Modifying your animation
To extend the length of the timeline beyond the default 15 frames, select the last frame marker and drag to the desired frame length. Select the Autoplay option on the Timelines panel to play the timeline when the page is loaded. This box can be left unchecked if the animation is to be played when a user event occurs such as when a button or link is clicked. |
| 8 | Preview the document by choosing File > Preview in Browser. |
Adding behaviors to your timeline
To trigger a behavior at a certain frame in a timeline (rather than having a visitor's interaction trigger it), place the behavior in the timeline.
| 1 | Click a frame in the Behaviors channel on the Timelines panel. |
| 2 | Choose Window > Behaviors to open the Behaviors panel. |
| 3 | Use the Behaviors panel to choose an action to perform at that frame. Note:When attempting to apply behaviors to the page, click somewhere within the numbered channels (the lower part of the panel) to deselect the timeline frame. If the Timeline frame is still selected, you will be unable to apply behaviors with events that occur outside of the timeline. |
Additional information
For more information, see Using Dreamweaver to create a rotating ad banner (TechNote 14468) and Using Dreamweaver to create a layer slideshow.
The Using Dynamic Layers chapter in the manual, Using Dreamweaver, also has more details about creating timeline animation.
This content requires Flash
To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.
Download the free Flash Player now!
