BONKURA BLOG

仕事のメモ帳ブログ。いまのところActionScriptメイン。たまにCSSとかJavaScriptとか。

[AS3.0]Spriteクラスでマスクをつくる

Spriteクラスを利用すれば、マスクアニメーションもトゥイーンを作らず、ラクにスクリプト上で実装することが可能。

サンプル

package effect
{
	import flash.display.DisplayObjectContainer;
	import flash.display.Sprite;
	import flash.events.Event;
	/**
	 * ...
	 * @author DefaultUser (Tools -> Custom Arguments...)
	 */
	public class Blind 
	{
		private var targetDisplayObj:DisplayObjectContainer;
		private var barW:int;
		private var barH:int;
		private var barCnt:uint=10;
		private var maskSprite:Sprite;
		private var barNo:uint=0;
		
		public function Blind(maskTarget:DisplayObjectContainer)
		{
			targetDisplayObj = maskTarget;
			barW = targetDisplayObj.width;
			barH = Math.ceil(targetDisplayObj.height / barCnt);
			maskSprite = new Sprite();
			targetDisplayObj.addChild(maskSprite);
			targetDisplayObj.mask = maskSprite;
			targetDisplayObj.addEventListener(Event.ENTER_FRAME, nextBarHandler);
		}
		
		private function nextBarHandler(e:Event):void 
		{
			barNo++;
			if (barNo <= barCnt)
			{
				var barSp:Sprite = new Sprite();
				maskSprite.addChild(barSp);
				barSp.x = 0;
				barSp.y = barH * (barNo - 1);
				barSp.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
				barSp.graphics.beginFill(0xFFFFFF);
				barSp.graphics.drawRect(0, 0, barW, 2);
				barSp.graphics.endFill();
			}
			else
			{
				targetDisplayObj.removeEventListener(Event.ENTER_FRAME, nextBarHandler);
			}
		}
		
		private function enterFrameHandler(e:Event):void 
		{
			var barSp:Sprite = e.target as Sprite;
			var tmpH:Number = barSp.height;
			if (tmpH < barH)
			{
				barSp.height = tmpH + Math.ceil((barH - tmpH) / 5);
			}
			else
			{
				barSp.height = barH;
				barSp.removeEventListener(Event.ENTER_FRAME, nextBarHandler);
			}
		}
	}
	
}
このクラスは、
  1. コンストラクタの引数で渡された表示オブジェクトtargetDisplayObjにマスク(maskSprite)をかける。
  2. maskSpriteにスプライトの横棒を追加。横棒の高さが広がるアニメーション設定。
と、2つの機能に分けることができます。

1の状態では、写真にマスクが設定されましたが、まだmaskSpriteは空なので写真は見えない状態になっています。
そこで、スプライトの横棒をmaskSpriteに追加。横棒がタテに広がれば、それにともなって写真がだんだんと見えてきます。

ちょっとした工夫ですが、barNo++;とあるように一本づつ横棒がアニメーションするようにしています。これはよく使う処理。覚えないと。

このエントリーをはてなブックマークに追加 Save This Page to del.icio.us