ActionScript入門Wiki - BlurFilterでブラー効果をかける

トップページ > フィルター > BlurFilterでブラー効果をかける

概要

BlurFilterでブラー効果をかけてみましょう。

プログラム

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 BlurFilter()];

filtersプロパティにBlurFilterオブジェクトを配列の中に入れて代入します。

輪郭部分がぼやけているのが分かりますね。

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

第一引数

第二引数

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

blurX:Number = 4
blurY:Number = 4

ブラーの長さを指定します。blurXが横方向で、blurYは縦方向です。
デフォルト値は4(px)です。

canvas.filters = [new BlurFilter(20, 40)];

blurXに20, blurYに40を指定しています。

第三引数

quality:int = 1

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

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

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

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

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

canvas.filters = [new BlurFilter(20, 40, 3)];

blurXに20, blurYに40と上で書いたコードと一緒なのですが、qualityに3を指定しているのでブラー効果が3回適用されます。
上の画像とこの画像を比べてみると違いがよく分かると思います。

検証用コード

package
{
	import flash.display.Sprite;
	import flash.filters.BlurFilter;
 
	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 BlurFilter(20, 40, 3)];
		}
	}
}

リンク元(0)

添付ファイル