必要な知識

この文書では、ユーザーが Adobe Digital Publishing Suite および InDesign についての基本的な知識を持ち、かつ Digital Publishing Suite アカウントを持っていると仮定し説明しています。

  • InDesign CS6 および Digital Publishing Suite の最新のツール
  • Professional または Enterprise の Digital Publishing Suite アカウント

 

必要な製品

追加の製品 (サードパーティ/labs/オープンソース)

サンプルファイル

Adobe Edge は、HTML5、JavaScript、CSS3 を使用して、モバイルおよびデスクトップ向けの Web アニメーションを作成するためのデザインツールです。Edge は Web 標準のアニメーションを生成するため、Android や iOS などのモバイルプラットフォーム向けの ADPS コンテンツに導入することもできます。

この文書では、Edge アニメーションを書き出し、InDesign CS6 に読み込んで、ADPS の記事にアニメーションを埋め込む手順について説明しています。

注意 : この書き出し機能は、InDesign CS6 と Adobe Edge プレビュー 6 以降の組み合わせでのみ有効です。

A. InDesign/ADPS 用に Edge アニメーションを書き出し

Edge をインストールし、edgefiles.zip ファイルを解凍して、書き出しするアニメーションを確認します。Jams.edge ファイルをダブルクリックするか、またはファイル/開くを選択して Jams.edge ファイルを開きます。ファイルにはアニメーションが設定されています。ファイル/ブラウザーでプレビューを選択して、アニメーションをプレビューすることができます。

Adobe Edge Preview 6 で開かれたコンポジション

A-1. ポスターイメージの設定

DPS ビューワー内で Edge アニメーションをアクティブにするには、ユーザーが要素をクリックする必要があります。そのため、ポスターイメージを作成する必要があります。

はじめに、再生ヘッドを 0:02.250 に移動します。この位置の画像をポスターイメージとして使用します。

タイムラインで 2.25 秒の位置に合わせます

エレメントパネルで「Stage」を選択し、プロパティパネルのカメラアイコンをクリックします。「ポスターイメージをキャプチャ」と表示されたら「キャプチャ」ボタンをクリックします。アセットパネルに Poster.png が追加されます。

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

A-2. OAM ファイルの書き出し

Edge から InDesign 用に書き出す場合の形式は .OAM です。パブリッシュ設定から OAM ファイルを生成することができます。

  1. ファイル/パブリッシュ設定を選択します。
  2. 「Animateデプロイメントパッケージ」にチェックを入れます。
  3. 「ポスターイメージ」に images\Poster.png が設定されていることを確認します。
  4. 「パブリッシュ」をクリックします。
InDesign/DPS に対応する Edge アニメーションをパブリッシュします。

 

この操作によって、.edge ファイルと同じ場所に publish フォルダーが生成されます。publish フォルダーには dps フォルダーが含まれており、Jams.oam ファイルはここに保存されます。

パブリッシュ出力の処理

B. InDesign CS6/ADPS でアニメーションを設定

indesignfiles.zip ファイルをダウンロードして解凍します。Spring Jams.indd ファイルを開き、2 ページ目の右上隅に Edge 内メーションを配置します。(テキストには回り込みを設定します。)

B-1. アニメーションの配置

ファイル/配置を選択し .OAM ファイルを選択します。その後、任意の場所に配置し、位置を調節することができます。ポスターイメージが表示されることを確認します。コントロールパレットの「境界線ボックスで回り込む」をクリックすると、テキストの回り込みが設定されます。

Edge アニメーションが配置された InDesign 文書

B-2. デスクトップビューワーでプレビュー

Folio Builder を開き、新規 Folio を作成します。Folio 名を「Spring Jams」とし、方向は「横置き専用 Folio」を選択します。

Folio Builder パネルを使用する新規 folio の作成

Folio を作成したら記事を追加します。記事を追加するとすべてのコンテンツが読み込まれ、プレビューできるようになります。Folio Builder パネルで Folio レベルの階層に移動し、パネル下部の「プレビュー」から「デスクトップでプレビュー」を選択します。Adobe Content Viewer が起動し、デスクトップ上でコンテンツを確認することができます。

Folio Builder パネルを使用して新規 folio の作成

B-3. Adobe Content Viewer for iPad でプレビュー

iPad でプレビューする前に、アニメーションのプリロードに関する問題に対処する必要があります。InDesign 上でアニメーションを選択し、Folio Overlays パネルを開きます。「自動再生」にチェックを入れ、「遅延」を「0.125」秒に指定します。この設定により、アニメーションのプリロードが行われ、表示の遅延を回避することができます。

Folio Overlays パネルで自動再生の設定を行います

 

InDesign ファイルを保存します。その後、Folio Builder パネルで記事を開き、パネルのオプションメニューから「更新」を選択します。

folio のアップデート

 

iPad に接続し、Folio Builder パネルで Folio レベルの階層に移動します。パネル下部の「プレビュー」から「iPad でプレビュー」を選択します。あらかじめ iPad のロックを解除しておいてください。また iPad には Adobe Content Viewer がインストールされている必要があります。

Preview on …. iPad の選択

 

Adobe Content Viewer for iPad では以下のように表示されます。

 

iPad 上で folio とアニメーションをプレビューします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー