グラデーショングロー効果 (1)

グラデーショングロー効果だよ!
かえる君が、オーラで輝いて見えます。

:caution: 要 Flash Player 8 以上

This movie requires Flash Player 9.0.0

しかも、動いてるよ! 😮
すごいよ、Flash 8。


_root に、ムービークリップ(インスタンス名: frog1, frog2, frog3, frog4) を配置。
_root に、テキストフィールド(インスタンス名: logo) を配置。

_root 第1フレームに
import flash.filters.GradientGlowFilter;

var frog1:MovieClip;
var filtersArray1:Array = new Array();
var colors1 = [0xFF0000, 0xFFFF00, 0xFFFFFF];
var alphas1 = [0, 0.5, 1];
var ratios1 = [0, 128, 255];
var gradientGlowFilter1:GradientGlowFilter = new GradientGlowFilter(0, 0, colors1, alphas1, ratios1, 16, 16, 2, 2, "outer", false);

filtersArray1.push(gradientGlowFilter1);
frog1.filters = filtersArray1;

var frog2:MovieClip;
var filtersArray2:Array = new Array();
var colors2 = [0xFF0000, 0xFFFF00, 0xFFFFFF];
var alphas2 = [0, 0.5, 1];
var ratios2 = [0, 192, 255];
var gradientGlowFilter2:GradientGlowFilter = new GradientGlowFilter(0, 0, colors2, alphas2, ratios2, 32, 32, 3, 3, "outer", false);

filtersArray2.push(gradientGlowFilter2);
frog2.filters = filtersArray2;

var frog3:MovieClip;
var filtersArray3:Array = new Array();
var colors3 = [0x0000FF, 0x0066FF, 0x00FFFF, 0x66FFFF, 0xFFFFFF];
var alphas3 = [0, 0.2, 0.4, 0.6, 0.8, 1];
var ratios3 = [0, 64, 128, 192, 255];
var gradientGlowFilter3:GradientGlowFilter = new GradientGlowFilter(0, 0, colors3, alphas3, ratios3, 16, 16, 2, 2, "outer", false);

filtersArray3.push(gradientGlowFilter3);
frog3.filters = filtersArray3;

var frog4:MovieClip;
var filtersArray4:Array = new Array();
var colors4 = [0xFF0000, 0xFFFF00, 0xFFFFFF];
var alphas4 = [0, 0.5, 1];
var ratios4 = [0, 128, 255];
var gradientGlowFilter4:GradientGlowFilter = new GradientGlowFilter(0, 0, colors4, alphas4, ratios4, 16, 16, 2, 2, "outer", true);

filtersArray4.push(gradientGlowFilter4);
frog4.filters = filtersArray4;

var logo:TextField;
logo.text = "GradientGlowFilter";
var filtersArray:Array = new Array();
var colors = [0xFF0000, 0xFFFF00, 0xFFFFFF];
var alphas = [0, 0.5, 1];
var ratios = [0, 128, 255];
var gradientGlowFilter:GradientGlowFilter = new GradientGlowFilter(0, 0, colors, alphas, ratios, 16, 16, 4, 2, "outer", true);

filtersArray.push(gradientGlowFilter);
logo.filters = filtersArray;
と記述。


GradientGlowFilter コンストラクタ

public GradientGlowFilter([distance:Number], [angle:Number], [colors:Array], [alphas:Array], [ratios:Array], [blurX:Number], [blurY:Number], [strength:Number], [quality:Number], [type:String], [knockout:Boolean])

指定されたパラメータでフィルタを初期化します。

