視差元件

視差元件可讓您利用多圖層圖片來製造深度錯覺。當使用者在行動裝置上用上下捲動的方式瀏覽頁面時，會看到前景和背景圖片以不同速度移動。

這個元件只能用於 Display & Video 360 視差廣告素材。

如何在專案中新增視差元件：

1. 依序開啟「元件」面板及「互動」資料夾。
2. 將「視差」元件 拖曳至中心區域。
3. 在元件上按兩下即可進入元件編輯模式。
4. 如要新增圖層，請從檔案系統中將圖片檔拖曳至中心區域或「圖層」面板 (僅限 Windows 或 Mac)，或是按一下「圖層」面板底部的「新增圖片」按鈕 。請注意，您只能使用圖片來新增圖層。
5. 使用 [開始] 和 [結束] 分頁標籤，設定各個圖層在動畫開頭和結尾時的位置。您可以直接將圖層拖曳到您想要的位置，或利用「屬性」面板中的「起始位置」和「結束位置」欄位來設定圖層的顯示位置。您也可以新增中間狀態，做法是將滑鼠游標懸停在 [開始] 分頁標籤右側，然後按一下 按鈕。
6. 視需要調整其他設定選項。
7. 完成元件設定 (您可以在設定過程中預覽成果) 後，按一下 [儲存] 即可返回 Google Web Designer 的正常介面。

視差元件

設定選項

如要設定這項元件，請在中心區域的元件上按兩下，或選取元件，然後在「屬性」面板中點選「設定…」圖示 。

新增圖層

新增圖層的方式有兩種：

• 將檔案從檔案系統 (僅限 Windows 或 Mac) 或「資源庫」拖曳至中心區域或「圖層」面板。
• 按一下「圖層」面板底部的「新增圖片」按鈕 。

在視差元件中，您只能使用圖片來新增圖層。

移動圖層

1. 選取您想移動的圖層。
2. 選取 [開始]、[中間] 或 [結束] 分頁標籤 (如果您尚未新增中間狀態，可以在這時新增)。
3. 使用下列任一方法調整圖層位置：
   • 將圖層拖曳到新位置。
   • 使用方向鍵來移動圖層 (一次移動 1 像素的距離)。如果按住 Shift 鍵並同時按下方向鍵，可將圖層往所選方向移動 10 像素的距離。
   • 在「圖層屬性」分頁設定「起始位置」、「中間位置」或「結束位置」屬性。您只能編輯與目前分頁相配的屬性。使用「複製起始位置值」、「複製中間位置值」或「複製結束位置值」按鈕 來複製另一個位置。

切換至另一個分頁，即可調整圖層在動畫中另一個提示點的位置。

切換圖片

1. 在中心區域內要切換的圖片上按一下滑鼠右鍵，然後在彈出式選單中選取 [切換圖片…]。
2. 選取資源庫中的圖片，或按一下「匯入檔案」按鈕 選取電腦中的圖片檔。

這樣一來，原本的圖片就會替換成新的圖片。如果您在替換圖片前調整過大小，那麼新的圖片也會套用您調整的大小。如果您不曾調整過圖片大小，新的圖片則會顯示原始尺寸。

重新排列圖層

在「圖層」面板中，將圖層拖曳至清單中的新位置。

每個圖層的順序決定了它們彼此顯示的前後關係。順序較高者會顯示在順序較低者之前。

刪除圖層

1. 選取您想刪除的圖層。
2. 按一下「圖層」面板底部的「刪除」按鈕 ，或按下 Delete 鍵。

調整圖層大小

1. 選取要調整大小的圖層。
2. 在「圖層屬性」面板中設定圖層的寬度和高度 (單位為像素)。
   • 按一下「鎖定長寬比」按鈕 ，切換是否要固定長寬比。

在顯示動畫期間，圖層會縮放到指定大小。

變更圖層透明度

1. 選取您想變更的圖層。
2. 在「圖層屬性」面板中，將開始或結束透明度設定為 0 和 1 之間的值 (0 為透明，1 為不透明)。

變更圖層動畫的加/減速

1. 選取您想變更的圖層。
2. 在「圖層屬性」面板中，從「加/減速」下拉式選單選取 [加/減速類型]。

目前無法自訂加/減速。

新增中間狀態

如要進一步控管視差元件動畫，您可以在該提示點新增中間狀態，並變更圖層屬性。

1. 將滑鼠游標懸停在 [開始] 分頁標籤右側，然後按一下 按鈕。系統隨即會顯示 [中間] 分頁標籤。
2. 根據預設，中間狀態會在動畫開頭和結尾間的中途出現。您可以調整動畫時間。
3. 切換到 [中間] 分頁標籤，設定該提示點的圖層屬性。

