REFLECTION EFFECT USING AS3                                       as3


    This tutorial shows how to create cool reflection effect using actionscript 3.0. The entire reflected image is created by actionscript code, so you dont have to waste time with gradients,alpha etc. All you need to do, is replace the image with whatever you want to reflect and the script will do it for you. At the end we should get something like this:



     Open new actionscript 3.0 flash file. In this tutorial I will demonstrate this effect on bitmap (image file) but you can do it with whatever else as long as its convertable to bitmap, therefore if you want to reflect text , you have to break it apart all they way down to shape ( you can do so by pressing ctrl+B twice while the text is selected ). Insert the image you want to use, convert it to movieclip and name it picture. Now open actions window and insert the following actionscript code: 


var reflection:BitmapData;
var reflectionHolder:Bitmap;

function createReflection():void {
	reflection=new BitmapData(picture.width,picture.height,true,0x00ffffff);

	var flipMatrix:Matrix = new Matrix();
	flipMatrix.rotate(Math.PI);
	flipMatrix.scale( -1, 1 );
	flipMatrix.translate(0, picture.height);

	reflection.draw(picture, flipMatrix);

	for (var i:int = 0; i < picture.height; i++) {
		var rowFactor:Number = Math.max(0, 0.5 - (i / picture.height));
		for (var j:int = 0; j < picture.width; j++) {
			var pixelColor:uint = reflection.getPixel32(j,i);
			var pixelAlpha:uint = pixelColor>>24&0xff;
			var pixelRGB:uint = pixelColor&0xffffff;
			var resultAlpha:uint = pixelAlpha*rowFactor;
			reflection.setPixel32(j, i, resultAlpha << 24 | pixelRGB);
		}
	}

	reflection.applyFilter(reflection, reflection.rect, new Point(0, 0), 
											new BlurFilter(4, 4, 3));

	reflectionHolder=new Bitmap(reflection);
	reflectionHolder.y=picture.y+picture.height;
	reflectionHolder.x=picture.x;

	addChild(reflectionHolder);
}

createReflection();


     First two lines defines new bitmap used for reflection. On lines 4-33 is function that creates the reflection itself. Lines 8,9,10 defines rotation, scale and position of reflection. For loop on lines 14-23 creates the fade out effect of the reflected image. Lines 25-30 creates the blur effect. You can play with the numbers of BlurFilter if you want to change the size of the blur effect in each direction. Line 32 adds the created reflection on the stage. The very last lane calls this function.


DOWNLOAD SOURCE FILE