クリックしたときにパーンと発光するようなエフェクトを、TweensyGroupとFilterでやってみました。

デモ（要Flash Player）

以下の記事を参考にさせていただきました。

kanariia.net BLOG – [tweensy]いろいろ試してみる：TweensyGroupで特殊プロパティをトゥイーン
feb19.jp blog – ランタイムビットマップキャッシュ（.cacheAsBitmap）

以下ソース。

package  
{
	import com.flashdynamix.motion.*;
	import fl.motion.easing.*;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.filters.GlowFilter;
	
	public class Main extends Sprite
	{
		private var _rect		:Sprite;
		private var _circle		:Sprite;
		
		public function Main() 
		{
			// 背景
			graphics.beginFill(0x000000, 1.00);
			graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			graphics.endFill();
			
			// 矩形
			_rect = new Sprite();
			_rect.graphics.beginFill(0xff6600, 1.00);
			_rect.graphics.drawRect( -50, -50, 100, 100);
			_rect.graphics.endFill();
			_rect.x = stage.stageWidth / 3 * 1;
			_rect.y = stage.stageHeight / 2;
			_rect.addEventListener(MouseEvent.CLICK, _rectClickHandler);
			_rect.buttonMode = true;
			addChild(_rect);
			
			// 円
			_circle = new Sprite();
			_circle.graphics.beginFill(0x0099ff, 1.00);
			_circle.graphics.drawCircle(0, 0, 60);
			_circle.graphics.endFill();
			_circle.x = stage.stageWidth / 3 * 2;
			_circle.y = stage.stageHeight / 2;
			_circle.addEventListener(MouseEvent.CLICK, _circleClickHandler);
			_circle.buttonMode = true;
			addChild(_circle);
		}
		
		/**
		 * 矩形クリック
		 * @param	e
		 */
		private function _rectClickHandler(e:MouseEvent):void 
		{
			// グローフィルター生成
			var blurFilter:GlowFilter = new GlowFilter(0xff6600, 0.80, 64, 64, 2, 2);
			
			// TweensyGroup生成
			var tg:TweensyGroup = new TweensyGroup();
			
			// フィルタートゥイーン
			tg.filterTo(_rect, blurFilter, { blurX:0, blurY:0, alpha:0.00 }, 0.60, Sine.easeIn, 0.20);
			
			// トゥイーン完了時の処理
			tg.onComplete = function():void
			{
				_rect.filters = null;
			};
		}
		
		/**
		 * 円クリック
		 * @param	e
		 */
		private function _circleClickHandler(e:MouseEvent):void 
		{
			// グローフィルター生成
			var blurFilter:GlowFilter = new GlowFilter(0x0099ff, 0, 0, 0, 2, 2);
			
			// TweensyGroup生成
			var tg:TweensyGroup = new TweensyGroup();
			
			// フィルタートゥイーン
			tg.filterTo(_circle, blurFilter, { blurX:64, blurY:64, alpha:0.80 }, 0.02, Cubic.easeOut);
			tg.filterTo(_circle, blurFilter, { blurX:0,  blurY:0,  alpha:0.00 }, 0.60, Sine.easeIn, 0.20);
			
			// トゥイーン完了時の処理
			tg.onComplete = function():void
			{
				_circle.filters = null;
			};
		}
	}
}

「矩形クリック」の方法でだいたい想定していた発光となったのですが、なぜか2度目のクリックからはフィルターが発動しなくなります。原因がわからなかいのですが、とりあえず「円クリック」の方法ならうまくいくようです。

Tweet