Adding motion to layers can be achieved
with a customized slide-layer action, or by simply using Dreamweaver's intact
timeline inspector - a tool that can create some outstanding effects like
those at Nirvana
Online. This demo is a compilation of mouseovers, showing and hiding content,
and, of course, adding some animation with Dreamweaver's Timelines Inspector.

1. This demo features animation controlled by Timelines
that are toggled by buttons, and some hidden content that
becomes visible with an onClick. Before adding the timelines,
create and position the content first. It is much easier to design,
position and add simple behaviors to the layers first since
the animation layers will not be positioned on the viewing page
when the Timelines are added later.

2. Add the large jazz graphic to a layer and place it on the page
by using the Layer Inspector. This is where the jazz graphic will
appear at the end of its Timeline. Create the four bubble
layers (this is our show/hide content) content and position them near
the large jazz graphic. When properly aligned directly underneath
one another, turn off their visibility. Add
your button control images to a layer and position this on the page. Finally,
add the menu buttons that will show and hide the bubble layers. Do not
position this menu off screen yet or into a timeline yet. The show/hide
behaviors will be added first.

2. The
main design is shaping up. This is how the page should look. The bubble layer
is positioned near the saxophone, while the large red control buttons are
lined up near the top. The smaller red menu buttons will be positioned off
the page after all of the behaviors and timelines are set.

1.The
control buttons which will play the animations will also
light up with an image swap. Click the first button, give it a
specific name in the Property Inspector, choose onMouseover
from the Behavior Inspector and swap image from the Actions
Menu. Add an onMouseout event from Behaviors to the same image,
then a swapimage restore from the Actions menu. Give the second
button a unique name and add a Mouseover/Swap Image and then
a Mouseout/Swap Image Restore.

2. The small red notes in the menu layer will now be set
to show and hide the bubble layers with an onClick event. Position
the mouse on the first button in this menu, pull down the onClick
behavior from the Behaviors Inspector and choose show/hide layer from
the Actions menu. Set(bubble) layer one to visible, and the
remaining (bubble) layers to hide. Place mouse on the second
image , choose onClick and then show/hide layers the Actions
menu. Show layer two, and hide one, three and four.
Click OK. Repeat these steps for the remaining buttons and layers.

3. Now add some animation with the Timeline Inspector.
Choose the large jazz layer in the Layer inspector (note its position
in the Layer Inspector L390pxT 15px). This is where
the graphic will be at the end of the animation. Open the Timeline
Inspector and (from the Modify menu) click Add Object to Timeline.
Drag the frame line to 40. Check the coordinates in the
Layer Inspector. They should read L 290px T 15px. Select Frame
One in the Timeline and enter a negative coordinate, T
-590px , L 390px in the Layer Inspector. This is where the graphic
will be positioned off screen when the animation begins. Use the play
button in the Timeline and watch the graphic come into view. Leave
the autoplay and loop box blank. Save and check your work often.

4.Animate the menu with the small red notes. Click on
this layer in the Layer Inspector, and then Add Object
to Timeline. Stretch the line until Frame 40. This is the length
of the timeline. Click on Frame One and enter a negative value
L -130px T 155px in the Layer Inspector (this will cause layer
to move off the page) Use the play button to preview.

5.Add a third timeline. Choose the Navigation Layer,
click to Add Object
to timeline. Stretch the line to Frame 40. Since the menu will now
slide left, reverse the coordinates in the Layer Inspector.
ClickFrame 40 in the Timeline and enter a negative value L-135
, T155 in the Layer Inspector. Click on Frame 1 and add
L15 T155 in the Layer Inspector. Click the play button to view the layer leave
the page.

6.Choose the first large note in the Navigation layer. This image
will start the timelines. Go to the Behaviors menu, choose onClick
and Play Timeline 1 from the Actions menu. Click OK. With this same
onClick behavior, choose play timeline 2. Click OK.

7.Click on the second large note in the Navigation
layer. This image will send the menu off the page and end
the animation. Go to the Behaviors menu, select onClick and
choose Play Timeline 3 from the menu. Click OK. Save the page.
Check it in your browsers and then run Dreamweaver's Check browser test
for both 4.0 browsers.