Pushing the boundaries

…couldn’t be any simpler!

UI reflection

Posted by vijayram on February 8, 2007


import sandy.util.*;
import flash.display.*;
import flash.display.Sprite;
import flash.display.Shape;
import flash.display.Graphics;
import flash.display.DisplayObject;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
import flash.geom.Point;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.display.BitmapData;

[SWF(width=”1024″, height=”768″, backgroundColor=”#000000″)]

public class App extends Sprite
private var _shape:Shape;
private var _refshape:Shape;
private var _loader:Loader = new Loader();
private var _reflectionBitmap:Bitmap;
public function App()

private function init():void
stage.scaleMode = StageScaleMode.NO_SCALE;

_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
_loader.load(new URLRequest(“24012007010.jpg”));


private function onComplete(event:Event):void {
var loadedImage:Bitmap = Bitmap(_loader.content);

_shape = new Shape();
_shape.graphics.drawRect(0, 0, loadedImage.width, loadedImage.height);

_refshape = new Shape();
_refshape.graphics.drawRect(0, 0, loadedImage.width, loadedImage.height);

var distort:DistortImage = new DistortImage();
distort.container = _shape;
distort.target = loadedImage;
distort.smooth = true;
distort.initialize( 5, 5, null );



private function createReflectionBitmap(target:DisplayObject):void {

var Falloff:Number = 0.6;
var rect: Rectangle = new Rectangle(0, 0, target.width, target.height);
var alphaGradientBitmap:BitmapData = new BitmapData(target.width, target.height, true, 0x00000000);

var gradientMatrix: Matrix = new Matrix();
var gradientShape: Shape = new Shape();
gradientMatrix.createGradientBox(target.width, target.height * Falloff, Math.PI/2,
0, target.height * (1.0 – Falloff));
gradientShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF],
[0, 1], [0, 255], gradientMatrix);
gradientShape.graphics.drawRect(0, target.height * (1.0 – Falloff),
target.width, target.height * Falloff);
alphaGradientBitmap.draw(gradientShape, new Matrix());

var targetBitmap:BitmapData = new BitmapData(target.width, target.height, true, 0x00000000);
targetBitmap.fillRect(rect, 0x00000000);
targetBitmap.draw(target, new Matrix());

var reflectionData:BitmapData = new BitmapData(target.width, target.height, true, 0x00000000);
reflectionData.fillRect(rect, 0x00000000);
reflectionData.copyPixels(targetBitmap, rect, new Point(), alphaGradientBitmap);
_reflectionBitmap = new Bitmap(reflectionData);
_reflectionBitmap.alpha = .3;

var m:Matrix = _refshape.transform.matrix;
var position:Point = new Point(m.tx, m.ty);
m.tx = position.x;
m.ty = position.y;
m.d = -1;
m.ty = _refshape.height*3;
_refshape.transform.matrix = m;

var distortn:DistortImage = new DistortImage();
distortn.container = _refshape;
distortn.target = _reflectionBitmap;
distortn.smooth = true;
distortn.initialize( 5, 5, null );


[Edit: The above is just a proof of concept and the code is begging for refactorisation;)]


3 Responses to “UI reflection”

  1. Rajesh said

    Hey i cant see DistortImage class..Can you send me that file.Thanks and yeah great work

  2. vijayram said

    Hey Rajesh,
    I am using Alex Uhlmann’s code for the DistortImage class as mentioned in my last post. The direct link for his source code would be this: http://weblogs.macromedia.com/auhlmann/archives/DistortionEffects.zip

    good luck 🙂

  3. DistortImage is a util class from the flashsandy library.

    The import statement in your code: import sandy.util.*; brings that in 🙂

    I’m using the same util for a another animation effect in my current app. Hopefully you should be able to see a public beta in a couple of days in here: http://www.velvetpuffin.com

    Arul Prasad

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: