教學課程 3：新增互動覆蓋

在匯入文章之前，請先開啟「TutorialAssets > CityGuide_Folio」檔案夾中的來源 InDesign 文件，以確定所有連結已更新且檔案已儲存。

導覽至文章檢視，並從 Folio Builder 面板選單選擇「匯入文章」。

選取「匯入多個文章」。

按一下「位置」檔案夾圖示，並巡覽至「TutorialAssets > CityGuide_Folio」。按一下「開啟」。

選取「CityGuide_Folio」檔案夾，而非子檔案夾。

按一下「確定」匯入「CityGuide_Folio」檔案夾中的文章，並上傳至伺服器。

將 WiFi Ad 文章拖放至清單結尾。

在 Folio Builder 面板中，按一下箭頭圖示返回對開本檢視。選取「City Guide」對開本，並從 Folio Builder 面板選擇「對開本屬性」。

為「出版物名稱」輸入 City Guide Monthly。

「出版物名稱」和「對開本名稱」不同。「出版物名稱」會出現在檢視器中。「對開本名稱」是供內部用途使用，例如連結與設定轉譯。

如果您尚未這麼做，則請指定 Cover_v.jpg 為垂直而 Cover_h.jpg 為水平，並按一下「確定」。這些封面影像會出現在「CityGuide_Folio」檔案夾中。

封面預覽會出現在檢視器程式庫中。必須要有封面預覽才能發佈應用程式。

在 Folio Builder 面板中，巡覽至「Enjoy_Article」的版面檢視，並按兩下「縱向」版面以開啟「Enjoy_v.indd」。

在工具列中選取「矩形」工具，然後將矩形拖曳到第一頁中「D.I.Y. Meet」標誌的上方。請確定矩形沒有線條或填滿色彩。

開啟「超連結」面板 (選擇「視窗 > 互動 > 超連結」)，然後從面板選單選擇「新增超連結」。

