マスクの利用

（section09-01 基本的な図形を描くから抜粋）

　シェイプやスプライトで描く図形の活用としてマスクをあげることができます。次の例では写真のムービークリップインスタンスに円を描いたシェイプをマスクとして設定し、写真を円形に切り抜いて表示しています。

[:script:]写真にシェイプマスクをかける

//コンテナを作る
var container:Sprite=new Sprite();
container.x=100;
container.y=50;
addChild(container);
//写真のmcを作る
var photo_mc:MovieClip=new Photo();
//マスクに使うシェイプを作る
var shape1:Shape=new Shape();
shape1.graphics.beginFill(0xFF0000);
shape1.graphics.drawCircle(0,0,100);
shape1.graphics.endFill();
shape1.x=photo_mc.width/2;
shape1.y=photo_mc.height/2;
//コンテナに追加する
container.addChild(photo_mc);
container.addChild(shape1);
//shape1をphoto_mcのマスクに設定する
photo_mc.mask=shape1;

　マスクの図形をアニメーションすれば写真などを映像効果で表示することができます。次のIrisOpenMaskクラスは、引数で指定した表示オブジェクトを小さな円から広がるように表示します。

→swfを試す

[:script:]小さな円から広がる映像効果で表示するIrisOpenMaskクラス

package {
	import flash.display.*;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
	
	public class IrisOpenMask extends Sprite{
		var image:DisplayObject;
		var maskSp:Sprite;
		var twW:Tween;
		var twH:Tween;
		var isShow:Boolean=false;
		//コンストラクタ
		public function IrisOpenMask(image:DisplayObject){
			this.image=image;
			maskSp=new Sprite();
			//imageをmaskSpでマスクする
			image.mask=maskSp;
			addChild(image);
			addChild(maskSp);
		}
		//マスクを使ったエフェクトを開始
		public function openEffect(sec:int):void{
			//表示済みでなければ実行する
			if(isShow==true){
				return void;
			}
			//maskSpにマスクアニメーションを作る
			var ball:Sprite=new Sprite();
			ball.graphics.beginFill(0xFF0000);
			ball.graphics.drawCircle(0,0,1);
			ball.graphics.endFill();
			ball.x=0.7*image.width;
			ball.y=0.8*image.height;
			maskSp.addChild(ball);
			//imageの対角線より大きな円にする
			var r:Number=2.1*Math.sqrt(image.width*image.width+image.height*image.height);
			twW=new Tween(ball,"width",Regular.easeIn,0,r,sec,true);
			twH=new Tween(ball,"height",Regular.easeIn,0,r,sec,true);
			//表示済みに設定
			isShow=true;
		}
	}
}

カテゴリ:

カテゴリ:

タグ:

カテゴリ

検索

このブログ記事について