第6回　動きのあるWebページを作る 仕事に使えるグラフィックス入門

「Adobe Illustrator 10」と「Adobe LiveMotion 2.0」を使って、動きのあるインタラクティブなWebページを作ってみよう。さらに、Webサイトの管理には「Adobe GoLive 6.0」を使うと便利だ。

Tips1　IllustratorファイルをLiveMotionで読み込む

インタラクティブな
アニメーションするWebを作る

画面1　LiveMotion 2.0とGoLive 6.0で作成したWebページのサンプルだ。http://www.a2shi.tv/howtobg/final/ にアクセスして実際の動きを確かめて欲しい。リンク先のページにはアニメーションこそないが、実際に稼動している小生が作成したページだ。

	「仕事に使えるグラフィックス入門　第5回」(from 月刊アスキー)。写真をクリックすると当該記事に移動します。	「Adobe Illustrator 10 日本語版」レビュー(ASCII24 Reviewオリジナル)。

　最終回の今回は動きのあるWebページを、Illustrator 10とLiveMotion 2.0、そしてGoLive 6.0で作ってみようと思う。

　動きのあるWebページとはいっても、誌面では動きを理解してもらうことができないので、http://www.a2shi.tv/howtobg/final/にアクセスして、どんなものなのかをまずは確認して欲しい。そこには画面1のようなページがアップされている。ポイントは画面中央にある大きなロゴマークと、その右側にある9つのアイコンだ。ページを開くと、それらがくるくる回りながら移動して定位置に落ち着くはずだ。そう、Flash形式のインタラクティブムービーが仕込まれているのである。ただのアニメーションではつまらないので、簡単ではあるがアイコンをメニューにしてみた。アイコンをマウスでポイントすると色が変わり、そのアイコンの説明が別の場所に表示され、クリックすると別のページにジャンプするわけだ。今の時代、Flash形式を採用したWebページは珍しくもないが、いざ自分で作るとなると結構面倒だと感じている人も多いのではないだろうか。そこで、お勧めなのがAdobe LiveMotion 2.0だ。比較的簡単な操作で、インタラクティブなアニメーションページを作成できるのである。LiveMotionには、Illustratorと同じドローツールがあり、Illustratorと同じベクタデータのイラストを描くことができる。ただ、その機能自体をIllustratorと比べると、やはり物足りない。Illustratorを持っているのであれば、アニメーションするマークやアイコンはIllustratorで作成し、LiveMotionに読み込むというのが最も簡単で便利な手段といえるだろう。

　それではまず、画面2のようなロゴマークをIllustratorで描き、画面3から6の手順でLiveMotionに読み込ませてみよう。

画面2　Illustrator 10でロゴマークを作成する。LiveMotionで個別のオブジェクトとして扱いたいときは、個々にレイヤーを分けておく。ここではマークが白なので便宜上背景色を指定しているが、実際には必要ない。

画面3　ロゴマークを保存したらLiveMotionを起動して、「ファイル」→「新規コンポジション」を選択。アニメーションを表示させたい領域をピクセル単位で入力して「OK」ボタンをクリックする。フレームレートはそのまま。

画面4　新規コンポジションが表示されたら、「カラーパレット」で背景をクリックして、好みの色を設定する。ここで注意するのは、カラースライダーではWebセーフカラーを設定できないことだ。ここで設定したRGBの数値を覚えておき、GoLiveで設定する背景色もRGBで指定する必要がある。

画面5　「ファイル」→「配置」を選択して、画面2で保存したIllustratorファイルをLiveMotionに読み込む。

画面6　Illustratorファイルが読み込まれるので、位置とサイズを調整する。

Tips2　LiveMotionでアニメーションの動きを設定する

図形を拡大縮小させるには必ず
オブジェクトをパスに変換する

　LiveMotionは、タイムラインという時間軸の上に、オブジェクトをどのように変形させるかを指定したキーフレームを設定することで、アニメーションを実現している。例えばスタート時点でオブジェクトを右下隅に10×10pixelのサイズで置くキーフレーム、1秒後に左上隅に100×100pixelのサイズになるキーフレームを設定すると、0〜1秒の間のオブジェクトの位置とサイズの変化を自動的に処理してアニメーションにしてくれるわけだ。この基本的な概念が理解できれば、後はいろいろ試して工夫していけばいい。ここで注意するのは、まずIllustratorのファイルを画面7の手順でパスに変換しておくこと。これをせずにオブジェクトを拡大するアニメーションを設定すると、ジャギーが発生して画質が劣化することになる。

画面7　画面6で読み込んだオブジェクトが選択されている状態で、「オブジェクト」→「レイヤーを分割」→「パス」を選択。これでIllustratorのオブジェクトがLiveMotionのパスに変換され、拡大縮小のアニメーションを設定しても画質が劣化することがなくなる。	画面8　オブジェクトを選択して「スタイル」パレットのドロップシャドウを適用する。次にタイムライン上のコンポジション全体の「継続時間バー」を右方向に(03sまで)ドラッグして、アニメーションの全体の時間を指定する。オブジェクトの「継続時間バー」は自動的に伸びるはずだ。
画面9　オブジェクトが選択された状態で、タイムラインの「時間マーカー」を「01s」(1秒)の位置に移動して、「変形」の「位置」、「回転」、「スケール」をクリックする。これで、1秒後のオブジェクトの位置とサイズ、傾きを設定したことになる。	画面10　「時間マーカー」を「00s」に移動してから、オブジェクトを選択する。オブジェクトの周囲に「■」付きの矩形が表示されているので、「Shift」キーを押しながら右下の「■」をドラッグしてサイズを縮小する。次に、画面のように右下の表示領域の外まで、オブジェクトをドラッグして移動しておく。さらに、「変形」パレットの指定の位置に「-360」と入力する。

画面11　画面9と10の設定をすると、画面右下からオブジェクトが左回転しながら登場し、左上の隅に向かって拡大しながら移動していくアニメーションが完成する。タイムラインの再生ボタンをクリックすると、そこまで設定したアニメーションをプレビューできる。

• IllustratorファイルをLiveMotionで読み込む／アニメーションの動きを設定
• 説明が表示されるメニューボタンを作る／アニメーションを書き出してGoLiveで編集！