Attention: you're visiting an archived version of this post on my old website. Click here to view this same post on my new website.

Tweening a displacement map

DisplacementMap is one of the coolest BitmapFilters available from Flash 8 onwards. Still, it’s severely underused. Does it need more love, or does love actually need a displacement?

{}

Don’t take it too seriously.

This example tweens the scale of the displacement map effect to create an effect of increasing depth, using the new filter shortcut classes on Tweener 1.31.66. Part of the code looks something like this:

Tweener.addTween(this.background, {_DisplacementMap_scaleX:60, _DisplacementMap_scaleY:60, time:0.3, transition:"easeOutBack"});

Source here (Flash 8, ActionScript 2) or here (Flash CS3, ActionScript 3).

Posted on 7/Oct/2007 at 7:53 am | Comments (0) | Trackbacks (0) | Categories: Sources, Tweener

Comments (13)

Nice one!

Posted by Keith Peters on 7/Oct/2007 at 8:24 am

Cool!!
Is that a heart mark or a breathing as…a love…

Posted by keita on 7/Oct/2007 at 9:03 am

Keita: nah, neither.. like I said, don’t take it too seriously. This example was actually made a few months ago, using a heart as something that beats and increases in size seemed natural to show the displacement map feature. It has been sitting on my computer for ages just waiting for the new Tweener features to be released.

Posted by Zeh on 7/Oct/2007 at 9:32 am

I (heart) Tweener.

[]s

Posted by Arthur Debert on 7/Oct/2007 at 1:10 pm

This is nice 🙂

Posted by Timo Virtanen on 7/Oct/2007 at 10:06 pm

Liking the new stuff. I was hoping that it was all still very simple as that is what makes Tweener successful and it is. More extendable this way and yes the versioning on SpecialPropertiesDefault can get troublesome if they are all in one. I used to work on the Torque engine and it had that problem. I like separating them out and glad you are doing it now.

Posted by Ryan Christensen on 8/Oct/2007 at 9:44 am

(L) Tweener!

Posted by Gabriel Laet on 9/Oct/2007 at 5:51 pm

Hi Zeh, nice example 🙂
I’ve been playing a lot with displacement maps lately, and the one thing that I haven’t been able to find is how to create displacement maps out of 3D objects… I’ve tried a few technics in 3dsmax and Maya but couldn’t get the color channels working properly… do you have any clues? how did you make the heart displacement map? 🙂

Cheers,

Posted by Cay on 10/Oct/2007 at 4:40 am

Cay: indeed. It’s a tricky thing.

In my case, it worked because the heart is pretty much spherical – so I didn’t have to worry a lot about distortion, just have a stronger or weaker distortion.

What I did was this: on Photoshop, I created the heart as a black-and-white drawing; a *heightmap* of what I actually wanted. Then I created two layers: one, with a linear gradient from left to right (from green to transparent). The other, with a linear gradient from top to bottom (from red to transparent). I masked them both with the “heightmap”, stacked them together, used one additional layer on the bottom with 50% gray, and that was it.

I also had additional layers for shadow/lighting, and they were also done based on the original “heightmap” layer. The shadow/light surface differentiation was made with a white-black gradient coming from top to bottom.

Unfortunately I can’t seem to find the PSD anymore, so I don’t know if that’s very helpful. But looking at the images inside the .fla can make things a bit easier to understand.

And again, this technique only works because the object I had was more or less spherical. With a more complex surface, it wouldn’t work so well. There must be a better way of calculating a displacement map out of a heightmap.

Posted by Zeh on 10/Oct/2007 at 6:18 am

Oh, very nice, zeh!

Posted by Rafael Rinaldi on 1/Nov/2007 at 12:39 pm

indeed this is amazing!
I have to admit i have no idea how the displacementMapFilter works, il looks too “mathematical” for me but i guess finding this PSD would so helpful for us i guess.
KEEP DIGING PLZ!! 🙂

Posted by gropapa on 1/Apr/2008 at 8:30 am

Could you post the picture you used as the filter please?

Posted by Eric Cancil on 5/May/2008 at 12:24 pm

Eric, they’re both inside the .fla available at the source download.

Like I mentioned above, I don’t have the original PSD anymore, it was just something I’ve done as a one-shot thing and I think I deleted it later.