buttonReport
2006 >> [11.11] [08.26] [05.13] [02.25] 
2005 >> [11.26] [08.27] [05.14] [02.05]
2004 >> [11.13] [08.07] [05.15] [02.07]
2003 >> [11.08] [08.24] [05.31] [02.01]
2002 >> [12.08] [09.07]

2006.05.13
 demo1「Flash 8 ActionScriptで楽しく遊ぶ方法」 講師:森 巧尚氏
 demo2「まるっと見せます! デビュー26年の奥義」 講師:A.e.Suck氏
 アニメ自慢特別編 「花の翳」 作者:吉田 暁氏
 アニメ自慢特別編 「吉野の姫」 作者:丸山 薫氏

ページ1 ページ2 ページ3

Flash 8 ActionScriptで楽しく遊ぶ方法

講師:森 巧尚氏講師:森 巧尚

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

透明なビデオの読み込み

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

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

    ※詳しい手順は、adobeオンデマンドセミナーの「Flash Videoのアルファチャンネルとコントローラ設定」をご覧ください。

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

    >> SWFの作例を開く

ブレンドのActionScript

Flash 8の目玉機能に「ブレンド」がある。これは、ムービークリップに使用できる。次に、ビデオをムービークリップに包んだときのブレンドの楽しみ方を紹介しよう。
    ブレンドのActionScript
  • my_mc.blendMode="ブレンドのタイプ"
    ブレンドは、プロパティ画面で手動でも設定できます。同時に、Scriptでも制御できます。Scriptでの制御も、プロパティでのブレンドモードのタイプを指定するだけなので、スペルにさえ気をつければ、比較的簡単に使用できます。
    反転などのブレンドタイプは、組み合わせて使用するとより楽しい演出が可能になります。

    >> SWFの作例を開く

フィルタのActionScript
ブレンドと同様に、テキストフィールドやムービークリップへ適用できる効果にフィルタがある。プロパティインスペクタのフィルタには7つのタイプがあるほか、各フィルタが複数の設定値を持つ。このフィルタもScriptから制御が可能だが、複数のフィルタを組合わせて使えるように配列を使用する。
    フィルタのActionScript
  • 「ぼかし(ブラー)」フィルタを使用してみよう
    (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];

BitmapDataのActionscript
Actionscriptでのコントロールだから可能になる、フィルタを用いた作例を紹介しましょう。
  • ぼかしをコントロールしてフォーカスぼかしをコントロールしてフォーカス
    奥行きのある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の準備 "見えないBitmapData"の上に描いて、
    "見えるムービークリップ"の上に表示する。
    視るためのテレビとデータを送信する放送局の関係に似ているかも。

    ムービークリップ(A)に、別のムービークリップ(B)の絵を重ねて描画してみましょう。
    (1)準備
    ・結果を表示するムービークリップ(A)を用意する(a_mc)
    ・重ねる絵のムービークリップ(B)を用意する(b_mc)
    ・描画を行う場所(BitmapData)を作る。
     import flash.display.BitmapData;
    ・BitmapDataを、ライブラリの画像を読み込んで作る。
     _bmd = BitmapData.loadBitmap("photo");

    (2)描くBitmapDataを描く
    ・結果を表示するムービークリップ(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で楽しく遊ぶ方法」でした。
会場では、真剣にメモをとる姿があちこちで見られました。また、デモ前後の休憩時間には、森さんにサインしてもらう姿もあり。
素敵な著書とわかり易いデモをありがとうございました。

Top

ページ1 ページ2 ページ3

© 2001-2005 F-site All Rights Reserved.