グラデーションベベルフィルター

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

FlashDevelop を使って、画像にグラデーションベベルフィルターを設定してみました。

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

Flash の実行画面
グラデーションベベルフィルター

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

Get Adobe Flash player

元の画像 グラデーションベベルフィルター
普通のベベルフィルターと違って
背景色が付いてしまっていますが、
これは中間色を透明にすることで消すことができます。

ソースコード

package 
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.BitmapFilter;
	import flash.filters.BitmapFilterQuality;
	import flash.filters.BitmapFilterType;
	import flash.filters.GradientBevelFilter;

	/**
	 * グラデーションベベルフィルターのサンプル
	 * @author Hikipuro
	 */
	public class Main extends Sprite 
	{
		/**
		 * 埋め込み画像
		 */
		[Embed(source='../image/test001.png')]
		private var image1:Class;
		
		/**
		 * ビットマップ
		 */
		private var bitmap1:Bitmap;
		private var bitmap2:Bitmap;
		
		/**
		 * フィルターをかける角度
		 */
		private var angle:Number = 0;
		
		/**
		 * コンストラクタ
		 */
		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
			
			// ビットマップの準備
			bitmap1 = Bitmap(new image1);
			RegisterBitmap(bitmap1, 10, 10, 2.0);
			
			bitmap2 = Bitmap(new image1);
			RegisterBitmap(bitmap2, 150, 10, 2.0);
			
			// フレーム開始イベント登録
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		
		/**
		 * フレーム開始イベント
		 * @param	event
		 */
		private function onEnterFrame(event:Event):void
		{
			angle++;
			
			// フィルターを作成して、ビットマップに適用する
			var filter1:BitmapFilter = getGradientBevelFilter(true, angle);
            var myFilters1:Array = new Array();
            myFilters1.push(filter1);
			
			var filter2:BitmapFilter = getGradientBevelFilter(false, angle);
            var myFilters2:Array = new Array();
            myFilters2.push(filter2);
			
            bitmap1.filters = myFilters1;
            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 getGradientBevelFilter(innerFlag:Boolean, angle:Number):BitmapFilter
		{
			var distance:Number = 5;
			var colors:Array    = [0xdddddd, 0x999999, 0x666666];
			var alphas:Array    = [0.6, 0.3, 0.6];
			var ratios:Array    = [0, 64, 255];
			var blurX:Number    = 8;
			var blurY:Number    = 8;
			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 GradientBevelFilter(distance,
										   angle,
										   colors,
										   alphas,
										   ratios,
										   blurX,
										   blurY,
										   strength,
										   quality,
										   type,
										   knockout);
        }

	}
	
}		

参照

外部リンク