フィルタについて
・ | フィルタとは? |
・ | ブラーフィルタについて |
・ | ベベルフィルタについて |
・ | グラデーションベベルフィルタについて |
・ | グローフィルタについて |
・ | グラデーショングローフィルタについて |
・ | ドロップシャドウフィルタについて |
・ | カラーマトリックスフィルタについて |
・ | コンボリューションフィルタについて |
・ | ディスプレイスメントマップフィルタについて |
・ | シェーダーフィルタについて |
フィルタとは?
■フィルタについて
フィルタは、グラフィックエフェクトの一種です。
表示オブジェクトに対して、追加のエフェクトを動的に適用する事ができます。
元のグラフィックが改変される事はありません。
フィルタは、表示オブジェクトに適用する事ができます。
BitmapData に適用した結果を、BitmapData に描画する事もできます。
■フィルタ一覧
クラス名 | 効果 |
BlurFilter | ブラー(ぼかし) |
BevelFilter | ベベル |
GradientBevelFilter | グラデーションベベル |
GlowFilter | グロー |
GradientGlowFilter | グラデーショングロー |
DropShadowFilter | ドロップシャドウ |
ColorMatrixFilter | カラーマトリックス |
ConvolutionFilter | コンボリューション |
DisplacementMapFilter | ディスプレイスメントマップ |
ShaderFilter | シェーダー |
■フィルタが使用できる条件
■Flash Player 9 以前の場合
幅と高さが 2880 ピクセルまでのグラフィックに適用できます。
グラフィックのサイズがこの範囲を超えてしまうと、フィルタは動作しません。
■Flash Player 10 の場合
幅と高さが 8192 ピクセルまでのグラフィックに適用できますが、総ピクセル数は 16777216 までとなります。(幅が 8192 なら高さは 2048 まで)
グラフィックのサイズがこの範囲を超えてしまうと、フィルタは動作しません。
■Flash Player 11 以降の場合
ピクセルサイズの制限はありません。
メモリ不足の場合、フィルタは動作しません。
■フィルタを最適に利用する
■メモリについて
フィルタは、メモリを大量に消費するので注意してください。
例えば、幅:2000 高さ:2000 のグラフィックに適用した場合、2000 × 2000 × 4 バイト ⇒ 約 15 MByte 消費するでしょう。
■レンダリングについて
フィルタは、レンダリング処理が、極めて重いので注意して下さい。
できるだけ、再描画が発生しないグラフィックに適用するよう心がけます。
■ぼかしの最適値について
blurX と blurY プロパティは、最適な数値が存在します。
2 のべき乗(2, 4, 8, 16, 32, 64, 128, 256)を指定すると、通常より 20 ~ 30 % ほど高速で動作します。
ブラーフィルタについて
■ブラーフィルタについて
ブラーフィルタを使用すると、表示オブジェクトをぼかす事ができます。
なし | あり |
■ブラーフィルタオブジェクトを作成する
new BlurFilter ( blurX , blurY , quality ) :BlurFilter
第01引数(略可) | Number | blurX プロパティと同等。 |
第02引数(略可) | Number | blurY プロパティと同等。 |
第03引数(略可) | int | quality プロパティと同等。 |
戻り値 | BlurFilter | BlurFilter オブジェクトが得られる |
■作成例
BlurFilter オブジェクトを作成する
import flash.filters.BlurFilter;
import flash.filters.BitmapFilterQuality;
// BlurFilter オブジェクトを作成する
var blur_filter:BlurFilter = new BlurFilter(
4, // 水平方向ぼかし量
4, // 垂直方向ぼかし量
BitmapFilterQuality.LOW // 品質
);
■ブラーフィルタのプロパティ一覧
BlurFilter クラスには、以下のプロパティがあります。
プロパティ名 | 型 | 効果 |
blurX | Number | 水平方向ぼかし量を指定。(0~255 単位:ピクセル) デフォルトは 4 |
blurY | Number | 垂直方向ぼかし量を指定。(0~255 単位:ピクセル) デフォルトは 4 |
quality | int | フィルタの適用回数(1~15)デフォルトは 1 |
■ぼかし量(blurX と blurY プロパティ)
水平方向と垂直方向のぼかし量です。
2 のべき乗(2, 4, 8, 16, 32, 64, 128, 256)を指定すると、通常より 20 ~ 30 % ほど高速で動作します。
■フィルタの適用回数(quality プロパティ)
ぼかしの品質です。フィルタの適用回数を意味します。
値が大きいほどレンダリング処理が重くなり、より高品質となります。
この設定をできるだけ低くして調整すると、処理を軽く抑える事ができます。
BitmapFilterQuality.* 定数を使用する事もできます。
定数 | 値 | 効果 |
BitmapFilterQuality.LOW | 1 | 低品質な結果が得られる |
BitmapFilterQuality.MEDIUM | 2 | 中品質な結果が得られる |
BitmapFilterQuality.HIGH | 3 | 高品質な結果が得られる |
■ブラーフィルタを表示オブジェクトに適用する
■使用例
スプライトに BlurFilter オブジェクトを適用する
import flash.display.Sprite;
import flash.display.Graphics;
import flash.filters.BlurFilter;
import flash.filters.BitmapFilterQuality;
// ------------------------------------------------------------
// スプライトを作成
// ------------------------------------------------------------
var sprite:Sprite = new Sprite();
// ステージに配置
stage.addChild(sprite);
// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawRect (-50,-50,100,100);
// 位置を設定
sprite.x = 100;
sprite.y = 100;
// ------------------------------------------------------------
// BlurFilter オブジェクトを作成する
// ------------------------------------------------------------
var blur_filter:BlurFilter = new BlurFilter();
// ------------------------------------------------------------
// プロパティを設定する
// ------------------------------------------------------------
blur_filter.blurX = 10; // 水平方向ぼかし量
blur_filter.blurY = 10; // 垂直方向ぼかし量
blur_filter.quality = BitmapFilterQuality.LOW; // 品質
// ------------------------------------------------------------
// スプライトにフィルタを適用する
// ------------------------------------------------------------
sprite.filters = [blur_filter];
ベベルフィルタについて
■ベベルフィルタについて
ベベルフィルタを使用すると、隆起感を表現する事ができます。
ハイライトカラーとシャドウカラーが追加され、傾斜が付きます。
なし | あり |
■ベベルフィルタオブジェクトを作成する
new BevelFilter ( distance , angle , highlightColor , highlightAlpha , shadowColor , shadowAlpha , blurX , blurY , strength , quality , type , knockout ) :BevelFilter
第01引数(略可) | Number | distance プロパティと同等。 |
第02引数(略可) | Number | angle プロパティと同等。 |
第03引数(略可) | uint | highlightColor プロパティと同等。 |
第04引数(略可) | Number | highlightAlpha プロパティと同等。 |
第05引数(略可) | uint | shadowColor プロパティと同等。 |
第06引数(略可) | Number | shadowAlpha プロパティと同等。 |
第07引数(略可) | Number | blurX プロパティと同等。 |
第08引数(略可) | Number | blurY プロパティと同等。 |
第09引数(略可) | Number | strength プロパティと同等。 |
第10引数(略可) | int | quality プロパティと同等。 |
第11引数(略可) | String | type プロパティと同等。 |
第12引数(略可) | Boolean | knockout プロパティと同等。 |
戻り値 | BevelFilter | BevelFilter オブジェクトが得られる |
■作成例
BevelFilter オブジェクトを作成する
import flash.filters.BevelFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.BitmapFilterType;
// BevelFilter オブジェクトを作成する
var bevel_filter:BevelFilter = new BevelFilter(
4, // オフセットの距離
45, // 角度
0xFF0000, // ハイライトカラー
1.0, // ハイライトカラーの透明度
0x0000FF, // シャドウカラーを指定
1.0, // シャドウカラーの透明度
4, // 水平方向ぼかし量
4, // 垂直方向ぼかし量
1.0, // インプリントやスプレッドの長さ
BitmapFilterQuality.LOW, // フィルタを適用する回数
BitmapFilterType.INNER, // ベベルの種類
false // ノックアウト効果の有無
);
■ベベルフィルタのプロパティ一覧
BevelFilter クラスには、以下のプロパティがあります。
プロパティ名 | 型 | 効果 |
distance | Number | オフセットの距離。 デフォルトは 4 |
angle | Number | 角度を指定。(0~360 単位:度) デフォルトは 45.0 |
highlightColor | uint | ハイライトカラーを指定。(RGB 形式) デフォルトは 0xFFFFFF |
highlightAlpha | Number | ハイライトカラーの透明度を指定。(0.0~1.0) デフォルトは 1.0 |
shadowColor | uint | シャドウカラーを指定。(RGB 形式) デフォルトは 0x000000 |
shadowAlpha | Number | シャドウカラーの透明度を指定。(0.0~1.0) デフォルトは 1.0 |
blurX | Number | 水平方向ぼかし量を指定。(0~255 単位:ピクセル) デフォルトは 4 |
blurY | Number | 垂直方向ぼかし量を指定。(0~255 単位:ピクセル) デフォルトは 4 |
strength | Number | インプリントやスプレッドの長さ。(0 ~ 255) デフォルトは 1 |
quality | int | フィルタを適用する回数(1~15) デフォルトは 1 |
type | String | ベベルの種類。BitmapFilterType.* 定数を指定。 |
knockout | Boolean | ノックアウト効果の有無 デフォルトは false |
■ぼかし量(blurX と blurY プロパティ)
水平方向と垂直方向のぼかし量です。
2 のべき乗(2, 4, 8, 16, 32, 64, 128, 256)を指定すると、通常より 20 ~ 30 % ほど高速で動作します。
■インプリントやスプレッドの長さ (strength プロパティ)
値が大きいほど、ベベルと背景とのコントラストが強くなります。
■フィルタを適用する回数 (quality プロパティ)
フィルタの品質です。フィルタの適用回数を意味します。
値が大きいほどレンダリング処理が重くなり、より高品質となります。
この設定をできるだけ低くして調整すると、処理を軽く抑える事ができます。
BitmapFilterQuality.* 定数を使用する事もできます。
定数 | 値 | 効果 |
BitmapFilterQuality.LOW | 1 | 低品質な結果が得られる |
BitmapFilterQuality.MEDIUM | 2 | 中品質な結果が得られる |
BitmapFilterQuality.HIGH | 3 | 高品質な結果が得られる |
■ベベルの種類 (type プロパティ)
ベベルの種類の一覧です。
デフォルト値は、BitmapFilterType.INNER です。
定数 | 文字列 | 効果 |
BitmapFilterType.INNER | "inner" | 内側にのみ適用する |
BitmapFilterType.OUTER | "outer" | 外側にのみ適用する |
BitmapFilterType.FULL | "full" | 内側と外側の両方に適用する |
INNER | OUTER | FULL |
■ノックアウト効果の有無 (knockout プロパティ)
ノックアウト効果を使用すると、表示オブジェクトを消してフィルタの結果だけを表示することができます。
なし | あり |
■ベベルフィルタを表示オブジェクトに適用する
■使用例
スプライトに BevelFilter オブジェクトを適用する
import flash.display.Sprite;
import flash.display.Graphics;
import flash.filters.BevelFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.BitmapFilterType;
// ------------------------------------------------------------
// スプライトを作成
// ------------------------------------------------------------
var sprite:Sprite = new Sprite();
// ステージに配置
stage.addChild(sprite);
// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF4444, 1.0);
g.drawRect (-50,-50,100,100);
// 位置を設定
sprite.x = 100;
sprite.y = 100;
// ------------------------------------------------------------
// BevelFilter オブジェクトを作成する
// ------------------------------------------------------------
var bevel_filter:BevelFilter = new BevelFilter();
// ------------------------------------------------------------
// プロパティを設定する
// ------------------------------------------------------------
bevel_filter.distance = 4; // オフセットの距離
bevel_filter.angle = 45.0; // 角度
bevel_filter.highlightColor = 0xFFC0C0; // ハイライトカラー
bevel_filter.highlightAlpha = 1.0; // ハイライトカラーの透明度
bevel_filter.shadowColor = 0x000040; // シャドウカラーを指定
bevel_filter.shadowAlpha = 1.0; // シャドウカラーの透明度
bevel_filter.blurX = 10; // 水平方向ぼかし量
bevel_filter.blurY = 10; // 垂直方向ぼかし量
bevel_filter.strength = 5; // インプリントやスプレッドの長さ
bevel_filter.quality = BitmapFilterQuality.MEDIUM; // フィルタを適用する回数
bevel_filter.type = BitmapFilterType.INNER; // ベベルの種類
bevel_filter.knockout = false; // ノックアウト効果の有無
// ------------------------------------------------------------
// スプライトにフィルタを適用する
// ------------------------------------------------------------
sprite.filters = [bevel_filter];
グラデーションベベルフィルタについて
■グラデーションベベルフィルタについて
グラデーションベベルフィルタは、ベベル(傾斜)のグラデーション版です。
グラデーション(0 ~ 255)を指定して、隆起感を表現する事ができます。
グラデーションの前半(0 ~ 127)は、シャドウカラー側に相当します。
グラデーションの後半(129 ~ 255)は、ハイライトカラー側に相当します。
グラデーションの中間(128)は、グラフィック本体の単一カラーに割り当てられます。
通常の場合、128 の透明度は、0 にするといいでしょう。
グラデーションの一例 |
angle を 45 度で指定した場合 |
■グラデーションベベルフィルタオブジェクトを作成する
new GradientBevelFilter ( distance , angle , colors , alphas , ratios , blurX , blurY , strength , quality , type , knockout ) :GradientBevelFilter
第01引数(略可) | Number | distance プロパティと同等。 |
第02引数(略可) | Number | angle プロパティと同等。 |
第03引数(略可) | Array | colors プロパティと同等。 |
第04引数(略可) | Array | alphas プロパティと同等。 |
第05引数(略可) | Array | ratios プロパティと同等。 |
第06引数(略可) | Number | blurX プロパティと同等。 |
第07引数(略可) | Number | blurY プロパティと同等。 |
第08引数(略可) | Number | strength プロパティと同等。 |
第09引数(略可) | int | quality プロパティと同等。 |
第10引数(略可) | String | type プロパティと同等。 |
第11引数(略可) | Boolean | knockout プロパティと同等。 |
戻り値 | GradientBevelFilter | GradientBevelFilter オブジェクトが得られる |
■作成例
GradientBevelFilter オブジェクトを作成する
import flash.filters.GradientBevelFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.BitmapFilterType;
// ------------------------------------------------------------
// グラデーション情報
// ------------------------------------------------------------
var colors:Array = [ 0x000000, 0x000000, 0x808080, 0xFFFFFF, 0xFFFFFF ];
var alphas:Array = [ 1.0, 0.0, 0.0, 0.0, 1.0 ];
var ratios:Array = [ 0, 127, 128, 129, 255 ];
// ------------------------------------------------------------
// GradientBevelFilter オブジェクトを作成する
// ------------------------------------------------------------
var gradient_bevel_filter:GradientBevelFilter = new GradientBevelFilter(
4, // オフセットの距離
45, // 角度
colors, // グラデーションのカラー
alphas, // グラデーションの透明度
ratios, // グラデーションの配分
4, // 水平方向ぼかし量
4, // 垂直方向ぼかし量
1.0, // インプリントやスプレッドの長さ
BitmapFilterQuality.LOW, // フィルタを適用する回数
BitmapFilterType.INNER, // ベベルの種類
false // ノックアウト効果の有無
);
■グラデーションベベルフィルタのプロパティ一覧
GradientBevelFilter クラスには、以下のプロパティがあります。
プロパティ名 | 型 | 効果 |
distance | Number | オフセットの距離。 デフォルトは 4 |
angle | Number | 角度を指定。(0~360 単位:度) デフォルトは 45.0 |
colors | Array | グラデーションの RGB カラー (0xFFFFFF) を、配列に格納して指定。 radios プロパティの要素数分だけ用意する。 |
alphas | Array | グラデーションの透明度 (0.0 ~ 1.0) を、配列に格納して指定。 radios プロパティの要素数分だけ用意する。 |
ratios | Array | グラデーションの配分 (0 ~ 255) を、配列に格納して指定。 |
blurX | Number | 水平方向ぼかし量を指定。(0~255 単位:ピクセル) デフォルトは 4 |
blurY | Number | 垂直方向ぼかし量を指定。(0~255 単位:ピクセル) デフォルトは 4 |
strength | Number | インプリントやスプレッドの長さ。(0 ~ 255) デフォルトは 1 |
quality | int | フィルタを適用する回数(1~15) デフォルトは 1 |
type | String | ベベルの種類。BitmapFilterType.* 定数を指定。 |
knockout | Boolean | ノックアウト効果の有無 デフォルトは false |
■グラデーションの配分(ratios プロパティ)
グラデーションの配分(配置)を 0 ~ 255 の数値で指定します。
配列に格納して指定します。
colors、alphas、ratios 配列の要素数は、一致している必要があります。
0 ~ 127 は、シャドウカラー側のグラデーションです。
128 は、グラフィック本体に割り当てられる単一カラーです。
129 ~ 255 は、ハイライトカラー側のグラデーションです。
通常の場合、128 の透明度は、0.0 を指定します。
さもなくば、グラフィック本体は、単一色で塗りつぶされるでしょう。
ベベルを再現するグラデーションの例
var highlight_color:uint = 0xFF0000; // ハイライトカラー
var shadow_color:uint = 0x0000FF; // シャドウカラー
var highlight_alpha:Number = 1.0; // ハイライトの透明度
var shadow_alpha:Number = 1.0; // シャドウの透明度
// グラデーション情報
var colors:Array = [ shadow_color , shadow_color , 0 , highlight_color , highlight_color ];
var alphas:Array = [ shadow_alpha , 0.0 , 0.0 , 0.0 , highlight_alpha];
var ratios:Array = [ 0 , 127 , 128 , 129 , 255];
■ぼかし量(blurX と blurY プロパティ)
水平方向と垂直方向のぼかし量です。
2 のべき乗(2, 4, 8, 16, 32, 64, 128, 256)を指定すると、通常より 20 ~ 30 % ほど高速で動作します。
■インプリントやスプレッドの長さ (strength プロパティ)
値が大きいほど、ベベルと背景とのコントラストが強くなります。
■フィルタを適用する回数 (quality プロパティ)
フィルタの品質です。フィルタの適用回数を意味します。
値が大きいほどレンダリング処理が重くなり、より高品質となります。
この設定をできるだけ低くして調整すると、処理を軽く抑える事ができます。
BitmapFilterQuality.* 定数を使用する事もできます。
定数 | 値 | 効果 |
BitmapFilterQuality.LOW | 1 | 低品質な結果が得られる |
BitmapFilterQuality.MEDIUM | 2 | 中品質な結果が得られる |
BitmapFilterQuality.HIGH | 3 | 高品質な結果が得られる |
■ベベルの種類 (type プロパティ)
ベベルの種類の一覧です。
デフォルト値は、BitmapFilterType.INNER です。
定数 | 文字列 | 効果 |
BitmapFilterType.INNER | "inner" | 内側にのみ適用する |
BitmapFilterType.OUTER | "outer" | 外側にのみ適用する |
BitmapFilterType.FULL | "full" | 内側と外側の両方に適用する |
INNER | OUTER | FULL |
■ノックアウト効果の有無 (knockout プロパティ)
ノックアウト効果を使用すると、表示オブジェクトを消してフィルタの結果だけを表示することができます。
なし | あり |
■グラデーションベベルフィルタを表示オブジェクトに適用する
■使用例
スプライトに GradientBevelFilter オブジェクトを適用する
import flash.display.Sprite;
import flash.display.Graphics;
import flash.filters.GradientBevelFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.BitmapFilterType;
// ------------------------------------------------------------
// スプライトを作成
// ------------------------------------------------------------
var sprite:Sprite = new Sprite();
// ステージに配置
stage.addChild(sprite);
// 矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill (0xFF4444, 1.0);
g.drawRect (-50,-50,100,100);
// 位置を設定
sprite.x = 100;
sprite.y = 100;
// ------------------------------------------------------------
// GradientBevelFilter オブジェクトを作成する
// ------------------------------------------------------------
var gradient_bevel_filter:GradientBevelFilter = new GradientBevelFilter();
// ------------------------------------------------------------
// グラデーション情報
// ------------------------------------------------------------
var colors:Array = [ 0x000000, 0x000000, 0x808080, 0xFFFFFF, 0xFFFFFF ];
var alphas:Array = [ 1.0, 0.0, 0.0, 0.0, 1.0 ];
var ratios:Array = [ 0, 127, 128, 129, 255 ];
// ------------------------------------------------------------
// プロパティを設定する
// ------------------------------------------------------------
gradient_bevel_filter.distance = 4; // オフセットの距離
gradient_bevel_filter.angle = 45.0; // 角度
gradient_bevel_filter.colors = colors; // グラデーションのカラー
gradient_bevel_filter.alphas = alphas; // グラデーションの透明度
gradient_bevel_filter.ratios = ratios; // グラデーションの配分
gradient_bevel_filter.blurX = 10; // 水平方向ぼかし量
gradient_bevel_filter.blurY = 10; // 垂直方向ぼかし量
gradient_bevel_filter.strength = 1; // インプリントやスプレッドの長さ
gradient_bevel_filter.quality = BitmapFilterQuality.LOW; // フィルタを適用する回数
gradient_bevel_filter.type = BitmapFilterType.INNER; // ベベルの種類
gradient_bevel_filter.knockout = false; // ノックアウト効果の有無
// ------------------------------------------------------------
// スプライトにフィルタを適用する
// ------------------------------------------------------------
sprite.filters = [gradient_bevel_filter];
グローフィルタについて
■グローフィルタについて
グローフィルタを使用すると、光彩を表現する事ができます。
グラフィックが、光に包まれている表現などが可能です。
内部グロー | 外部グロー |
■グローフィルタオブジェクトを作成する
new GlowFilter ( color , alpha , blurX , blurY , strength , quality , inner , knockout ) :GlowFilter
第01引数(略可) | uint | color プロパティと同等。 |
第02引数(略可) | Number | alpha プロパティと同等。 |
第03引数(略可) | Number | blurX プロパティと同等。 |
第04引数(略可) | Number | blurY プロパティと同等。 |
第05引数(略可) | Number | strength プロパティと同等。 |
第06引数(略可) | int | quality プロパティと同等。 |
第07引数(略可) | Boolean | inner プロパティと同等。 |
第08引数(略可) | Boolean | knockout プロパティと同等。 |
戻り値 | GlowFilter | GlowFilter オブジェクトが得られる |
■作成例
GlowFilter オブジェクトを作成する
import flash.filters.GlowFilter;
import flash.filters.BitmapFilterQuality;
// ------------------------------------------------------------
// GlowFilter オブジェクトを作成する
// ------------------------------------------------------------
var glow_filter:GlowFilter = new GlowFilter(
0xFF0000, // カラー
1.0, // 透明度
6, // 水平方向ぼかし量
6, // 垂直方向ぼかし量
2.0, // インプリントやスプレッドの長さ
BitmapFilterQuality.LOW, // フィルタを適用する回数
false, // 内部グローを使用するか?
false // ノックアウト効果の有無
);
■グローフィルタのプロパティ一覧
GlowFilter クラスには、以下のプロパティがあります。
プロパティ名 | 型 | 効果 |
color | uint | カラーを指定。(RGB 形式) デフォルトは 0xFF0000 |
alpha | Number | カラーの透明度を指定。(0.0~1.0) デフォルトは 1.0 |
blurX | Number | 水平方向ぼかし量を指定。(0~255 単位:ピクセル) デフォルトは 6 |
blurY | Number | 垂直方向ぼかし量を指定。(0~255 単位:ピクセル) デフォルトは 6 |
strength | Number | インプリントやスプレッドの長さ。(0 ~ 255) デフォルトは 2 |
quality | int | フィルタを適用する回数(1~15) デフォルトは 1 |
inner | Boolean | 内部グローなら true、外部グローなら false を指定。 デフォルトは false |
knockout | Boolean | ノックアウト効果の有無 デフォルトは false |
■ぼかし量(blurX と blurY プロパティ)
水平方向と垂直方向のぼかし量です。
2 のべき乗(2, 4, 8, 16, 32, 64, 128, 256)を指定すると、通常より 20 ~ 30 % ほど高速で動作します。
■インプリントやスプレッドの長さ (strength プロパティ)
値が大きいほど、グローと背景とのコントラストが強くなります。
■フィルタを適用する回数 (quality プロパティ)
フィルタの品質です。フィルタの適用回数を意味します。
値が大きいほどレンダリング処理が重くなり、より高品質となります。
この設定をできるだけ低くして調整すると、処理を軽く抑える事ができます。
BitmapFilterQuality.* 定数を使用する事もできます。
定数 | 値 | 効果 |
BitmapFilterQuality.LOW | 1 | 低品質な結果が得られる |
BitmapFilterQuality.MEDIUM | 2 | 中品質な結果が得られる |
BitmapFilterQuality.HIGH | 3 | 高品質な結果が得られる |
■グローの種類 (inner プロパティ)
グローの種類の一覧です。
値 | 効果 |
true | 内側グローを使用する |
false | 外側グローを使用する |
内部グロー | 外部グロー |
■ノックアウト効果の有無 (knockout プロパティ)
ノックアウト効果を使用すると、表示オブジェクトを消してフィルタの結果だけを表示することができます。
なし | あり |
なし | あり |
■グローフィルタを表示オブジェクトに適用する
■使用例
スプライトに GlowFilter オブジェクトを適用する
import flash.display.Sprite;
import flash.display.Graphics;
import flash.filters.GlowFilter;
import flash.filters.BitmapFilterQuality;
// ------------------------------------------------------------
// スプライトを作成
// ------------------------------------------------------------
var sprite:Sprite = new Sprite();
// ステージに配置
stage.addChild(sprite);
// 矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill (0xFF4444, 1.0);
g.drawRect (-50,-50,100,100);
// 位置を設定
sprite.x = 100;
sprite.y = 100;
// ------------------------------------------------------------
// GlowFilter オブジェクトを作成する
// ------------------------------------------------------------
var glow_filter:GlowFilter = new GlowFilter();
// ------------------------------------------------------------
// プロパティを設定する
// ------------------------------------------------------------
glow_filter.color = 0xFF0000; // カラー
glow_filter.alpha = 1.0; // 透明度
glow_filter.blurX = 10; // 水平方向ぼかし量
glow_filter.blurY = 10; // 垂直方向ぼかし量
glow_filter.strength = 1; // インプリントやスプレッドの長さ
glow_filter.quality = BitmapFilterQuality.LOW; // フィルタを適用する回数
glow_filter.inner = false; // 内部グローを使用するか?
glow_filter.knockout = false; // ノックアウト効果の有無
// ------------------------------------------------------------
// スプライトにフィルタを適用する
// ------------------------------------------------------------
sprite.filters = [glow_filter];
グラデーショングローフィルタについて
■グラデーショングローフィルタについて
グラデーショングローフィルタは、グロー(光彩)のグラデーション版です。
グラデーション(0 ~ 255)を指定して、輝きを表現する事ができます。
グラデーションの前半(0 ~ 128)は、外部グロー側に相当します。
グラデーションの後半(129 ~ 255)は、内部グロー側に相当します。
グラデーションの 0 は、光彩より外側(透過)の単一カラーに割り当てられます。
グラデーションの 255 は、グラフィック本体の単一カラーに割り当てられます。
通常の場合、これらの透明度は、0 にするといいでしょう。
グラデーションの一例 |
■グラデーショングローフィルタオブジェクトを作成する
new GradientGlowFilter ( distance , angle , colors , alphas , ratios , blurX , blurY , strength , quality , type , knockout ) :GradientGlowFilter
第01引数(略可) | Number | distance プロパティと同等。 |
第02引数(略可) | Number | angle プロパティと同等。 |
第03引数(略可) | Array | colors プロパティと同等。 |
第04引数(略可) | Array | alphas プロパティと同等。 |
第05引数(略可) | Array | ratios プロパティと同等。 |
第06引数(略可) | Number | blurX プロパティと同等。 |
第07引数(略可) | Number | blurY プロパティと同等。 |
第08引数(略可) | Number | strength プロパティと同等。 |
第09引数(略可) | int | quality プロパティと同等。 |
第10引数(略可) | Boolean | type プロパティと同等。 |
第11引数(略可) | String | knockout プロパティと同等。 |
戻り値 | GradientGlowFilter | GradientGlowFilter オブジェクトが得られる |
■作成例
GradientGlowFilter オブジェクトを作成する
import flash.filters.GradientGlowFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.BitmapFilterType;
// ------------------------------------------------------------
// グラデーション情報
// ------------------------------------------------------------
var colors:Array = [ 0x0000FF, 0x00FF00, 0xFF0000 ];
var alphas:Array = [ 0.0, 1.0, 0.0 ];
var ratios:Array = [ 0, 128, 255 ];
// ------------------------------------------------------------
// GradientGlowFilter オブジェクトを作成する
// ------------------------------------------------------------
var gradient_glow_filter:GradientGlowFilter = new GradientGlowFilter(
0, // オフセットの距離
0, // 角度
colors, // グラデーションのカラー
alphas, // グラデーションの透明度
ratios, // グラデーションの配分
4, // 水平方向ぼかし量
4, // 垂直方向ぼかし量
1.0, // インプリントやスプレッドの長さ
BitmapFilterQuality.LOW, // フィルタを適用する回数
BitmapFilterType.INNER, // グローの種類
false // ノックアウト効果の有無
);
■グラデーショングローフィルタのプロパティ一覧
GradientGlowFilter クラスには、以下のプロパティがあります。
プロパティ名 | 型 | 効果 |
distance | Number | オフセットの距離。 デフォルトは 4 |
angle | Number | 角度を指定。(0~360 単位:度) デフォルトは 45.0 |
colors | Array | グラデーションの RGB カラー (0xFFFFFF) を、配列に格納して指定。 radios プロパティの要素数分だけ用意する。 |
alphas | Array | グラデーションの透明度 (0.0 ~ 1.0) を、配列に格納して指定。 radios プロパティの要素数分だけ用意する。 |
ratios | Array | グラデーションの配分 (0 ~ 255) を、配列に格納して指定。 |
blurX | Number | 水平方向ぼかし量を指定。(0~255 単位:ピクセル) デフォルトは 4 |
blurY | Number | 垂直方向ぼかし量を指定。(0~255 単位:ピクセル) デフォルトは 4 |
strength | Number | インプリントやスプレッドの長さ。(0 ~ 255) デフォルトは 1 |
quality | int | フィルタを適用する回数(1~15) デフォルトは 1 |
type | String | グローの種類。BitmapFilterType.* 定数を指定。 |
knockout | Boolean | ノックアウト効果の有無 デフォルトは false |
■オフセット(distance + angle プロパティ)
distance と angle プロパティを組み合わせて使用します。
グローエフェクト全体の位置をずらす事ができます。
通常は、0 を指定する事になります。
■グラデーションの配分(ratios プロパティ)
グラデーションの配分(配置)を 0 ~ 255 の数値で指定します。
配列に格納して指定します。
colors、alphas、ratios 配列の要素数は、一致している必要があります。
グラデーションの前半(0 ~ 128)は、内部グロー側に相当します。
グラデーションの後半(129 ~ 255)は、外部グロー側に相当します。
通常の場合、0 と 255 の透明度は、0.0 を指定します。
内部グローを再現するグラデーションの例
var color:uint = 0xFF0000; // カラー
var alpha:Number = 1.0; // 透明度
// グラデーション情報
var colors:Array = [ color , color ];
var alphas:Array = [ alpha , 0.0 ];
var ratios:Array = [ 0 , 255 ];
外部グローを再現するグラデーションの例
var color:uint = 0xFF0000; // カラー
var alpha:Number = 1.0; // 透明度
// グラデーション情報
var colors:Array = [ color , color ];
var alphas:Array = [ 0.0 , alpha ];
var ratios:Array = [ 0 , 255 ];
■ぼかし量(blurX と blurY プロパティ)
水平方向と垂直方向のぼかし量です。
2 のべき乗(2, 4, 8, 16, 32, 64, 128, 256)を指定すると、通常より 20 ~ 30 % ほど高速で動作します。
■インプリントやスプレッドの長さ (strength プロパティ)
値が大きいほど、グローと背景とのコントラストが強くなります。
■フィルタを適用する回数 (quality プロパティ)
フィルタの品質です。フィルタの適用回数を意味します。
値が大きいほどレンダリング処理が重くなり、より高品質となります。
この設定をできるだけ低くして調整すると、処理を軽く抑える事ができます。
BitmapFilterQuality.* 定数を使用する事もできます。
定数 | 値 | 効果 |
BitmapFilterQuality.LOW | 1 | 低品質な結果が得られる |
BitmapFilterQuality.MEDIUM | 2 | 中品質な結果が得られる |
BitmapFilterQuality.HIGH | 3 | 高品質な結果が得られる |
■グローの種類 (type プロパティ)
グローの種類の一覧です。
デフォルト値は、BitmapFilterType.INNER です。
定数 | 文字列 | 効果 |
BitmapFilterType.INNER | "inner" | 内側にのみ適用する |
BitmapFilterType.OUTER | "outer" | 外側にのみ適用する |
BitmapFilterType.FULL | "full" | 内側と外側の両方に適用する |
INNER | OUTER | FULL |
■ノックアウト効果の有無 (knockout プロパティ)
ノックアウト効果を使用すると、表示オブジェクトを消してフィルタの結果だけを表示することができます。
なし | あり |
■グラデーショングローフィルタを表示オブジェクトに適用する
■使用例
スプライトに GradientGlowFilter オブジェクトを適用する
import flash.display.Sprite;
import flash.display.Graphics;
import flash.filters.GradientGlowFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.BitmapFilterType;
// ------------------------------------------------------------
// スプライトを作成
// ------------------------------------------------------------
var sprite:Sprite = new Sprite();
// ステージに配置
stage.addChild(sprite);
// 矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill (0x808080, 1.0);
g.drawRect (-50,-50,100,100);
// 位置を設定
sprite.x = 100;
sprite.y = 100;
// ------------------------------------------------------------
// GradientGlowFilter オブジェクトを作成する
// ------------------------------------------------------------
var gradient_glow_filter:GradientGlowFilter = new GradientGlowFilter();
// ------------------------------------------------------------
// グラデーション情報
// ------------------------------------------------------------
var colors:Array = [ 0x0000FF, 0x0000FF, 0xFF0000, 0xFF0000 ];
var alphas:Array = [ 0.0, 1.0, 1.0, 0.0 ];
var ratios:Array = [ 0, 128, 129, 255 ];
// ------------------------------------------------------------
// プロパティを設定する
// ------------------------------------------------------------
gradient_glow_filter.distance = 0; // オフセットの距離
gradient_glow_filter.angle = 0; // 角度
gradient_glow_filter.colors = colors; // グラデーションのカラー
gradient_glow_filter.alphas = alphas; // グラデーションの透明度
gradient_glow_filter.ratios = ratios; // グラデーションの配分
gradient_glow_filter.blurX = 32; // 水平方向ぼかし量
gradient_glow_filter.blurY = 32; // 垂直方向ぼかし量
gradient_glow_filter.strength = 1; // インプリントやスプレッドの長さ
gradient_glow_filter.quality = BitmapFilterQuality.LOW; // フィルタを適用する回数
gradient_glow_filter.type = BitmapFilterType.FULL; // グローの種類
gradient_glow_filter.knockout = false; // ノックアウト効果の有無
// ------------------------------------------------------------
// スプライトにフィルタを適用する
// ------------------------------------------------------------
sprite.filters = [gradient_glow_filter];
ドロップシャドウフィルタについて
■ドロップシャドウフィルタについて
ドロップシャドウフィルタを使用すると、影を表現する事ができます。
内部ドロップシャドウ | 外部ドロップシャドウ |
■ドロップシャドウフィルタオブジェクトを作成する
new DropShadowFilter ( distance , angle , color , alpha , blurX , blurY , strength , quality , inner , knockout , hideObject ) :DropShadowFilter
第01引数(略可) | Number | distance プロパティと同等。 |
第02引数(略可) | Number | angle プロパティと同等。 |
第03引数(略可) | uint | color プロパティと同等。 |
第04引数(略可) | Number | alpha プロパティと同等。 |
第05引数(略可) | Number | blurX プロパティと同等。 |
第06引数(略可) | Number | blurY プロパティと同等。 |
第07引数(略可) | Number | strength プロパティと同等。 |
第08引数(略可) | int | quality プロパティと同等。 |
第09引数(略可) | Boolean | inner プロパティと同等。 |
第10引数(略可) | Boolean | knockout プロパティと同等。 |
第11引数(略可) | Boolean | hideObject プロパティと同等。 |
戻り値 | DropShadowFilter | DropShadowFilter オブジェクトが得られる |
■作成例
DropShadowFilter オブジェクトを作成する
import flash.filters.DropShadowFilter;
import flash.filters.BitmapFilterQuality;
// ------------------------------------------------------------
// DropShadowFilter オブジェクトを作成する
// ------------------------------------------------------------
var drop_shadow_filter:DropShadowFilter = new DropShadowFilter(
4, // オフセットの距離
45, // 角度
0x000000, // カラー
1.0, // 透明度
4, // 水平方向ぼかし量
4, // 垂直方向ぼかし量
1.0, // インプリントやスプレッドの長さ
BitmapFilterQuality.LOW, // フィルタを適用する回数
false, // 内部ドロップシャドウを使用するか?
false, // ノックアウト効果の有無
false // オブジェクトを描画しないか?
);
■ドロップシャドウフィルタのプロパティ一覧
DropShadowFilter クラスには、以下のプロパティがあります。
プロパティ名 | 型 | 効果 |
distance | Number | オフセットの距離。 デフォルトは 4 |
angle | Number | 角度を指定。(0~360 単位:度) デフォルトは 45.0 |
color | uint | カラーを指定。(RGB 形式) デフォルトは 0xFF0000 |
alpha | Number | カラーの透明度を指定。(0.0~1.0) デフォルトは 1.0 |
blurX | Number | 水平方向ぼかし量を指定。(0~255 単位:ピクセル) デフォルトは 4 |
blurY | Number | 垂直方向ぼかし量を指定。(0~255 単位:ピクセル) デフォルトは 4 |
strength | Number | インプリントやスプレッドの長さ。(0 ~ 255) デフォルトは 1 |
quality | int | フィルタを適用する回数(1~15) デフォルトは 1 |
inner | Boolean | 内部ドロップシャドウなら true、外部ドロップシャドウなら false を指定。 デフォルトは false |
knockout | Boolean | ノックアウト効果の有無 デフォルトは false |
hideObject | Boolean | オブジェクトを非表示にするなら true を指定。 デフォルトは false |
■ぼかし量(blurX と blurY プロパティ)
水平方向と垂直方向のぼかし量です。
2 のべき乗(2, 4, 8, 16, 32, 64, 128, 256)を指定すると、通常より 20 ~ 30 % ほど高速で動作します。
■インプリントやスプレッドの長さ (strength プロパティ)
値が大きいほど、ドロップシャドウと背景とのコントラストが強くなります。
■フィルタを適用する回数 (quality プロパティ)
フィルタの品質です。フィルタの適用回数を意味します。
値が大きいほどレンダリング処理が重くなり、より高品質となります。
この設定をできるだけ低くして調整すると、処理を軽く抑える事ができます。
BitmapFilterQuality.* 定数を使用する事もできます。
定数 | 値 | 効果 |
BitmapFilterQuality.LOW | 1 | 低品質な結果が得られる |
BitmapFilterQuality.MEDIUM | 2 | 中品質な結果が得られる |
BitmapFilterQuality.HIGH | 3 | 高品質な結果が得られる |
■ドロップシャドウの種類 (inner プロパティ)
ドロップシャドウの種類の一覧です。
値 | 効果 |
true | 内側ドロップシャドウを使用する |
false | 外側ドロップシャドウを使用する |
内部ドロップシャドウ | 外部ドロップシャドウ |
■ノックアウト効果の有無 (knockout プロパティ)
ノックアウト効果を使用すると、表示オブジェクトを消してフィルタの結果だけを表示することができます。
なし | あり |
■オブジェクトの非描画 (hideObject プロパティ)
オブジェクトを描画しない場合、true を指定します。
外部シャドウ利用時に、特に効果があるようです。
なし | あり |
■ドロップシャドウフィルタを表示オブジェクトに適用する
■使用例
スプライトに DropShadowFilter オブジェクトを適用する
import flash.display.Sprite;
import flash.display.Graphics;
import flash.filters.DropShadowFilter;
import flash.filters.BitmapFilterQuality;
// ------------------------------------------------------------
// スプライトを作成
// ------------------------------------------------------------
var sprite:Sprite = new Sprite();
// ステージに配置
stage.addChild(sprite);
// 矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill (0xFF4444, 1.0);
g.drawRect (-50,-50,100,100);
// 位置を設定
sprite.x = 100;
sprite.y = 100;
// ------------------------------------------------------------
// DropShadowFilter オブジェクトを作成する
// ------------------------------------------------------------
var drop_shadow_filter:DropShadowFilter = new DropShadowFilter();
// ------------------------------------------------------------
// プロパティを設定する
// ------------------------------------------------------------
drop_shadow_filter.distance = 10; // オフセットの距離
drop_shadow_filter.angle = 45; // 角度
drop_shadow_filter.color = 0x000000; // カラー
drop_shadow_filter.alpha = 0.65; // 透明度
drop_shadow_filter.blurX = 5; // 水平方向ぼかし量
drop_shadow_filter.blurY = 5; // 垂直方向ぼかし量
drop_shadow_filter.strength = 1; // インプリントやスプレッドの長さ
drop_shadow_filter.quality = BitmapFilterQuality.LOW; // フィルタを適用する回数
drop_shadow_filter.inner = false; // 内部ドロップシャドウを使用するか?
drop_shadow_filter.knockout = false; // ノックアウト効果の有無
drop_shadow_filter.hideObject = false; // オブジェクトを描画しないか?
// ------------------------------------------------------------
// スプライトにフィルタを適用する
// ------------------------------------------------------------
sprite.filters = [drop_shadow_filter];
カラーマトリックスフィルタについて
■カラーマトリックスフィルタについて
カラーマトリックスフィルタを使用すると、色の変換が可能です。
赤、緑、青、透過カラーを、チャンネルごとにブレンドする事ができます。
■カラーマトリックスフィルタの仕様について
4行5列のマトリックスデータが必要になります。
2次元配列ではなく、1次元配列で表現します。
■1次元配列の並び方
1次元配列の並び方
0 1 2 3 4
5 6 7 8 9
10 11 12 13 14
15 16 17 18 19
■変換式
1つのピクセルごとに、以下の演算が行われ、新しい色が出力されます。
すべてのピクセルに対して、同様の演算が行われます。
カラーマトリックスフィルタの変換式
新しい赤色 = 現在の赤色 * [ 0] + 現在の緑色 * [ 1] + 現在の青色 * [ 2] + 現在の透過 * [ 3] + [ 4];
新しい緑色 = 現在の赤色 * [ 5] + 現在の緑色 * [ 6] + 現在の青色 * [ 7] + 現在の透過 * [ 8] + [ 9];
新しい青色 = 現在の赤色 * [10] + 現在の緑色 * [11] + 現在の青色 * [12] + 現在の透過 * [13] + [14];
新しい透過 = 現在の赤色 * [15] + 現在の緑色 * [16] + 現在の青色 * [17] + 現在の透過 * [18] + [19];
■番地の特徴
4 , 9 , 14 , 19 番地は、加算成分となります。
黒方向、白方向どちらにでも移動できます。
しかし、0 ~ 255 の範囲を超えてしまうと、白飛びや黒つぶれが発生します。
それ以外の番地は、乗算成分となります。
0.0 ~ 1.0 の値を掛けて、黒に近づけるのに最適です。
1.0 より大きい値を掛けて、白方向に近づけるのは、極めて難しいでしょう。
■正規行列
変化しない初期値は、以下の通りです。
カラーマトリックスの正規行列
// カラーマトリックス
var color_matrix:Array = [
1.0, 0.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 0.0, 1.0, 0.0
];
■色の入れ替える
青を赤、赤を緑、緑を青に変換する例です。
青を赤、赤を緑、緑を青に変換するカラーマトリックス
// カラーマトリックス
var color_matrix:Array = [
0.0, 0.0, 1.0, 0.0, 0.0,
1.0, 0.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 1.0, 0.0
];
■カラーマトリックスフィルタオブジェクトを作成する
new 演算子を使って、ColorMatrixFilter クラスをインスタンス化します。
new ColorMatrixFilter ( matrix ) :ColorMatrixFilter
第01引数(略可) | Array | カラー行列を設定する。matrix プロパティと同等。 |
戻り値 | ColorMatrixFilter | ColorMatrixFilter オブジェクトが得られる |
■カラーマトリックスフィルタのプロパティ一覧
ColorMatrixFilter クラスには、以下のプロパティがあります。
プロパティ名 | 型 | 効果 |
matrix | Array | カラー行列を設定する |
■カラー行列(matrix プロパティ)
カラーマトリックスの仕様については、こちらで解説しています。
■カラーマトリックスフィルタを表示オブジェクトに適用する
■使用例
スプライトに ColorMatrixFilter オブジェクトを適用する
import flash.display.Sprite;
import flash.display.Graphics;
import flash.filters.ColorMatrixFilter;
// ------------------------------------------------------------
// スプライトを作成
// ------------------------------------------------------------
var sprite:Sprite = new Sprite();
// ステージに配置
stage.addChild(sprite);
// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (5, 0xAA0000, 1.0);
g.beginFill (0xFF8844, 1.0);
g.drawRect (-50,-50,100,100);
// 位置を設定
sprite.x = 100;
sprite.y = 100;
// ------------------------------------------------------------
// カラーマトリックス(モノクロ)
// ------------------------------------------------------------
var color_matrix:Array = [
1/3, 1/3, 1/3, 0.0, 0.0,
1/3, 1/3, 1/3, 0.0, 0.0,
1/3, 1/3, 1/3, 0.0, 0.0,
0.0, 0.0, 0.0, 1.0, 0.0
];
// ------------------------------------------------------------
// ColorMatrixFilter オブジェクトを作成する
// ------------------------------------------------------------
var color_matrix_filter:ColorMatrixFilter = new ColorMatrixFilter(color_matrix);
// ------------------------------------------------------------
// スプライトにフィルタを適用する
// ------------------------------------------------------------
sprite.filters = [color_matrix_filter];
■カラーマトリックスのサンプル
■モノクロ変換
モノクロ用カラーマトリックスフィルタを作成
import flash.filters.ColorMatrixFilter;
// ------------------------------------------------------------
// カラーマトリックスを作成
// ------------------------------------------------------------
var color_matrix:Array = [
1/3, 1/3, 1/3, 0.0, 0.0,
1/3, 1/3, 1/3, 0.0, 0.0,
1/3, 1/3, 1/3, 0.0, 0.0,
0.0, 0.0, 0.0, 1.0, 0.0
];
// ------------------------------------------------------------
// ColorMatrixFilter オブジェクトを作成する
// ------------------------------------------------------------
var color_matrix_filter:ColorMatrixFilter = new ColorMatrixFilter(color_matrix);
■明度変換
明度変換用カラーマトリックスフィルタを作成
import flash.filters.ColorMatrixFilter;
// ------------------------------------------------------------
// ColorMatrixFilter オブジェクトを作成する
// ------------------------------------------------------------
var color_matrix_filter:ColorMatrixFilter = new ColorMatrixFilter();
(function():void{
// ------------------------------------------------------------
// 明度 (-1.0 ~ 1.0)
// ------------------------------------------------------------
var BRIGHTNESS:Number = 1.0;
// ------------------------------------------------------------
// カラー調整の明度を再現
// ------------------------------------------------------------
var a:Number = 100 * BRIGHTNESS;
// ------------------------------------------------------------
// カラーマトリックスを作成
// ------------------------------------------------------------
color_matrix_filter.matrix = [
1, 0, 0, 0, a,
0, 1, 0, 0, a,
0, 0, 1, 0, a,
0, 0, 0, 1, 0
];
})();
■彩度変換
彩度変換用カラーマトリックスフィルタを作成
import flash.filters.ColorMatrixFilter;
// ------------------------------------------------------------
// ColorMatrixFilter オブジェクトを作成する
// ------------------------------------------------------------
var color_matrix_filter:ColorMatrixFilter = new ColorMatrixFilter();
(function():void{
// ------------------------------------------------------------
// 彩度 (-1.0 ~ 1.0)
// ------------------------------------------------------------
var COLORFULNESS:Number = 1.0;
// ------------------------------------------------------------
// カラー調整の彩度を再現
// ------------------------------------------------------------
var a:Number,b:Number,c:Number,f:Number,g:Number,m:Number;
if(COLORFULNESS >= 0){
a = ( 3.0742 - 1.0) * COLORFULNESS + 1.0;
b = (-1.8282 - 0.0) * COLORFULNESS + 0.0;
c = (-0.2460 - 0.0) * COLORFULNESS + 0.0;
f = (-0.9258 - 0.0) * COLORFULNESS + 0.0;
g = ( 2.1718 - 1.0) * COLORFULNESS + 1.0;
m = ( 3.7540 - 1.0) * COLORFULNESS + 1.0;
}else{
a = (1.0 - 0.3086) * COLORFULNESS + 1.0;
b = (0.0 - 0.6094) * COLORFULNESS + 0.0;
c = (0.0 - 0.0820) * COLORFULNESS + 0.0;
f = (0.0 - 0.3086) * COLORFULNESS + 0.0;
g = (1.0 - 0.6094) * COLORFULNESS + 1.0;
m = (1.0 - 0.0820) * COLORFULNESS + 1.0;
}
// ------------------------------------------------------------
// カラーマトリックスを作成
// ------------------------------------------------------------
color_matrix_filter.matrix = [
a, b, c, 0, 0,
f, g, c, 0, 0,
f, b, m, 0, 0,
0, 0, 0, 1, 0
];
})();
コンボリューションフィルタについて
■コンボリューションフィルタについて
スクリプト専用のフィルタです。
コンボリューションフィルタは、フィルタの原始的な仕組みです。
コンボリューションマトリックス(畳み込み行列)と呼ばれるデータを使用します。
周囲のカラーを取得し、合計や平均を計算し、新しい色を決定します。
ぼかしやシャープなど、様々なエフェクト表現が可能です。
■コンボリューションフィルタの仕様について
現在(フィルタ適用直前)のグラフィックを、ソースと呼びます。
■コンボリューションマトリックス(畳み込み行列)について
現在のピクセルから、周囲のカラーの合計や平均値を算出するために使用します。
2次元配列ではなく、1次元配列で表現します。
行数(matrixY)と列数(matrixX)は、任意の数を指定できます。
多ければ多いほど、総演算数が増えます。
1次元配列の並び方の例です。
3行3列のマトリックスの1次元配列の並び方 (matrixY:3,matrixX:3)
0 1 2
3 4 5
6 7 8
4行5列のマトリックスの1次元配列の並び方 (matrixX:5,matrixY:4)
0 1 2 3 4
5 6 7 8 9
10 11 12 13 14
15 16 17 18 19
■5行3列の変換式(奇数行列の場合)
例えば、5行3列の変換式は、以下の通りです。
奇数行列の場合、行列の中央が、自身のピクセルとなります。
5行3列の変換式
新しい色 = (
(相対位置 {-1,-2} の色) * [ 0] + (相対位置 {0,-2} の色) * [ 1] + (相対位置 {+1,-2} の色) * [ 2] +
(相対位置 {-1,-1} の色) * [ 3] + (相対位置 {0,-1} の色) * [ 4] + (相対位置 {+1,-1} の色) * [ 5] +
(相対位置 {-1, 0} の色) * [ 6] + (相対位置 {0, 0} の色) * [ 7] + (相対位置 {+1, 0} の色) * [ 8] +
(相対位置 {-1,+1} の色) * [ 9] + (相対位置 {0,+1} の色) * [10] + (相対位置 {+1,+1} の色) * [11] +
(相対位置 {-1,+2} の色) * [12] + (相対位置 {0,+2} の色) * [13] + (相対位置 {+1,+2} の色) * [14]
) / divisor + bias;
■6行4列の変換式(偶数行列の場合)
例えば、6行4列の変換式は、以下の通りです。
偶数行列の場合、行数と列数を2で割った番地が、自身のピクセルとなります。
偶数行列は、中心位置がずれるため、通常は使用しません。
6行4列の変換式
新しい色 = (
(相対位置 {-2,-3} の色) * [ 0] + (相対位置 {-1,-3} の色) * [ 1] + (相対位置 {0,-3} の色) * [ 2] + (相対位置 {+1,-3} の色) * [ 3] +
(相対位置 {-2,-2} の色) * [ 4] + (相対位置 {-1,-2} の色) * [ 5] + (相対位置 {0,-2} の色) * [ 6] + (相対位置 {+1,-2} の色) * [ 7] +
(相対位置 {-2,-1} の色) * [ 8] + (相対位置 {-1,-1} の色) * [ 9] + (相対位置 {0,-1} の色) * [10] + (相対位置 {+1,-1} の色) * [11] +
(相対位置 {-2, 0} の色) * [12] + (相対位置 {-1, 0} の色) * [13] + (相対位置 {0, 0} の色) * [14] + (相対位置 {+1, 0} の色) * [15] +
(相対位置 {-2,+1} の色) * [16] + (相対位置 {-1,+1} の色) * [17] + (相対位置 {0,+1} の色) * [18] + (相対位置 {+1,+1} の色) * [19] +
(相対位置 {-2,+2} の色) * [20] + (相対位置 {-1,+2} の色) * [21] + (相対位置 {0,+2} の色) * [22] + (相対位置 {+1,+2} の色) * [13]
) / divisor + bias;
■行列の調整の目安について
通常の場合、「行列の合計値」を除算した結果が、1.0 となるように調整します。
結果が 0.0 となるように調整すると、輪郭線の抽出などの表現が可能です。
■コンボリューションフィルタオブジェクトを作成する
new ConvolutionFilter ( matrixX , matrixY , matrix , divisor , bias , preserveAlpha , clamp , color , alpha ) :ConvolutionFilter
第01引数(略可) | Number | matrixX プロパティと同等。 |
第02引数(略可) | Number | matrixY プロパティと同等。 |
第03引数(略可) | Array | matrix プロパティと同等。 |
第04引数(略可) | Number | divisor プロパティと同等。 |
第05引数(略可) | Number | bias プロパティと同等。 |
第06引数(略可) | Boolean | preserveAlpha プロパティと同等。 |
第07引数(略可) | Boolean | clamp プロパティと同等。 |
第08引数(略可) | uint | color プロパティと同等。 |
第09引数(略可) | Number | alpha プロパティと同等。 |
戻り値 | ConvolutionFilter | ConvolutionFilter オブジェクトが得られる |
■コンボリューションフィルタのプロパティ一覧
ConvolutionFilter クラスには、以下のプロパティがあります。
プロパティ名 | 型 | 効果 |
matrixX | Number | 畳み込み行列の列数を設定する |
matrixY | Number | 畳み込み行列の行数を設定する |
matrix | Array | 畳み込み行列を設定する |
divisor | Number | 畳み込み演算に作用する除算成分 |
bias | Number | 畳み込み演算に作用する加算成分 |
preserveAlpha | Boolean | 透過チャンネルも畳み込み演算対象に含める場合 true を指定。デフォルトは true。 |
clamp | Boolean | ソース範囲外の、色の取得方法を設定する。 true の場合、ソースの外周1ドットを引き伸ばした結果を得る。 false の場合、color と alpha プロパティで指定した色を得る。 デフォルトは true。 |
color | uint | ソース範囲外の、RGB カラー (0xFFFFFF) を指定。 |
alpha | Number | ソース範囲外の、透明度 (0.0~1.0) を指定。 |
■畳み込み行列(matrix プロパティ)
コンボリューションフィルタの仕様については、こちらで解説しています。
matrixX プロパティから、列数を指定します。
matrixY プロパティから、行数を指定します。
もし、畳み込み行列の要素数が足りなかった場合、0.0 として解釈されます。
■変換成分(divisor と bias プロパティ)
変換式については、こちらで解説しています。
divisor プロパティは、除算成分となります。
bias プロパティは、加算成分となります。
■ソース範囲外の色参照方法(clamp プロパティ)
ソース範囲外の、色の取得方法を指定します。
以下の真偽値を指定します。デフォルトは、true です。
真偽値 | 効果 |
true | マップの外周1ドットの結果を引き伸ばした結果と同等です。 |
false | 特定の色が得られます。別途 color と alpha プロパティを設定します。 |
■ソース範囲外のカラー(color と alpha プロパティ)
ソースの範囲外となる部分の色を指定します。
clamp プロパティに、false を指定した場合に効果があります。
■コンボリューションフィルタを表示オブジェクトに適用する
■使用例
スプライトに ConvolutionFilter オブジェクトを適用する
import flash.display.Sprite;
import flash.display.Graphics;
import flash.filters.ConvolutionFilter;
// ------------------------------------------------------------
// スプライトを作成
// ------------------------------------------------------------
var sprite:Sprite = new Sprite();
// ステージに配置
stage.addChild(sprite);
// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (0, 0xAA0000, 1.0);
g.beginFill (0xFF6666, 1.0);
g.drawRect (-50,-50,100,100);
g.beginFill (0xFF8844, 100);
g.moveTo ( -40 , 0 );
g.lineTo ( 0 , 40 );
g.lineTo ( 40 , 0 );
g.lineTo ( 0 , -40 );
g.endFill();
// 位置を設定
sprite.x = 100;
sprite.y = 100;
// ------------------------------------------------------------
// 畳み込み行列(簡易ぼかし)
// ------------------------------------------------------------
var convolution_matrix:Array = [
0, 1, 0,
1, 1, 1,
0, 1, 0
];
// ------------------------------------------------------------
// ConvolutionFilter オブジェクトを作成する
// ------------------------------------------------------------
var convolution_filter:ConvolutionFilter = new ConvolutionFilter();
// ------------------------------------------------------------
// プロパティを設定する
// ------------------------------------------------------------
convolution_filter.matrixX = 3; // 畳み込み行列の列数
convolution_filter.matrixY = 3; // 畳み込み行列の行数
convolution_filter.matrix = convolution_matrix; // 畳み込み行列
convolution_filter.divisor = 5; // 畳み込み演算に作用する除算成分
convolution_filter.bias = 0; // 畳み込み演算に作用する加算成分
convolution_filter.preserveAlpha = true; // 透過チャンネルも畳み込み演算対象に含める
convolution_filter.clamp = true; // ソース範囲外の色の取得方法
convolution_filter.color = 0xFF0000; // ソース範囲外のカラー
convolution_filter.alpha = 1.0; // ソース範囲外の透明度
// ------------------------------------------------------------
// スプライトにフィルタを適用する
// ------------------------------------------------------------
sprite.filters = [convolution_filter];
■コンボリューションのサンプル
■弱ぼかし
弱ぼかし用のコンボリューションフィルタを作成
import flash.filters.ConvolutionFilter;
// ------------------------------------------------------------
// 畳み込み行列(弱ぼかし)
// ------------------------------------------------------------
var convolution_matrix:Array = [
0.05090, 0.12381, 0.05090,
0.12381, 0.30116, 0.12381,
0.05090, 0.12381, 0.05090
];
// ------------------------------------------------------------
// ConvolutionFilter オブジェクトを作成する
// ------------------------------------------------------------
var convolution_filter:ConvolutionFilter = new ConvolutionFilter(
3, // 畳み込み行列の列数
3, // 畳み込み行列の行数
convolution_matrix, // 畳み込み行列
1, // 畳み込み演算に作用する除算成分
0 // 畳み込み演算に作用する加算成分
);
■ガウスぼかし
ガウスぼかし用のコンボリューションフィルタを作成
import flash.filters.ConvolutionFilter;
// ------------------------------------------------------------
// ConvolutionFilter オブジェクトを作成する
// ------------------------------------------------------------
var convolution_filter:ConvolutionFilter = new ConvolutionFilter();
(function():void{
// ------------------------------------------------------------
// ガウスぼかし用の設定
// ------------------------------------------------------------
var BLUR_RADIUS:Number = 2.0; // ガウス半径
var BLUR_QUALITY:Number = 1; // 品質 (0 ~ )
var BLUR_SIGMA:Number = 0.8; // シグマ値
// ------------------------------------------------------------
// 畳み込み行列(ガウスぼかし)
// ------------------------------------------------------------
var size:Number = (Math.floor(BLUR_RADIUS) + BLUR_QUALITY) * 2 + 1;
var matrix:Array = new Array();
var divisor:Number = 0.0;
var i:Number,j:Number;
var cx:Number = size * 0.5 - 0.5;
var cy:Number = size * 0.5 - 0.5;
var vx:Number,vy:Number;
var v:Number;
for(j=0;j < size;j++){
vy = j - cy;
for(i=0;i < size;i++){
vx = i - cx;
v = Math.sqrt(vx * vx + vy * vy) / BLUR_RADIUS;
v = (1 / Math.sqrt(2 * Math.PI * BLUR_SIGMA)) * Math.exp(-(v * v / (2 * BLUR_SIGMA * BLUR_SIGMA)));
matrix[size * j + i] = v;
divisor += v;
}
}
// ------------------------------------------------------------
// プロパティを設定する
// ------------------------------------------------------------
convolution_filter.matrixX = size; // 畳み込み行列の列数
convolution_filter.matrixY = size; // 畳み込み行列の行数
convolution_filter.matrix = matrix; // 畳み込み行列
convolution_filter.divisor = divisor; // 畳み込み演算に作用する除算成分
convolution_filter.bias = 0; // 畳み込み演算に作用する加算成分
})();
■シャープ
シャープ用のコンボリューションフィルタを作成
import flash.filters.ConvolutionFilter;
// ------------------------------------------------------------
// ConvolutionFilter オブジェクトを作成する
// ------------------------------------------------------------
var convolution_filter:ConvolutionFilter = new ConvolutionFilter();
(function():void{
// ------------------------------------------------------------
// シャープ強度(0.0 ~ 1.0)
// ------------------------------------------------------------
var SHARPNESS:Number = 0.75;
// ------------------------------------------------------------
// 畳み込み行列(シャープ)
// ------------------------------------------------------------
var b:Number = -1.0 * SHARPNESS;
var e:Number = 4;
var divisor:Number = b * 4 + e;
var matrix:Array = [
0, b, 0,
b, e, b,
0, b, 0
];
// ------------------------------------------------------------
// プロパティを設定する
// ------------------------------------------------------------
convolution_filter.matrixX = 3; // 畳み込み行列の列数
convolution_filter.matrixY = 3; // 畳み込み行列の行数
convolution_filter.matrix = matrix; // 畳み込み行列
convolution_filter.divisor = divisor; // 畳み込み演算に作用する除算成分
convolution_filter.bias = 0; // 畳み込み演算に作用する加算成分
})();
■エンボス
エンボス用のコンボリューションフィルタを作成
import flash.filters.ConvolutionFilter;
// ------------------------------------------------------------
// ConvolutionFilter オブジェクトを作成する
// ------------------------------------------------------------
var convolution_filter:ConvolutionFilter = new ConvolutionFilter();
(function():void{
// ------------------------------------------------------------
// エンボス強度(0.0 ~ 1.0)
// ------------------------------------------------------------
var EMBOSS:Number = 0.75;
// ------------------------------------------------------------
// 畳み込み行列(エンボス)
// ------------------------------------------------------------
var a:Number = 2.0 * EMBOSS;
var b:Number = 1.0 * EMBOSS;
var e:Number = 1.0 - EMBOSS;
var divisor:Number = e;
var matrix:Array = [
a, b, 0,
b, e, -b,
0, -b, -a
];
// ------------------------------------------------------------
// プロパティを設定する
// ------------------------------------------------------------
convolution_filter.matrixX = 3; // 畳み込み行列の列数
convolution_filter.matrixY = 3; // 畳み込み行列の行数
convolution_filter.matrix = matrix; // 畳み込み行列
convolution_filter.divisor = divisor; // 畳み込み演算に作用する除算成分
convolution_filter.bias = 0; // 畳み込み演算に作用する加算成分
})();
ディスプレイスメントマップフィルタについて
■ディスプレイスメントマップフィルタについて
スクリプト専用のフィルタです。
マップと呼ばれる、ビットマップデータが必要になります。
マップの色は、256 段階のオフセット情報として機能します。
オフセット情報を参考に、自身の周囲から得られたピクセルカラーを表示します。
魚眼やモザイクなどの表現が可能です。
■ディスプレイスメントマップフィルタの仕様について
オフセット情報が書き込まれたビットマップを、マップと呼びます。
現在(フィルタ適用直前)のグラフィックを、ソースと呼びます。
■マップ用ビットマップについて
赤、緑、青、透過チャンネルのどれかを、x軸、y軸に割り当てる事ができます。
ここでは、『赤チャンネルを x 軸』『青チャンネルを y 軸』とします。
各カラーチャンネルごとに、256 段階の表現が可能です。 (-128 ~ 127)
128 は、原点に相当します。何も変化しません。
0 (-128) から 127 (-1) までは、負の方向の相対位置を意味します。
129 (+1) から 255 (+127) までは、正の方向の相対位置を意味します。
■マップとソースの関係
まず、スクリーン上の「任意のピクセル位置」と重なる、「マップのピクセルカラー」を参照します。
「マップのピクセルカラー」には、相対位置情報が記録されています。
次に、「任意のピクセル位置」から相対位置にある、「ソースのピクセルカラー」を参照します。
この色が「任意のピクセル位置」の最終的なカラーとして採用されます。
■変化しないマップの例
例えば、以下のマップ画像の色は、128 なので、何も変化しません。
ソース | マップ | 完成 |
■変化するマップの例
例えば、以下のマップ画像の明るい部分の色は、178 (128 + 50) カラーとなります。
x 方向に +50 進めた位置にあるソースが採用されます。
マップ画像の暗い部分の色は、28 (128 - 100) カラーとなります。
x 方向に -100 進めた位置にあるソースが採用されます。
ソース | マップ | 完成 |
■変換式
1つのピクセルごとに、以下の演算が行われ、ソースの座標が得られます。
すべてのピクセルに対して、同様の演算が行われます。
相対座標が小数値を含む場合、バイリニア補間された高品質な結果を得る事ができます。
ディスプレイスメントマップフィルタの変換式(カラーチャンネルは自由に割り当てが可能)
(相対 x 座標) = (マップの赤色 - 128) * sacleX / 256.0;
(相対 y 座標) = (マップの青色 - 128) * sacleY / 256.0;
■品質について
表現できる範囲が、256 段階しかない事に注意してください。
プロパティを変更して、参照範囲を -128 ~ 127 ドットより広く捕捉する事は可能です。
しかし 256 段階という品質は変わりません。
高品質な結果を得たい場合、scaleX、scaleY プロパティを小さく設定します。
例えば、256 は、スタンダードな値です。
この場合、マップの相対位置は、-128 ~ 127 の範囲までアクセスできます。
小数部の情報はなく、ザラザラした低品質な結果が得られます。
例えば、64 は、高品質となる値です。
この場合、マップの相対位置は、-32 ~ 31.75 の範囲までしかアクセスできなくなります。
そのかわり、小数部は 4 段階 (0.0 , 0.25 , 0.5 , 0.75) の精度となり、滑らかな結果が得られます。
■表示オブジェクト拡大縮小時の注意点
表示オブジェクトを拡大縮小しても、マップの範囲は等倍のままとなります。
フィルタは、基本的にスクリーン座標系に作用するからです。
ただし、Flash Player を拡大表示した場合は、マップの範囲も追従して拡大縮小します。
■リソース埋め込み時の注意点
マップ用のビットマップを SWF ファイルに埋め込む場合、必ず『ロスレス圧縮(PNG/GIF)』を選択します。
『Jpeg 圧縮』を選択した場合、破壊圧縮により、オフセット情報が壊れます。
■ディスプレイスメントマップフィルタオブジェクトを作成する
new 演算子を使って、DisplacementMapFilter クラスをインスタンス化します。
引数の詳細については、プロパティ一覧で解説しています。
new DisplacementMapFilter ( mapBitmap , mapPoint , componentX , componentY , scaleX , scaleY , mode , color , alpha ) :DisplacementMapFilter
第01引数(略可) | BitmapData | mapBitmap プロパティと同等。 |
第02引数(略可) | Point | mapPoint プロパティと同等。 |
第03引数(略可) | uint | componentX プロパティと同等。 |
第04引数(略可) | uint | componentY プロパティと同等。 |
第05引数(略可) | Number | scaleX プロパティと同等。 |
第06引数(略可) | Number | scaleY プロパティと同等。 |
第07引数(略可) | String | mode プロパティと同等。 |
第08引数(略可) | uint | color プロパティと同等。 |
第09引数(略可) | Number | alpha プロパティと同等。 |
戻り値 | DisplacementMapFilter | DisplacementMapFilter オブジェクトが得られる |
■ディスプレイスメントマップフィルタのプロパティ一覧
DisplacementMapFilter クラスには、以下のプロパティがあります。
プロパティ名 | 型 | 効果 |
mapBitmap | BitmapData | マップとして使用するビットマップデータを指定。 |
mapPoint | Point | マップの座標を指定。 |
componentX | uint | 水平方向に割り当てるカラーチャンネル。 BitmapDataChannel.* 定数を指定する。 |
componentY | uint | 垂直方向に割り当てるカラーチャンネル。 BitmapDataChannel.* 定数を指定する。 |
scaleX | Number | 水平方向のソース参照拡大率を指定。256 で等倍。デフォルトは 0。 |
scaleY | Number | 垂直方向のソース参照拡大率を指定。256 で等倍。デフォルトは 0。 |
mode | String | マップ範囲外の、描画モード。 DisplacementMapFilterMode.* 定数を指定する。 |
color | uint | マップ範囲外の、RGB カラー (0xFFFFFF) を指定。 |
alpha | Number | マップ範囲外の、透明度 (0.0~1.0) を指定。 |
■マップ用ビットマップ(mapBitmap プロパティ)
■マップの座標(mapPoint プロパティ)
マップの配置位置を指定します。
指定する座標は、スクリーン座標系である事に注意してください。
表示オブジェクトの座標系ではありません。
マップの原点は、描画矩形範囲の左上となります。
マップの基点は、ビットマップの左上です。
座標の調整が難しい場合、DisplayObject.scrollRect プロパティを使って描画矩形範囲を固定すると簡単になるかもしれません。
■カラーチャンネル(componentX と componentY プロパティ)
水平方向と垂直方向に割り当てる、カラーチャンネルを指定します。
以下の定数を指定します。
定数 | 数値 | 効果 |
なし | 0 | マップを無視する。デフォルトの動作。 |
BitmapDataChannel.RED | 1 | 赤チャンネルを参照する |
BitmapDataChannel.GREEN | 2 | 緑チャンネルを参照する |
BitmapDataChannel.BLUE | 4 | 青チャンネルを参照する |
BitmapDataChannel.ALPHA | 8 | 透過チャンネルを参照する |
■ソース参照拡大率(scaleX と scaleY プロパティ)
ソース参照拡大率を指定します。
デフォルト値は 0 ですが、0 では動作しません。
■マップ範囲外の描画モード(mode プロパティ)
マップの範囲外となる部分の描画モードを指定します。
以下の定数を指定します。
定数 | 文字列 | 効果 |
DisplacementMap |
"wrap" | ソースを折り返して参照します。デフォルトの動作。 |
DisplacementMap |
"clamp" | マップの外周1ドットの結果を引き伸ばして描画します。 |
DisplacementMap |
"ignore" | ソース本来の色をそのまま描画します。 |
DisplacementMap |
"color" | 特定の色で塗りつぶします。 別途 color と alpha プロパティを設定します。 |
■マップ範囲外のカラー(color と alpha プロパティ)
マップの範囲外となる部分の色を指定します。
mode プロパティに、DisplacementMapFilterMode.COLOR を指定した場合に効果があります。
■ディスプレイスメントマップフィルタを表示オブジェクトに適用する
■使用例
スプライトに DisplacementMapFilter オブジェクトを適用する
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.filters.DisplacementMapFilter;
import flash.filters.DisplacementMapFilterMode;
import flash.events.Event;
import flash.events.MouseEvent;
// ------------------------------------------------------------
// 親スプライトを作成
// ------------------------------------------------------------
var sprite_parent:Sprite = (function():Sprite{
// ------------------------------------------------------------
// スプライトを作成
// ------------------------------------------------------------
var sprite:Sprite = new Sprite();
// ステージに配置
stage.addChild(sprite);
// ------------------------------------------------------------
// 描画矩形範囲を設定
// ------------------------------------------------------------
sprite.scrollRect = new Rectangle(0,0,stage.stageWidth,stage.stageHeight);
return sprite;
})();
// ------------------------------------------------------------
// 子スプライトを作成
// ------------------------------------------------------------
(function():void{
// ------------------------------------------------------------
// 子スプライトを作成
// ------------------------------------------------------------
var sprite_child:Sprite = new Sprite();
// 親スプライトに配置
sprite_parent.addChild(sprite_child);
// 矩形を描画
var mtx:Matrix = new Matrix(200/1638.4,0,0,1,0,0);
var g:Graphics = sprite_child.graphics;
g.lineStyle (5, 0x505050, 1.0);
g.beginGradientFill ( GradientType.LINEAR , [0xFF8080,0x8080FF] , [1.0,1.0] , [0,255] , mtx);
g.drawRect (-100,-50,200,100);
// 位置を設定
sprite_child.x = 150;
sprite_child.y = 150;
// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
sprite_child.addEventListener(Event.ENTER_FRAME,function(e:Event):void{
// 少しずつ回転
sprite_child.rotation += 1.0;
});
})();
// ------------------------------------------------------------
// マップ用ビットマップデータを作成する
// ------------------------------------------------------------
var red :uint = 0x80 + 8;
var blue:uint = 0x80 + 8;
var map_bmp:BitmapData = new BitmapData( 100 , 100 , false , (red << 16)|(blue << 0) );
// ------------------------------------------------------------
// マップ用座標を作成する
// ------------------------------------------------------------
var map_pos:Point = new Point(0,0);
// ------------------------------------------------------------
// DisplacementMapFilter オブジェクトを作成する
// ------------------------------------------------------------
var displacement_map_filter:DisplacementMapFilter = new DisplacementMapFilter();
// ------------------------------------------------------------
// プロパティを設定する
// ------------------------------------------------------------
displacement_map_filter.mapBitmap = map_bmp; // マップ用ビットマップデータ
displacement_map_filter.mapPoint = map_pos; // マップの座標
displacement_map_filter.componentX = BitmapDataChannel.RED; // 水平方向カラーチャンネル
displacement_map_filter.componentY = BitmapDataChannel.BLUE; // 垂直方向カラーチャンネル
displacement_map_filter.scaleX = 256; // 水平方向のソース参照拡大率
displacement_map_filter.scaleY = 256; // 垂直方向のソース参照拡大率
displacement_map_filter.mode = DisplacementMapFilterMode.IGNORE; // マップ範囲外の描画モード
displacement_map_filter.color = 0xFF0000; // マップ範囲外のカラー
displacement_map_filter.alpha = 1.0; // マップ範囲外の透明度
// ------------------------------------------------------------
// 親スプライトにフィルタを適用する
// ------------------------------------------------------------
sprite_parent.filters = [displacement_map_filter];
// ------------------------------------------------------------
// マウスカーソルを移動するたびに実行されるイベント
// ------------------------------------------------------------
stage.addEventListener(MouseEvent.MOUSE_MOVE,function(e:MouseEvent):void{
// マップ座標を更新(mapPoint プロパティに再セットしないと反映されない)
map_pos.x = e.stageX;
map_pos.y = e.stageY;
displacement_map_filter.mapPoint = map_pos;
// 親スプライトにフィルタを適用する(filters プロパティに再セットしないと反映されない)
sprite_parent.filters = [displacement_map_filter];
});
■ディスプレイスメントマップのサンプル
■モザイクエフェクト
モザイク用マップを作成
import flash.geom.Point;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.filters.DisplacementMapFilter;
// ------------------------------------------------------------
// マップ用ビットマップデータを作成する
// ------------------------------------------------------------
var map_bmp:BitmapData = (function():BitmapData{
// ------------------------------------------------------------
// モザイク用の設定
// ------------------------------------------------------------
var MAP_WIDTH :uint = 256; // マップの幅
var MAP_HEIGHT:uint = 256; // マップの高さ
var MOZAIC_WIDTH :Number = 8; // モザイクの幅(1 ~ 256)
var MOZAIC_HEIGHT:Number = 8; // モザイクの高さ(1 ~ 256)
// ------------------------------------------------------------
// モザイク用マップを作成 (componentX:RED,componentY:BLUE)
// ------------------------------------------------------------
var bmp_data:BitmapData = new BitmapData( MAP_WIDTH , MAP_HEIGHT , false );
var i:int,j:int;
var r:int,b:int;
var gx:Number,gy:Number;
var cx:Number,cy:Number;
for(j=0;j < MAP_HEIGHT;j++){
gy = Math.floor(j / MOZAIC_HEIGHT);
cy = gy * MOZAIC_HEIGHT + (MOZAIC_HEIGHT * 0.5);
b = Math.floor(cy - (j + 0.5) + 0.5) + 0x80;
if(b < 0) b = 0;
if(b > 0xff) b = 0xff;
for(i=0;i < MAP_WIDTH;i++){
gx = Math.floor(i / MOZAIC_WIDTH);
cx = gx * MOZAIC_WIDTH + (MOZAIC_WIDTH * 0.5);
r = Math.floor(cx - (i + 0.5) + 0.5) + 0x80;
if(r < 0) r = 0;
if(r > 0xff) r = 0xff;
bmp_data.setPixel(i,j,(r<<16) | (b<<0))
}
}
return bmp_data;
})();
// ------------------------------------------------------------
// マップ用座標を作成する
// ------------------------------------------------------------
var map_pos:Point = new Point(0,0);
// ------------------------------------------------------------
// DisplacementMapFilter オブジェクトを作成する
// ------------------------------------------------------------
var displacement_map_filter:DisplacementMapFilter = new DisplacementMapFilter(
map_bmp, // マップ用ビットマップデータ
map_pos, // マップの座標
BitmapDataChannel.RED, // 水平方向カラーチャンネル
BitmapDataChannel.BLUE, // 垂直方向カラーチャンネル
256, // 水平方向のソース参照拡大率
256 // 垂直方向のソース参照拡大率
);
■魚眼エフェクト
魚眼用マップを作成
import flash.geom.Point;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.filters.DisplacementMapFilter;
// ------------------------------------------------------------
// マップ用ビットマップデータを作成する
// ------------------------------------------------------------
var map_bmp:BitmapData = (function():BitmapData{
// ------------------------------------------------------------
// 魚眼用の設定
// ------------------------------------------------------------
var MAP_WIDTH :uint = 256; // マップの幅
var MAP_HEIGHT:uint = 256; // マップの高さ
var FISHEYE_STRENGTH:Number = 1.0; // 魚眼強度(0.01 ~ 1.5)
var FISHEYE_RADIUS:Number = (MAP_WIDTH < MAP_HEIGHT ? MAP_WIDTH : MAP_HEIGHT) * 0.5; // 魚眼半径
// ------------------------------------------------------------
// 魚眼用マップを作成 (componentX:RED,componentY:BLUE)
// ------------------------------------------------------------
var bmp_data:BitmapData = new BitmapData( MAP_WIDTH , MAP_HEIGHT , false );
var i:int,j:int;
var r:int,b:int;
var d:Number;
var vx:Number,vy:Number;
var cx:Number = MAP_WIDTH * 0.5 - 0.5;
var cy:Number = MAP_HEIGHT * 0.5 - 0.5;
var s:Number = 1.0 / Math.cos((45 * Math.PI / 180) * FISHEYE_STRENGTH);
for(j=0;j < MAP_HEIGHT;j++){
for(i=0;i < MAP_WIDTH;i++){
vx = i - cx;
vy = j - cy;
d = Math.sqrt(vx * vx + vy * vy);
if(d > FISHEYE_RADIUS){
r = b = 0x80;
}else{
d = Math.cos(Math.atan2(d,FISHEYE_RADIUS) * FISHEYE_STRENGTH);
vx = cx + vx * d * s;
vy = cy + vy * d * s;
r = Math.floor(i - vx + 0.5) + 0x80;
b = Math.floor(j - vy + 0.5) + 0x80;
if(r < 0) r = 0;
if(b < 0) b = 0;
if(r > 0xff) r = 0xff;
if(b > 0xff) b = 0xff;
}
bmp_data.setPixel(i,j,(r<<16) | (b<<0))
}
}
return bmp_data;
})();
// ------------------------------------------------------------
// マップ用座標を作成する
// ------------------------------------------------------------
var map_pos:Point = new Point(0,0);
// ------------------------------------------------------------
// DisplacementMapFilter オブジェクトを作成する
// ------------------------------------------------------------
var displacement_map_filter:DisplacementMapFilter = new DisplacementMapFilter(
map_bmp, // マップ用ビットマップデータ
map_pos, // マップの座標
BitmapDataChannel.RED, // 水平方向カラーチャンネル
BitmapDataChannel.BLUE, // 垂直方向カラーチャンネル
64, // 水平方向のソース参照拡大率
64 // 垂直方向のソース参照拡大率
);
シェーダーフィルタについて(Flash 10 以降)
■シェーダーフィルタについて
専用の言語を使って、フィルタを自作する事ができます。
ピクセルシェーダーの一種です。
Pixel Bender Toolkit というツールを使用します。
■シェーダーフィルタオブジェクトを作成する
new 演算子を使って、ShaderFilter クラスをインスタンス化します。
引数の詳細については、プロパティ一覧で解説しています。
new ShaderFilter ( shader ) :ShaderFilter
第01引数(略可) | Shader | shader プロパティと同等。 |
戻り値 | ShaderFilter | ShaderFilter オブジェクトが得られる |
■シェーダーフィルタのプロパティ一覧
ShaderFilter クラスには、以下のプロパティがあります。
プロパティ名 | 型 | 効果 |
shader | Shader | Shader オブジェクトを指定。 |
topExtension | int | 上端の拡張余白を指定。デフォルトは 0。 |
bottomExtension | int | 下端の拡張余白を指定。デフォルトは 0。 |
leftExtension | int | 左端の拡張余白を指定。デフォルトは 0。 |
rightExtension | int | 右端の拡張余白を指定。デフォルトは 0。 |
■シェーダー(shader プロパティ)
Shader クラスについては、こちらで解説しています。
パラメータ情報は、ShaderData クラスから渡します。
■シェーダーフィルタを表示オブジェクトに適用する
■使用例
スプライトに ShaderFilter オブジェクトを適用する(この例では、見た目は変化しない)
import flash.display.Sprite;
import flash.display.Graphics;
import flash.filters.ShaderFilter;
// ------------------------------------------------------------
// スプライトを作成
// ------------------------------------------------------------
var sprite:Sprite = new Sprite();
// ステージに配置
stage.addChild(sprite);
// 矩形を描画
var g:Graphics = sprite.graphics;
g.lineStyle (0, 0xAA0000, 1.0);
g.beginFill (0xFF6666, 1.0);
g.drawRect (-50,-50,100,100);
g.beginFill (0xFF8844, 100);
g.moveTo ( -40 , 0 );
g.lineTo ( 0 , 40 );
g.lineTo ( 40 , 0 );
g.lineTo ( 0 , -40 );
g.endFill();
// 位置を設定
sprite.x = 100;
sprite.y = 100;
// ------------------------------------------------------------
// Shader オブジェクトを作成する
// ------------------------------------------------------------
var shader_obj:Shader = new Shader();
// ------------------------------------------------------------
// シェーダーバイトコードを設定(pbj ファイルのバイナリ)
// ------------------------------------------------------------
shader_obj.byteCode = (function ():ByteArray{
var a:ByteArray = new ByteArray();
var f:Function = a.writeUnsignedInt;
f(0xa5010000); f(0x00a40900); f(0x4e657746); f(0x696c7465);
f(0x72a00c6e); f(0x616d6573); f(0x70616365); f(0x004d794e);
f(0x616d6573); f(0x70616365); f(0x00a00c76); f(0x656e646f);
f(0x72004d79); f(0x56656e64); f(0x6f7200a0); f(0x08766572);
f(0x73696f6e); f(0x000100a0); f(0x0c646573); f(0x63726970);
f(0x74696f6e); f(0x004d7944); f(0x65736372); f(0x69707469);
f(0x6f6e00a1); f(0x01020000); f(0x0c5f4f75); f(0x74436f6f);
f(0x726400a3); f(0x00047372); f(0x6300a102); f(0x0401000f);
f(0x64737400); f(0x300200f1); f(0x00001000); f(0x1d0100f3);
f(0x02001b00);
return a;
})();
// ------------------------------------------------------------
// ShaderFilter オブジェクトを作成する
// ------------------------------------------------------------
var shader_filter:ShaderFilter = new ShaderFilter();
// ------------------------------------------------------------
// プロパティを設定する
// ------------------------------------------------------------
shader_filter.shader = shader_obj; // Shader オブジェクトを指定
shader_filter.topExtension = 0; // 上端の拡張余白
shader_filter.bottomExtension = 0; // 下端の拡張余白
shader_filter.leftExtension = 0; // 左端の拡張余白
shader_filter.rightExtension = 0; // 右端の拡張余白
// ------------------------------------------------------------
// スプライトにフィルタを適用する
// ------------------------------------------------------------
sprite.filters = [shader_filter];