This effect will reflect a display object and apply a displacement map filter which animated each frame. The result is what looks like something reflected on the surface of water. This is a response to a request on my site, www.avanderw.co.za, for a commented and compilable version of this effect. To run this file, include it in your editor of c…

water-reflection-effect

package net.avdw
{
  import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BitmapDataChannel;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.DisplacementMapFilter;
	import flash.filters.DisplacementMapFilterMode;
	import flash.geom.Matrix;
	import flash.geom.Point;
	
	public class Driver extends Sprite
	{
		private var offsetX:Number;
		private var offsetY:Number;
		private var displacementMap:DisplacementMapFilter;
		private var perlinBmpData:BitmapData;
		private var reflection:Bitmap;
		
		public function Driver()
		{
			if (stage)
				init();
			else
				addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			
			// create something on the screen to reflect
			// this can be any form of display object, e.g. sprite or movie clip
			// essentially anything that extends
			// http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html
			const red:uint = 0xFF0000;
			var somethingToReflect:Sprite = new Sprite();
			somethingToReflect.graphics.beginFill(red);
			somethingToReflect.graphics.drawCircle(0, 0, 30);
			somethingToReflect.graphics.endFill();
			// center the display object on the stage
			somethingToReflect.x = stage.stageWidth / 2;
			somethingToReflect.y = stage.stageHeight / 2;
			addChild(somethingToReflect);
			
			// copy the something to reflect into a BitmapData object
			// http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html
			// NB to note that I am centering the display object on the reflectionData object when drawing
			// this is because the somethingToReflect has a circle about the 0,0 coordinate
			// in this exact case I am moving it by its radius 30,30 to center it on the reflectionData
			var reflectionData:BitmapData = new BitmapData(somethingToReflect.width, somethingToReflect.height);
			reflectionData.draw(somethingToReflect, new Matrix(1, 0, 0, 1, 30, 30));
			
			// create the perlin noise used for the displacement map
			// http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000799.html
			offsetX = 0;
			offsetY = 0;
			perlinBmpData = reflectionData.clone();
			perlinBmpData.perlinNoise(45, 5, 3, 0, false, true, 7, true, [new Point(offsetX, offsetY)]);
			
			// create the displacement map (which distorts the image)
			displacementMap = new DisplacementMapFilter(perlinBmpData, new Point(), BitmapDataChannel.RED, BitmapDataChannel.GREEN, 10, 50, DisplacementMapFilterMode.CLAMP);
			
			// put the reflectionData into a "container", this case bitmap
			// it will be a copy of the original drawing, so we scale it to reverse it
			// and then position it under the original image
			reflection = new Bitmap(reflectionData);
			reflection.scaleY = -0.75;
			reflection.y = somethingToReflect.y + somethingToReflect.height + reflection.height - 30;
			reflection.x = somethingToReflect.x - 30;
			addChild(reflection);
			
			// lastly apply the filter to the reflection to give it the displacement effect
			reflection.filters = [displacementMap];
			
			// this is one frame of the effect
			// to animate it add an event listener that will trigger when entering the frame
			addEventListener(Event.ENTER_FRAME, animate);
		}
		
		private function animate(e:Event):void 
		{
			// animation happens by moving the offsets for the perlin noise
			// so we regenerate the perlin noise with the offsets changed
			// and re-apply the filter to the reflection
			// NOTE: it would be faster to generate a larger seamless perlin noise map upfront
			// and then scroll over the map with the size rectangle for the effect, than having
			// to regenerate it on each frame
			offsetX += 1;
			offsetY += 0.1;
			perlinBmpData.perlinNoise(45, 5, 3, 0, false, true, 7, true, [new Point(offsetX, offsetY)]);
			reflection.filters = [displacementMap];
		}
	
	}

}

Hi

I'm really sorry for still bothering you with this, but I've had a look at this code and still don't really know how to use it. I don't know what code to write in the AS3 FLA file that will link it to the .as file.

Would you be able to please make a flash AS3 FLA file that I can download that will read this code from the .as file.

When I have a look at that I will understand everything better.