タイトルでは確かに鏡面といっていますが、ただ半透明の逆さになった画像を下に表示しているだけです。
ただ、それをAS3で記述してみます！

ファイル構成

• flvファイル
• 外部asファイル
• 鏡面する画像ファイル

flvファイルの設定

1. インスタンス[“btn”]を設定したムービークリップ
2. 鏡面を際立たせるためのグラデーションのシェイプ
3. 外部asの読み込み

後、この画面には表示されていませんが、真ん中に透明のラインがあります。
それにインスタンス「”line”」を設定しています。

ActionScriptソース

flvの設定ができれば、後は外部asファイルを作成するだけです。

package {
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.geom.Point;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import flash.net.URLRequest;
	
	//クラスの宣言
	public class FallDown extends MovieClip{
		var obj:Array;
		var mirror:Array;
		var timer:Timer;

		//コンストラクタ
		function FallDown(){
			obj = new Array();
			mirror = new Array();
			
			//ステージに表示する画像の初期設定
			for(var i:Number = 0; i < 4; ++i) {
				obj.push(new Sprite());
				var num:Number = obj.length-1;
				this.addChild(obj[num]);

				obj[num].scaleX = 0.08;
				obj[num].scaleY = 0.08;
				obj[num].alpha = 0;

				if(num == 0){
					obj[num].x = 100;
					obj[num].y = 0;
				} else {
					obj[num].x = obj[num-1].x + 80;
				}

				var imgLoader:Loader = new Loader();
				obj[num].addChild(imgLoader);
				
				var urlReq:URLRequest = new URLRequest("../img/img"+num+".jpg");
				imgLoader.load(urlReq);
				
			}
			
			//ステージに表示する鏡面画像の初期設定
			for(var j:Number = 0; j < 4; ++j) {
				mirror.push(new Sprite());
				var math:Number = mirror.length-1;
				this.addChild(mirror[math]);

				mirror[math].scaleX = 0.08;
				mirror[math].scaleY = 0.08;
				mirror[math].rotation = -180;
				mirror[math].alpha = 0;

				if(math == 0){
					mirror[math].x = 164;
					mirror[math].y = 380;
				} else {
					mirror[math].x = mirror[math-1].x + 80;
					mirror[math].y = 380;
				}

				var onLoader:Loader = new Loader();
				mirror[math].addChild(onLoader);
				
				var urlLoad:URLRequest = new URLRequest("../img/img"+math+".jpg");
				onLoader.load(urlLoad);

			}
			
			//クリックイベントの設定
			this["btn"].buttonMode = true;
			this["btn"].addEventListener(MouseEvent.CLICK, onClick);
	
		}

		//クリック後の設定
		function onClick(event:MouseEvent):void{
			timer = new Timer(33);
			timer.addEventListener(TimerEvent.TIMER, loop);
			timer.start();
			
			this["btn"].buttonMode = false;
		}
		
		//タイマーイベントの設定
		function loop(event:TimerEvent):void{

			this["btn"].alpha -= 0.05;
			
			//インスタンス["btn"]の透明度が0の場合
			if(this["btn"].alpha < 0){
				
				//画像の動作設定
				for(var i:Number = 0; i < obj.length; i++){
					var topPlace:Point = new Point();
					if(i == 0){
						topPlace.y = this["line"].y - 45;
					} else {
						topPlace.y = obj[i - 1].y;
					}
					
					obj[i].alpha += 0.06
					obj[i].y += (topPlace.y - obj[i].y)/8;
				}
	
				//鏡面画像の動作設定
				for(var j:Number = 0; j < mirror.length; j++){
					var btmPlace:Point = new Point();
					if(j == 0){
						btmPlace.y = this["line"].y + 50;
					} else {
						btmPlace.y = mirror[j - 1].y;
					}
					
					mirror[j].y += (btmPlace.y - mirror[j].y)/8;
					mirror[j].alpha += 0.01;
					
					if(mirror[j].alpha > 0.2) {
						mirror[j].alpha = 0.2;
					}
				}				
			}			
		}
	}
}

簡単にソースの解説

33行目 – 38行目：if、else文

このif文で画像の表示を「ずらす」設定をします。
if(num == 0)で1番目の画像の動作を設定します。
次のelse文で、1番目の画像以降をobj[num].x = obj[num-1].x + 80;の動作設定をします。
obj[num-1].x + 80にすることで、表示される画像の前の画像からx軸+80になります。
これで画像は重ならずに等間隔で表示されます。

56行目：rotation

鏡面する画像をrotation = -180で逆さまに表示させます。

99行目 – 109行目

for文で変数iに数値を代入します。これでobj[i]を使用することが出来ます。
変数topPlaceにPointを指定して、topPlace.y = this[“line”].y – 45;で
インスタンス「”line”」からy軸-45まで移動させる設定します。
またこのif文は33行目 – 38行目のif文と同じ作用があります。
移動するスピードは108行目で指定しています。

121行目 – 125行目

鏡面する画像の透明度を指定しています。
121行目で透明から不透明に変化するスピード指定しています。
次にif文で鏡面する画像の透明度が0.2になると、透明度を0.2になる指定をします。
これをしないと、不透明になるまで進んでしまうからです。

サンプル

鏡面を表現するのに、別の方法があるはずです。
もっと色んな表現方法を追求していきます！

1. Web-Parkのホーム > 
2. Flash > 
3. ActionScript3.0で魅せる 鏡面の表現