|Adding the main Content|
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.
|Adding multiple Behaviors and spark!|
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 swap image 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.
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. Click Frame 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.
Design Words Gallery