如要移除中間狀態，請將滑鼠游標懸停在 [中間] 分頁標籤右側，然後按一下 [X]。

變更動畫時間

視差元件的動畫播放時間取決於在頁面上的捲動距離。根據預設，當元件上緣開始出現在頁面的檢視畫面時 (0%)，動畫就會開始播放，而在下緣從頁面頂部消失時 (100%)，動畫便會結束。如果您新增中間狀態，則還可調整此狀態在動畫中發生的時機。調整動畫時間的方法有兩種：

• 在「動畫時間」面板中，將 [開始]、[中間] 和 [結束] 方塊或滑桿拖曳至您要設定的百分比。
• 在「動畫時間」面板的欄位中輸入開始、中間和結束的百分比。

隱藏和顯示圖層

在「圖層」面板中，按一下圖層縮圖 (在「隱藏所有圖層」按鈕 之下) 旁邊的方塊。

按一下「隱藏所有圖層」按鈕 即可隱藏或顯示所有圖層。

隱藏特定圖層可方便您編輯其他圖層，而且在預覽設定時不會顯示隱藏的圖層，也不會影響到瀏覽器預覽或已發布的廣告素材。

顯示和隱藏幽靈圖層

1. 選取圖層。
2. 在「圖層屬性」面板中，按一下「進階屬性」之下的 [幽靈圖層] 切換按鈕。

幽靈圖層是半透明的圖層，而且不會位於目前編輯的位置，因此您可以直接目視比對起始、中間和結束位置。幽靈圖層僅供參考之用，不會顯示在預覽或已發布的檔案中。

屬性

元件屬性

您可以在「屬性」面板中查看元件屬性，不過您必須先退出元件編輯模式。

屬性	說明
名稱	視差元件的名稱。
捲動係數	0 到 1 之間的數字代表視圖捲動的距離。僅用於 Google Web Designer 中心區域的顯示設定 (預設值為 0.5)。

圖層屬性

您可以在元件編輯模式中查看和編輯圖層屬性。

屬性	說明
名稱	圖層名稱 (無法編輯)。
開始	元件一進入檢視畫面 (例如元件上緣與可視區域下緣切齊) 時，圖層與元件左側和頂部之間的距離 (單位為像素，也能以百分比表示)。選取 [開始] 分頁標籤即可編輯起始位置。
中間	在動畫的中間狀態，圖層與元件左側和頂部之間的距離 (單位為像素，也能以百分比表示)。選取 [中間] 分頁標籤即可編輯中間位置。
結束	元件移出檢視畫面 (例如元件下緣與可視區域上緣切齊) 時，圖層與元件左側和頂端之間的距離 (單位為像素，也能以百分比表示)。選取 [結束] 分頁標籤即可編輯結束位置。
大小	圖層的寬度和高度。在播放動畫期間，圖層會受此設定影響。
透明度	圖層的開始和結束透明度，使用 0 (透明) 和 1 (不透明) 之間的值表示。
加/減速	圖層動畫的加/減速類型。目前無法自訂加/減速。
幽靈圖層	啟用這個屬性後，無效位置 (亦即非您目前編輯的位置) 會顯示半透明的圖層。

事件

事件可在您的廣告中觸發其他動作。視差元件會傳送以下事件：

事件	說明
已載入視差	在元件準備好顯示時傳送。

預覽

在設定過程中預覽

您可以在編輯視差元件時預覽這個元件：

1. 如要進入元件編輯模式，請在中心區域的元件上按兩下。
2. 按一下頂端的 [預覽] 分頁標籤。
3. 向上或向下捲動查看可見圖層在行動裝置版面配置範本中的表現 (不會顯示隱藏圖層)。
4. 預覽元件時無法編輯元件。按一下 [開始]、[中間] 或 [結束] 分頁標籤進行變更，然後再次點選 [預覽] 分頁標籤查看變更結果。

在瀏覽器中預覽

如要在瀏覽器中預覽元件，請退出元件編輯模式，然後按一下 Google Web Designer 中的 [預覽] 按鈕。預覽頁面會模擬廣告在網頁上顯示的模樣，而且顯示的內容足夠讓您捲動瀏覽到元件的上方和下方。

您可以從下列預覽模式選項中選取適合的顯示方式：

• 裝置：選取行動裝置或 [自訂]。
• 旋轉裝置 ：在縱向和橫向之間切換。
• 可視區域大小：如果您為裝置選取 [自訂]，則可編輯這個欄位，直接設定新的尺寸；您也可以拖曳預覽畫面的控點來調整大小。

瀏覽器一律會使用視差預覽模式來呈現視差廣告。