Flash 8 ActionScriptで楽しく遊ぶ方法

出来立てほやほやの新刊「おしえて!!FLASH 8 ActionScript」を携えた“右脳型スクリプター”こと、森 巧尚氏。
今回はFlash 8の新機能である「ブレンド」や「フィルタ」をAcionScriptからコントロールする際の効果的な使用方法をご説明いただきました。

• 背景が透過するビデオの作り方
  作成には、After Effectsや3DCGなどのアルファチャンネル付きムービーの書き出しに対応しているソフトが必要です。
  対応のソフトに、背景にブルー(の布などを使用し)を置き、撮影したビデオを取り込んだのち、背景部分のブルーを選択して抜きます。
  
  

• Flash への読み込み
  (1)ビデオの読み込みウィザードの中の[エンコーディング]画面の中段にある[詳細設定を表示]ボタンをクリック。
  (2)表示される[エンコーディング]タブの[ビデオコーデック]プルダウンリストから「ON2 VP6」を選択。
  (3)プルダウンリストの直下の「アルファチャンネルのエンコード」がアクティブになりますので、そこにチェックマークを入れる。
  (4)そのままウィザードの画面を「次へ」と進める。
  
  ※詳しい手順は、adobeオンデマンドセミナーの「Flash Videoのアルファチャンネルとコントローラ設定」をご覧ください。


• 作例：透過ビデオで遊ぶ
  ぐるぐるぐるぐる〜回る回る〜。
  これだけでも、かなーり楽しめます。
  
  >> SWFの作例を開く
  
  

• my_mc.blendMode="ブレンドのタイプ"
  ブレンドは、プロパティ画面で手動でも設定できます。同時に、Scriptでも制御できます。Scriptでの制御も、プロパティでのブレンドモードのタイプを指定するだけなので、スペルにさえ気をつければ、比較的簡単に使用できます。
  反転などのブレンドタイプは、組み合わせて使用するとより楽しい演出が可能になります。
  
  >> SWFの作例を開く
  

• 「ぼかし(ブラー)」フィルタを使用してみよう
  (1)準備する
  import flash.filters.BlurFilter;
  (2)設定する
  blurX = 5; //ぼかし-水平「5」
  blurY = 5; //ぼかし-垂直「5」
  quality = 1; //画質「低」
  bfilter = new BlurFilter(blurX,blurY,quality);
  (3)フィルタを使う箱を用意する
  myFilters = new Array();
  (4)その箱にブラーを追加
  myFilters[0] = bfilter;
  (5)プロパティにフィルタの箱を設定
  my_mc.filters = myFilters;
  
  >> SWFの作例を開く
  アルファで抜けているので、ドロップシャドウやグローがきれいです。
  
  

• 配列は面倒？
  フィルタを用いるときに、配列が必要になる。ひとつのフィルタでも配列の箱を使用してそこにインスタンスを格納しておく。すると後で複数を使用することになってもMCとしてのフィルタの配列はひとつですむようになる。
  *MovieClipのfiltersプロパティには、フィルタ(のインスタンス)を格納した配列を設定します。(ex) ムービークリップ.filters = [フィルタ1, フィルタ2, ..., フィルタN];

• ぼかしをコントロールしてフォーカス
  奥行きのある3つのオブジェクトの焦点がスクロールバーの動きとともに移動する例。
  スクロールバーを動かすと、手前の葉っぱ、中心の人物、背景にとピントが合う。
  従来のバージョンでは、アニメーションでこういう手法が可能だったけど、スクリプトによるリアルタイムの表現はできなかったもの。
  
  >> SWFの作例を開く
  
  
