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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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