I’ve been working on a reflection class as of late that would semi mirror the 3D OS X dock effect. I started out by implementing a lot of the ideas from Ben Pritchard of Pixelfumes. I had to modify a few things for my own purposes namely placing everything inside a container movie clip for the separate selection of the original movieclip and reflection. In my eventual implementation the movieclips will be serving as buttons, and I didn’t want the reflections part of the hit state.

There are two classes needed to get the below effect. The first is Reflection.as, which is then extended by ReflectionHorizon.as. Here is the example:

An important thing to note is that the class does require the use of a bitmap, and not a shape. Therefore, if you try to draw something using the brush in Flash, it is going to go wonky on you. Additionlly, this should work with animated movieclips or video. I haven’t tested that functionality, but Ben built it into his original class so it should be good to go.

Reflection.as

This is the base class and will work on it’s own, but will not contain the horizon functionality.

/*
VERSION: 1.00
DATE: 12/17/2008
ACTIONSCRIPT VERSION: 3.0
UPDATES & MORE DETAILED DOCUMENTATION AT: http://www.hexluv.com
DESCRIPTION:
		A class that uses the BitmapData class to create a reflection of an library object.
		Credit goes to Ben Pritchard of pixelfumes.com for the majority of the work.

ARGUEMENTS:
	1) mc: - the movieclip you are intending to reflect
	2) alpha: - how transparent you would like the reflection (use 50 not .5)
	3) ratio: - the gradient mask ratio. e.g how much of the reflection is revealed (use whole integers)
	4) distance: - the distance from the bottom of the movieclip (measured in pixels)
	5) updateTime: - how often the reflection should be updated if its video or animated (in ms)
	6) reflectionDropoff: - the "quickness" of the gradient (use decimals)

EXAMPLE USAGE
	import com.matthaliski.effects.Reflection;
	var r:Reflection = new Reflection({mc:_myMC, alpha:50, ratio:50, distance:0, updateTime:0, reflectionDropoff:1});
*/
package matthaliski.effects {

	import flash.display.MovieClip;
	import flash.display.DisplayObject;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.geom.Matrix;
	import flash.display.GradientType;
	import flash.display.SpreadMethod;
	import flash.utils.setInterval;
	import flash.utils.clearInterval;

	public class Reflection extends MovieClip {

		//reference to the movie clip we are reflecting
		public var mc:MovieClip;
		//the BitmapData object that will hold a visual copy of the mc
		private var mcBMP:BitmapData;
		//the BitmapData object that will hold the reflected image
		private var reflectionBMP:Bitmap;
		//the clip that will act as out gradient mask
		private var gradientMask_mc:MovieClip;
		//how often the reflection should update (if it is video or animated)
		private var updateInt:Number;
		//the size the reflection is allowed to reflect within
		private var bounds:Object;
		//the distance the reflection is vertically from the mc
		private var distance:Number = 0;
		//the reflection
		public var reflectionBMPRef:DisplayObject;
		//Container MovieClip
		public var container:MovieClip;

		public function Reflection(args:Object){
			/*the args object passes in the following variables
			/we set the values of our internal vars to math the args*/
			//the clip being reflected
			mc = args.mc;
			//the alpha level of the reflection clip
			var alpha:Number = args.alpha/100;
			//the ratio opaque color used in the gradient mask
			var ratio:Number = args.ratio;
			//update time interval
			var updateTime:Number = args.updateTime;
			//the distance at which the reflection visually drops off at
			var reflectionDropoff:Number = args.reflectionDropoff;
			//the distance the reflection starts from the bottom of the mc
			var distance:Number = args.distance;

			//Instantiate
			container = new MovieClip();
			mc.parent.addChild(container);

			//Place the container Sprite
			container.x = mc.x;
			container.y = mc.y;

			//Move the original MC inside the container
			mc.x = mc.y = 0;
			container.addChild(mc);

			//store width and height of the clip
			var mcHeight = mc.height;
			var mcWidth = mc.width;

			//store the bounds of the reflection
			bounds = new Object();
			bounds.width = mcWidth;
			bounds.height = mcHeight;

			//create the BitmapData that will hold a snapshot of the movie clip
			mcBMP = new BitmapData(bounds.width, bounds.height, true, 0xFFFFFF);
			mcBMP.draw(mc);

			//create the BitmapData the will hold the reflection
			reflectionBMP = new Bitmap(mcBMP);
			//flip the reflection upside down
			reflectionBMP.scaleY = -1;
			//move the reflection to the bottom of the movie clip
			reflectionBMP.y = (bounds.height*2) + distance;
			trace("The original MC y value is: " + mc.y);
			trace("The bounds height is: " + bounds.height);
			trace("The reflection's y value is: " + reflectionBMP.y);

			//add the reflection to the movie clip's Display Stack
			reflectionBMPRef = container.addChild(reflectionBMP);
			reflectionBMPRef.name = "reflectionBMP";

			//add a blank movie clip to hold our gradient mask
			var gradientMaskRef:DisplayObject = container.addChild(new MovieClip());
			gradientMaskRef.name = "gradientMask_mc";

			//get a reference to the movie clip - cast the DisplayObject that is returned as a MovieClip
			gradientMask_mc = container.getChildByName("gradientMask_mc") as MovieClip;

			//set the values for the gradient fill
			var fillType:String = GradientType.LINEAR;
		 	var colors:Array = [0xFFFFFF, 0xFFFFFF];
		 	var alphas:Array = [alpha, 0];
		  	var ratios:Array = [0, ratio];
			var spreadMethod:String = SpreadMethod.PAD;

			//create the Matrix and create the gradient box
		  	var matr:Matrix = new Matrix();

			//set the height of the Matrix used for the gradient mask
			var matrixHeight:Number;
			if (reflectionDropoff<=0) {
				matrixHeight = bounds.height;
			} else {
				matrixHeight = bounds.height/reflectionDropoff;
			}

			matr.createGradientBox(bounds.width, matrixHeight, (90/180)*Math.PI, 0, 0);

			//create the gradient fill
			gradientMask_mc.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);
		    gradientMask_mc.graphics.drawRect(0,0,bounds.width,bounds.height);

			//position the mask over the reflection clip
			gradientMask_mc.y = container.getChildByName("reflectionBMP").y - container.getChildByName("reflectionBMP").height;

			//cache clip as a bitmap so that the gradient mask will function
			gradientMask_mc.cacheAsBitmap = true;
			container.getChildByName("reflectionBMP").cacheAsBitmap = true;

			//set the mask for the reflection as the gradient mask
			container.getChildByName("reflectionBMP").mask = gradientMask_mc;

			//if we are updating the reflection for a video or animation do so here
			if(updateTime > -1){
				updateInt = setInterval(update, updateTime, mc);
			}

		}

		public function setBounds(w:Number,h:Number):void{
			//allows the user to set the area that the reflection is allowed
			//this is useful for clips that move within themselves
			bounds.width = w;
			bounds.height = h;
			gradientMask_mc.width = bounds.width;
			redrawBMP(mc);
		}
		public function redrawBMP(mc:MovieClip):void {
			// redraws the bitmap reflection - Mim Gamiet [2006]
			mcBMP.dispose();
			mcBMP = new BitmapData(bounds.width, bounds.height, true, 0xFFFFFF);
			mcBMP.draw(mc);
		}
		private function update(mc):void {
			//updates the reflection to visually match the movie clip
			mcBMP = new BitmapData(bounds.width, bounds.height, true, 0xFFFFFF);
			mcBMP.draw(mc);
			reflectionBMP.bitmapData = mcBMP;
		}
		public function destroy():void{
			//provides a method to remove the reflection
			container.removeChild(container.getChildByName("reflectionBMP"));
			reflectionBMP = null;
			mcBMP.dispose();
			clearInterval(updateInt);
			container.removeChild(container.getChildByName("gradientMask_mc"));

		}

	}

}

