Preview in a Web Browser
Click the Preview in Browser button in the toolbox to preview the frown animation in a Web browser. The animation does not start playing automatically. Move your mouse over the frown button and you'll see the frown button glow and the frown animation play. Move your mouse away; the glow is gone and the animation stops playing. Notice that the animation plays very fast. You'll fix that in the next step.
Set the Timing
First, you'll slow the entire frown animation down. Click on Frame 1 in the Animation palette, hold the Shift key, and click Frame 7 to select all frames. Click the time delay pop-up menu under any of the frames and choose 0.1 seconds A. Leave the looping option set to its default of Forever B.
Add some pauses
Now you'll add some pauses on particular frames. In the Animation palette, click on Frame 1; then hold the Command/Ctrl key and click on Frames 5, 6, and 7 to select those four frames. Click the time delay pop-up menu under any of the selected frames and choose 0.5 seconds. Preview again in a browser to notice the change in timing. You've finished making the frown animation.
Begin the Smile Animation
The Smile animation is triggered by mousing over the smile button. It's constructed the same way as the frown animation with a combination of layer visibility changes and tweening. We'll move more quickly through the following steps, since you already know the principles involved.
Select the Over state of the SmileBtn slice in the Web Content palette. This is the state that will trigger the animation A. Click the Create Duplicate Current Frame button at the bottom of the Web Content palette B to create Frame 2 of the smile animation. You'll see Frame 1 and Frame 2 under the Over state of the SmileBtn slice in the Web Content palette.
Change Frame 2
With Frame 2 of the smile animation selected, go to the Layers palette and click in the Visibility field of the Smile layer to turn on its Eye icon. The woman is now smiling tentatively.
Tween Frame 2
With Frame 2 still selected, click the Tween button at the bottom of the Animation palette. In the Tween dialog box, choose Tween With: Previous Frame, Frames to Add: 3, and Parameters: Opacity, and click OK to add three tweened frames to the smile animation.
Add Frames 6 and 7
With Frame 5 selected in the Web Content palette, click the Duplicate Current Frame button at the bottom of that palette twice to create Frames 6 and 7.
Change Frame 6
Select Frame 6 of the smile animation in the Web Content palette. In the Layers palette, click in the Visibility field of the BrowRaise layer. This makes the woman's right eyebrow raise slightly near the end of the smile animation.
Target the Remote Slice
In the Animation palette, click the pickwhip icon on the Over state of the SmileBtn slice A and drag to the Face slice in the image B. This targets the remote slice for the smile animation. It's important to target the remote slice for both of the rollover animations.
Set the Timing
In the Animation palette, Shift-click to select all the frames. Click the time delay pop-up menu and choose 0.1 seconds A. Then Command/Ctrl-click to select only Frames 1, 5, 6, and 7, and choose 0.5 seconds from the menu B. This slows the animation down and adds a pause on the selected frames. Leave the loop option set to forever.
Good job! You've completed all of the construction. Just a few finishing touches and you're done.
Preview in a Browser
Click the Preview in Browser button in the toolbox to preview both rollover-triggered animations. In your browser window, move your mouse over the smile button. The button glows and the smile animation begins playing. Move your mouse away and both effects stop. Now mouse over the frown button to see it glow and the frown animation play.
Optimize the Button Slices
Back in ImageReady, click on the Optimized tab in the document window to see a preview of the optimized image. Click the SmileBtn slice in the Web Content palette, hold the Command/Ctrl key, and click on the FrownBtn slice. Choose the following Optimization settings for the two button slices in the Optimize palette:
Format: GIF (Although this file contains photos, it must be optimized as GIF because, as you now know, JPEG format does not support animation.) Colors: 32 Dither: No Dither Add Metadata: Unchecked Leave the other optimization settings at their defaults, as shown here. TIP Optimized Rollover States. The Optimization settings you choose for a slice affect all rollover states. So it's wise to click on the Over states of the SmileBtn and FrownBtn slices to make sure that the glowing buttons also look good with the optimization settings you chose.
|
INSIGHT Optimized Slices. We optimized the other slices for you, including the Face slice that contains the two animations. In the Face slice we included 128 colors, added dither to boost appearance, and checked appearance on all the frames of both animations and on the Normal state.
|
|