在您進行此教學課程時,您將會使用「TutorialAssets」檔案夾中的「CityGuide_Folio」檔案夾。您將直接在 InDesign 中建立互動物件。在本課程結束時,這就是主要文章的第一頁在 iPad 上的外觀。

final_enjoy
顯示在 iPad 上的已完成對開本

A. 橫向 (水平) 檢視 B. 縱向 (垂直) 檢視 C. 超連結 D. 影片覆蓋 

如果您尚未這麼做,請下載教學課程資產。請參閱「教學課程設定」。

匯入文章

在前一堂課程中,您已透過開啟來源文件並選擇「新增文章」建立文章。另一個方法是匯入文章。如果您使用正確的檔案夾結構和檔案命名慣例,就可以匯入單一或多個文章。

當您匯入單一文章時,請指向文章檔案夾。當您匯入多個文章時,請指向對開本檔案夾。

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

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

  3. 選取「匯入多個文章」。

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

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

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

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

    tut2_imported_1399926473191
    匯入文章後的 Folio Builder 面板

變更對開本屬性

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

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

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

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

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

    tut2_folioprops_1399926473125
    「對開本屬性」對話框

新增互動超連結

現在您將編輯「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/)。取消選取「共用超連結目的地」。保持「外觀」底下之「不可見矩形」和「無」的選取狀態。按一下「確定」。

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

  6. 若要快速預覽文件,請儲存文件並選擇「檔案 > 對開本預覽」。按一下超連結。然後退出 Adobe Content Viewer。

根據預設,超連結會在應用程式內部檢視器中開啟,而非在行動瀏覽器中開啟。您可以使用 Overlay Creator 面板變更設定,如此即可在行動 Safari 中開啟網站。接下來,您將深入了解 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_overlay1399926473347
    使用 Overlay Creator 編輯影片設定
  5. 使用「選取範圍」工具、複製影像、切換至 Enjoy_v.indd,然後貼上它。將它移至第一頁的空白區域並與周圍物件對齊。

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

建立投影片覆蓋

現在,讓我們使用「物件狀態」面板建立互動投影片。我們已經將影像加入至垂直「Enjoy」檔案的第二頁。您將在堆疊中排列這影像、將它們轉換為多狀態物件,以及建立可巡覽這些投影片的按鈕。

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

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

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

    mso_1399926473953
    併入多狀態物件的影像

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

  4. 在「物件狀態」面板中,將「物件名稱」變更為 Sea Slugs

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

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

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

    navbutton_1399926473742
    建立導覽按鈕

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

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

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

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

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

    tut2_slideshow_swipe1399926473256
    為投影片開啟滑動功能
  10. 複製 Enjoy_v.indd 檔案中的箭頭和多狀態物件,並貼到 Enjoy_h.indd 檔案的第 2 頁。移動多狀態物件下方的箭頭,讓位置更適當。

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

建立全景覆蓋

全景需要 6 個影像,每個影像代表立方體的一邊。

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

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

  3. 在 Overlay Creator 面板中,選取「全景」。

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

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

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

    tut2_pano_1399926473044
    建立全景覆蓋

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

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

  7. 儲存並關閉 InDesign 檔案。

在 iPad 上預覽對開本 (僅限 Mac OS)

接著,您將使用「預覽裝置」功能以預覽您的對開本。如果您正在執行 Windows 電腦,則請略過至下一章節以了解如何透過上傳與下載檔案進行預覽。

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

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

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

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

  5. 檢視「City Guide Magazine」對開本。

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

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

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

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

    viewer_widgets_1399926473837
    在 Adobe Content Viewer 中點選以顯示導覽列

上傳與預覽檔案

您亦可透過登入 Folio Builder 面板、上傳對開本然後下載該對開本,以在 iPad 上預覽對開本。

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

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

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

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

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

    註解:

    如果您有不同的行動裝置,例如 Android 平板裝置或 Kindle Fire,則可從 Google Play 或 Amazon Appstore 下載 Adobe Content Viewer。

  4. 在您的 iPad 上啟動 Adobe Content Viewer。

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

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

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

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

接下來的學習重點

您已了解建立文章和對開本及新增互動覆蓋的基本概念。若要進一步了解覆蓋和其他 DPS 功能,請執行下列任一動作:

  • 開啟 Overlay_Examples_Folio 中的來源文件,並使用不同的覆蓋資產進行實驗。您可在文件中編輯現有的覆蓋,或建立您自己的覆蓋。

  • 下載免費的 DPS Tips 應用程式。在 iPad 或 iPhone 的 App Store 中搜尋「DPS Tips」,或若是使用 Android 裝置者請在 Google Play 商店中搜尋,使用 Kindle Fire 者則請在 Amazon Appstore 中搜尋。

  • 您要將應用程式發佈至 Apple App Store 嗎?如果您是 Adobe Creative Cloud 的訂閱者,則可針對 iPad 建立與送出不限數量的單一對開本應用程式。或者您可購買「Single Edition」授權,以建立單一對開本應用程式。當您已準備好建立應用程式時,在 Folio Builder 面板中選取對開本,然後從面板選單選擇「建立應用程式」。系統將提示您下載《逐步發佈指南》。請遵循該指南中的指示,建立您的第一個應用程式。

  • 如果您要建立多重對開本應用程式,則可取得 Digital Publishing Suite 的「專業版」或「企業版」訂閱。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策