Flash Loop on Ocean animation Tutorial
Prerequisites: Masking through actionscript, motion tweening.
This tutorial discusses a simple yet very effective technique used mostly in animating water reflections or large water surfaces such as the ocean.
I will walk you through the steps of animating a picture of the ocean using simple actionscript as we’ll only use the setMask method together with a simple seamless motion tween.
To make you have a better understand on this tutorial, check the flash animated ocean below. This is what we are going to make by the end of this tutorial.
src="http://cambodiaxp.com/flash_kits/tutorial_kits/23/ocean-flash-loop.swf"
align="middle" menu="false" quality="high" bgcolor="Transparent"
width="420" height="160" name="index"
type="application/x-shockwave-flash" wmode="transparent"
pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
So fire up your flash IDE and start up a new flash movie, make it 420x260 with a white background.
Start by importing the picture we’ll be animating, it’s a beautiful sunset scene made with a 3D package by me (sunset.jpg).
You’ll have to reduce the image size by 50 percent so that it fits your stage size, in case you don’t know how to do that, here’s a quick how-to:
Select the picture, expand your side panel and click on the Transform tab (if you don't see one, simply press CTLT + T. Check the constrain checkbox and enter 50 % in either the width or the height box and finally hit enter and there you go, your graphic is resized (figure 1).
Figure 1
Center it up so that it fills the entire visible area of the stage, select it and hit F8, you heard me right, F8 that is convert it to a library symbol, we’ll choose a movie clip symbol and we’ll leave the default symbol name of symbol 1 (figure 2).
Figure 2
Now once this preparatory stage is done, we start building the core of the animation, the waves…
The whole effect relies on making the wavy water surface move realistically, for that purpose we’ll need a movie clip and we’ll need to motion tween this clip then assign it as mask that will reveal an underlying picture slightly different than the one we already have on stage.
So let’s start with the easy part, select the first frame in the timeline, right click and choose copy frame, then make a new layer, by default this new layer (layer 2) will be placed above layer 1, right click on the first empty frame of layer 2 and choose paste frame (figure 3).
Figure 3
Now this is very important for the effect, right click on the copy of the image on layer 2, select break apart and then select with your mouse the upper part of the picture, yes everything above the sea and just hit delete to remove it! Then, using the Up arrow key, move the dropped copy of the image on layer 2 few pixels down. To end up with this step, click on the cropped picture and press F8 to convert it to a movie clip, give this movie clip the instance name of masked (Figure 4).
Now for the last part, draw a horizontal line with the line tool, let it be stage wide, change its stroke height to 3 then click the modify menu and choose Modify > Shape > Convert Lines to Fills (figure 5) and then press F8 to convert it to a movie clip. Give it the instance of myMask.
Figure 5
Double click on this movie clip of the horizontal line and once you’re inside its timeline, position it 5 pixels higher than the horizon (of the original image on layer 1) then press and hold the ctrl button on your keyboard and make several copies of the line, let them be 5 pixels away from one another, keep on making copies till you reach the lower end of your stage (figure 6).
Figure 6
Notice that the color of the lines doesn’t matter as it won’t appear at all, only the thickness, the number and the spacing of lines will affect the final visual aspect of the moving waves.
Now, select all the lines (ctrl+A), press F8 and choose movie clip as symbol type. Go to frame 20 on the timeline, right click and choose insert keyframe.
Still on the timeline, click anywhere between frame 1 and 20 and from the properties panel choose motion tween. Now move the playhead to frame 20, select the lines on the stage and nudge them down a few pixels with the Down arrow key.
The last thing we’re going to do is to assign the moving lines as a mask to the masked movie clip, this is where the effect really comes together.
So go up one level, back to the main timeline, make a new layer, rename it to actions and lock it so you wouldn’t accidently place any content on it (it’s always a good idea to separate design from code), on the first frame on this actions layer, right click and choose Actions then type this simple line of code:
That’s it! Our effect is now ready for testing. Hit ctrl+Enter and enjoy the soft waves of this virtual ocean.
Last thoughts:
Well to end up this tutorial, I would like to explain a bit the single line of code we used to achieve the masking effect.
The setMask method of the MovieClip class assigns a movie clip as mask for another, in our case the “myMask “ was the mask and the “masked” was the movie clip masked by it. This masking allows us to see the masked movie clip only through the filled areas of the mask (and that’s why we converted lines to fills) whereas the non-filled space in between the lines will remain perfectly transparent thus allowing us to see the original ocean image through it. Since the cropped image is slightly shifted, the movement of the mask movie clip gives the illusion of small waves on the surface of the ocean.
Further experimentation:
Try to reduce the distance between the lines or even making the lines a bit curved and see what impact would that have on the visual effect.
You might also want to explore the new bitmapData methods, they offer some noise filters that would greatly enhance what was achieved till now.
Finally, If you feel like spending some few buck, you may wanna check out the flash loop collection from FlashTrue.com
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
