このページの本文へ

前へ 1 2 次へ

仕事に使えるグラフィックス入門

仕事に使えるグラフィックス入門

2003年03月15日 04時11分更新

文● 薮田 織也

  • この記事をはてなブックマークに追加
  • 本文印刷

仕事に使えるグラフィックス入門

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/ にアクセスして実際の動きを確かめて欲しい。リンク先のページにはアニメーションこそないが、実際に稼動している小生が作成したページだ。
仕事に使えるグラフィックス入門 Adobe Illustrator 10 日本語版
「仕事に使えるグラフィックス入門 第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に読み込ませてみよう。



ロゴマークを作成 LiveMotionを起動
画面2 Illustrator 10でロゴマークを作成する。LiveMotionで個別のオブジェクトとして扱いたいときは、個々にレイヤーを分けておく。ここではマークが白なので便宜上背景色を指定しているが、実際には必要ない。画面3 ロゴマークを保存したらLiveMotionを起動して、「ファイル」→「新規コンポジション」を選択。アニメーションを表示させたい領域をピクセル単位で入力して「OK」ボタンをクリックする。フレームレートはそのまま。
好みの色を設定
画面4 新規コンポジションが表示されたら、「カラーパレット」で背景をクリックして、好みの色を設定する。ここで注意するのは、カラースライダーではWebセーフカラーを設定できないことだ。ここで設定したRGBの数値を覚えておき、GoLiveで設定する背景色もRGBで指定する必要がある。
LiveMotionに読み込む 位置とサイズを調整
画面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の設定をすると、画面右下からオブジェクトが左回転しながら登場し、左上の隅に向かって拡大しながら移動していくアニメーションが完成する。タイムラインの再生ボタンをクリックすると、そこまで設定したアニメーションをプレビューできる。

仕事に役立つグラフィックス用語

─その1─
■ Adobe LiveMotion
Flash形式のアニメーションを作るだけのツールだった前バージョンから、2.0ではスクリプトまで組める高機能なツールに変身。ここではスクリプトを組まずにインタラクティブアニメーションを作ってるけどね。
■ Adobe GoLive
高度なサイト管理機能を持ったWebオーサリングツール。Webページのデザイン性を重視するユーザーに最適ともいえるソフト。
■ RGBとWebセーフカラー
RGBは赤、緑、青の各色の濃度を0~255までの256段階で分けて表現する、つまり256の3乗で1677万7216色使えることになる。だが、PCとMacintoshとでは同じRGBの設定でも違う色が使われている。こうした問題に対応するためにWebセーフカラーは生まれた。Webセーフカラーは赤、緑、青の各色の濃度を0~5の6段階に、つまり6の3乗で216色で表現する。各種Webブラウザはこの色を優先するので、Webセーフカラーを使っていれば、PCとMacintosh間で同じ色を表現できるようになる。
■ ジャギー
画像をドット(点)の集まりとして表現するとき、解像度が低いと斜めの線に階段状のギザギザが現われる。このギザギザをジャギーと呼ぶ。
■ キーフレーム
LiveMotionで、オブジェクトの各種状態を記録するフレームで、タイムライン上に作成する。LiveMotionでアニメーションを作るには、ぱらぱら漫画のように一コマずつ指定する必要はなく、ある時間間隔の両端でキーフレームを指定することで、その間のモーションはLiveMotionが自動的に作成してくれる。

前へ 1 2 次へ

カテゴリートップへ

注目ニュース

ASCII倶楽部

プレミアムPC試用レポート

ピックアップ

ASCII.jp RSS2.0 配信中

ASCII.jpメール デジタルMac/iPodマガジン