Edge Animate で DPS 用のアニメーション作り

InDesign と DPS を使って電子出版コンテンツを制作する際に、その中に含めるアニメーションやインタラクティブなインターフェイスを、Edge Animate を使って作る方法が以下のアーティクルに紹介されています:

Enhance your DPS folios with HTML animations using Adobe Edge

by Raghu Thricovil
Adobe Developer Connection / Digital Publishing, 15 May 2012

ここでは InDesign CS6 や、未だプレビュー版だった頃の Edge Animate をベースに紹介してますが、最新の InDesign CC と DPS、Edge Animate CC を利用しても有効なコンテンツですので、かいつまんでご紹介したいと思います!

Edge Animate CC で作成したアニメーションを、InDesign CC および DPS で利用できるように書き出す

ここでは、サンプルとして Edge Animate のファイル edgefiles.zip が提供されています。ダウンロードして Edge Animate CC で開いてみましょう。

図1. サンプルを Edge Animate CC で開いたところ

ポスターイメージの設定

DPS ビューワー上で、アニメーションを動かすためにクリック (タップ) するポスターイメージを作成します。ポスターイメージとして表示させたい画面としてタイムラインで 0:02.250 にヘッドを動かします。

図2. タイムラインの 2.25 秒のポイントをポスターイメージに

エレメント パネルで Stage が選択されていることを確認して、プロパティ パネルのポスター セクションにあるカメラ アイコンをクリックしてポスターイメージをキャプチャーします。ライブラリ パネルに Poster.png が追加されたことを確認してください。

図3. ポスターイメージのキャプチャー

OAM ファイルの書き出し

Edge Animate から InDesign への書き出しは .OAM というファイル形式で行います。[ファイル] メニュー > [パブリッシュ設定…] を選びパブリッシュ設定ダイアログを出します。[Animate デプロイメントパッケージ] タブを選択し、ポスターイメージとして Poster.png が選択されていることを確認します。

図4. Edge Animate で作成したアニメーションを InDesign/DPS へ書き出す

[パブリッシュ] ボタンをクリックすると、.edge ファイルのあるフォルダと同じ箇所に [dps] というフォルダが作成され、その中に [Jams.oam] というファイルが生成されます。

InDesign CC with DPS でアニメーション作成

ここでは、indesignfiles.zip が提供されています。ダウンロードして InDesign CC で開いてみましょう。

アニメーションコンテンツの配置

[ファイル] メニュー > [配置…] を選択し、該当の .OAM ファイルを選びます。任意の場所に配置し、位置を調整してください。設定したポスターイメージが表示されているのをご確認ください。テキストの回り込み パネルで [境界線ボックスで回り込む] アイコンをクリックします。

図5. InDesign 上で Edge Animate で作成したアニメーションを配置したところ

コンテンツをプレビュー

Folio Builder パネルを開き、新しい Folio を作成、「Spring Jams」という名称を付けます。

図6. Folio Builder パネルを使って新しい folio を作成

[記事を追加] アイコンをクリックして [開いている InDesign ドキュメントを追加] します。これでプレビューできるようになりました。Folio Builder パネルよりプレビューを選び、任意の方法でプレビューを行ってみてください。InDesign CC と DPS の組み合わせでは、USB 接続された iPad で実機プレビューを行うことができます。

図7. Folio Builder パネルのプレビュー ボタン

図8. iPad でプレビュー

Creative Cloud メンバーシップには、ここでご紹介した内容を行うためのツールがすべて含まれています。是非おためしください!