從「連結至」選單選取「URL」，並在「URL」欄位中輸入 URL 位址 (我們使用 http://www.bikeworks.org/)。取消選取「共用超連結目的地」。保持「外觀」底下之「不可見矩形」和「無」的選取狀態。按一下「確定」。

在 Folio Builder 面板中，按兩下「橫向版面」開啟「Enjoy_h.indd」文件。複製「Enjoy_v.indd」檔案中的超連結物件並貼到「Enjoy_h.indd」檔案。將物件移到「D. I. Y. Meet」標誌上方。

若要快速預覽文件，請儲存文件並選擇「檔案 > 對開本預覽」。按一下超連結。然後退出 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，然後貼上它。將它移至第一頁的空白區域並與周圍物件對齊。

若要預覽影片，請儲存文件並選擇「檔案 > 對開本預覽」。按一下影片以開始播放。然後退出 Adobe Content Viewer。

在 InDesign 中開啟 Enjoy_v.indd，然後返回第 2 頁。

在紅色箭頭之間選取 7 個影像，然後在「控制」面板中，按一下「對齊水平置中」和「對齊垂直置中」按鈕。在箭頭之間置中影像。

在影像仍保持選取的狀態下，選擇「視窗 > 互動 > 物件狀態」以顯示「物件狀態」面板。按一下「將選取範圍轉換為多狀態物件」按鈕。

在「物件狀態」面板中，每個影像會顯示為個別狀態。

在「物件狀態」面板中，將「物件名稱」變更為 Sea Slugs。

當水平和垂直文件中的多狀態物件具有相同物件名稱時，在旋轉 iPad 時會記住狀態。現在您已建立多狀態物件，就必須讓使用者能捲動檢視它們。

選擇「視窗 > 互動 > 按鈕」以顯示「按鈕」面板，然後選取左方紅色箭頭。

按一下「將物件轉換為按鈕」，然後從「動作」旁邊的加號圖示選擇「跳至上一個狀態」。

現在我們要讓按鈕的外觀在使用者點選按鈕時會稍為改變。

按一下「按鈕」面板中的 [按下滑鼠]，然後按一下「控制」面板中的「陰影」圖示。

選取左方紅色箭頭、將它轉換為按鈕，然後套用「跳至下一個狀態」動作。將 [按下滑鼠] 外觀變成陰影。

按鈕可讓使用者點選以在影像間移動。我們也可以允許他們在投影片間向前滑動。

選取多狀態物件。在 Overlay Creator 面板中，選取「滑動以變更狀態」。

複製 Enjoy_v.indd 檔案中的箭頭和多狀態物件，並貼到 Enjoy_h.indd 檔案的第 2 頁。移動多狀態物件下方的箭頭，讓位置更適當。

若要預覽投影片，請儲存文件並選擇「檔案 > 對開本預覽」。按一下導覽按鈕以在投影片之間移動。然後退出 Adobe Content Viewer。

開啟 Enjoy_v.indd 並返回第 3 頁。

在工具列中選取「矩形框架」工具，然後拖曳以建立任意大小的矩形。

在 Overlay Creator 面板中，選取「全景」。

按一下「來源」檔案夾，然後選取「CityGuide_Folio > Enjoy_Article > Links」檔案夾中的「CourtyardPano」檔案夾。按一下「開啟」。

做為預留位置的矩形會做為全景影像形狀，但是我們希望滑鼠點選區域再更小一點。

按住 Ctrl+Shift (Windows) 或 Command+Shift (Mac OS)，拖曳選取控點以重新調整全景物件的大小，使其大約為 400 x 400 像素。

讓我們使用全景的預設設定來提供完整的移動範圍。

複製 Enjoy_v.indd 檔案中的全景物件，並貼到 Enjoy_h.indd 檔案的第 3 頁。

儲存並關閉 InDesign 檔案。

如果您尚未這麼做，則請在 iPad 上從 App Store 安裝 Adobe Content Viewer。在 App Store 中，搜尋「Content Viewer」。

將 iPad 連線至您的 Mac OS 電腦，並啟動 Adobe Content Viewer 應用程式。

在 Folio Builder 面板中，導覽至您剛建立的「City Guide」對開本。

在面板底部選擇「預覽 > 在 [iPad 裝置名稱] 上預覽」。

檢視「City Guide Magazine」對開本。

• 請旋轉 iPad，如此即可觀看水平和垂直版本的檔案。

• 向左和向右滑動可檢視不同文章。向上及向下滑動可閱讀文章。

• 瀏覽至「Enjoy」文章。請確定互動覆蓋運作正常。

• 點選非互動區域可顯示導覽列，並點選「首頁」按鈕可跳至對開本的開頭。點選左上角的「目錄」按鈕可檢視目錄和縮圖。拖曳 Scrubber 以瀏覽文章預覽。

在 Folio Builder 面板中，從面板選單選擇「登入」。然後使用已經過驗證可用於 DPS 的 Adobe ID 登入。

如果您有 Creative Cloud 會籍，請使用您的 Creative Cloud 認證。如果您沒有 Creative Cloud 會籍，請登入 http://digitalpublishing.acrobat.com (英文)，並依照提示驗證您的帳戶。

登入後，在面板中選取「City Guide」對開本，然後從面板選單選擇「上傳至 Folio Producer」。

對開本資產即上傳至 acrobat.com 伺服器。

如果您尚未這麼做，則請在 iPad 上從 App Store 安裝 Adobe Content Viewer。

在您的 iPad 上啟動 Adobe Content Viewer。

如果您尚未登入，請點選「登入」按鈕。使用您用來登入 Folio Builder 面板的相同 Adobe ID 進行登入。

您的 iPad 必須連線網際網路才能登入。

畫面出現提示時，請下載並檢視「City Guide Magazine」對開本。

如果您編輯任何 InDesign 來源文件，請選取文章並從面板選單選擇「更新」以更新文章。在 iPad 上的 Adobe Content Viewer 中，系統將提示您下載更新的對開本。