 |
 |
|||||||||||||||||||||||||||||||||||||
January
27 , 2000
— updated August 25, 2000. See below.
Mimicking a Water Ripple Effect in FlashRecently there was a request on the FreeHand and Flash newsgroups asking how to make a Ripple effect. There was a neat sample spread out, but no offering of FLA files or instructions on how to accomplish it. Below is my own home brewed version with samples included. Depending on what you need, there are several examples provided below. Enjoy!
Version: 3-4 |
||||||||||||||||||||||||||||||||||||||
 |
 |
 |
||||||||||||||||||||||||||||||||||||
|
No fancy ActionScript, no Alpha tricks..... it's all done with magic. Seriously, this effect is accomplished with a simple stack of Tweened Masks. In the above sample, I only used 4 masks that overlap each other. Each Mask movie contains the same background image only slightly enlarged in a progression for the levels of "warping" that you see. The resulting effect makes it look like the image below is being slightly warped by a water drop ripple. Pretty cool huh? Download the Flash (.FLA) file below, and see how it's done.
Water Ripple with Animation What? Is that animation under there? Yep, this effect is extremely versatile and you can add just about anything under the ripple. It's all about Symbols and placement in the Ripple masks. You can also change the color or in the above sample, the brightness of the placed Mask movies. With that variant, it adds more to the illusion of liquid and highlights. See how it was done in the downloadable FLA file below.
Water Ripple with Fade out — New! The new example above, now shows how to fade out the ripple. Still as simple as ever with no ActionScript needed. The only difference is the size of the final mask shape so that it appears to look like it's fading away. Get the download file below to see how it's done.
If you have any further questions on how it was done, just drop me a note. See my other techniques in Flash:
Visit my site all about FreeHand and see
other tips with Flash. |
||||||||||||||||||||||||||||||||||||||
 |
 |
|||||||||||||||||||||||||||||||||||||
