Water Ripples

CATEGORIES: Flash, Tutorials | Cyndy Cashman | October 07, 2005

You have a beautiful bitmap image reflecting the shoreline you’re planning to use in your Flash movie. If you could only make the water ripple, life would be perfect. Well, digital media is all about illusion. So, follow the steps in this tutorial to learn how to create the illusion of water rippling as a leaf floats across a body of water.

STEP 1: Import an Image

Create a new Flash document. Choose File>Import>Import to Stage. Locate the image you wish to import and click the Import button. Select the image on the Stage and convert it to a Graphic symbol by pressing F8. In the dialog, enter “waterway” for the symbol name and choose Graphic for the behavior. Click OK. Rename layer 1 “background.” Select Frame 30 and press F5 to extend the Timeline.

STEP 2: Create a Movie Clip

Click the Insert Layer button to add a new layer. Rename the layer “ripples.” Open the Library panel (Command-L) and drag an instance of the waterway symbol onto the Stage in the ripples layer.

Select the waterway instance on the Stage. Press Command-K to open the Align Panel. Click the To Stage button then click the Align Vertical Center and Align Horizontal Center buttons. With the instance still selected, press F8. In the dialog, enter “effect” for the name and choose Movie clip for the behavior.

Select Frames 20-30 of the ripples layer. Delete these frames by pressing Shift F5.

STEP 3: Setup the Timeline

Select the effect movie clip from the Edit Symbols drop-down menu located in the upper right corner of the Timeline. This will open the symbol’s timeline. Rename layer 1 “image.” Click the Insert Layer button to add a new layer. Rename it “ripple.”

Select Frame 20 in both layers and press F5 to extend the Timeline. Control-click (right-click) on the ripple layer’s name and choose Mask from the context menu.

STEP 4: Tweening the Image

Select the image layer. Place an instance of the waterway symbol onto the Stage. Use the Align Panel to center the image on the Stage. Insert a keyframe in Frame 5 by selecting the frame and pressing F6. Insert keyframes in Frames 15 and 20. Move the playback head to Frame 1. Select the instance of the waterway. In the Properties panel, change the Alpha to 0%. In Frame 5, change the Alpha to 90%. With waterway still selected choose Modify>Transform>Scale and Rotate. Enter 90% and click OK. Click on Frame 1. In the Properties panel, choose Motion from the Tween menu.

STEP 5: Tweening the Image (continued)

Move the Playback head to Frame 20. Select the instance of the waterway. Choose Modify>Transform>Scale and Rotate. Enter 120% and click OK. In the Properties panel, change the Alpha to 0%. Click on Frame 15. In the Properties panel, choose Motion from the Tween menu.

STEP 6: Adding the Ripple

Move the Playback head to Frame 1. Select the ripple layer. Click the Oval tool in the Toolbox. In the Properties panel set the Stroke height to 4 and no Fill color. Choose any Stroke color. The stroke color doesn’t matter since the stroke will be used as a mask. Draw an oval on the Stage at the location where you want the ripple to begin. Be sure you draw the oval in the ripple layer.

STEP 7: Finishing the Ripple

Select the oval you just drew and choose Modify>Shape>Convert Lines to Fills. Select Frame 20 and press F6 to insert a keyframe. Move the oval to the area you want the ripple end. Click the Transform tool in the Toolbox. Drag the handles to adjust the size and shape of the oval. Select Frame 1 of the ripple layer. In the Properties panel select Shape from the Tween menu.

STEP 8: View the Results

Click the Scene 1 button at the upper left of the Timeline to return to the Main Timeline. Publish your movie by pressing Command-Return or choosing Control>Test Movie. Now that you know the basic procedure for creating the ripple effect you can adjust the effect by increasing or decreasing the number of frames in the effect plays in the effect movie clip. Remember, if you increase the amount of frames in the effect movie clip, you will also need to increase the Main Timeline’s frames accordingly.

STEP 9: Add a Floating Leaf

Now that we have the ripple effect, we’ll add a floating leaf to our movie. You’ll need an image of a leaf or you can draw your own in Flash. Return to the effect Movie clip Timeline. Insert a new layer above the ripple layer. Rename the layer “leaf.” Import an image of a leaf to the Stage by choosing File>Import to Stage. Locate the image file and click Import. Select the image on the Stage and convert it to a Symbol by pressing F8. Name the Symbol “leaf” and choose Graphic for the behavior. Position the leaf on the Stage at the beginning of the ripple.

STEP 10: Animate the Leaf

Insert a keyframe (F6) in Frame 20 of the leaf layer. Reposition the leaf on the Stage to the where the ripple ends. Select Frame 1 of the leaf layer and choose Motion from the Tween menu in the Properties panel. Publish your movie by pressing Command>Return or choosing Control>Test Movie to see the effect.

Share This

No Comments

No comments yet.

Sorry, the comment form is closed at this time.

Featured Partner

From our Partners