ActionScript3でグラデーションマスク

今更ながらActionSctript3でグラデーションマスクさせてみた。
タイトルに「ActionScript3で〜」となっていますが、ActionScript2でも要領は同じです。

使用画像はこれ↓

使用するグラデーションはこれ↓

黒から白へのグラデーション。
分かり難いですが、黒から白へ向かってalphaが0になっています。

１枚目の画像を配置させ、２枚目の画像をその上に配置。
そして、２枚目の画像に対してグラデーションマスクをかけるとこんな感じ。

以下、スクリプト。

Root.as

package {

	import flash.display.Sprite;
	import flash.display.StageAlign;

	public class Root extends Sprite {

		public function Root():void {

			stage.scaleMode = "noScale";
			stage.align = StageAlign.TOP_LEFT;

			addChild(new Base());
		}
	}
}

Base.as

package {

	import flash.display.Sprite;
	import flash.display.Bitmap;

	public class Base extends Sprite {

		[Embed(source='1.jpg')]
		private static const Bitmap1:Class;
		[Embed(source='2.jpg')]
		private static const Bitmap2:Class;

		public function Base():void {

			var bmp1:Bitmap = new Bitmap1() as Bitmap;
			var image1:Image = new Image(bmp1);
			addChild(image1);

			var bmp2:Bitmap = new Bitmap2() as Bitmap;
			var image2:Image = new Image(bmp2);
			image2.cacheAsBitmap = true;
			addChild(image2);

			var mask:Mask = new Mask();
			mask.cacheAsBitmap = true;
			addChild(mask);
			image2.mask = mask;
		}
	}
}

Image.as

package {

	import flash.display.Sprite;
	import flash.display.Bitmap;

	public class Image extends Sprite {

		public function Image(bitmap:Bitmap):void {

			addChild(bitmap);
			width = 400;
			height = 300;
		}
	}
}

Mask.as

package {

	import flash.display.Sprite;
	import flash.display.GradientType;
	import flash.display.SpreadMethod;
	import flash.display.InterpolationMethod;
	import flash.geom.Matrix;

	public class Mask extends Sprite {

		public function Mask():void {

			var fillType:String = GradientType.LINEAR;
			var colors:Array = [0x000000, 0xFFFFFF];
			var alphas:Array = [1, 0];
			var rations:Array = [0x00, 0xBB];
			var matrix:Matrix = new Matrix();
			matrix.createGradientBox(400, 300, Math.PI * 1 / 6, 0, 0);
			var spreadMethod:String = SpreadMethod.PAD;
			var interpolationMethod:String = InterpolationMethod.LINEAR_RGB;

			graphics.beginGradientFill(fillType, colors, alphas, rations, matrix, spreadMethod, interpolationMethod, 0);
			graphics.drawRect(0, 0, 400, 300);
			graphics.endFill();
		}
	}
}

グラデーションマスクをかける際に重要なのは、Baseクラスの下記部分のみ！！

image2.cacheAsBitmap = true;
		・
		・
		・
mask.cacheAsBitmap = true;

マスクされる対象とマスクの両方にcacheAsBitmap設定してあげないと、マスクのアルファが維持されない。

ただこれだけの事です。。