チュートリアル 3：インタラクティブオーバーレイの追加

検索
Digital Publishing Suite マニュアル
対象アプリケーション: Adobe InDesign Digital Publishing Suite

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

このチュートリアルは、TutorialAssets フォルダー内の CityGuide_Folio フォルダーを使って進めます。インタラクティブオブジェクトは InDesign で直接作成します。このレッスンを終えると、iPad 上にメイン記事の先頭ページがこのように表示されます。

final_enjoy
完成後の Folio ファイルを iPad で表示したところ

A. 横置き版（横長）の表示 B. 縦置き版（縦長）の表示 C. ハイパーリンク D. ビデオオーバーレイ 

まだ実行していない場合は、チュートリアルのアセットをダウンロードします。チュートリアルのセットアップを参照してください。

記事の読み込み

前のレッスンでは、ソースドキュメントを開いて「記事を追加」をクリックすることで、記事を作成しました。もう 1 つの方法は、記事を読み込むことです。適切なフォルダー構造およびファイル名規則に従うと、単一の記事および複数の記事を読み込むことができます。

記事を読み込む場合は、記事フォルダーを指定します。複数の記事を読み込む場合は、Folio フォルダーを指定します。

  1. 記事を読み込む前に、TutorialAssets/CityGuide_Folio フォルダーにあるソース InDesign ドキュメントを開き、すべてのリンクが更新されていて、ファイルが保存されていることを確認します。

  2. 記事ビューに移動し、Folio Builder パネルメニューから「記事を読み込み」を選択します。

  3. 「複数の記事を読み込み」を選択します。

  4. 場所フォルダーアイコンをクリックし、TutorialAssets/CityGuide_Folio に移動します。「開く」をクリックします。

    CityGuide_Folio フォルダーを選択します（サブフォルダーではありません）。

  5. 「OK」をクリックして CityGuide_Folio フォルダーにある記事を読み込み、サーバーにアップロードします。

  6. WiFi Ad 記事をリストの最後にドラッグ＆ドロップします。

    tut2_imported_1399929493865
    記事を読み込んだ後の Folio Builder パネル

Folio のプロパティを変更する

  1. Folio Builder パネルで、矢印アイコンをクリックして Folio ビューに戻ります。City Guide の Folio を選択し、Folio Builder パネルから「Folio のプロパティ」を選択します。

  2. 「パブリケーション名」に City Guide Monthly と入力します。

    パブリケーション名は Folio 名とは異なります。パブリケーション名は Viewer に表示されます。Folio 名は、リンクやレンディションの設定など、内部の用途に使用されます。

  3. また指定していない場合は、縦置き用に Cover_v.jpg、横置き用に Cover_h.jpg を指定し、「OK」をクリックします。これらのカバー画像は CityGuide_Folio フォルダーに表示されます。

    カバーのプレビューが Viewer ライブラリに表示されます。アプリケーションを公開するためにはカバーのプレビューが必要です。

    tut2_folioprops_1399929493636
    Folio のプロパティダイアログボックス

インタラクティブハイパーリンクの追加

ここで、Enjoy ドキュメントを編集して、インタラクティブオブジェクトを含めます。

InDesign には、多くのインタラクティブ機能が含まれています。ただし、デジタルパブリッシングツールで使用できるインタラクティブ機能は、その一部のみです。サポートされているネイティブ機能に加えて、Overlay Creator パネルには、デジタルパブリッシングツールでのみ使用できるインタラクティブオーバーレイも含まれています。

