LiveMotionでボタン作り
せっかくなので、LiveMotionで3Dボタンも作ってみよう。LiveMotionではいくつかの方法で3D表示のボタンを実現できるが、ここではレイヤーを使って作成してみる。
まず、テキストツールでキャンバスの上に文字を置き、その文字に対して影を作る。影の作り方はオブジェクトパネルの「新規作成」ボタンをクリックして新しいレイヤーを作成する。これで、元のレイヤーと同じ形で描画色が黒になったレイヤーが作成される。続いて作成したレイヤーを選択し、レイヤーパレットでXオフセット(左右へのずらし値)とYオフセット(上下へのずらし値)をそれぞれ5に、幅を2、ぼかしを5に設定して影にあたるレイヤーを作る。これで、影つきボタンの完成だ。
 |
|---|
| 上がクリックする前、下がクリックしているときの画像。ロールオーバーパレットを利用することで、こうしたボタンを簡単に作成できる。なおレイヤー1の文字に対してカットアウトの3D効果を与えて、影の中に文字がめり込んでいるように見せることもできる。 |
次にdownを選択し、さらにオブジェクトパレットでレイヤー1(文字)を選ぶ。ここでレイヤーパレットを開いて、XオフセットとYオフセットをそれぞれレイヤー2(影)と同じ5に設定する。すると浮いているボタンがクリックされて沈んだように見える。
最後に、Webパレットでクリックされたときに表示するリンク先のURLを記述する。このとき特定のディレクトリの下にある「index.htm」を参照するように指定しておく。例えばphotoディレクトリの下にあるindex.htmを参照するよう、「photo/index.htm」などと指定しておく。これは後で解説するPhotoshop ElementsでのHTML出力に合わせるためだ。こうしてタイトルとボタンを作成したら、SWF形式でエクスポートを行う。なお、LiveMotionはSWF形式のファイルを読み込んでの再編集ができないので、念のため同じファイルをLiveMotion形式でも保存しておこう。
