3x creative use of displacement filter
Monday, July 21st, 2008I fell in love with DisplacementMapFilter as it first time appeared in Flash 8. All tree demos you see here are remakes of some old AS2 experiments; in AS3 performance should not be such issue - actually the only performance test I took was when I displaced 800×600 bitmap with itself back in AS2 and that was a limit that time; here we use AS3 and we are using much smaller maps.
My tips:
- I always use red channel when dealing with artificial displacement maps (DisplacementMapFilter.componentX = BitmapDataChannel.RED). The neutral color is then 0×800000 (R:128, G:0, B:0), any brighter or darker (red) color will affect the filter.
- To apply filter temporary (you can remove or change it later) pass it to the ‘filters’ array of any DisplayObject, to apply it permanently use applyFilter method of appropriate BitmapData object.
Wave (ripple) displacement effect
The idea is very simple, I draw wave like gradient, then scale it and apply it as a displacement filter. I hope someone will create more realistic gradient and send me a link :). In top left corner you can see preview of the displacement map - the fill color is neutral (0×800000) and the wave is using full red to black gradient.
|
Distort displacement effect Deform your face! That game is very old but I never realised it is so easy to get similar effect just with displacement filter. Simply rotate the ’scaleX’ and ’scaleY’ properties to displace selected area to any direction, using soft mound (radial gradient) as displacement map. In top left corner see the displacement map preview. |
|
Glassy Button (material with refractive index) Of course it is just simulation of refractive index, and absolutely unrealistic simulation to be honest, but who cares :). In this demo I use right tree filter effects: first I get a rounded rectangle shape (the right one on the top) and apply inner glow filter to soften the edges. The result is used as displacement map (the left one on the top). Then I get another copy of the same shape and apply inner bevel filter with ‘knockout’ parameter that hide the shape itself and gives us just the bevel. Then you can animate the displacement and bevel “depth” or even change the shape at runtime. For this demo purpose I drag the button with mouse - imagine the result achieved if the button will hover above playing video. |
| Download source files here. |
|
PS: The hot babe is Syrinx by W. McMillan, Kelvin Groove Museum. |
This is some text prior to the author information. You can change this text from the admin section of WP-Gravatar Flash / Flex developer, London UK, Bratislava SK Read more from this authortagged under:
4 Comments
Piergiorgio Niero
• Visit Site
July 21st, 2008
good job man! waterdrop is very nice
Jarav
• Visit Site
July 24th, 2008
Thanks. Awesome demos. Do you know of any online tutorials where I can learn about the various filters?
daniel.sedlacek
• Visit Site
July 25th, 2008
Jarav: Well, no :). You may try to google out something. But if you take a look at my source files, all the important steps in the code are documented.
mi4k
• Visit Site
November 22nd, 2008
Good Job, Dano
Live Preview
Leave a comment