Created
July 26, 2013 08:37
-
-
Save avanderw/6087271 to your computer and use it in GitHub Desktop.
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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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]; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.