|
F-siteセミナー
スクリプトでもっとすごい Flash 8
Date: 2005年11月26日 |
Product: Flash |
Platform: All
Viersion: 8.0
1. ぼかしとドロップシャドウフィルタ
スクリプトによるフィルタの基本的な使い方について、詳しくは「スクリプトでフィルタを使う − BlurFilter」を参照してほしい。
表001■MovieClipにフィルタを適用する手順
No.
|
操作 |
1 |
フィルタインスタンスの作成 |
2 |
配列インスタンスの作成 |
3 |
配列インスタンスにフィルタインスタンスを格納 |
4 |
MovieClip.filtersプロパティに配列インスタンスを設定 |
BlurFilterクラスのフルネームは、flash.filters.BlurFilter。「ActionScript 2.0リファレンスガイド」(図001)で確認する。
図001■BlurFilterクラス
import宣言すれば、そのスクリプトペイン(ウィンドウ)内は、クラス名だけでアクセスできる。
// importでBachのフルネームを宣言
import johann.sebastian.Bach;
// 以下Bach
var myMusician:Bach = new Bach();
以下のスクリプト(スクリプト001)は、ステージに配置されているMovieClipインスタンスmy_mcに、DropShadowFilterとBlurFilterを適用する(サンプル001)。
サンプル001■DropShdowAndBlur
スクリプト001■MovieClipにDropShadowFilterとBlurFilterを適用
import flash.filters.BlurFilter;
import flash.filters.DropShadowFilter;
var my_mc:MovieClip;
var filters_array:Array = new Array();
var myDropShadow:DropShadowFilter = new DropShadowFilter(10, 30, 0, 40, 10, 0);
filters_array.push(myDropShadow);
var myBlur:BlurFilter = new BlurFilter(10, 0);
filters_array.push(myBlur);
my_mc.filters = filters_array;
|
BlurFilter(水平方向ぼかし, 垂直方向ぼかし, クォリティ)
指定した設定でBlurFilterインスタンスを生成する。クォリティは整数で、通常1から3までの値を使う(数値が大きいほどぼけ幅も大きい。0はぼかしなし)。デフォルト値(引数省略時の値)は1。
DropShadowFilter(距離, 角度, カラー, アルファ, 水平方向ぼかし, 垂直方向ぼかし)
指定した設定でDropShadowFilterインスタンスを生成する。アルファは百分率でなく、0から1までの数値であることに注意。他にオプションの引数もあり、[プロパティ]インスペクタの[フィルタ]タブと同等の設定が可能。
|
サンプル002■BlurScroll
2. Perlinノイズ
Perlinノイズについて、詳しくは「BitmapData.perlinNoise()メソッド」を参照してほしい。
サンプル003■Perlinノイズのシミュレーション(SWFのみ)
以下のスクリプト(スクリプト002)は、ステージをクリックすると、ステージ一杯のサイズでPerlinノイズを生成してMovieClipに設定する。
スクリプト002■ステージをクリックするとPerlinノイズを生成
import flash.display.BitmapData;
import flash.filters.DisplacementMapFilter;
var _mc:MovieClip = this.createEmptyMovieClip("my_mc", this.getNextHighestDepth());
var nWidth:Number = Stage.width;
var nHeight:Number = Stage.height;
var nBase:Number = 1/2;
var nOctaves:Number = 6;
var nColorChannel:Number = 7;
// ステージサイズでBitmapDataインスタンスを作成
var myBitmapData:BitmapData = new BitmapData(nWidth, nHeight);
this.onMouseDown = function() {
var nRandom:Number = Math.floor(Math.random()*10);
// Perlinノイズ生成
myBitmapData.perlinNoise(nWidth*nBase, nHeight*nBase, nOctaves, nRandom, false, true, nColorChannel);
// BitmapDataインスタンスをMovieClipに設定
_mc.attachBitmap(myBitmapData, 1);
};
|
perlinNoise(水平サイズ, 垂直サイズ, オクターブ数, ランダム値, ステッチ, フラクタル, カラーチャンネル)
Perlinノイズイメージを生成。オクターブと呼ばれる個別のランダムノイズ関数を補間・合成して、自然な表現のランダムノイズを生成する。
|
*BitmapData.perlinNoise()メソッドは、次項「3. 置換えマップフィルタ」のサンプルで使用。
3. 置換えマップフィルタ
指定されたビットマップ(マップビットマップ)の256諧調の情報にもとづいて、元画像(ソースビットマップ)のピクセル位置をシフトする。psyark.jp「DMチュートリアル1」の解説が詳しい。
「DisplacementMapFilterコンストラクタ」(Flash 8オンラインヘルプ[ActionScript 2.0リファレンスガイド] > [ActionScriptクラス] > [DisplacementMapFilter (flash.filters.DisplacementMapFilter)])の「例」のスクリプトは、赤から青の放射状グラデーションをマップビットマップとして、テキストが配置されたMovieClipにDisplacementMapFilter()を設定。マップビットマップの適用カラーチャンネルとしては、Redが指定されている。
図002■「DisplacementMapFilterコンストラクタ」の「例」
つぎのサンプル(スクリプト003)は、Redチャンネルを使ったPerlinノイズ(図003)を(MovieClip.onEnterFrameイベントで)連続生成し、それをマップビットマップとしたDisplacementMapFilter()の適用により、水面の画像を配置したMovieClipに波の揺らぎをつくり出している。
図003■RedチャンネルによるPerlinノイズ
スクリプト003■Perlinノイズと置換えマップフィルタによる波紋のシミュレーション
import flash.display.BitmapData;
import flash.filters.DisplacementMapFilter;
import flash.geom.Point;
// Perlinノイズパラメータ設定
var nWidth:Number = Stage.width;
var nHeight:Number = Stage.height;
var nBase:Number = 1/8;
var nOctaves:Number = 6;
// DisplacementMapFilterパラメータ設定
var myBitmapData:BitmapData = new BitmapData(nWidth, nHeight);
var nColorChannel:Number = 1;
var mapPoint:Point = new Point(10, 10);
var nScale:Number = 10;
my_mc.onPress = function() {
this.onEnterFrame = xWave;
delete this.onPress;
};
function xWave() {
var nRandom:Number = Math.floor(Math.random()*10);
myBitmapData.perlinNoise(nWidth*nBase, nHeight*nBase, nOctaves, nRandom, false, true, nColorChannel, false);
var myDisplacementMap:DisplacementMapFilter =
new DisplacementMapFilter(myBitmapData, mapPoint, nColorChannel, nColorChannel, nScale, nScale);
my_mc.filters = [myDisplacementMap];
}
|
サンプル004■DisplacementMap
4. ColorMatrixFilter
カラーマトリックスは、RGBAカラー値で構成される4×5の行列。初期値は、うち4×4の対角成分が1で、他はすべて0の値を取る。以下のサンプル(スクリプト005)は、カラーマトリックスの値を変更することにより、MovieClipに配置した画像の彩度をグレースケールに変化させることができる。
サンプル005■ColorMatrix − 彩度の変更
RGBカラーをグレースケールに変更するには、各カラーチャンネルの値を他のチャンネルに均等に分配する。ただし、RGBの値は明るさに差があるので、その重みづけが必要になる。Red:30%、Green:59%、Blue:11%が適切な比率とされる[*1]。
図004■RGBに0.3:0.59:0.11の重みづけをして値を各チャンネルに均等配分
サンプル005のスクリプトは、以下のとおり。ColorMatrixFilter.matrixプロパティは、実際にはカラーマトリックス4×5の20エレメントを羅列した、ひとつの配列として設定する。
スクリプト004■ColorMatrixFilterを使って各カラーチャンネルの値を変更
import mx.data.binding.ObjectDumper;
import flash.filters.ColorMatrixFilter;
var nsSaturation:mx.controls.NumericStepper;
var myColorMatrix:ColorMatrixFilter = new ColorMatrixFilter();
// 各カラーごとの配列設定
var red_array:Array = [1, 0, 0, 0, 0];
var green_array:Array = [0, 1, 0, 0, 0];
var blue_array:Array = [0, 0, 1, 0, 0];
var alpha_array:Array = [0, 0, 0, 1, 0];
// グレースケール値 = R成分*0.30 + G成分*0.59 + B成分*0.11
var gray_array:Array = [0.3, 0.59, 0.11, 0, 0];
var oListener:Object = new Object();
nsSaturation.addEventListener("change", oListener);
oListener.change = function(eventObject:Object):Void {
var nAmount:Number = eventObject.target.value/100;
var color_array:Array = new Array();
// RGBA成分ごとの4つの配列をひとつに連結[*2]
color_array = color_array.concat(xInterpolateArrays(gray_array, red_array, nAmount));
color_array = color_array.concat(xInterpolateArrays(gray_array, green_array, nAmount));
color_array = color_array.concat(xInterpolateArrays(gray_array, blue_array, nAmount));
color_array = color_array.concat(alpha_array);
myColorMatrix.matrix = color_array;
image_mc.filters = [myColorMatrix];
colorMatrix_mc.xSetMatrix(color_array);
};
function xInterpolateArrays(from_array, to_array, nRate) {
var result_array:Array = new Array();
var nLength:Number = from_array.length;
for (var i:Number = 0; i<nLength; ++i) {
var nFrom:Number = from_array[i];
var nTo:Number = to_array[i];
result_array[i] = nFrom+(nTo-nFrom)*nRate;
}
return result_array;
}
this.onEnterFrame = function():Void {
colorMatrix_mc.xSetMatrix(myColorMatrix.matrix);
delete this.onEnterFrame;
};
|
[*1]「目に映る明るさって何ですか?」参照。
[*2] ColorMatrixFilter.matrixプロパティは4×5の20エレメントを羅列した配列なので、Array.concat()メソッドを使って、RGBA各カラー値ごとの5エレメントからなる4つの配列をひとつに連結している。
|
5. 参考URL
Flash 8の技術情報に関わる参考サイト。
Flash 8 LiveDocs英語版 / Flash 8 LiveDocs日本語版
ヘルプと同内容のドキュメント。ユーザーやMacromediaの人たちが、修正・補足の情報をコメントとして追加できる。Flash 8から日本語版がアップされた。
Flash 8ヘルプ勝手に正誤表
野中が独自の判断により、一方的に作成。LiveDocsにもコメントを入れて、リンクしている。Macromedia側の確認を経て、採用されたものもある。
mixi: [ActionScript Lounge]コミュニティ
野中の主催するmixiのコミュニティ。ActionScriptのマニアックな話題を掲載する。Flash 8のバグ情報も適宜追加中。
_____
作成者: 野中文雄
作成日: 2005年12月16日
(ドラフト作成: 2005年12月8日)
Copyright ©
2001-2006 Fumio Nonaka. All rights reserved.
|