ベベルフィルター

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

FlashDevelop を使って、画像にベベルフィルターを設定してみました。

ベベルとは、斜角をつけるとか斜めに切るとかそういう意味だそうです。
画像に、飛び出したような効果をつけたい時に使うんだと思います。
色は自由に設定できます。
左が処理前の画像、右がFlashで処理済みの画像です。

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.BitmapFilterType;
	import flash.filters.BevelFilter;
	
	/**
	 * ベベルフィルターのサンプル
	 * @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 = getBevelFilter(true);
            var myFilters1:Array = new Array();
            myFilters1.push(filter1);
			
			var filter2:BitmapFilter = getBevelFilter(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 getBevelFilter(innerFlag:Boolean):BitmapFilter
		{
            var distance:Number       = 5;
            var angleInDegrees:Number = 45;
            var highlightColor:Number = 0xcccccc;
            var highlightAlpha:Number = 0.6;
            var shadowColor:Number    = 0x666666;
            var shadowAlpha:Number    = 0.6;
            var blurX:Number          = 5;
            var blurY:Number          = 5;
            var strength:Number       = 3;
            var quality:Number        = BitmapFilterQuality.HIGH;
            var type:String;
			if (innerFlag == true)
				type = BitmapFilterType.INNER;
			else
				type = BitmapFilterType.OUTER;
            var knockout:Boolean      = false;

            return new BevelFilter(distance,
                                   angleInDegrees,
                                   highlightColor,
                                   highlightAlpha,
                                   shadowColor,
                                   shadowAlpha,
                                   blurX,
                                   blurY,
                                   strength,
                                   quality,
                                   type,
                                   knockout);
        }
	}
	
}		

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

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

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

参照

外部リンク