Lesson2 花咲くActionScript －試行錯誤を楽しむ－
Lesson2となる今回からはあらかじめ決まった完成形を求めるのではなく、制作の過程を楽しみながら ActionScriptに親しんでいただきたい。通常の制作現場ではクライアントの要望に沿った仕様に基づき、納期に追われながらひたすら完成形を求め て仕事を進めているはずだ。もちろん私もそうした一人である。多くの仕事をこなすことでFlashのスキルはアップし、作業スピードも上がる。
しかし、何か釈然としない気持ちや焦りが芽生えてきている人もいるのではないだろうか？その多くは自分が習 得・チャレンジしてみたいことと、クライアントから求められる内容との“隔たり”から発生しているように思う。それを払拭するためには、やはり自分なりの 実験、研究を続けていくことが大事だ。そうして身につける技術が現状では要求されていないものでも、いずれ求められることになる。よい研究の成果が出れ ば、逆にクライアントに提案することもできる。チャレンジ精神がおもしろい作品を生み出すのだから。
それでは、楽しみながら実験を始めよう！
(解説：茅原 伸幸)
第4回 ビットマップイメージやフィルタを利用してみよう！
今回は前回までに作成した描画サンプルを利用しながら、Flash8の新機能の目玉であるビットマップイメージを試してみたいと思う。
ビットマップイメージを利用することによって、今までのFlashでは動作速度面から実行が困難だったことも実現可能になる場合がある。前々回の第2話でタンポポを描画したことを覚えているだろうか。いくつも描画し続けていると動作が重たくなり、Flashの限界としていたが、ビットマップイメージを利用すれば克服できるようになる。Flashの限界を知ることは大事だが、その限界を打破すべくチャレンジすることはさらに大事だ。
まずは、参考までに以前使用したタンポポのサンプル（第2回 【サンプル3】）をビットマップ描画に変更し、マウスを押下している間中、描画し続けられるよう変更したものをご覧いただきたい【サンプル1】。
【サンプル1】今までのFlashでは不可能だった表現だ
負荷がまったくかかっていないわけではないが、以前のように段々と負荷が増大して待たされるということはなく、描画し続けることができる。ビットマップ描画の恩恵を受けた一例であろう。
ビットマップイメージを利用したActionScripitへの移行
それでは、実際にビットマップイメージを利用したサンプルを作成してみよう。前回までに作成したカラフルなお花を描画するサンプルのActionScript（第3回 図5）を使って、ビットマップイメージを利用したActionScriptへ移行してみよう【図1】。
■Point ビットマップイメージを使ってパフォーマンスを向上させる
【図1】黄色で示した部分が変更点
順番に解説していこう。変更点（1)の行では、ビットマップイメージを利用するための「BitmapData クラス」を「import文」で読み込んでアクセスできるようにしている。
変更点(2)は、幅400px、縦300px、透明を利用（true）、カラーを0ｘ00000000（透明）にした「BitmapDataオブジェクト」を作成して、_rootのステージ上へアタッチしている。カラーの0が8つも並んでいるのはRGBにA（アルファ）が加わっているためだ。前から順に00の2つずつがARGBの順番でにそれぞれ対応しているため、順番には注意してほしい。
変更点（3）では、花びらを描画するベースとなる空のムービークリップを作成し、変更点（4)では変更点（3)で作成した空のムービークリップにattachMovieするようにしている。
次に、変更点（5)では、変更点（4)でbaseにattachMovieした花びらを、変更点（2）で作成、配置したBitmapDataオブジェクトへ描画（draw）している。
最後に、変更点（6)でattachMovieした花びらを削除している。
慣れるまではややこしいかもしれないが、おおよそ上記のような手順でビットマップイメージを利用することができる。実行したものが次のサンプルだ【サンプル2】。
【サンプル2】確認しやすいようにフレームレートを31にあげている
見た目にはあまり変化はないが、描画し続けたときのパフォーマンスは大幅に向上している。これだけでもビットマップイメージの利用は大成功だが、さらにフィルタを使った効果を楽しんでみよう。
ぼかし視覚効果（フィルタの利用）
Flash8には「ぼかし」、「グロー」、「ベベル」、「ドロップシャドウ」など、さまざまな視覚効果を実現できるビットマップフィルタが用意されている。その効果は詳細に調整できる反面、設定すべきパラメータの数も多く、とまどうことも多いと思う。ヘルプやコードヒントを有効に活用しながら進めるとよいだろう【図2】。
【図2】調べたいActionScriptのコード上にカーソルを合わせてから、ヘルプボタンを押すと、すばやく確認することができる
フィルタの中でもぼかしフィルタは利用頻度が高く、またパラメータも少ないので、取っ掛かりには利用しやすいフィルタだと思う。では、先程のサンプルにぼかし効果を適用してみよう【図3】。
【図3】ぼかし効果を適用するために必要なActionScriptを追加
まずは、ぼかしフィルタを利用するための「BlurFilter クラス」と、フィルタを適用したイメージを生成する (BitmapData.applyFilter メソッド) 際に必要な「Point クラス」をimportする。そして、BlurFilterのパラメータを設定する。ここでは、水平方向のぼかし量を4、垂直方向のぼかし量を4、クオリティ（ぼかしの適用回数）を2の普通に設定している。最後に、クリックしたときにぼかしを適用するようにonMouseDownリスナーの関数内に1行追加しているだけだ。
これを実行すると、次のようになる【サンプル3】。
【サンプル3】クリックするたびに以前に描画した花びらにぼかし効果を適用する
クリックするたびに以前に描画した花びらがだんだんとぼやけていき、すこし奥行き感も感じられるようになったのではないだろうか。ちなみに【図3】の最終行の1行手前のコメントアウトを外すと上にスクロールするようになり、次のサンプルになる【サンプル4】。
【サンプル4】最下段で花びらを描画するとカラフルな帯が伸びて楽しい
今回解説したのはビットマップイメージを利用した初歩のサンプルだが、ビットマップイメージやフィルタ群を利用することによって、今まででは実現が困難だった表現が簡単に利用できるようになったことを感じていただければと思う。
その他のフィルタなどはパラメータの数が覚えきれないほど多かったり、行列（マトリックス）を扱うようになったりと複雑化しているが、表現手法の多様化により仕方のないことだろう。
ビットマップイメージはその利用の仕方によっては、あまりパフォーマンスに効果のない場合もあるが、まずは、自分が気になったフィルタから順番に、「パラメータの数値を変えては実行！」を繰り返し、実際に手を動かしながら、体験して慣れていくことが習得の早道だろうと思う。ぜひがんばっていただきたい。
「Flashスキルアップ講座」Lesson2は今回で終了です。次回Lesson3は、11月8日（水）からの掲載開始となります。
 |
［プロフィール］ かやはら・のぶゆき●1972年生まれ、広島在住。広島大学経済学部卒業後、紆余曲折の末、2006年5月に株式会社メディア・パルサーを設立。若手を鍛えながらFlash制作に勤しむ。二児のパパ。 http://www.procreo.jp/ |
