サイトトップ

Director Flash 書籍 業務内容 プロフィール

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
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
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 − 彩度の変更
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.