まず、「D. I. Y. Meet」ロゴのハイパーリンクオブジェクトを作成します。

  1. Folio Builder パネルで、Enjoy_Article のレイアウトビューに移動し、「縦置きレイアウト」をダブルクリックして Enjoy_v.indd を開きます。

  2. ツールバーの長方形ツールを選択し、最初のページの「D. I. Y. Meet」ロゴ上に長方形をドラッグします。長方形内に線や塗りが含まれていないことを確認します。

  3. ハイパーリンクパネル（ウィンドウ／インタラクティブ／ハイパーリンクを選択）を開き、パネルメニューから「新規ハイパーリンク」を選択します。

  4. リンク先メニューから「URL」を選択し、「URL」フィールドに URL アドレスを入力します。この例では http://www.bikeworks.org/ を使用しています。「共有のハイパーリンク先」の選択を解除します。「外観」の「表示不可能な長方形」と「なし」は選択したままにします。「OK」をクリックします。

    hyperlink_native_1399929493412
    長方形フレームへのハイパーリンクの適用

  5. Folio Builder パネルで、「横置きレイアウト」をダブルクリックして Enjoy_h.indd ドキュメントを開きます。Enjoy_v.indd ファイルから Enjoy_h.indd ファイルにハイパーリンクオブジェクトをコピー＆ペーストします。「D.I.Y. Meet」ロゴ上にオブジェクトを移動します。

  6. ドキュメントをすばやくプレビューするには、ドキュメントを保存して、ファイル／Folio のプレビューを選択します。ハイパーリンクをクリックします。次に、Adobe Content Viewer を終了します。

デフォルトでは、ハイパーリンクはモバイルブラウザーではなく、アプリケーション内 Viewer で開きます。Overlay Creator パネルを使用すると、 モバイル Safari で Web サイトが開くように設定を変更できます。Overlay Creator パネルについては、次に説明します。

ムービーオーバーレイの作成

InDesign ドキュメントに追加したムービーは、ファイルをバンドルするとインタラクティブになります。ビデオを追加し、Overlay Creator パネルを使用して設定を変更します。サイクリングムービーを追加します。

  1. Enjoy_h.indd ファイルで、ファイル／配置を選択し、CityGuide_Folio/Enjoy_Article/Links フォルダーに移動し、cycling_432x234.mpg をダブルクリックします。ムービーファイルを右上隅に配置します。

    ビデオ画像がデザイナーによって作成されています。ムービーアイコンはオブジェクトがインタラクティブであることを示します。次に、その画像をポスターとして使用します。

  2. メディアパネル（ウィンドウ／インタラクティブ／メディア）で、ポスターポップアップメニューから「画像を選択」を選択します。CityGuide_Folio/Enjoy_Article/Links フォルダーで cyclist.jpg をダブルクリックします。

    新しいポスター画像が表示されます。次に、Overlay Creator パネルを使用して、ムービーの再生方法を決定します。

  3. ウィンドウ／エクステンション／Overlay Creator を選択して Overlay Creator パネルを開きます。

  4. ムービーオブジェクトを選択したまま、Overlay Creator パネルで「タップでコントローラーを表示」を選択します。

    tut2_movie_overlay_1399929493712
    Overlay Creator を使用したムービー設定の編集

  5. 選択ツールを使用して画像をコピーし、Enjoy_v.indd に切り替えて、画像を貼り付けます。画像を最初のページの空の領域に移動し、周囲のオブジェクトと整列させます。

  6. ムービーをプレビューするには、ドキュメントを保存し、ファイル／Folio のプレビューを選択します。ムービーをクリックして再生します。次に、Adobe Content Viewer を終了します。

スライドショーオーバーレイの作成

