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).

  • Nice one!

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

  • Zeh

    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.

  • I (heart) Tweener.

    []s

  • This is nice 🙂

  • 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.

  • (L) Tweener!

  • Cay

    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,

  • Zeh

    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.

  • Oh, very nice, zeh!

  • gropapa

    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!! 🙂

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

  • Zeh

    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.

  • Pingback: javascript displacement mapping | Soundstep()