Layers Magazine tutorial on displacement maps
 |
Tonight I was at Barnes and Noble and I noticed that the latest issue of Layers Magazine had hit the shelves. The tutorial I wrote is about using the mysterious displacement map filter to create a realistic water effect. Click the image to see the results. If I added some ambient noise, people would swear it was a video. The displacement map stuff is still a little confusing to me but I know just enough to get by. This is an important thing to remember when you’re doing Flash. Sometimes you don’t have to know why or how something is working. |
Get it in bookstores now!
Lee
That’s really cool! Never seen that mag out in the wild in the UK, good to see there’s a digital option though
Wow, what a wonderful photo of Amsterdam. Nice water effect also
@lee a bit to realistic (I might add)- seeing this is in Amsterdam, it’s moving a bit to fast – and even the duck (‘eend’ in Dutch; lower right corner) is moving/displacing/distorting along with the water. Other than that, it’s great! Is it possible for you to release the source of this swf? (Maybe a tutorial or two would be appreciated as well…)
Hi Lee,
Cool staff
I’ve experimented too at the beginning of Flash 8
Here the visual and the code : http://jeanphiblog.media-box.net/dotclear/index.php?2005/11/11/177-
Wow, that looks great! Since I live next by the place that’s on the picture I can tell you it’s just like it looks in real life
Thanks for sharing it with us in Layers.
Nice effect! I notice that your page scrolls with a bit of a lag now though, I think that effect eats up memory.
So painful I can barely type. Memory spike killing me. Can’t scroll. Please remove posting. Locking up IE7.
actually thats the problem sometimes with flash,
you can do so darn much, that often i think “hmm strange,it actually works”. or the otherway around.
nice feature in the mag. standard layers buyer <
Hey Lee,
First off, nice work as usual, your a master.
One thing I have a question about. When you click the picture you know how the rest of the site fades out darker and a new window container opens up and resizes to the size of the file being shown, Is that a plug in for wordpress or is it some type of special download? I have seen this before on other wordpress blogs as well but I could never figure out where do get this.
Thanks,
Scott
That’s hands-down the best example of using the displacement map filter I’ve seen. Very nice! Have you done any testing as to which would require less CPU usage, between the displacment method and simply using the video loop?
I love the potential it provides, but I know it can be a beast to the CPU. This example dipped my 2 x 2.8 GHz Quad Intel G5(mac) about 15%-17%. No real noticeable lag though.
@Lee could you post the FLA for this please? I’d love to see how its done!
Scott:
Its called Shadowbox (a variation on lightbox) . Look at the source code.
@Lee: All looked really great when I noticed your displacement map experiment harmed what appear to be 2 little ducks in the lower right of the picture. Bad Lee!
I really like the displacement map effect. I have a subscription to Layers Magazine and finds it a great resource for the Adobe Suite. I will admit majority of the content is geared toward video and photography. But from time to time it does have some good Flash tutorials.
very cool Lee!! I watched some of this reflection effects before, but yours look much better, the speed of the water reflection is nice and the final effect looks very realistic.
I wish layers magazine could offer a way to buy a single magazine (e-magazine) and not the whole year subscription, because although I think there is a lot of useful information in each magazine for all the adobe products (Photoshop, After Effects, etc), I’m only use Flash. Since I live in Latin America we don’t see the printed magazine in bookstores.
Nice one Lee.
Just on the topic of magazines – do you know if the new issue of Flash Flex Developers magazine is out in the US yet? It doesn’t ship to Australia so I never know when it’s out…
Jassa
Displacement maps are great, as ol’ Bert Monroy explains them pretty good here:
http://revision3.com/pixelperfect/displacement/
Ahoi Lee! Very nice example how to use displacement maps in flash. At Layers-Magazin i downloaded your example “Create Some Noise, pg 84″, but in die water.fla i didn’t found any actionscript-code. I ‘ve opened the water.fla in flash pro cs3 and cs4. Do i have to put the code from the magazine manually to the fla?
from hamburg – jash
Hi Lee,
I bought the magazine and it was well worth it for $10 to find out how you achieve the water effects. Happy Holidays to you! Cheers!
Kenn
It does hog on a lot of memory
Happy New Year
Hi everybody:)
Look, I made face morphing using DisplacementMapFilter:
http://lodging-world.com/flash_fun/flash_morphing.htm?ID=D3RQ3Rvcl27P
The biggest piece of work was creating displacement map itself) But as a result I have it working pretty well:)
[...] community. They also have an excellent video tutorial resource site. I picked one magazine covering Lee Brimelow’s tutorial of the image displacement map filter in Flash to imitate water ripples in a canal somewhere in [...]
I really liked the effect you used in the November/December 2008 issue of Layers Magazine with the water. I downloaded the example “Create Some Noise, pg 84? files, but there was no Action Script in the fla file. Do you have a tutorial (or downloadable files) posted somewhere outlining how you were able to create this effect?
Thank you!