ReflectionHorizon.as

This class extends Reflection.as and adds the horizon effect. It makes it seem as if the bitmap is disappearing into the horizon line.

/*
VERSION: 1.01
DATE: 1/5/2009
ACTIONSCRIPT VERSION: 3.0
UPDATES & MORE DETAILED DOCUMENTATION AT: http://www.hexluv.com
DESCRIPTION:
		A subclass of the Reflection class that adds the simulation of a horizon

ARGUEMENTS:
	1) mc: - the movieclip you are intending to reflect
	2) alpha: - how transparent you would like the reflection (use 50 not .5)
	3) ratio: - the gradient mask ratio. e.g how much of the reflection is revealed (use whole integers)
	4) distance: - the distance from the bottom of the movieclip (measured in pixels)
	5) updateTime: - how often the reflection should be updated if its video or animated (in ms)
	6) reflectionDropoff: - the "quickness" of the gradient (use decimals)

EXAMPLE USAGE
	import com.matthaliski.effects.Reflection;
	var r:ReflectionHorizon = new ReflectionHorizon({mc:_myMC, alpha:50, ratio:50, distance:0, updateTime:0, reflectionDropoff:1});

UPDATE 1.01
	1) Changed the mask to fill the entire stage rather than having the mask follow the movieclip around. Increases performance
	2) Set a fixed height for the original movie clip. Allows for dynamically expanded "hit states" should you want to use this as a button
*/

