February 24, 2003
Soft Shadow MX

I've just created a little prototype for a project that I want to share with you: it's a blurred rect drawing method which might come in useful if you want to draw soft shadows or glows. I think the peformance should be pretty ok as long as you do not use a lot of 50 pixel radians. I've created a little demo so you can see how it looks. Download the source here.

Posted at February 24, 2003 06:04 PM | Further reading
Comments

WOW!

Posted by: Jorge on February 24, 2003 07:10 PM

very nice one, mario!

Posted by: claus wahlers on February 25, 2003 01:06 AM

It's fantastic!

If you watch my site, you'll see that shadows made in by the hard way! I can't wait to study your code,

Great job! your are one of the gurus!

C.

Posted by: carlos on February 26, 2003 12:15 AM

Looks really good!

Can you (or anyone else) post some usage examples? For example, how would you use this prototype to build a makeShadowBox() function, for making dynamically scalable shadowboxes?

Posted by: Tom Fitzpatrick on February 26, 2003 08:31 PM

Nice --

Have you tested with multiple items and AS tweens? Just curious about the frame skip or lag.

still -- Nice work.

Posted by: jason on March 25, 2003 12:27 AM

Nice work!
Maybe a nicer one would be to drop a shadow for any geometrical form (some MC)...
Only a rectangle is too restricted...
I hink

Posted by: [.RO]NIN on March 26, 2003 04:12 PM

Hey man, thanks for the great code! I think I will be using it on the next version of my site.

I needed it to render faster, so I modified it slighty and added a "quality" parameter that lets you modify the quality of the gradient (decreasing quality increases drawing and rendering speed).

Here it is below - I'll also send it to you as an FLA:

// Blurred Rect Prototype
//
// V1.0 by Mario Klingemann
// www.quasimondo.com
//
// Usage:
// MovieClip.blurredRect(Upper Corner X,Upper Corner Y, Width,Height, Blur Radius, Color, Alpha [,Quality]);
//
// [Quality] parameter added July 20, 2003 Grant Skinner, www.GSkinner.com
// Quality sets the width of each band in the blur gradient. A lower number gives a higher quality
// gradient (with 1 being perfect quality), but draws more slowly and requires a larger amount of
// CPU resources to render. A higher number (ex. 1.5, 2 or 3) results in faster drawing and rendering,
// but a more banded gradient. The default value is 1.

MovieClip.prototype.blurredRect = function(x, y, width, height, blur, color, alpha, quality) {
if (quality == null) { quality = 1; }
blur = blur/quality;
this.lineStyle();
var f = [];
var sum = 0;
for (var i = 1; i0) && (Math.abs(100*b-alpha)>.5));
for (var i = 0; i<=blur; i++) {
f[i] *= (factor*alpha)/sum;
}
for (var i = 0; i<=blur; i++) {
this.beginFill(color, f[i]);
this.roundRect(1+(x+i*quality)-blur/(2/quality), 1+(y+i*quality)-blur/(2/quality), x+width-i*quality+blur/(2/quality)-1, y+height-i*quality+blur/(2/quality)-1, blur-(i/quality*2/3));
this.endFill();
trace(i);
}
};
// requires the roundRect code from the original FLA

Posted by: Grant Skinner on July 20, 2003 09:31 PM

Ok, that obviously didn't post correctly. Regardless, I have sent you the FLA.

Anyone who is interested in the quality parameter can see a demo at http://gskinner.com/playpen/qm_shadow.html

Cheers.

Posted by: Grant Skinner on July 20, 2003 10:24 PM

Great library and discussion! Here's a question for you fellas:
I notice the drawn drop shadow seems to appear below *all* author-time content. My understanding of the drawing methods are slim; how do I make the box *and* its drop shadow appear above other content? I don't see anywhere in the prototype where a depth is set, any thoughts?

Posted by: A. White on August 19, 2003 02:00 AM

This is awesome! I am not a hardcore programmer, but want to use this to shadow some dynamic text fields. How would I implement this?

Posted by: jeffrey fitzgerald on September 2, 2003 08:43 PM

im sorry kinda new here. how can i use this thing on my flash projects? can i use it like a filter or action just like in photoshop? please help. thanks

Posted by: dumb on flash on September 19, 2003 10:29 AM

No, Flash is not capable of pixel based effects. This drop shadow can only create soft rectangular shapes.

Posted by: Mario on September 19, 2003 11:52 AM

Hi, I just want to say that's really great, thanks.

One thing I'm trying to do with this code is be able to control the size, blur, width etc without the scrollbars. Can anyone help me with a way to control them as variables, I'm trying to have it as a shadow for a rectangle that changes shape and size. If I am just able to put blurSize = 25; and it work I would be able to use it. May sound really simple to some of you. But thanks in advance anyway

Posted by: chris on November 28, 2003 08:46 PM

Doesn't matter, I've done it now :p thanks

Posted by: chris on November 28, 2003 09:28 PM

yeah! great
i really awesome guys!

Posted by: abinash on February 15, 2004 08:13 AM

how would you apply this to a simple rectangle mc?

Posted by: JF on February 19, 2004 04:50 AM

degerlendirmeye alirsaniz sevinirim...

Posted by: ANASAYFA on April 7, 2004 03:39 PM

why if a i have some movieclips one over other and i use this function to draw in the movies, they intefere, painting over one, paint over another moviclip that is independent.
I dont undertsand.
I have reduced the rror to this
this.drawRect(1, 1, 200, 200, 0x000000,100);
this.drawRect(1, 1, 200, 200, 0x000000,100);
this.drawRect(1, 1, 200, 200, 0x000000,100);
this.drawRect(1, 1, 200, 200, 0x000000,100);

If i paint with this four times, it interfere, but if i paint only one
this.drawRect(1, 1, 200, 200, 0x000000,100);

no, why?

Posted by: pepeluiso on June 2, 2004 03:10 AM

I have resolved the problem, i was hiding the sprites with _Alpha=0 and not with _visible=false, and with alphas, painting was interefering one over other.

Posted by: pepeluiso on June 2, 2004 06:58 PM

It's kewl... And being impressed i tried to do it
my way... different way :)

check this out:

http://proto.layer51.com/d.aspx?f=1286

Posted by: hypeartist on September 22, 2004 02:30 PM

Brilliant piece of work!!!

Posted by: kate on February 1, 2005 09:04 PM

great script !

did anyone make it simple ? like no scrollbar needed ?
just a great shadow on a rectangle !
if someone can help me ;)

Posted by: Xavier on March 21, 2005 04:34 PM

Great...
How can I apply it simply on a letter of text:
A
thanks

Posted by: bruchet on April 7, 2005 12:14 AM

Not at all - this is only a rectangular dropshadow. For irrgular shapes you might try this one here: http://www.quasimondo.com/archives/000202.php

Posted by: Mario Klingemann on April 7, 2005 10:55 AM

How do i add drop shadows for text?

Posted by: FaCeY on August 25, 2005 12:32 PM

That is not possible with my method, but with the arrival of Flash 8 it is obsolete anyway as you will be able to create dropshadows natively - also for text.

Posted by: Mario Klingemann on August 25, 2005 12:56 PM

very nice

Posted by: mohamed on September 2, 2005 04:00 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