Tips3 説明が表示されるメニューボタンを作る
ロールオーバーボタンを
LiveMotionで作成する
マウスでポイントすると、表示が変化するようなボタンをロールオーバーボタンと呼ぶ。LiveMotionでは、こうしたアニメーション効果を比較的簡単な操作で作ることができる。さらに、ボタンをポイントすると、別の場所にあるオブジェクトの表示が変わるといった、リモートロールオーバーの機能もある。ここでは、メニューボタンをポイントすると、まずメニューボタンの色が白から黄色に変わり、そのメニューボタンの内容を示す文章が下部に表示されるようにしてみよう。
まずはIllustratorでボタンの絵柄を作成する(画面12)。これをLiveMotionに読み込んで、画面13のように各ボタンごとにレイヤーに分割する。次にこれらを画面7と同じ手順でオブジェクトをパスに変換する。さらに画面14のようにメニューボタンにアニメーション効果を施し、画面15のようにリモートロールオーバー用の文字を入力すれば準備完了だ。
 |
 | |
|---|---|---|
| 画面12 Illustratorでメニューボタン用のアイコンを作成する。このとき、ボタンごとにレイヤーを分けておこう。また、線オブジェクトはすべてアウトライン化して、パスファインダで合成し、複合パスにしておく必要がある。でないと、LiveMotionでパス化したときにうまくいかないことがあるのだ。 | 画面13 画面12で保存したファイルをLiveMotionに読み込み、「オブジェクト」→「レイヤーを分割」→「オブジェクト」を選択。するとIllustratorでレイヤーに分けたボタンごとにオブジェクト化される。これを再度「オブジェクト」→「レイヤーを分割」→「パス」でLiveMotionのパスオブジェクトに変換する。各オブジェクトの「継続時間バー」を「01s」からスタートさせる。 |
 | 画面14 各メニューボタンの「変形」で「位置」と「回転」を使い、画面下部から上部に向かってメニューボタンが移動してくるアニメーションを作成する。回転する方向やキーフレームの位置をずらして、メニューボタンの動きをコミカルにしよう。 |
|---|
 |
 | |
|---|---|---|
| 画面15 「文字ツール」を使ってメニューボタンを説明するテキストを入力する。メニューボタンにマウスがポイントされていないときは、このテキストが消えているようにするには、「不透明度」パレットの「オブジェクトレイヤーの不透明度」を「0」にする。 | 画面16 テキストが選択されている状態で、「ステート」パレットの「新規ステート」ボタンをクリック。作成されたステートのプルダウンメニューから「カスタム」を選んで「hyouji」と名前を付け、「OK」をクリック。「不透明度」パレットの「オブジェクトレイヤーの不透明度」を「100」にする。 |
Tips4 アニメーションを書き出してGoLiveで編集！
ボタンと連動するテキスト文字
リモートロールオーバーを設定
ボタンを説明するテキストを書いたら、その文字の「不透明度」を「0」にして、画面16のように新規ステートを作成してそちらの「不透明度」は「100」にする。これは、普段はテキストを非表示にしておき、マウスオーバーしたときに表示されるようにする方法だ。これだけでは何も起こらないので、メニューボタン側にもマウスオーバー、ダウン、アウトのステートを追加して、それとテキストに追加したステートをリンクさせてやる。(画面17、18) ちょっと面倒な処理だが、何回かトライしてみて仕組みを理解すれば、後はアイディア次第でもっとユニークなインタラクティブWebページが作れるはずだ。
さて、LiveMotionでのページ作成が済んだら、画面19のようにエクスポート設定をして、Flash形式のswfファイルを書き出そう。このファイルをサイト用のフォルダに保存したら、最後はGoLiveの出番だ。
 |
 | |