オブジェクトステートパネルを使用してインタラクティブなスライドショーを作成します。縦置き版の "Enjoy" ファイルの 2 ページ目に画像を既に追加しました。スタック内でこれらの画像の配置を変更し、マルチステートオブジェクトに変換して、スライドをナビゲートするためのボタンを作成します。

  1. InDesign で Enjoy_v.indd を開き、2 ページを開きます。

  2. 赤い矢印間の 7 つの画像を選択し、コントロールパネルの「水平方向中央揃え」ボタンと「垂直方向中央揃え」ボタンをクリックします。矢印間の画像を中央揃えにします。

  3. 画像を選択したまま、ウィンドウ／インタラクティブ／オブジェクトステートを選択し、オブジェクトステートパネルを表示します。「選択範囲をマルチステートオブジェクトに変換」ボタンをクリックします。

    mso_1399929493477
    画像を結合したマルチステートオブジェクト

    各画像がオブジェクトステートパネルに個別のステートとして表示されます。

  4. オブジェクトステートパネルで、オブジェクト名を Sea Slugs に変更します。

    横置き版と縦置き版のドキュメント内のマルチステートオブジェクトのオブジェクト名が同じになると、iPad を回転させたときにステートが記憶されます。次に、作成したマルチステートオブジェクトをユーザーがスクロールできるようにします。

  5. ウィンドウ／インタラクティブ／ボタンを選択してボタンパネルを表示し、左側の赤い矢印を選択します。

  6. 「オブジェクトをボタンに変換」をクリックし、「アクション」の横のプラスアイコンから「前のステートに移動」を選択します。

    navbutton_1399929493557
    ナビゲーションボタンの作成

    ユーザーがタップしたときにボタンの外観が少し変わるようにします。

  7. ボタンパネルで「クリック」をクリックし、コントロールパネルでドロップシャドウアイコンをクリックします。

  8. 右側の赤色の矢印を選択して、ボタンに変換し、次のステートに移動アクションを適用します。[クリック] の外観をドロップシャドウにします。

    このボタンを使用して、ユーザーはタップ操作によって画像から別の画像に移動できます。さらに、スワイプ操作でスライド間を移動できるようにしてみましょう。

  9. マルチステートオブジェクトを選択します。Overlay Creator パネルで、「スワイプ操作でステートを変更」を選択します。

    tut2_slideshow_swipe_1399929493171
    スライドショーのスワイプの有効化

  10. 矢印とマルチステートオブジェクトを Enjoy_v.indd ファイルから Enjoy_h.indd ファイルのページ 2 にコピーして貼り付けます。マルチステートオブジェクトの下にある矢印の位置を調整します。

  11. スライドショーをプレビューするには、ドキュメントを保存し、ファイル／Folio のプレビューを選択します。ナビテーションボタンをクリックしてスライド間を移動します。次に、Adobe Content Viewer を終了します。

パノラマオーバーレイの作成

パノラマでは、立法体の面に相当する 6 枚の画像が必要です。

  1. Enjoy_v.indd を開き、ページ 3 に移動します。

  2. ツールボックスの長方形フレームツールを選択し、ドラッグ操作によって任意のサイズの長方形を作成します。

  3. Overlay Creator パネルで「パノラマ」を選択します。

  4. Source フォルダーをクリックし、CityGuide_Folio/Enjoy_Article/Links フォルダー内の CourtyardPano フォルダーを選択します。「開く」をクリックします。

    プレースホルダーの長方形はパノラマ画像のシェイプを想定していますが、ここではクリック領域を小さくする必要があります。

  5. Ctrl + Shift キー（Windows）または Command + Shift キー（Mac OS）を押しながら、選択ハンドルをドラッグしてパノラマオブジェクトのサイズを変更し、約 400 x 400 ピクセルになるようにします。

    tut2_pano_1399929493784
    パノラマオーバーレイの作成

    パノラマのデフォルト設定を使用して、全範囲に移動できるよう設定してみます。

  6. パノラマオブジェクトを Enjoy_v.indd ファイルから Enjoy_h.indd ファイルのページ 3 にコピーして貼り付けます。

  7. InDesign ファイルを保存して閉じます。

iPad での Folio のプレビュー（Mac OS のみ）

