こんにちは、デジタルスケープの伊藤和博です!

今週も、前回に引き続きInDesignの新機能に関してご紹介していきます。

今回は、インタラクティブ関連の新機能である「アニメーション」パネルと「タイミング」パネルを使った「モーションプリセット」についてご紹介していきます。


「モーションプリセット」を使ってみよう


InDesign CS5では、Flashに搭載されている「モーションプリセット」という機能を搭載しました。

モーションプリセットとは、「作成済みのアニメーション」のことで、すでに登録されているアニメーションや、独自に作成・登録したアニメーションを、ワンクリックで利用できる機能のことです。代表的なアニメーションでは、オブジェクトが徐々に消えていくような様子をアニメーションにした「フェードアウト」、オブジェクトを徐々に表示しながら、画面の4辺のいずれかから登場する「フライイン」などがあります。

InDesign上で作成した様々なオブジェクトに対してアニメーションの設定を行うことが可能で、InDesign上に作成した通常のオブジェクトの他、画像やテキストが貼り込まれたフレームにもアニメーション設定を行うことが可能です。

では、さっそくやってみよう!

まず、InDesign上で任意のオブジェクトを作成します。通常のプリント用データを作成するように作成して問題ありませんが、出来上がったデータはSWF形式で書き出すため、ドキュメントプロファイルはWebで作成します。



その後、通常のInDesignデータを作成するように、ドキュメントを作成します。今回は、以下のようなドキュメントを作成しました。

AIのイラスト、PSの画像、テキストデータのみで構成されており、1つ1つのオブジェクトはフレームの中に貼り込まれていますが、左側にある飛行機と地球のイラストは、AIから直接コピーペーストで配置したもので、フレームの中には入っていません。



1つ1つのフレームやオブジェクトに対して、それぞれ異なるアニメーションを設定することが可能です。ウインドウメニュー→インタラクティブ→アニメーションを選択し、アニメーションパネルを表示します。

アニメーションを設定するフレームやオブジェクトを選択し、そのオブジェクトに対して、アニメーションパネルで「名前」「プリセット」を設定します。必要に応じて、アニメーションする時間の長さ、時間とともに濃度を変更する不透明度、アニメーションのループなどを設定します。

テキストフレームを選択すると、そのフレームに入力されているテキストが、そのままそのフレームに対する名前として定義されます。どのようにアニメーションを行うかは、プリセットの中から任意に選択することができ、モーション(動き)は、アニメーションパネルの上部にある蝶が、プレビュー見本としてアニメーションします。


オブジェクトの動く軌跡は、ペンツールで描いた線や、四角形に沿ってアニメーションすることが可能です。

お好みのツールで動作の軌跡を曲線で描き、その線と動かすオブジェクトの両方を選択し、アニメーションパネルの「モーションパスに変換」をクリックします。


最後に、再生する順番を設定します。レイヤーの順番を入れ替えるときと同じように入れ替えます。タイミングパネルの下にあるプレビューパネルを表示をクリックすると、プレビューパネルでアニメーションの確認ができます。


以下が、InDesignからアニメーションパネルで作成したサンプルです。再生は「ページ読み込み時」に設定していますので、アニメーションが終了したら、ページを再読み込みしてみてください。


マルチステート+ページめくり




もっとInDesign CS5 を使いこなすなら!
InDesign CS5の使い方・基本トレーニングの受講がオススメです!




イトウ先生が、Twitterを始めました!
みなさんもぜひ、フォローしてくださいね!

http://twitter.com/itoh_sensei