My Bitmap Reflection Class for Download
I took the time to write my "Reflection" class into a true AS2 class so that I could share it and use it easily when I needed to. The following AS2 code should be saved into an .as file called Reflect. You can then use the class by instantiating the class like:
reflect = new Reflect(my_mc,50,255);
The arguments are the (movieClip,the _alpha of the reflection, and the ration of the fade 0-255)
Here is the class (watch for line wraps that may happen in your web browser):
import flash.display.BitmapData;
class Reflect{
//Ben Pritchard 2005
//Pixelfumes.com
private var mcBMP:BitmapData;
private var reflectionBMP:BitmapData;
function Reflect(mc:MovieClip,alpha:Number,ratio:Number){
//create a bmp obj out of it
mcBMP = new BitmapData(mc._width, mc._height, false, 0x00FFFFFF);
mcBMP.draw(mc);
mc.createEmptyMovieClip("origItem_mc",mc.getNextHighestDepth());
mc.origItem_mc.attachBitmap(mcBMP, 1);
reflectionBMP = new BitmapData(mc._width, mc._height, false, 0x00FFFFFF);
reflectionBMP.draw(mc);
mc.createEmptyMovieClip("reflection_mc",mc.getNextHighestDepth());
mc.reflection_mc.attachBitmap(mcBMP, 1);
mc.reflection_mc._yscale = -100;
mc.reflection_mc._y = mc._height;
//create the gradient mask
mc.createEmptyMovieClip("gradientMask_mc", mc.getNextHighestDepth());
var fillType:String = "linear";
var colors:Array = [0xFFFFFF, 0xFFFFFF];
var alphas:Array = [alpha, 0];
var ratios:Array = [0, ratio];
var matrix = {matrixType:"box", x:0, y:0, w:mc._width, h:mc._height/4, r:(90/180)*Math.PI};
var spreadMethod:String = "pad";
mc.gradientMask_mc.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);
mc.gradientMask_mc.moveTo(0, 0);
mc.gradientMask_mc.lineTo(0, mc._height/2);
mc.gradientMask_mc.lineTo(mc._width, mc._height/2);
mc.gradientMask_mc.lineTo(mc._width, 0);
mc.gradientMask_mc.lineTo(0, 0);
mc.gradientMask_mc.endFill();
mc.gradientMask_mc._y = mc._height/2;
mc.reflection_mc.cacheAsBitmap = true;
mc.gradientMask_mc.cacheAsBitmap = true;
mc.reflection_mc.setMask(mc.gradientMask_mc);
}
}
reflect = new Reflect(my_mc,50,255);
The arguments are the (movieClip,the _alpha of the reflection, and the ration of the fade 0-255)
Here is the class (watch for line wraps that may happen in your web browser):
import flash.display.BitmapData;
class Reflect{
//Ben Pritchard 2005
//Pixelfumes.com
private var mcBMP:BitmapData;
private var reflectionBMP:BitmapData;
function Reflect(mc:MovieClip,alpha:Number,ratio:Number){
//create a bmp obj out of it
mcBMP = new BitmapData(mc._width, mc._height, false, 0x00FFFFFF);
mcBMP.draw(mc);
mc.createEmptyMovieClip("origItem_mc",mc.getNextHighestDepth());
mc.origItem_mc.attachBitmap(mcBMP, 1);
reflectionBMP = new BitmapData(mc._width, mc._height, false, 0x00FFFFFF);
reflectionBMP.draw(mc);
mc.createEmptyMovieClip("reflection_mc",mc.getNextHighestDepth());
mc.reflection_mc.attachBitmap(mcBMP, 1);
mc.reflection_mc._yscale = -100;
mc.reflection_mc._y = mc._height;
//create the gradient mask
mc.createEmptyMovieClip("gradientMask_mc", mc.getNextHighestDepth());
var fillType:String = "linear";
var colors:Array = [0xFFFFFF, 0xFFFFFF];
var alphas:Array = [alpha, 0];
var ratios:Array = [0, ratio];
var matrix = {matrixType:"box", x:0, y:0, w:mc._width, h:mc._height/4, r:(90/180)*Math.PI};
var spreadMethod:String = "pad";
mc.gradientMask_mc.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);
mc.gradientMask_mc.moveTo(0, 0);
mc.gradientMask_mc.lineTo(0, mc._height/2);
mc.gradientMask_mc.lineTo(mc._width, mc._height/2);
mc.gradientMask_mc.lineTo(mc._width, 0);
mc.gradientMask_mc.lineTo(0, 0);
mc.gradientMask_mc.endFill();
mc.gradientMask_mc._y = mc._height/2;
mc.reflection_mc.cacheAsBitmap = true;
mc.gradientMask_mc.cacheAsBitmap = true;
mc.reflection_mc.setMask(mc.gradientMask_mc);
}
}
The class does not support embedded FLVs or anything nutty (in-clip animation) though the wrapping clip can be animated a bit. This is because it is being cached as a Bitmap and is a static "snapshot" of the clip. It is handy for image galleries, etc. Hope you like. Let me know. I love feedback.
Subscribe to this Blog
sweet - was right about to make something like this myself - tx
Posted by
Anonymous |
6:49 AM
Does this work in MX 2004? I can't seem to get gradient masks with alpha fading to work.
Posted by
Anonymous |
5:07 PM
No - MX 2004 doesn't support gradient masks or the BitmapData object used in this demo.
Posted by
Sarge |
8:41 AM
This effect is awesome. Thank you!!
Posted by
Aubrey |
1:48 AM
hi ben,
great work - just what I was looking for. I've edited the class a little to accomidate an offset parameter and transparency which I hope may be useful to some... (there's also a bit of code I needed to comment out - let me know if there was a use for it?)
[CODE]
import flash.display.BitmapData;
class Reflect
{
//
//Pixelfumes.com
private var mcBMP:BitmapData;
private var reflectionBMP:BitmapData;
function Reflect(mc:MovieClip,alpha:Number,ratio:Number, offset:Number, transparent:Boolean)
{
if (transparent == undefined) transparent = false;
//create a bmp obj out of it
mcBMP = new BitmapData(mc._width, mc._height, transparent, 0x00FFFFFF);
mcBMP.draw(mc);
/* commented out by paddy
mc.createEmptyMovieClip("origItem_mc",mc.getNextHighestDepth());
mc.origItem_mc.attachBitmap(mcBMP, 1);
*/
reflectionBMP = new BitmapData(mc._width, mc._height, false, 0x00FFFFFF);
reflectionBMP.draw(mc);
mc.createEmptyMovieClip("reflection_mc",mc.getNextHighestDepth());
mc.reflection_mc.attachBitmap(mcBMP, 1);
mc.reflection_mc._yscale = -100;
mc.reflection_mc._y = mc._height + offset;
//create the gradient mask
mc.createEmptyMovieClip("gradientMask_mc", mc.getNextHighestDepth());
var fillType:String = "linear";
var colors:Array = [0xFFFFFF, 0xFFFFFF];
var alphas:Array = [alpha, 0];
var ratios:Array = [0, ratio];
var matrix = {matrixType:"box", x:0, y:0, w:mc._width, h:mc._height/4, r:(90/180)*Math.PI};
var spreadMethod:String = "pad";
mc.gradientMask_mc.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);
mc.gradientMask_mc.moveTo(0, 0);
mc.gradientMask_mc.lineTo(0, mc._height/2);
mc.gradientMask_mc.lineTo(mc._width, mc._height/2);
mc.gradientMask_mc.lineTo(mc._width, 0);
mc.gradientMask_mc.lineTo(0, 0);
mc.gradientMask_mc.endFill();
mc.gradientMask_mc._y = mc._height/2;
mc.reflection_mc.cacheAsBitmap = true;
mc.gradientMask_mc.cacheAsBitmap = true;
mc.reflection_mc.setMask(mc.gradientMask_mc);
}
}
[/CODE]
Posted by
Paddy |
7:44 AM