グローフィルター

(サンプル一覧を表示する)

FlashDevelop を使って、画像にグローフィルターを設定してみました。
グローとは、光を出すとか燃えるように輝くとかそういう意味だそうです。

Flash の実行画面
グローフィルター

Flashプレーヤーが入っていないか、JavaScriptが無効になっているようです。

Get Adobe Flash player

元の画像 グローフィルター
左が内側にグローを、右が外側にグローをかけた状態です。

ソースコード

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.Bitmap;
	
	import flash.filters.BitmapFilter;
	import flash.filters.BitmapFilterQuality;
	import flash.filters.GlowFilter;
	
	/**
	 * グローフィルターのサンプル
	 * @author Hikipuro
	 */
	public class Main extends Sprite 
	{
		/**
		 * 埋め込み画像
		 */
		[Embed(source='../image/test001.png')]
		private var image1:Class;
		
		/**
		 * コンストラクタ
		 */
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		/**
		 * 初期化メソッド
		 * @param	e
		 */
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			
			var filter1:BitmapFilter = getGlowFilter(true);
            var myFilters1:Array = new Array();
            myFilters1.push(filter1);
			
			var filter2:BitmapFilter = getGlowFilter(false);
            var myFilters2:Array = new Array();
            myFilters2.push(filter2);
			
			var bitmap1:Bitmap = Bitmap(new image1);
			RegisterBitmap(bitmap1, 10, 10, 2.0);
            bitmap1.filters = myFilters1;
			
			var bitmap2:Bitmap = Bitmap(new image1);
			RegisterBitmap(bitmap2, 150, 10, 2.0);
            bitmap2.filters = myFilters2;
		}
			
		/**
		 * ステージにビットマップを登録して表示する
		 * @param	bitmap	表示するビットマップ
		 * @param	x		X 座標
		 * @param	y		Y 座標
		 * @param	scale	拡大率
		 */
		private function RegisterBitmap(bitmap:Bitmap, x:int, y:int, scale:Number):void
		{
			bitmap.smoothing = true;
			bitmap.cacheAsBitmap = true;
			bitmap.x = x;
			bitmap.y = y;
			bitmap.scaleX = scale;
			bitmap.scaleY = scale;
			addChild(bitmap);
		}
		
		/**
		 * グローフィルターを作成して返す
		 * @return	グローフィルター
		 */
        private function getGlowFilter(innerFlag:Boolean):BitmapFilter
		{
            var color:Number = 0xFF6666;
            var alpha:Number = 0.8;
            var blurX:Number = 20;
            var blurY:Number = 20;
            var strength:Number = 1;
            var inner:Boolean = innerFlag;
            var knockout:Boolean = false;
            var quality:Number = BitmapFilterQuality.HIGH;

            return new GlowFilter(color,
                                  alpha,
                                  blurX,
                                  blurY,
                                  strength,
                                  quality,
                                  inner,
                                  knockout);
        }
	}
	
}		

プログラムはコンストラクタから開始されますが、コンストラクタ内に直接処理を入れると、表示したはずの画像が表示されない等の問題が出ることがあるようなので、いったんコンストラクタ内で init() イベントを設定することで開始時間をずらして、init() 内からコードを開始するような書き方になっています。これは、FlashDevelop で ActionScript3 のプロジェクトを作成すると最初からこういう構造になっています。

21 行目に、 image1 という変数が宣言されていますが、上の行に Embed 属性が付いていて、埋め込み画像を指すクラスをあらわしてます。埋め込み画像とは、SWF ファイルの中に入れてしまう画像のことです。Flash 実行時に URL から画像をダウンロードする必要がなくなるので、実験には便利です。埋め込み画像は Bitmap クラスに実体化して使用します。

41 〜 55行目が処理の中心になります。 グローフィルターを作って、画像を表示した後、フィルターを適用しています。 フィルターをいったん配列に入れていますが、これは、フィルターを複数かけるための構造で、 グロー以外のフィルターを重ねてかねる時に使用します。 今回は 1 つだけフィルターをかけているので、配列に入れるのはおかしい気もしますが、 bitmap.filters のインターフェイスが配列型を要求するので、filters プロパティに設定するためだけに フィルターを配列に入れています。

参照

外部リンク