Lesson2 花咲くActionScript －試行錯誤を楽しむ－
Lesson2となる今回からはあらかじめ決まった完成形を求めるのではなく、制作の過程を楽しみながら ActionScriptに親しんでいただきたい。通常の制作現場ではクライアントの要望に沿った仕様に基づき、納期に追われながらひたすら完成形を求め て仕事を進めているはずだ。もちろん私もそうした一人である。多くの仕事をこなすことでFlashのスキルはアップし、作業スピードも上がる。
しかし、何か釈然としない気持ちや焦りが芽生えてきている人もいるのではないだろうか？その多くは自分が習 得・チャレンジしてみたいことと、クライアントから求められる内容との“隔たり”から発生しているように思う。それを払拭するためには、やはり自分なりの 実験、研究を続けていくことが大事だ。そうして身につける技術が現状では要求されていないものでも、いずれ求められることになる。よい研究の成果が出れ ば、逆にクライアントに提案することもできる。チャレンジ精神がおもしろい作品を生み出すのだから。
それでは、楽しみながら実験を始めよう！
(解説：茅原 伸幸)
第3回 カラフルな花を連続して咲かせる
前回はタンポポの作成で目標にしているサンプルの作成から少し寄り道してしまったが、今回は当初の目標を達成すべく進めていきたい。第2話の【サンプル2】では花びらの枚数や大きさをランダムに描画するところまではできた。
第2話で登場したサンプル
では次のステップに移り、花びらの“種類”を増やしてみよう。まずはLesson2の第1話で作成したムービークリップ「hanabira」の編集画面に入る【図1】。
【図1】ライブラリを開き、「hanabira」をダブルクリックすればOKだ
そして、タイムラインのフレーム毎に違う種類の花びらを描画していこう。このとき、ムービークリップの基準点を中心に回転しながら配置されることをイメージしながら作成するとよい。また、花はどんどん重なって描画されていくので、若干透明度を持たせた部分を作っておくとキレイに見える。この辺りは、子供のころに折り紙を何重にも折ってハサミで切り込みを入れ、ワクワクしながら開くときの感覚を思い出して、試行錯誤しながら楽しんでみてほしい。
ちなみに、当初のサンプルでは次の8種類の花びらを用いている【図2】。
【図2】それほど精巧には描画していないが、それらしく見えるからおもしろい
ある程度描画できたら、「hanabira」ムービークリップのフレーム1にstop();を記述して再生を止めておく。そしてメインタイムラインのフレーム1のActionScriptに2行加えて、次のように変更しよう【図3】。
【図3】描画した花びらの大きさにあわせて若干スケールも変更している
花びらの種類（ここでは8種）に合わせて、ランダムで1から8までの整数を求め（変数nType）、「hanabira」ムービークリップの対応したフレームにgotoAndStop(nType)で停止させている。ランダムでフレームを停止させる場合はフレーム番号の指定に小数点が出ないように、また1以上になるよう気をつける必要がある。
【図3】では、「Math.random()*8」で0以上8未満の値が返されるので、「Math.floorメソッド」で切り捨てして整数にし（この段階では0から7の整数になっている）、その後＋1して1から8までの整数を求めるようにしている。細かなことだが、気を抜くと忘れがちなので注意してほしい。
ここまでが、次の【サンプル1】のようになる。
【サンプル1】
■Point 一連の処理を関数にまとめて連続実行＆停止
クリックする度にカラフルな花がさまざまに描画され、楽しさも倍増だ。ついつい何度も何度もクリックしてしまう。しかし、そのうちカチカチ……と何度も連続してクリックすることが面倒になってくる。もっと楽にいっぱい花を咲かせられるように、マウスを押している間は先程のクリック時の処理を繰り返して実行し、マウスを放したら処理を止める、というように変更しよう【図4】。
【図4】花を咲かせる一連の処理を関数（bloom）にまとめる
今までのクリック時の一連の処理を関数に定義し（bloom）、マウス押下時には「MovieClip.onEnterFrame ハンドラ」で繰り返し実行し、マウスを放したときには、「deleteステートメント」でMovieClip.onEnterFrame ハンドラに割り当てたbloom関数を削除して、停止させている。
MovieClip.onEnterFrame ハンドラは繰り返し実行させる際に最もポピュラーなものだが、延々実行させることはやはり負荷につながる。不必要になったらこまめにdeleteするようにして、“省エネ”を心がけたい。
以上を実行すると【サンプル2】となる。
【サンプル2】マウスを押下している間、延々花を描画している
これでほぼ目標に到達した。だが、マウスを同じ位置で押し続けていると同じ位置に描画し続けるため、最後にランダムで位置にバラツキをもたせてる【図5】。これで、目標としていたサンプルの完成する【サンプル3】。
【図5】nOffsetX,nOffsetYはそれぞれ-30以上30未満の値になる
【サンプル3】今回の当初の目標は達成！
発想を転換して、汎用性を高めよう
今回の作例は静止した花を描画しているが、発想をちょっと変えればいろいろ流用できるはずだ。例えば、花びらのムービークリップを小さな火花に変更し、モーショントゥイーンで移動しながら消えて行くアニメーションにするだけで、簡単な花火の完成だ。ただ、アニメーションを含むムービークリップを数多くattachMovieすると負荷が増大するため、工夫が必要にはなってくるが……。
これに限らず数多くの書籍やWebで公開されているFlashのサンプルはそのものずばりを作成するためのものではなく、ActionScriptを利用してできた一形態にすぎない。ほとんど同じActionScriptでも発想を変え、アイデアを練ることでまったく別物の表現になる可能性がある。サンプルスクリプトの構造を理解したら、柔軟な発想を心がけながら、その利用方法を常に模索し続けることがとても重要だと思う。
さて、今回でひとまずの目標としていたサンプルは完成したわけだが、これで終わりではない。次回はFlash8の新機能を試しながら、さらに発展させてみたい。
次回へつづく
 |
［プロフィール］ かやはら・のぶゆき●1972年生まれ、広島在住。広島大学経済学部卒業後、紆余曲折の末、2006年5月に株式会社メディア・パルサーを設立。若手を鍛えながらFlash制作に勤しむ。二児のパパ。 http://www.procreo.jp/ |