次は、「デバイスでプレビュー」機能を使用して、Folio をプレビューします。Windows コンピューターを実行している場合、ファイルのアップロードとダウンロードを通じたプレビュー方法については、次のセクションに進んでください。

  1. Adobe Content Viewer をまだインストールしていない場合は、iPad で App Store からインストールします。App Store で「Content Viewer」を検索します。

  2. iPad を Mac OS コンピューターに接続し、Adobe Content Viewer アプリケーションを起動します。

  3. Folio Builder パネルで、先ほど作成した City Guide の Folio に移動します。

  4. パネルの下部で、プレビュー／[iPad デバイス名] でプレビューを選択します。

  5. City Guide Magazine の Folio を表示します。

    • iPad を回転させて、ファイルの横置き版と縦置き版を両方とも確認します。

    • 左右にスワイプして異なる記事を表示します。上下にスワイプすると、記事を読むことができます。

    • Enjoy 記事を参照して見つけます。インタラクティブオーバーレイが動作することを確認します。

    • 非インタラクティブ領域をタップし、ナビゲーションバーを表示します。ホームボタンをタップし、Folio ファイルの先頭に移動します。左上隅の目次ボタンをタップして、目次とサムネイルを確認します。スクラバーをドラッグして記事のプレビューをスクロールします。

    viewer_widgets_1399929493303
    Adobe Content Viewer で、タップしてナビゲーションバーを表示します。

ファイルのアップロードおよびプレビュー

Folio Builder パネルにサインインし、Folio をアップロードしてから、ダウンロードすることでも、iPad で Folio をプレビューできます。

  1. Folio Builder パネルで、パネルメニューから「サインイン」を選択します。その後、DPS で利用可能なことが確認済みの Adobe ID を使用してサインインします。

    Creative Cloud に登録している場合は、Creative Cloud の証明書を使用します。Creative Cloud に登録していない場合は、http://digitalpublishing.acrobat.com にサインインし、プロンプトに従ってアカウントを確認します。

  2. サインイン後、パネルで City Guide の Folio を選択してから、パネルメニューから「Folio Producer にアップロード」を選択します。

    Folio アセットが acrobat.com サーバーにアップロードされます。

  3. Adobe Content Viewer をまだインストールしていない場合は、iPad で App Store からインストールします。

    注意：

    Android タブレットや Kindle Fire など別のモバイルデバイスがある場合は、Google Play Store または Amazon Appstore から Adobe Content Viewer をダウンロードできます。

  4. iPad で、Adobe Content Viewer を起動します。

  5. まだサインインしていない場合は、「サインイン」ボタンをタップします。Folio Builder パネルへのサインインに使用したものと同じ Adobe ID 情報を使用してサインインします。

    サインインするには、iPad がインターネットに接続されている必要があります。

  6. プロンプトが表示されたら、City Guide Magazine の Folio をダウンロードして表示します。

    InDesign ソースドキュメントのいずれかを編集した場合は、記事を選択し、パネルメニューから「更新」を選択して、記事を更新します。iPad 上の Adobe Content Viewer で、更新した Folio をダウンロードするように求められます。

次のステップ

ここでは、記事と Folio の作成、インタラクティブオーバーレイの追加の基礎について学習しました。オーバーレイおよびその他の DPS の機能について詳しくは、次のいずれかを実行してください。

  • Overlay_Examples_Folio 内のソースドキュメントを開き、様々なオーバーレイアセットを試します。ドキュメント内の既存のオーバーレイを編集するか、独自のオーバーレイを作成することができます。

  • 無料の Digital Publishing Suite Tips アプリケーションをダウンロードします。iPad または iPhone の App Store で「Digital Publishing Suite Tips」を検索してください。または、同じ検索を Android デバイスの場合は Google Play Store で、Kindle Fire の場合は Amazon AppStore で行ってください。

  • アプリケーションを Apple App Store に公開することもできます。Adobe Creative Cloud に登録している場合は、iPad 用の単一 Folio アプリケーションを無制限に作成して送信することができます。または、Single Edition ライセンスを購入しても、単一 Folio アプリケーションを作成できます。アプリケーションを作成する準備が整ったら、Folio Builder パネルで Folio を選択し、パネルメニューから「アプリケーションを作成」を選択します。Step-by-Step Publishing Guide をダウンロードするように求められます。このガイドの指示に従って最初のアプリケーションを作成します。

  • 複数 Folio アプリケーションを作成する場合は、Digital Publishing Suite の Professional 版または Enterprise 版のサブスクリプションを購入できます。