package matthaliski.effects {

	//Extends the basic reflector class
	import matthaliski.effects.Reflection;
	//For Events
	import flash.events.*;
	//For Timer (used to update display)
	import flash.utils.Timer;
	//For drawing capabilities (used for rectangular mask)
	import flash.display.*;
	import flash.geom.*;

	public class ReflectionHorizon extends Reflection {

		//the horizon of the reflection
		private var _horizon:Number;
		//distance from the horizon
		private var _horizonD:Number;
		//height of of the original movie clip
		private var _mcHeight:Number;
		//height of movie clip (including reflection)
		private var _mcFullHeight:Number;
		//Rectangle used for mask
		public var _mcMask:Shape = new Shape();
		//Rectangle used for reflection mask
		private var _reflectionMask:Shape = new Shape();

		public function ReflectionHorizon(args:Object) {

			//Runs the constructor method of the parent class
			super(args);

			//Determine horizon
			_horizon = mc.y + mc.height;

			//Set the original height
			_mcHeight = mc.height;

			//Set the initial height of the movieClip
			_mcFullHeight = mc.height;

			//Determine distance from the horizon
			_horizonD = _horizon - (mc.y + mc.height);

			//Sets timer to update reflection location based off of
			//parent mc movement
			var timer:Timer = new Timer (10, 0);

			//Add event listener to timer
			timer.addEventListener(TimerEvent.TIMER, updateHeight);

			//Starts the timer
			timer.start();

			//Perform calculations to get mask dimensions
			var _maskHeight:Number = mc.parent.stage.stageHeight - (mc.parent.parent.y + mc.height);
			_maskHeight = mc.parent.stage.stageHeight - _maskHeight;

			//Draws a rectangle to mask the actual mc
			_mcMask.graphics.lineStyle();
			_mcMask.graphics.beginFill(0xFFFFFF, .1);
			_mcMask.graphics.drawRect(0, 0, mc.parent.stage.stageWidth, _maskHeight);
			_mcMask.graphics.endFill();

			//Adds to the display list
			mc.stage.addChild(_mcMask);

			args.mc.mask = _mcMask;

		}

		//function that performs logic for reflection location
		private function updateHeight(evt:Event):void {

			//Keep the distance from the horizon updated
			_horizonD = _horizon - (mc.y + _mcHeight);

			//Adust the y value of the reflection
			reflectionBMPRef.y = (_mcHeight*2) + _horizonD;

			//Ensures the reflection follows the original mc
			reflectionBMPRef.x = mc.x;

			//Ensures the gradient mask follows the reflection along the x axis
			container.getChildByName("gradientMask_mc").x = mc.x;

		}	

	}

}

Conclusion

I’ll probably end up extending this just a bit further. I think I am going to need a fixed horizon as opposed to a dynamically generated one based on the height of the original movieclip being reflected. Hope everyone likes it.