//www.youtube.com/embed/2Ej9nN2Pj0E

簡介：

本教學將帶你使用 hyperPad 製作一本基本的互動式書籍。跟著本教學操作，你就能了解組成一本書所需的概念。

專案結構：

hyperPad 專案由場景、物件和行為組成。

場景：

場景包含 App 中的所有物件，也能協助你整理組成 App 的不同部分。例如，你可以為書籍的每一頁建立一個新場景。

物件：

物件是場景中的個別項目，包括文字或插圖。每個物件都可以有自己的行為。

行為：

行為能讓場景和物件具有互動性，並且活靈活現。

你可以從「相機膠卷」、「照片串流」和 Dropbox 匯入圖片與插圖。hyperPad 會自動為你建立非 Retina 圖片，因此製作插圖時，請以 2048×1536 的圖片尺寸為基準。Tapapbl 可匯入的最大圖片尺寸為 2048×2048 像素。

此外，由於 hyperPad 目前不支援字型或多樣式文字，你也應將文字匯入為背景透明的 PNG 圖片。

匯入所有圖片後，你可以開啟「物件抽屜」，開始將圖片加入場景。

在 hyperPad 中，讓物件具有互動性非常簡單。

首先，點選你想加入互動功能的物件。接著，在「物件屬性」中點選「行為」按鈕，開啟行為編輯器。

在本教學中，我們要建立的互動效果是：讀者觸碰物件時，物件會移動到指定位置。

從「輸入」類別中，將「開始觸碰」行為拖曳到畫布上。

「開始觸碰」行為預設會自動選取目前的物件。不過，你可以在行為屬性中點選物件圖示來變更選取的物件。

接著拖入「移動至點」行為，並將它連接到上一步新增的「開始觸碰」行為。「移動至點」行為會將物件移動到畫布上的指定位置。

你可以在「行為屬性」中的 X/Y 輸入欄位填入數值，指定位置。也可以直接在畫面上選擇要移動到的位置。

若要直接在畫面上選擇位置，請點選行為屬性中的物件圖示。選取要移動的物件，然後將藍色目標拖曳至所需位置。

選好位置後，點選勾選圖示以確認。你會看到行為屬性中的 X 和 Y 欄位已自動填入數值。

現在按下「播放」，就會看到行為依照設定運作。觸碰物件後，物件就會移動。

現在，你已設定好第一頁的互動效果，接下來可能會想新增其他頁面，以及在頁面之間滑動的功能。

新增滑動手勢有幾種不同的方法。你可以將行為新增至場景中的特定物件，也可以將它新增至「全域行為」，讓它套用至書中的所有場景。

在本教學中，我們將滑動手勢新增至「全域行為」，這樣就不必為每個新場景重複新增。

首先，按下左上角的圖示，開啟「建立選單」。

接著點選底部的「全域行為」按鈕，開啟行為編輯器。在此新增的行為會影響整個專案，並在載入每個場景時執行。

接著拖入「向左滑動」行為，新增至畫布後點選一次，開啟行為屬性。

請注意「在任何物件上滑動」切換開關。如果將此開關設為「關閉」，就必須在特定物件上滑動，才會觸發事件。請將開關設為「開啟」，這樣就能在任何位置滑動，不必受限於特定物件。

注意：如果你將「滑動」行為新增至全域行為，系統不會選取特定物件。預設受限的物件是「背景」。如果不將開關設為「開啟」，看起來可能仍然可以正常運作；但如果有其他物件覆蓋背景，這些物件可能會干擾滑動，尤其是它們也加入了其他觸碰輸入行為時。

接著新增「載入下一個場景」行為，並將它連接至「滑動」行為。如此一來，手指向螢幕左側滑動時，就會自動載入下一個場景。

如果專案中沒有其他場景，目前的場景就會重新載入。此外，如果你位於專案的最後一個場景，下一個場景就會是場景清單中的第一個場景。

現在，你可以在專案中新增場景。按下播放後，你會看到滑動手勢在這兩個場景中都能正常運作，不必再新增其他行為。

這些就是使用 hyperPad 製作互動式書籍所需了解的基本知識。你可以試用不同的行為，為書籍打造各種互動效果。