実践ムービーで身につくActionScript
ActionScriptの習得は敷居が高い?
Adobe Flashによるリッチコンテンツは、Flashプレイヤの高い普及率の後押しもあって、フルFlashサイトからWebサイト内のバナーまで幅広く利用されています。Flashの機能自体もバージョンアップに伴い大変豊富になったため、これからFlashをマスターしたい方にとっては、以前よりも敷居の高いアプリケーションとなってきました。
Flashによるコンテンツ作成といっても、ビジュアルデザイン、アニメーション、インタラクション、動画、音楽、プログラミングと、1つのアプリケーション内で作業する内容も多様化してきています。このことからFlashにかかわる制作者の中でも、それぞれの担当ジャンルに沿って分業化するような形態も進んでいます。
例えば、JavaScriptやPHPなどのほかのWebプログラミング言語をマスターしているエンジニア系の方でも、Flash独特のタイムラインやムービークリップの概念が理解しにくかったり、いろんな場所にスクリプトが記述されていることで、ソースを解読することが難しいといった声を聞きます。
一方のWebデザイナの方にとっては、ActionScriptを覚えること自体が壁となり、初歩でつまずいたり、仮にFlashムービーを作ることができても、タイムラインを行き来する「再生/gotoAndPlay()」または「停止/stop()」位しか使えないといった声も数多く見受けられます。
本連載では、このようなFlashの初心者、もしくは中級者の方を対象に、ActionScriptを使った実践的なムービーをサンプルファイルを見ながら、使用頻度の高いポイントを解説していきます。
トゥイーンとActionScriptの使い分け
Flashにはトゥイーン(Tween)と呼ばれるアニメーションの自動作成機能が備わっています。動かしたいオブジェクト(インスタンス)を時間軸タイムラインに配置して、次に経過した時間のタイムラインでオブジェクトを移動させると、その間のアニメーションのコマが自動的に作られます。またイージング機能を使えば初速を早めたり、終速を遅めに設定することで、滑らかで自然な動きを作り出すこともできます。
では、ActionScriptでアニメーションを使うシチュエーションを考えて見ましょう。使い分けの目安としては、始点と終点があらかじめ決まっているのであれば、トゥイーンで作成した方が簡単にできます。(サンプル1)
例えば始点と終点が複数存在して、それぞれを行き来するような場合や、もしくは目的地のポイントが常に変化していく様な場合は、ActionScriptを使った方が作業が簡略化できます。
サンプル2では、飛行機のインスタンスはA、B、C、Dの4つの目的地を行き来します。この移動アニメーションをトゥイーンで表現しようとすると、12パターンのアニメーションを用意する必要があります。サンプルをダウンロード(http://www.thinkit.co.jp/images/article/81/1/8111.zip)(8111.zip/25.1 KB)。
これをActionScirptでのアニメーション作成に移行すると、ターゲットとなる地点への移動式を1つ書くだけです。後はA、B、C、Dの到達座標(X値、Y値)を指定するだけで済みます。ActionScriptでは数行の記述で、作業を簡略化できるメリットがあります。サンプルをダウンロード(http://www.thinkit.co.jp/images/article/81/1/8112.zip)(8112.zip/20.8 KB)。
また汎用性という観点からいうと、例えば4つの目的地が8つに増えた場合、トゥイーンアニメーションでは、計56パターンのアニメーションを作る必要がありますが、ActionScriptでは追加分の4つの目的座標を入れるだけです。
このようにActionScriptを使えば、面倒な繰り返し作業を自動化して、制作作業を効率的にする面があります。