April 25, 2003
Drop Shadow MX

After a request by Eric I sat down and checked if my Soft Shadow prototype could be modified to support just any shape. Here's the result. It's not a real shadow like you could get with gaussian blur, but as far as I can see that cannot be accomplished by simply duplicating movieclips.

Download the source here.

Posted at April 25, 2003 05:32 PM | Further reading
Comments

That's tight man! Nice work!

Posted by: Bob Clagett on April 25, 2003 07:28 PM

That is most definitely nice .. great work!

Posted by: Jason Key on April 25, 2003 09:20 PM

Just great!

Posted by: dani on April 26, 2003 02:14 AM

very good looking and flexible shadow! good job .. man!

Posted by: jepezi on April 26, 2003 08:46 AM

Great work~!

Posted by: Danger on April 26, 2003 11:21 AM

sweet! :) :thumbs up:

Posted by: klaut on April 27, 2003 12:25 AM

To repeat a common setiment .... this is great!

Posted by: Daniel Wabyick on April 28, 2003 09:31 PM

good job

Posted by: e okyere on April 29, 2003 04:39 PM

Nice, but what you're doing is wrong. You're basically duplicating the symbol and making it bigger with a lesser alpha. It would work with filled symbols (like a circle) but not with other stuff (like your Q example).

What you have to do is duplicate the object and set in on positions around your original symbol. No scaling is necessary. For example, suppose you have this situation:

_____
__o__
_____

_ = empty space
o = object

To achive a 1-radius gaussian blur on the shadow, you have to duplicate your object to 4 different symbols, each one in a different position, each one with something like 25% alpha, and move them around your symbol. like this:

__d__
_dod_
__d__

_ = empty space
o = object
d = duplicated drop shadow

That way, you'll be able to achive real blurring. Of course my example is being a little generic, but the basic ide is that you have to make a circle around your original object (the radius, number of steps, and alpha will depend on the type of gaussian blur and opacity you want to achive). There's no scaling involved.

It CAN be achieved with duplicating movie clips, but depending on the blur level you want to achieve, you'll have way too many duplicated movie clips.

Posted by: zeh on April 29, 2003 08:20 PM

Thanks Zeh for pointing this out. Of course I know that this is not a real one, but as you wrote yourself, the correct way would probably perform even worse or run into the too-many-alpha-layers bug.

Posted by: coma2mario on April 29, 2003 08:32 PM

Well, looks like you're right, it can't be done correctly: too heavy.

More than that, because of flash alpha buffering bugs, it'll never render correctly, no matter how long it takes: if you have hundreds of 3%-alpha black symbols on top of each other, they'll never become almost totally black. They'll (at most) render at 10% black or something to that effect. Weird.

I've managed to to it, even though it's slow as hell depending on the blur ammount. In the end, funny, enoughit'll only work on low-quality movies: Medium or high-quality movies simply doesn't render the shadow colors correctly (above paragraph's reason)

Kinda hackish, here it is:
http://www.fatorcaos.com.br/trash/qm_shadow3.html

The blur alpha property is off, but the blur ammount works. Although too high values will halt any computer...

Not useful, but cool as an experiment.

(.fla at the same directory)

Posted by: zeh on April 29, 2003 09:48 PM

My god, how many spelling mistakes on the above post. My apologies.

Posted by: zeh on April 29, 2003 09:57 PM

I think you've already heard it: great job ! This is really useful ! :-)

Posted by: lapo on July 4, 2003 11:16 AM

Muy buena animacion, ojala el codigo sea libre!!!

Posted by: Francisco on October 25, 2003 05:52 PM

Just amazing !!!!! Jaw-drop-shadow !!!

Posted by: Marc-André Lavoie on April 7, 2004 05:59 PM

Is it my imagination, or does the shadow on the ball suffer from a direction change. It's more like a motion blur, but only from one side. And since the ball is rotating, it appears that the ball's shadow is somehow rotating as well.

BTW, I love this example and don't mean to detract from it's shear beauty.

Is there any way you would be willing to tackle perspective and parallax for cast shadows rather than drop shadows?

Posted by: Jason Burnett on February 25, 2005 07:16 AM

@Jason: no its not your imagination. It's what happens. The problem is that currently it is not possible to create a real blurry scripted dropshadow with the current version of Flash. What is actually happening here is that I layer several b/w copies of the same movieclip on top of each other whereby each copy is scaled up by a tiny amount. In order to function correctly I would need to offset each outline on its own by a certain amount - inner outlines would have to be shrunk, outer outlines to be grown. You see that this is something that cannot be accomplished by simple scaling.

Perspective shadows? Sounds like an interesting idea. I will add it to my to-do list.

Posted by: Mario Klingemann on February 25, 2005 12:38 PM

it's great, but for a beginner the code is really hard.
I try to have a soft shadow for a big letter (like the Q).
Could you post a simple actionscript code (without cursors) where I can just write parameters in the code ?
Thank a lot for your help.

Posted by: bruchet on April 7, 2005 04:12 PM

whatever dude!
is too complicate for me :P

Posted by: gigi duru on May 13, 2005 11:51 PM

I think it could/should have one last feature:
It should have a fixed light point in order to make the shadow move under the object accordingly to it's position on the screen.
Other than that it's great! =D

Posted by: artikboy on May 16, 2005 02:34 PM

I would love to be able to use this without having to do an attachMovie... basically, I just want to add a shadow dynamically to an irregulary shaped object that is already on stage.

Any ideas on how to modify it?

Posted by: Chad Udell on June 9, 2005 05:42 PM

pretty!!!

Posted by: poison on September 13, 2005 04:30 AM

pretty!!!

Posted by: poison on September 13, 2005 04:30 AM
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?



Thank you!

Most Visited Entries
Sketches, Works & Source Code
Lectures
Contact
Backlog
In Love with
Powered by
Movable Type 2.661

© Copyright Mario Klingemann

Syndicate this site:
RSS 1.0 - RSS 2.0

Quasimondo @ flickr
Quasimondo @ LinkedIn
Quasimondo @ Twitter
Quasimondo @ Facebook
Quasimondo @ MySpace
Quasimondo is a Bright
Citizen of the TRansnational Republic
My other blog in german
Impressum


My family name is written Klingemann,
not Klingelmann, Klingeman, Klingaman, Kingemann,
Kindermann, Killingaman, Klingman, Klingmann, Klingonman
Klingemman, Cleangerman, Klingerman or Kleangerman

profile for Quasimondo at Stack Overflow, Q&A for professional and enthusiast programmers