使用できるバージョン
ActionScript 1.0、Flash Player 8
パラメータ
distance:Number (オプション)
グローのオフセット。デフォルトは 4 です。
angle:Number (オプション)
角度 (度数)。指定できる値は 0 ~ 360 で、デフォルトは 45 です。
colors:Array (オプション)
グラデーションを定義する色の配列。たとえば、赤は 0xFF0000、青は 0x0000FF などです。
alphas:Array (オプション)
colors 配列の色に対応するアルファ透明度の値の配列。配列内の各エレメントに指定できる値は 0 ~ 1 です。たとえば .25 と指定すると、アルファ透明度は 25 パーセントとなります。
ratios:Array (オプション)
色分布比率の配列。指定できる値は 0 ~ 255 です。この値は、100% でサンプリングされる色の幅の割合をパーセントで定義します。
blurX:Number (オプション)
水平方向のぼかし量。0 から 255 の範囲の値を指定できます。1 以下の値を指定すると、元のイメージがそのままコピーされます。デフォルト値は 4 です。2 のべき乗 (2、4、8、16、32 など) は、他の値と比べて速くレンダリングできるように最適化されています。
blurY:Number (オプション)
垂直方向のぼかし量。0 から 255 の範囲の値を指定できます。1 以下の値を指定すると、元のイメージがそのままコピーされます。デフォルト値は 4 です。2 のべき乗 (2、4、8、16、32 など) は、他の値と比べて速くレンダリングできるように最適化されています。
strength:Number (オプション)
インプリントやスプレッドの長さです。値が大きいほど、濃い色がインプリントされるので、グローと背景との間のコントラストが強くなります。0 ~ 255 の範囲の値を指定できます。値が大きいほど、インプリントが濃くなります。値を 0 にすると、フィルタが適用されなくなります。デフォルト値は 1 です。
quality:Number (オプション)
フィルタを適用する回数。0 ~ 15 の範囲の値を指定できます。デフォルト値は 1 で、低品質と等価です。2 は普通の品質、3 は高品質です。
type:String (オプション)
フィルタ効果の配置。次の値を指定できます。
 ● "outer" : グローがオブジェクトの外側エッジに配置されます。
 ● "inner" : グローがオブジェクトの内側エッジに配置されます。これがデフォルトです。
 ● "full" : グローがオブジェクトの上に配置されます。
デフォルト値は "inner" です。
knockout:Boolean (オプション)
オブジェクトにノックアウト効果を適用するかどうかを指定します。ノックアウト効果を適用すると、オブジェクトの塗りが透明になり、ドキュメントの背景色が表示されます。true を指定すると、ノックアウト効果が適用されます。デフォルトはfalse で、ノックアウト効果は適用されません。
:caution: colors, alphas, ratios について。
サンプルでは、配列の要素数は3つと5つの2パターン。


[追記] (06/01/08 Sun 00:19)
このあたりがポイントかな? :bouzu:
ratios (GradientGlowFilter.ratios プロパティ)

public ratios : Array

colors 配列内の対応する色の色分布比率の配列。指定できる値は 0 ~ 255 です。

ratios プロパティの値を直接変更することはできません。このプロパティを変更するには、ratios への参照を取得し、その参照を変更した後、ratios をその参照に設定する必要があります。

colors、alphas、ratios の 3 つのプロパティはすべて関係しています。colors 配列の先頭のエレメントが alphas 配列と ratios 配列の先頭のエレメントに対応するなど、3 つの配列の同じインデックスのエレメントが互いに対応しています。

グラデーショングローフィルタは、オブジェクトの中心 (distance が 0 に設定されている場合) から発せられる輝きであり、互いに混ざり合った色のストライプから構成されるグラデーションを持っていると考えます。colors 配列の先頭の色がグローの最も外側の色です最後の色がグローの最も内側の色です

ratios 配列の各値は、その色のグラデーションの範囲における位置を表します。0 はグラデーションの最も外側の点を表し、255 はグラデーションの最も内側の点を表します。色分布比率の値は、0 ~ 255 ピクセルの範囲で指定できます。たとえば、[0, 64, 128, 200, 255] のように値を増やしていきます。0 ~ 128 の値は、グローの外側のエッジに表示されます。129 ~ 255 の値は、グローの内側の領域に表示されます。色の分布比率の値とフィルタの type の値によっては、フィルタの適用先のオブジェクトによってフィルタの色が見えなくなることがあります。

[修正] (06/01/08 Sun 11:40)
位置・数値など修正。ヘルプ表示を修正。テキストフィールドを修正。