マスクの利用

|
(section09-01 基本的な図形を描くから抜粋)

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

fig09-01-17.jpg  fig09-01-18.jpg

[: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クラスは、引数で指定した表示オブジェクトを小さな円から広がるように表示します。

fig09-01-19a.jpgのサムネール画像  fig09-01-19b.jpgswfを試す

[: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;
		}
	}
}
まったく新しいAS3の世界!
694a.jpg
Adobe Flash CS4
詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

楽しいActionScript。
新たなる1歩へと踏み出しましょう。
■内容は?→ 目次を見る
■評判は?→ 書評を読む
この本を書いたわけ

このブログ記事について

このページは、oshigeが2009年7月17日 14:57に書いたブログ記事です。

ひとつ前のブログ記事は「図形を消す・再描画する」です。

次のブログ記事は「ベジェ曲線を描く」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

あわせて読みたいブログパーツ