There are a lot of Reflection classes around, but I always enjoy writing my own. I had a special purpose in mind with writing this one; I wanted to create a reflection of a displayObject as a BitmapData, so I could use it as a Material in Away3D or any other actionscript 3D API. One thing led to another, and before I knew I was writing a Reflection Flex component as well.
So the idea is that there are two flavors to this Reflection classes:
- The Actionscript-only way to create a Reflection
- The MXML-only way to create a Reflection
I also wanted to be able to create a reflection of a video or any other moving object. Check the example to see it in action.
The Actionscript-only way to create a Reflection
I’ve created this one so you can create reflections in Flash or in any Actionscript project. I’m going to use this to create reflection BitmapData’s to use in Away3D. Here’s how you use it:
1 | var reflection:Reflect = new Reflect(this.image1 as Sprite, 0.4, 100, true, Reflect.BOTTOM, 0); |
The constructor arguments are:
- The sprite to reflect
- the alpha value
- the ratio value
- a boolean to tell if it should be added as a child to the target sprite
- the direction of the reflection
- the updateTime, this one is set to 0, so it doesn’t periodically update the reflection
See the example here
See the sourcecode here
The MXML-only way to create a Reflection
The component version uses exactly the same arguments as the Actionscript class. All properties (except for the updateTime) are bindable, so you can alter the alpha, ratio, etc at runtime.
1 |
See the example here
See the sourcecode here
There’s one problem with reflecting dynamic textfields. I’m using a Matrix to create the Flipped BitmapData. Unfortunately the scale and translate methods of the Matrix mess up the rendering of dynamic textfields, but hey, who would want to reflect a boring textfield or dateChooser 
I’ve written a post about this problem, you can read it here. I know the solution to this problem; Use a Bitmap and set the scaleY property, but this will only flip the Bitmap, the BitmapData is still not flipped, and as I mentioned before, this was all to do about the Flipped and reflected BitmapData.
Great component, also performs very well!
[...] « Flex Reflections Component and Actionscript Class [...]
Wonderful work! and it really runs smoothly.
This is amazing. The reflection on the movie is incredible. It appears that there is very little (if any) degradation in performance when reflecting a moving object.
Well done.
Amazing!! Great work…
I need one help. I want use this reflection for png image transparent reflection, Can you help me for that???
Can we have reflection for rounded corner objects or transparent objects.
I think it should work with png’s with transparency as well, give it a try and let me know
Hi,I have an image and i want to remove white color from image.That removing color is same like its background color.If anybody have any idea of this problem please reply me on mitesh@clientdriveninnovation.com .And my application in Flex 3 so please send me action script code of this problem.Thank you
Hi,
Its working great but when use circle [transparent]image the reflection will appear only with black background so its looks like square.How do i handle it.
i am getting a black square for images while are in shapes other than square or rectangle… does anyone have solution for tat??
Hey, when I drop this reflection for an image, which has got a button under him, it makes that button unclickable, like it would be above him. Any ideas how to deal with it?
Thanks for sharing your components with the world, Seb! Very nice stuff.
Replacing the body of the createGradientBitmapData function with the following code should stop the black squares showing around non square reflections.
var colors:Array = [0x00000000, 0x00000000];
var alphas:Array = [this.alpha, 0];
var ratios:Array = [0, this.ratio];
var rotation:Number = 0.5;
var gradientSprite:Sprite = new Sprite();
// We only want the bitmap for the shape
var image:Bitmap = new Bitmap(new BitmapData(_sourceBitmap.width, _sourceBitmap.height, true, 0x00000000));
image.bitmapData.draw(_sourceBitmap);
image.cacheAsBitmap = true;
gradientSprite.addChild(image);
// Lay the alpha gradient on top of the shape
var gradientClip:Sprite = new Sprite();
var matrix:Matrix = new Matrix();
matrix.createGradientBox(image.width, image.height, rotation * Math.PI);
gradientClip.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix, SpreadMethod.PAD);
gradientClip.graphics.drawRect(0,0,image.width,image.height);
gradientClip.cacheAsBitmap = true;
gradientSprite.addChild(gradientClip);
// Mask the shape with the alpha gradient. Areas not covered by the shape will still have alpha = 0, even at the opaque
// end of the gradient
image.mask = gradientClip;
// Now write this as a bitmap
_gradientBmd = new BitmapData(_sourceBitmap.width, _sourceBitmap.height, true, 0x00000000);
_gradientBmd.draw(gradientSprite);
It doesn’t seem like you can reflect a Canvas. Or am I missing something? I get the error:
Type Coercion failed: cannot convert flash.display::Bitmap@160ddcb9 to mx.core.IUIComponent.
Any suggestions for a code modification to be able to allow any UIComponent as the source?
Excellent component man, I need this exactly. thanks.
Has anyone tried to use this with an ActionScript video object? I have a Flex app with a custom player used for live streaming that is created in ActionScript (no mx:VideoDisplay object). I wrap the video object in a UIComponent to display. Tried targeting the UIComponent but get the “Invalid BitmapData” error on Reflect.as line 53.
Nice component.
Will work with video if you just plop a video object in a UIComponent wrapper but that’s not practical for most apps. Video components are usually wrapped in layout containers like Canvas. I can’t get it to reflect the contents of a Canvas so won’t work for my video. Shame. Like the look.