• マウスを動かしてぼかす
  マウスでオブジェクトをドロップすると、その方向にあわせてぼかしにも伸びがかかってより移動感が加わる例。
  (1)ぼかしフィルターを作る
  import flash.filters.BlurFilter;
  //--
  bfilter = new BlurFilter(0, 0, 5);
  myFilters = new Array();
  myFilters[0] = bfilter;
  a_mc.filters = myFilters;
  //
  a_mc.onEnterFrame = function() {
  
(2)マウスとムービークリップの位置の差を求める
dx = _xmouse - this._x;
dy = _ymouse - this._y;
//
(3)位置の差でぼかしをかける
差が小さい＞近いとぼけが弱い
差が大きい＞遠いとぼけが強い
myFilters[0].blurX = Math.abs(dx * .2);
myFilters[0].blurY = Math.abs(dy * .2);
a_mc.filters = myFilters;
//--
(4)ムービークリップをマウスの位置に近づける
this._x += (_xmouse - this._x) * .5;
this._y += (_ymouse - this._y) * .5;
};
>> SWFの作例を開く


• ディスプレイスメントマップフィルタ
  3Dでは、よく耳にするものに「ディスプレイスメントマッピング」がある。
  これは、「白いところは高く、黒いところは低く」のように置き換えられる。Flashだと、2次元（XY方向で）での変換になる。
  
  >>「亀に波打つ海面風のフィルタ」の作例を開く
  >>「地球儀」の作例を開く
  
  BitmapDataの基本は、
  "見えないBitmapData"の上に描いて、
  "見えるムービークリップ"の上に表示する。
  視るためのテレビとデータを送信する放送局の関係に似ているかも。
  
  ムービークリップ（A）に、別のムービークリップ(B)の絵を重ねて描画してみましょう。
  (1)準備
  ・結果を表示するムービークリップ（A）を用意する（a_mc）
  ・重ねる絵のムービークリップ（B）を用意する（b_mc）
  ・描画を行う場所(BitmapData)を作る。
  　import flash.display.BitmapData;
  ・BitmapDataを、ライブラリの画像を読み込んで作る。
  　_bmd = BitmapData.loadBitmap("photo");
  
  (2)描く
  ・結果を表示するムービークリップ（A）に、BitmapDataを割り当てる。
  　a_mc.attachBitmap(_bmd, 10);
  ・重ねる絵のムービークリップ（B）をビットマップ上に描画する。
  　_bmd.draw(b_mc);
  ビットマップはムービークリップ（A）にアタッチされているので、描画結果がムービークリップ（A）上に表示されることになる。
  
  ところで 前述にもあるフィルタを設定してたり透過を用いているものを紙に印刷する際、フィルタや透過が無視されてしまう。
  しかし、BitmapDataに変換してある(合成してからpush)この方法なら、フィルタや透過も適用されたままのイメージで印刷できる。
  反面、これらはビットマップデータになるためテキストデータのままであるような拡大しても滑らかなアウトラインではなくなる。
  
  (3)加工
  DisplacementmapFilterをセットする。
  BitmapDataを使ってフィルタをかける。
  
  加工例として：
  「ヒットテスト」の作例を開く
  やわらかい衝突判定。やわらか判定。 左の雲をドラッグして右の雲にかさねてみてね。
  
  「フラクタルノイズ」の作例を開く
  perlinNoise()メソッドの第6引数がフラクタルノイズ。
  サウナでなべを食べるみたいな演出も可能？？？
  
  (4)後始末
  終わったらきちんと消す(便利さには責任が伴う)。消すときは「_bmp.dispose();」
  MCと違って、メモリ（放送局）に入れたデータは責任もって消してあげる。メモリに残る上に、メモリを食う。
  
  【こぼれ話】
  ディスプレイスメントマップフィルタは、一昔前のプログラミングみたいなものと考えるとわかりやすい。Flashは数行のスクリプトで可能なので、以前のプログラミングから考えると格段楽なんだって。

以上、森 巧尚氏によるデモ「Flash 8 ActionScriptで楽しく遊ぶ方法」でした。
会場では、真剣にメモをとる姿があちこちで見られました。また、デモ前後の休憩時間には、森さんにサインしてもらう姿もあり。
素敵な著書とわかり易いデモをありがとうございました。