|---|---|---|
| 画面17 画面16で作ったテキストとリンクするメニューボタンを選択して、「ステート」パレットに「over」の新規ステートを作成。赤丸で囲んだマークをリンクするテキストまでドラッグすると、メニューボタンとテキストをリモートロールオーバーでリンクできる。 | 画面18 「ステート」パレットで「down」の新規ステートを作成。「Web」パレットにジャンプするURLを入力。次にもう一度テキストを選択して「ステート」パレットで「normal」を選択し、最後にもう一度メニューボタンを選択して「ステート」パレットに「out」の新規ステートを作成。画面17と同様に「ステート」パレットからリンクするテキストまでマークをドラッグする。他のメニューボタン用のテキストを作成し、画面16～18までの操作を繰り返す。 |
 |
|---|
| 画面19 LiveMotionのファイルをswfファイルに出力するための設定を「エクスポート」パレットで行う。 |
GoLiveでswfファイルを配置
操作は極めて簡単
GoLiveはデザイン性を重視したWebオーサリングソフトだ。一番の特長はその独自のレイアウトグリッド。さまざまなオブジェクトを1pixel単位できっちりレイアウトできる。また、swfファイルなどのユーザー側でプラグインを必要とするメディアなどの組み込みも、普通の画像ファイルをレイアウトするのと同じ感覚(画面21)で簡単に配置できる。プロ用の機能が多いが、初心者でも簡単に操作できるのが強みだ。さて、こうして作ったWebページをサイトにアップしたら今回のテーマも終了。全6回という短い連載だったけど、楽しんでいただけただろうか。それではまたどこかで会いましょう。ゴキゲンヨウ！
 |
 | |
|---|---|---|
| 画面20 「ファイル」→「エクスポート」でswfファイルに書き出す。 | 画面21 GoLiveを起動してHTMLファイルにswfファイルを取り込む。「オブジェクト」パレットの「swf」アイコンをHTMLファイルにドラッグ＆ドロップして、「インスペクタ」パレットでファイルを指定するだけだ。後はサイトにアップするだけでOK。 |
仕事に役立つグラフィックス用語
─その2─
- ■ レイヤー
- IllustartorやPhotoshopで、オブジェクトを配置する透明な階層のこと。レイヤーには上下の関係があり、その上下関係がオブジェクト同士の重なり具合に影響する。オブジェクトのあるレイヤーを重ねるのは、切り抜いた絵をビニールシートに入れて重ねるのに似ている。
- ■ パス
- IllustratorやLiveMotionで、ペンツールで描いたオブジェクトのこと。複数のアンカーポイント(制御点)を線で結んで描くオブジェクト。アンカーポイントから出ているハンドルを操作することで線の曲がり具合を調整できる。
- ■ アウトライン化
- Illustratorの機能で、太さのある線を、その太さを輪郭にして閉じられたパスオブジェクトにすることをアウトライン化と呼ぶ。例えば、長さ10mm太さ5mmの直線をアウトライン化すると、10mm×5mmの長方形ができる。
- ■ 不透明度
- オブジェクトを透けさせる加減を百分率で表わしたもの。透明度の逆。不透明度100%はまったく透けていない状態。不透明度0%は何も表示されていない状態。
- ■ パスファインダ
- 複数のパスオブジェクトをさまざまな方法で合成、合体などの組み合わせをする機能。Illustrator10から元の組み合わせ状態を維持したまま、見かけ上合成、合体できるようになった。
- ■ マウスオーバー、ダウン、アウト
- マウス操作で、ボタンオブジェクトの上にマウスをポイントさせることをマウスオーバー、ボタンオブジェクトをクリックすることをマウスダウン、マウスポインタをボタンオブジェクトから外すことをマウスアウトと呼ぶ。
| Adobe Illustrator 10 日本語版の主なスペック | |
| 製品名 | Adobe Illustrator 10 日本語版 |
|---|---|
| OS | Windows 98／Me／2000／XP |
| CPU | PentiumII以上 |
| メモリ | 128MB以上 |
| HDD | 180MB以上 |
