Adobe Web Special Pack

Adobe Web Special Pack

アドビシステムズ

オープン
(Adobe Store価格 2万4800円)

• カスタマーインフォメーションセンター
• 03-5350-0407
• http://www.adobe.co.jp/

アドビシステムズは、Webアニメーションツール「LiveMotion」とWebページ作成ソフト「GoLive 5.0」、フォトレタッチソフト「Photoshop Elements」をセットにした「Adobe Web Special Pack」を2万4800円という低価格で提供している。すべてを単体でそろえると4万7600円かかるところ、ほぼ半額で提供しているのだからコストパフォーマンスは高い。各ソフトの詳細は個々のレビュー記事に詳しいので、ここではこれら3本のソフトウェアを利用し、実際にWebページを作成していく手順を紹介していこう。

　今回作成するのは、撮影したデジタルカメラの画像をギャラリー風に公開するWebサイトだ。凝ろうと思えばいくらでも凝ったものを作れる題材だが、ここではAdobe Web Special Packを使って手早く作ってみたい。

最初はLiveMotionでタイトル作り

　まずはタイトル作りだが、せっかくLiveMotionが用意されているので、ぜひともSWF(Shockwave Flash)形式で動きのあるタイトルを作っておきたい。今回作成したのは、お気に入りの写真1枚が最初にジワジワと表示され、その後にタイトル文字が現れる、というもの。

四角形の画像に対して円のマスクを適用したところ。こうしてグループ化した状態でも、マスクとして指定した円にアニメーション効果を適用することが可能だ。

　まず“ジワジワと表示される写真”から作成していこう。LiveMotionのキャンバス上に表示したい画像を配置し、その上に楕円形ツールを使って円を描く(色は何でも構わない)。続けて画像と円の両方を選択して「オブジェクト」メニューから「グループ化」を選択、さらに同じメニュー内にある「最前面のオブジェクトをマスクに変換」を実行する。これで描画した円がマスクとなり、最初に配置した画像が丸く切り抜かれたように表示される。

　続いて画像がジワジワと表示されるように、マスクにした円に対してアニメーション処理を施す。まずタイムラインウィンドウを開き、「マスクに変換したグループ」－「変形」内にある「オブジェクトの不透明度」のストップウォッチアイコンをクリックする(時間を追って変化させるため)。次に不透明度パレットのオブジェクトの不透明度の値を1にすると、マスクがほぼ完全に透明になり、最初は画像が表示されない状態になる。この後タイムラインウィンドウの再生ヘッドを2秒のところに移動して、不透明度を100にセット。これで2秒かけてマスクの属性が透明から不透明に変化し、画像が徐々に現れてくるというアニメーションが完成する。

テキストが下側から徐々に表示されていく途中の様子。下のタイムラインウィンドウを見ていただければわかるとおり、ごくごく簡単な処理しか使っていない。なおサンプルではレイヤーを使って文字に影を付けている。

　同じ要領で、タイトル文字が下から徐々に現れてくるアニメーションを作ろう。再生ヘッドが2秒のところにあることを確認してから、キャンバスの上に文字を配置し、さらにその文字と同じ横幅で高さは5ドット程度の長方形を文字の少し上あたりの位置に描画する。この文字と長方形もやはりグループ化し、最前面のオブジェクト(長方形)をマスクに変換を実行しておく。次に長方形を文字の1番下の部分まで移動、その後文字と同じ長さに大きさを変更するようにアニメーションを設定する。これでスリットから覗くように上から下に文字が表示され、続いて文字の下側から徐々に全体が表示されていく、というアニメーションになる。このようにマスクを使ったアニメーションは、アイデア次第で多様な見せ方ができるので、ぜひマスターしておこう。
　これでタイトル部分のアニメーションは完成だ。