- Home
- Tutorials
- Flash
- Intermediate
- Creating a Reflection Effect with AS3

Draw With Registration
So let’s define some constants first:
public static const LEFT:String = "left";
public static const RIGHT:String = "right";
public static const BOTTOM:String = "bottom";
public static const TOP:String = "top";
We can use that to set how we want the reflection. We create a setter for the direction:
public function set direction(T:String):void{
if(T == ("left" || "right" || "bottom" || "top")){//check if it's valid
currentDirection = T;//assign the value
}else{//not valid
currentDirection = DynamicReflection.BOTTOM;//assign default value
}
redrawReflection(); //the reflection settings changed so redraw
}
Now depending on the direction we need to prepare our matrix differently. We also set the angle of the gradient we will use for our reflection. We also need to catch up the registration differently depending on the current direction mode:
var mwidth:Number = 0;//shift the matrix by width
var mheight:Number = 0;//shift the matrix by height
var mX:Number = 1;//scale the matrix on the x coordinate
var mY:Number = 1;//scale the matrix on the y coordinate
var Xreg:Number = 0;//catch the registration on the x coordinate
var Yreg:Number = 0; //catch the registration on the y coordinate
if(currentDirection == "bottom" || currentDirection == "top"){
mwidth = 0;
mheight = -rect.height;//so sift the height
mX = 1;
mY = -1;//flip the scaleY
Xreg = Xoffset;//catch up on the x registration
Yreg = -Yoffset-rect.height;//catch up on the y registration
if(currentDirection == "bottom"){
gradientAngle = Math.PI/2;//gradient angle
}
else{
gradientAngle = -Math.PI/2;//top refelction so change the angle accordingly
}
}
else{//this is left or right mode
mwidth = -rect.width;//sift the width for drawing
mheight = 0;
mX = -1;//flip the scaleX
mY = 1;
Xreg = -Xoffset-rect.width;//catch up the x registration
Yreg = Yoffset;//catch up the y registration
if(currentDirection == "right"){
gradientAngle = Math.PI;//set the gradient angle for right mode
}
else{
gradientAngle = 0;//set the gradient angle for left mode
}
}
matrix.translate(mwidth,mheight);//shift the matrix
matrix.scale(mX,mY);//scale the matrix
bmd = new BitmapData(rect.width, rect.height, true, 0x00FF0000); //create a new bitmapdata
bmd.draw(temp, matrix, null, null, null, true);//draw using our matrix
bitmap.bitmapData = bmd;//assign our bitmapdata to our bitmap
bitmap.x = Xreg; //catch up the registration
bitmap.y = Yreg;//catch up the registration
The neat thing here is that not only did we draw respecting the registration of the target object but the reflection instance has also the same registration than the target object but flipped as well. Here I added a little circle to show the registration point and both the target object and the reflection have their registration point in the center of the stage. The target object rotates and automatically the reflection rotates in opposite way. Click on the stage to change the direction mode and see that the registration point of the reflection is always the opposite of the registration point of the target object:
Now our reflection is similar to our target object in all major points and we already reassign scaleX, scaleY and rotation properties from the target object to the reflection object:
scaleX = SCALEX;
scaleY = SCALEY;
rotation = -angle;//the rotation should be opposite
Since we draw the object at its normal size, if the object is scaled we might end up with a loss of quality as you might notice here. We can of course avoid this by adding a quality factor. We’ll see that later but for now let’s work on the gradient.

