Free Code: Classy Auto-Drop Shadows

[mattkenefick]

I posted this identical thread on Actionscript.org as well. I thought maybe someone here might find it useful at some point too perhaps. Free code never hurts.

-----------------------------


This creates those kinds of thin drop shadows that stay at the base of an object and give a subtle bit of depth and realism.

See example and code here: http://mattkenefick.com/blog/2008/10/classy-drop-shadows-for-objects/


Code (uses two movieclips named item1_mc, item2_mc respectively):


function createShadow( item:MovieClip, offset = 10, fade:Number = 1, shadowHeight:int = 20 ){
var itemShadow:Sprite = new Sprite();
var gfx:Graphics = itemShadow.graphics;
var matrix:Matrix = new Matrix();
var realDimensions = item.getBounds(item.parent);

matrix.createGradientBox( item.width, item.height );
gfx.beginGradientFill("radial", [0x000000, 0x000000], [fade,0],[0,255],matrix);
gfx.drawRect(0,0,item.width,item.height);
gfx.endFill();

itemShadow.y = realDimensions.y + item.height + offset;
itemShadow.x = realDimensions.x;
itemShadow.height = shadowHeight;
itemShadow.blendMode = "multiply"

addChild( itemShadow );
}

createShadow( item1_mc, 50, .5, 10 );
createShadow( item2_mc, 20, .7, 15 );

[mattkenefick]

I got requests for an AS2.0 version so here it is:



import flash.geom.Matrix;

function createShadow( item:MovieClip, offset, fade:Number, shadowHeight:Number ){
fade = fade ? fade : 50;
offset = offset ? offset : 50;
shadowHeight = shadowHeight ? shadowHeight : 10;

var itemShadow:MovieClip = item._parent.createEmptyMovieClip('itemShadow', item._parent.getNextHighestDepth());
var matrix:Matrix = new Matrix();
var realDimensions = item.getBounds(item._parent);

matrix.createGradientBox( item._width, item._height );
itemShadow.beginGradientFill("radial", [0x000000, 0x000000], [fade,0],[0,255],matrix);
itemShadow.moveTo(0,0);
itemShadow.lineTo(item._width,0);
itemShadow.lineTo(item._width,item._height);
itemShadow.lineTo(0,item._height);
itemShadow.endFill();

itemShadow._y = realDimensions.yMin + item._height + offset;
itemShadow._x = realDimensions.xMin;
itemShadow._height = shadowHeight;
itemShadow.blendMode = "multiply"
}

createShadow( item1_mc, 50, 50, 10 );