Reflecting an image in Flex

Increasingly, clients have been asking for a "reflection" effect, showing a vertically flipped image of a component next to the actual component.  After reinventing the wheel on this several times, I came up with this simple reusable component:

package com.tappernimer.components{
import mx.containers.Canvas;
import mx.core.UIComponent;
import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.display.IBitmapDrawable;
public class VerticalReflection extends Canvas{
private var _component:UIComponent;
public var trans:Number=.5;
public var filterArray:Array=new Array();
public var skewY:Number=0;
public var skewX:Number=0;
public function get component():UIComponent{
return _component;
public function set component(c:UIComponent):void{
this._component = c;
// hack to work around issue with component being 
// a dynamically loaded image its possible for the 
// image to be fully loaded, but its height or width 
// not yet set this call later, keeps retrying until 
// the values are set.
if(c.width ==0 || c.height==0){
private function resetComponent(c:UIComponent):void{
this.component = c;
private function doReflection():void {
// create bitmap object
var bmpData:BitmapData = new BitmapData(
// create matrix
var invertMatrix:Matrix = new Matrix(1,skewY,skewX);
// set matrix to invert vertically, but normal horizontally
invertMatrix.scale(1, -1);
// move matrix, so top is at bottom, and vice versa
invertMatrix.translate(0, component.height);
// draw component flipped
bmpData.draw(component as IBitmapDrawable,invertMatrix);
// create a new holder for the image
var ref:UIComponent = new UIComponent();
// match new holders size to the original
// fill the new component with the image;, 0, 
	component.width, component.height);;
// set the transparency
ref.alpha = trans;
// apply any filters
ref.filters = filterArray;
// add image to stage

This component can then be passed any other component to reflect, accepting filters (filterArray), alpha value (trans), and arguments to allow you to skew the reflection.  In fact, using it can be as simple as this:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx= 
<mx:Image id="image" source="images/tn_logo_full.jpg"/>
<c:VerticalReflection id="ref" 
x="{image.x}" y="{image.height}" 
filterArray="{new Array(new BlurFilter())}"/>
Here is the code running:

There are no comments.

Leave a Reply