LinkExchange Network




3 Dreamweaver tutorial
Animation with Timelines

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.

Adding the main Content
Demo
Three
View Demo

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. screen3aAdd 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. screen33The 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.

Tutorial
Index

index
Rhine Home
home
Adding multiple Behaviors and spark!

1. screen34The 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.

3. Now add some animation with the Timeline Inspector. screen3c Choose the large jazz layer in the Layer inspector (note its position in the Layer Inspector L390px T 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 screencap3dObject 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.

Rhine Design
design
Home  Tutorial Index  Previous  Design  Words  Gallery  Issues