DisplaceR is a lightweight Displacement Map Filter Tweener targeting Flash Player 9. Written in ActionScript 3.0¹², DisplaceR is built with the idea to be as simple as possible, becoming accessible by all kind of flash developers and designers. Being a static class makes it available anywhere in your project. Tweening is achieved only with one line of code.
Example:
DisplaceR.to(source_mc, map_mc, Regular.easeInOut, 255, 0.5);Demonstration:
(Before jumping in depth you may recollect the DisplacementMapFilter Documentation)
DisplaceR library provides static mothod "to()" for displacement manipulation of a source display object according the color data of provided map image. Methods such "from()" or "reverse()" may be added in future versions, for now the only other static method available is "dispose()". DisplaceR can also be used as object with "displace" property:
var displacer:DisplaceR = new DisplaceR(source_mc, map_mc);The effect relies entirely on the provided map. In the example above the map is composed of four layered readial gradients in total placed in a movie clip in the Flash IDE - method that I call "hand-made". Of course you can pass a bitmap data generated with script on the fly, update it every frame etc.., but that is another subject :)
var tw:Tween = new Tween(displacer,"displace", Regular.easeIn, 0,255,5);
Let's look more closely at colors and how to generate displacement map without writting any code. DisplaceR uses the Red Color channel for displacement of pixels in X axis (horizontal) and the Green Color channel for displacement in Y (vertical). If you chose to pass a movie clip as map then it can be constructed of several overlapping colored gradients with blend mode ADD or SUBSTRACT applied to them (pretty much the same way as alpha or erase masks are built). This way we are ensuring that any color data in a layer above will be multiplied or substracted with the layer below in order to produce map with usefull color data. Generation of displacement map in short:
Since Red color channel displaces in X axis while Green color displaces in Y, both need to be able to manipulate the values positively or negatively. Thats why a map which creates no displacement at all is filled with a "middle-color" values of #808000.
#00(negative displacement) - #80(no displacement) - #FF(positive displacement);
Blend Modes are extremelly usefull when generating displacement maps. However we have to conform mathematically how to add/substract hex colors values. Here are how the different blend modes affect color data mixing with transparency:
Finally if you need a callback function you can use "onComplete" property:
DisplaceR.onComplete = function():void { trace("tween finished"); }
DisplaceR Library SWC will be available shortly, in the meanwhile view source at Github³ or download some flash examples from here.
¹ built on top of the DisplacementMapFilter and the native flash Tweener. Compiled is only 4 kb!
² DisplaceR can be easily translated to AS2 in order to target Flash Player 8. Contibutions are wellcome :)
³ current version of the tweener is still in earliest stage of development and it is possible to have flaws.
DisplaceR - Displacement Map Filter Tweener written in ActionScript 3, targeting Flash Player 9. Compiled is only 4kb.AS3, displace, filter, effect, tween, animation, layer, gradient, lightweight, library, blendmode, add, substract
Dungeon Screener
9215 
3510 
Quantum
Burning Fridges
Ultima IV
Puzzle
Rush Hour
