ActionScript入門Wiki - BevelFilterでベベル効果をかける

トップページ > フィルター > BevelFilterでベベル効果をかける

概要

BevelFilterでベベル効果をかけてみましょう。
ベベル効果というのは左上にハイライトを、右下に影を付けることによってオブジェクトを立体っぽく見せることが出来る技術です。

プログラム

var canvas:Sprite = new Sprite();
canvas.graphics.beginFill(0xED1A3D);
canvas.graphics.drawRect(0, 0, 100, 100);
canvas.graphics.endFill();
addChild(canvas);

まずはベベル効果を適用する対象のSpriteオブジェクトを用意しましょう。
100 * 100ピクセルの赤四角形を描いておきます。

canvas.filters = [new BevelFilter()];

filtersプロパティにBevelFilterオブジェクトを代入します。

立体感が出ていますね。

引数の内容を説明していきます。

第一引数

distance:Number = 4.0

影とハイライトの長さを指定します。デフォルト値は4.0(px)です。

canvas.filters = [new BevelFilter(10)];

distanceに10を指定した場合です。

canvas.filters = [new BevelFilter(30)];

distanceに30を指定した場合です。
値を増やせば影とハイライトの領域が増えていきますが、その分オブジェクトのサイズが小さくなってしまいます。

第二引数

angle:Number = 45

影とハイライトの角度を指定します。デフォルト値は45(度)です。
デフォルトのままだと、影の位置が45度の方向に、ハイライトの位置が-45度の方向にセットされます。

canvas.filters = [new BevelFilter(10, 70)];

角度を70度に指定しているので、影の位置が70度の方向に、ハイライトの位置が-70度の方向にセットされています。

第三引数

第四引数

二つの引数をまとめて説明します。

highlightColor:uint = 16777215
highlightAlpha:Number = 1

左上にあるハイライトの色と透明度を指定します。
デフォルトの色は0xFFFFFF(白)で、アルファ値は1.0(不透明)です。

canvas.filters = [new BevelFilter(4, 45, 0xFFd5aa)];

ハイライトにオレンジ色(透明度100%)を指定しています。

第五引数

第六引数

二つの引数をまとめて説明します。

shadowColor:uint = 0x000000
shadowAlpha:Number = 1.0

右下にある影の色と透明度を指定します。
デフォルトの色は0x0(黒)で、アルファ値は1.0(不透明)です。

canvas.filters = [new BevelFilter(4, 45, 0xFFFFFF, 1.0, 0x0000FF, 1.0)];

影に青色(透明度100%)を指定しています。

第七引数

第八引数

二つの引数をまとめて説明します。

blurX:Number = 4.0
blurY:Number = 4.0

影とハイライトのぼかし距離を指定します。
blurXが横方向で、blurYが縦方向です。
デフォルト値は4.0(px)です。

canvas.filters = [new BevelFilter(4, 45, 0xFFFFFF, 1.0, 0x0, 1.0, 20, 20)];

blurXとblurYに20を指定しています。ボタンっぽいデザインになりましたね。

第九引数

strength:Number = 1

strengthがデフォルトのままだと影とハイライトがぼけたように表示されるのですが、この値を増やすとくっきりと表示されます。

canvas.filters = [new BevelFilter(4, 45, 0xFFFFFF, 1.0, 0x0, 1.0, 4, 4, 20)];

strengthに20を指定しています。くっきりと濃い感じで表示されていますね。

第十引数

quality:int = 1

qualityはこのフィルターをかける回数を表します。デフォルト値は1(回)です。

このかける回数には専用の定数が用意されており、

BitmapFilterQuality.LOW
- 1回
BitmapFilterQuality.MEDIUM
- 2回
BitmapFilterQuality.HIGH
- 3回

という意味になります。
例えば、BitmapFilterQuality.MEDIUMと書かずに直接「2」と記述してもらっても構いません。

この定数が表している通り、qualityに指定する回数は多くても3回で十分です。一応、最大で15回まで指定できるようになっています。
かける回数が増えるほど負担がかかるので注意してください。

canvas.filters = [new BevelFilter(4, 45, 0xFFFFFF, 1.0, 0x0, 1.0, 20, 20, 1, 3)];

上にあるblurXYの説明で使用したコードと同じですが、qualityに3を指定しているのでより全体がぼけた感じで表示されています。
ボタンやゲームのブロックとかに使えそうですね。

第十一引数

type:String = "inner"

デフォルトの設定では、影とハイライトをオブジェクトの内部に表示させるのですが、この引数に特定の値を指定することで外側、もしくは内外両側に設定させる事が出来ます。

指定方法

内側に表示（デフォルト設定)
- "inner" もしくは BitmapFilterType.INNER を指定。
外側に表示
- "outer" もしくは BitmapFilterType.OUTER を指定。
内外両側に表示
- "full" もしくは BitmapFilterType.FULL を指定。

canvas.filters = [new BevelFilter(4, 45, 0xFFFFFF, 1.0, 0x0, 1.0, 20, 20, 1, 3, BitmapFilterType.INNER)];

INNERを指定しているので内側にベベル効果が適用されます。デフォルトの表示ですね。
上にあるqualityの説明で使用したコードです。

canvas.filters = [new BevelFilter(4, 45, 0xFFFFFF, 1.0, 0x0, 1.0, 20, 20, 1, 3, BitmapFilterType.OUTER)];

OUTERを指定しているので外側にベベル効果が適用されます。

canvas.filters = [new BevelFilter(4, 45, 0xFFFFFF, 1.0, 0x0, 1.0, 20, 20, 1, 3, BitmapFilterType.FULL)];

FULLを指定しているので内外両側にベベル効果が適用されます。

第十二引数

knockout:Boolean = false

knockoutにtrueを入れると、オブジェクトが透明になり背景部分が表示されます。

canvas.filters = [new BevelFilter(4, 45, 0xFFFFFF, 1.0, 0x0, 1.0, 20, 20, 1, 3, "inner", true)];

上にあるqualityの説明で使用したコードですが、ノックアウト効果を適用しているためオブジェクト部分が透明になっていますね。

検証用コード

package
{
	import flash.display.Sprite;
	import flash.filters.BevelFilter;
	import flash.filters.BitmapFilterType;
 
	public class Main extends Sprite
	{
		public function Main()
		{
			var canvas:Sprite = new Sprite();
			canvas.graphics.beginFill(0xED1A3D);
			canvas.graphics.drawRect(0, 0, 100, 100);
			canvas.graphics.endFill();
			addChild(canvas);
 
			canvas.filters = [new BevelFilter(4, 45, 0xFFFFFF, 1.0, 0x0, 1.0, 20, 20, 1, 3, "inner", true)];
		}
	}
}

リンク元(0)

添付ファイル