Using vector masks to create animations

The rest of this lesson deals with masks, as they apply to animations. You'll work on two separate projects with different types of masks, first vector masks and then layer masks.

First, you'll create the effect of money rising and falling inside the characters of the word CSN. You'll do this by creating a vector mask to partially block the CSN layer so that the money appears only inside the word, and then using position changes to define the different frames of the animation.

1 Choose File > Open, and open the bill.psd file. After Right-Clicking>Save Link As... Click HereFor Graphic

2 In the Layers palette, make sure that all the layers are visible. If not, click the visibility boxes so that eye icons appear for each of the layers.

3 In the Layers palette, select the money layer.

4 Hold down Alt (Windows) or Option (Mac OS) and move the pointer (without clicking) over the solid line dividing the money and Text layer in the Layers palette until the pointer changes to two overlapping circles. Then click the dividing line between the layers to link the two layers together.

Or, you can do the same thing by choosing Layer > Create Clipping mask.

Notice that the money now appears, masked by the logo text. A downward-pointing arrow appears in front of the money layer name and thumbnail in the Layers palette, indicating that the layer is grouped with the layer below.

Animating position changes within a vector-mask layer

Although the money and text layers are linked, you can still make position changes to individual layers.

1 In the Animation palette, click the Duplicate Current Frame button to create a new frame.

2 Select frame 1 in the Animation palette. In the Layers palette, deselect the Text layer, leaving only the money layer selected.

3 Select the Move tool in the toolbox.

4 Drag the money layer in the image window, moving it down until Ben’s eyes are in the middle right of the letter S in the text layer.

5 Select frame 2 in the Animation palette.

6 Drag the money layer in the image window, moving it up until Ben’s eyes are in the upper left of the letter S in the text layer.

5 Click the Play button to play the animation. The money moves left to right inside the logo. Click the Stop button to stop the animation.

6 Save as lnbill.psd

Smoothing the action

In order to make the money action look a little smoother, you'll use the now-familiar tweening feature to add more frames to the animation.

Before you begin, make sure that frame 2 is selected in the Animation palette.

1 On the Animation palette menu, choose Tween to open the Tween dialog box, and then do the following:

• For Frames To Add, type 2.

• For Tween With, select Previous Frame.

• Under Layers, select All Layers.

• Under Parameters, select Position.

• Click OK to close the dialog box.

2 In the Animation palette, select Forever on the pop-up menu.

3 Choose Select > Deselect Layers, and then click the Play button in the Animation
palette to preview the animation.When you've seen enough, click Stop.

The animation is still bumpier than ideal, so you'll fix that next using the same or similar techniques as ones you used with the previous two animations in this lesson.

4 Select frame 2 and then Shift-click frame 3 to select both new frames. Then choose Copy Frames on the Animation palette menu.

5 Select frame 4, and then choose Paste Frames on the Animation palette menu to open the Paste Frames dialog box, and select Paste After Selection. Then click OK.

6 Click frame 5, so that it is the only frame selected, and drag it to the right, so that it becomes the last frame in the animation.

7 With frame 6 selected, hold down Shift and click frame 1 to select all the frames, and then select 0.2 from the time delay pop-up for any one of the frames. Then choose File > Save.

Previewing and saving the vector-mask animation

Now, you'll put your animation to the test by previewing it to see if the wave action meets your standards.

1 In the Animation palette, click the Play button. When you are ready, click the Stop button to halt the animation.

2 If necessary, make any adjustments to the delay or the order of the frames to correct errors or set the timing the way you want it to be.

3 Preview the animation again and continue to make adjustments until you are fully satisfied with the results.

4 When satisfied save animation first as lnGIF2.psd, THEN File>Save for Web

• For the file format, choose GIF

• Under Color Table, choose Perceptual for Reduction and 256 for Colors.

• Under Transparency, select the Transparency check box (to preserve the transparency of the original image).

• For Matte, select the white swatch from the pop-up palette, if it is not already selected.

Click Save,

Save as lnBill.gif (ln = last name in lower case) and test on several browsers