« When the solution is worst than the problem | Home | NetStream data callbacks as events »
March 7, 2009
Transparent reflection class for Bitmaps
I had the need to insert a reflection into a bitmap the other day so i went googling around and tried several options.
They worked very good but the problem was that the resulted reflections where not transparent at the end and since i was using a gradient background you could see the reflection shape.
This is why i created this function. Hope it helps you.
The trick for perfect gradient to transparent is BitmapData.copyPixels (i read this on a blog a while ago but i can't remember where it was, ping me if you plz! i want to give credit).
Here is the function:
function getBitmapWithReflection(value:BitmapData):BitmapData{
var bmReflection:BitmapData = new BitmapData(value.width, value.height * 2, true, 0);
bmReflection.draw(value);
var gMatrix:Matrix = new Matrix();
gMatrix.createGradientBox(value.width, value.height, Math.PI * 0.5);
var holder:Shape = new Shape();
holder.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF], [0, 1], [0, 0xFF], gMatrix, SpreadMethod.PAD);
holder.graphics.drawRect(0, 0, value.width, value.height);
holder.graphics.endFill();
var gBitmap:BitmapData = new BitmapData(holder.width, holder.height, true, 0);
gBitmap.draw(holder);
var res:BitmapData = new BitmapData(value.width, value.height, true, 0);
res.copyPixels(value, res.rect, new Point(), gBitmap, new Point(), true);
var flipM:Matrix = new Matrix(1, 0, 0, -1, 0, value.height * 2);
bmReflection.draw(res, flipM);
return bmReflection;
}
And here is a quick Flex example on how to use it:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
applicationComplete="init();">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
[Embed(source="myImage.jpg")]
private var MyImage:Class;
private function init():void{
var bmp:BitmapData = getBitmapWithReflection((new MyImage() as Bitmap).bitmapData);
var tmp:UIComponent = new UIComponent();
tmp.addChild(new Bitmap(bmp.clone()))
addChild(tmp);
}
private function getBitmapWithReflection(value:BitmapData):BitmapData{
var bmReflection:BitmapData = new BitmapData(value.width, value.height * 2, true, 0);
bmReflection.draw(value);
var gMatrix:Matrix = new Matrix();
gMatrix.createGradientBox(value.width, value.height, Math.PI * 0.5);
var holder:Shape = new Shape();
holder.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF], [0, 1], [0, 0xFF], gMatrix, SpreadMethod.PAD);
holder.graphics.drawRect(0, 0, value.width, value.height);
holder.graphics.endFill();
var gBitmap:BitmapData = new BitmapData(holder.width, holder.height, true, 0);
gBitmap.draw(holder);
var res:BitmapData = new BitmapData(value.width, value.height, true, 0);
res.copyPixels(value, res.rect, new Point(), gBitmap, new Point(), true);
var flipM:Matrix = new Matrix(1, 0, 0, -1, 0, value.height * 2);
bmReflection.draw(res, flipM);
return bmReflection;
}
]]>
</mx:Script>
</mx:Application>
--fernando
@..to transparent is BitmapData
OK. But its not a piece of cake :)
This helped me out a bunch, works perfect, thank you.