How to Animate Ice Water in Flash

Animating water filling up a glass of ice can teach you basic animation techniques in Flash, including masking, tweening and creating effects with movie clips. The intent isn't to create the illusion of realism, but to create simple motion.

Difficulty: Moderately Easy

Instructions

1. Add your basic animation objects to the Flash timeline. Place an empty glass on the bottom layer and an ice cube on the layer above. You can draw them, create them with a graphic program like Photoshop or Illustrator, or use a stock photograph. If you work with stock photographs, select or mask your object and save the file in PNG format to preserve the transparent background.

2. Add a new layer at the top of the timeline named "water." Draw a rectangle with a no stroke and a light blue fill from the middle of the glass mouth to the glass bottom (the rectangle should be wider than the glass). Add an ellipse the across the glass' mouth with a white 4-point stroke and a light blue fill. The ellipse and rectangle will become one object.

3. Convert your glass, ice and water objects to symbols. Select each object individually and choose "Convert to Symbol" from the Modify menu (make sure to choose the "movie clip" option.) The three symbols will be added to the Flash library.

4. Create a mask. Add a new layer named "mask" at the top of the timeline. Draw a shape just inside the glass rim the shape of the hollow area of the glass. Right or Control click the mask layer in the timeline and choose "mask" from the popup menu. The layer will mask your ellipse and rectangle so that they appear to be water filling the glass to the rim.

5. Duplicate the glass layer and drag the copy to the top so that it hides the water and ice. Choose "alpha" from the Color pulldown menu in the Properties palette and set the value to 10 to 15 percent. Adjust the alpha of the ice and water symbols as well.

6. Select all the layers in frame 50 on the timeline. Choose "Frame" from the Insert menu Timeline submenu to fill in all 50 frames. Select the last frame of your "water" layer and Choose "Keyframe" from the Insert menu Timeline submenu so that the circle in the frame becomes a solid dot. Now the timeline is ready to animate.

7. Drag the water symbol in the first frame of the water layer and drag it so that the top of the water covers the bottom of the glass. Select the last frame/keyframe and drag the water so that the top is at the level where you want the glass to be filled. Select all of the frames in the layer and choose "Create Motion Tween" from the Insert menu Timeline submenu. The water will appear to fill and cover the ice.

Tips & Warnings

• To make the animation even more cool, create layers for each cube of ice. You can animate the cubes so that they appear to shrink (melt) and tumble (rotate).
• Experiment Flash CS3's new blend modes to enhance the transparency effects of the different layers.
• Stock Xchange is a great source for free high quality stock photographs. You must become a member before you can download images.