|
撮影した場所のポイントを直感的に把握でき、なおかつ楽しく見せる方法として、マウスドラッグで地球を回しながらポイントを選んでいく方法が考えられた(図1)。Flash上で何枚もシンボルを用意しておき、単にアニメーションを再生させるのであれば簡単だが、今回は地球の回転アニメーションをドラッグでコントロールする必要がある。また、スムーズに回転しているように見せるためにはかなりのコマ数を用意しなければならないが、3Dソフトで作成した各コマのビットマップ画像をそのままFlashへ持ち込めば、それだけで数メガの重さになってしまう。そこで、このアニメーションにはFlashを使用することになった。
地球の回転アニメーションのインポート
まず3Dソフトで作成した画像をPhotoshopで開き、パスで地球、地図、ボタンなどそれぞれをトレース。そのパスをFlashに持っていって色づけをすれば、すべてがベクトルデータになるので、ファイルサイズを軽くできる。この際、Flashの修正メニュー→“ビットマップのトレース”を使用してもいいが、細かいポイントの調整ができず、かえってベクトルデータにすることでサイズが増えてしまったので、今回はPhotoshopを使用した。この方法により、ビットマップ画像だと2MB近い大きさだったものが、100KB以内に収まるまでになっている。
アニメーションのコントロール
地球をマウスドラッグで左右に回転させ、さらにマウスを離す位置やドラッグのスピードによって、回転の量、スピードを変化させている。これを可能にするために、Flash上では、地球が回転するだけのムービークリップ(図2)、回転するコマ数、スピードを制御するだけのムービークリップ、マウスドラッグの移動距離を測るボタンだけのムービークリップを用意した。ボタンムービークリップは見えないようになっているが(図3)、マウスアップした場所がつねに地球の中心にくるように、その場所に合わせてボタンのフレームを移動させ、マウスダウンからマウスアップまでのドラッグした位置とそれぞれの時間を示す数値を出す。その数値が制御用ムービークリップに送られて計算され、ドラッグの距離と速さに応じてフレームを移動。制御用ムービークリップのフレームには、地球を回転させるためのアクションが記述されており、そのぶんだけ地球回転ムービークリップが再生される(図4)。この際、制御用ムービークリップの中で、フレームにより地球回転ムービークリップを1コマや2コマ飛ばしさせることで、疑似的にスピードが変化したように見せている。このように、Flash 4で強化されたアクション機能を駆使することで、より細かいアニメーションの制御が可能となった。
今回のように制御用のアクションだけを集めたムービークリップを作成することで、Flashでは無理だと思われる動きが可能になり、よりインタラクティブなアニメーションがつくれるのだ。
|
(図1) マウスドラッグにより地球が回転する。各ポイントをクリックすると右のファインダにその場所で撮られた写真のサムネールが出る。ファインダをクリックすることで別ウインドウが立ち上がり、大きいサイズで写真が見られる

(図2) 回転する地球アニメーションのムービークリップの中身。「map」レイヤーに48コマの地球の画像が入っている。地球が透けて裏側が見えるように、「map_ura」レイヤーには反対側の画像を左右反転させて入れてある

(図3) フラッシュの作業画面には、このように見えないボタンが水色で表示される。実際は、このボタンが入ったムービークリップがマウスに合わせて移動している。地球上でドラッグされると開始点でこのムービークリップは止まり、マウスの移動量に合わせて制御ムービークリップのフレームを移動させる

 (図4) 制御用ムービークリップの中身。ボタンムービークリップからの指示で、このクリップ内の対応するフレームへ移動する。たとえば、「-2」というラベルには、「」といった地球回転ムービークリップをコントロールするアクションが入っており、これによって地球が左方向へ2コマ移動する
協力:シバタコウジ(Flash制作、執筆)
|