漩渦元件

您可以使用漩渦元件，建立搭配互動式 3D 模型的沈浸式顯示格式廣告素材。將廣告捲動到檢視畫面中時，初始的 3D 動畫會與捲動頁面產生連結。使用者可以直接與這個模型互動，並以全螢幕模式展開廣告，進而查看更多內容。

這個元件只能用於 Display & Video 360 Swirl 廣告素材，不適用於 Microsoft Edge。

如何在專案中新增 Swirl 元件：

1. 依序開啟「元件」面板和「圖像與效果」資料夾。
2. 將「漩渦」元件拖曳至中心區域。
3. 在元件上按兩下，即可開啟「漩渦」編輯對話方塊。
4. 在「圖層」面板中選取 [3D 模型] 圖層。
5. 在「屬性」面板的 [網址] 欄位中，瀏覽要使用的 3D 素材資源 GLB 檔案。您也可以調整其他屬性 (請參閱下文)。
6. 如要新增圖層，請從檔案系統中將圖片檔拖曳至中心區域或「圖層」面板 (僅限 Windows 或 Mac)，或是按一下「資源庫」面板底部的「匯入素材資源」按鈕 。在 Swirl 元件中，您只能使用圖片來新增圖層。
7. 使用「開始」和「結束」分頁標籤，設定各個圖層在動畫開頭和結尾時的位置。您可以直接將圖層拖曳到您想要的位置，或利用「屬性」面板中的「起始位置」和「結束位置」欄位來設定圖層的顯示位置。
8. 視需要調整其他設定選項 (請參閱下文)。
9. 完成元件設定 (您可以在設定過程中預覽成果) 後，按一下 [儲存] 即可返回 Google Web Designer 的正常介面。

設定選項

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

新增中間狀態

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

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

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

變更動畫時間

漩渦元件的動畫播放時間取決於該元件捲動時所處的頁面位置，例如已捲動多少範圍或是否已超出頁面範圍。根據預設，當元件上方邊緣開始出現在頁面的檢視畫面時 (0%)，動畫就會開始播放，而在底部邊緣從頁面頂部消失時 (100%)，動畫便會結束。如果您新增中間狀態，則還可調整此狀態在動畫中發生的時機。調整動畫時間的方法有兩種：

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

將 3D 模型的背景設為透明

1. 選取 3D 模型。
2. 在「屬性」面板中，勾選 [透明 3D 模型背景] 方塊。

新增手勢提示

1. 選取 3D 模型。
2. 在「屬性」面板中按一下 [圖示] 下拉式選單，然後選擇資源庫中的圖片，或按一下 [瀏覽...] 選取檔案系統中的圖片。
3. 視需要在 [文字]欄位中輸入要和圖示一起顯示的文字。

手勢提示會顯示在 3D 模型上方，提示使用者與模型進行互動。

旋轉 3D 模型

1. 選取 3D 模型。
2. 在「屬性」面板中，為動畫的起始、中間和結尾部分設定「偏轉」。

偏轉是指模型會繞垂直軸旋轉。

新增圖片圖層

新增圖層的方式有兩種：

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

在漩渦元件中，您只能使用圖片來新增圖層。系統只接受單一 3D 模型圖層 (系統 預設為包含這個圖層)。

移動圖層

1. 選取您想移動的圖層。
2. 選取 [開始]、[中間] 或 [結束] 分頁標籤。
3. 使用下列任一方法調整圖層位置：
   • 將圖層拖曳到新位置。
   • 在「屬性」面板中設定 [開始]、[中間] 或 [結束] 位置屬性。您只能編輯與目前分頁相配的屬性。使用「複製起始位置值」、「複製中間位置值」或「複製結束位置值」按鈕 來複製另一個位置。

切換至「開始」、「中間」或「結束」分頁以調整圖層的另一個位置。

切換圖片

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

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

重新排列圖層

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

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

刪除圖片圖層

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

3D 模型圖層是漩渦元件的必要元素，因此無法刪除。

調整圖層大小

1. 選取要調整大小的圖層。
2. 使用下列任一方法調整圖層大小：
   • 在「屬性」面板中，設定圖層的寬度和高度。按一下「鎖定長寬比」按鈕 切換是否要固定長寬比。
   • 在中心區域，拖曳圖層角落和邊緣的其中一個大小調整控點。

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

變更圖層透明度

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

3D 模型圖層在動畫結束時的透明度一律為不透明。

變更圖層動畫的加/減速

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

目前無法自訂加/減速。

隱藏和顯示圖層

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

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

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

顯示和隱藏幽靈圖層

1. 選取圖片圖層。
2. 在「屬性」面板中，按一下「進階屬性」之下的「幽靈圖層」核取方塊。

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

屬性

漩渦元件屬性

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

您可以在「Swirl」編輯對話方塊中查看及編輯圖層屬性 (須先選取圖層)。

3D 模型圖層屬性

注意：使用 Google Web Designer 11.0.0 以下建立的 Swirl 元件有一些不同的 3D 模型圖層屬性。

屬性	說明
名稱	3D 模型元件的名稱。
網址	3D 素材資源的 GLB 來源檔案。 您可以使用 Khronos glTF Validator 檢查自己的 GLB 檔案是否有效。 適用於舊版 Swirl 元件 3D 素材資源的網址或 ID。 僅支援由 Poly 代管，且已開啟連結共用設定的素材資源。素材資源檔案的大小上限為 2 MB，因為 Google Web Designer 可能無法載入較大的素材資源。如要查看其他規定，請參閱 3D 素材資源指南。 網址開頭必須為 https://poly.google.com/view/。 ID 則是指 Poly 檢視頁面網址的末端字串，例如 https://poly.google.com/view/0CkCZrXqCWW。 範例： https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW 重新整理素材資源 ：在「網址」欄位中按一下這個按鈕，即可重新整理 3D 素材資源。如果沒有任何更動，表示系統可能仍在處理該素材資源，請稍後再試。
透明 3D 模型背景	(僅適用於舊版 Swirl 元件) 如果您希望 3D 模型元件呈現透明的背景，請勾選此方塊。
手勢提示
圖示	要在 3D 模型上顯示的圖片，可提示使用者與模型互動。為吸引使用者目光，手勢提示會略微移動，直到顯示時間達到動畫時間限制為止。使用者一旦開始與模型互動，手勢提示就會消失。
文字	顯示在手勢提示圖示下方的文字。必須先指定手勢提示圖示，才能設定這個屬性。
設定動畫時間限制	如要設定手勢提示動畫的顯示時長，請勾選此方塊，並設定持續時間 (以秒為單位)。
位置和大小
開始	動畫開始時，圖層與漩渦元件左側和頂部間的距離。選取 [開始] 分頁標籤即可編輯起始位置。
中間	在動畫的中間狀態，圖層與漩渦元件左側和頂部間的距離。選取 [中間] 分頁標籤即可編輯中間位置。
結束	動畫結束時，圖層與漩渦元件左側和頂部間的距離。選取 [結束] 分頁標籤即可編輯結束位置。
大小	圖層的寬度和高度。在播放動畫期間，圖層會受此設定影響。
旋轉
偏轉	模型繞垂直軸旋轉的開始、中間和結束角度 (以度為單位)。
樣式
透明度	圖層的開始、中間和結束透明度，使用 0 (透明) 和 1 (不透明) 之間的值表示。
進階屬性
加/減速	圖層動畫的加/減速類型。目前無法自訂加/減速。

圖片圖層屬性

屬性	說明
來源	圖片檔來源 (無法編輯)。
離開網址	使用者點選圖片時的離開網址。
位置和大小
開始	動畫開始時，圖層與元件左側和頂部間的距離。選取 [開始] 分頁標籤即可編輯起始位置。
中間	在動畫的中間狀態，圖層與元件左側和頂部間的距離。選取 [中間] 分頁標籤即可編輯中間位置。
結束	動畫結束時，圖層與元件左側和頂部間的距離。選取 [結束] 分頁標籤即可編輯結束位置。
大小	圖層的寬度和高度。在播放動畫期間，圖層會受此設定影響。
樣式
透明度	圖層的開始、中間和結束透明度，使用 0 (透明) 和 1 (不透明) 之間的值表示。
進階屬性
加/減速	圖層動畫的加/減速類型。目前無法自訂加/減速。
顯示幽靈圖層	啟用這個屬性後，無效位置 (亦即非您目前編輯的位置) 會顯示半透明的圖層。

事件和動作

事件

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

事件	說明
已載入漩渦	在載入元件中的所有素材資源後傳送。

如要在「事件」對話方塊中選取此事件，請將漩渦元件設為目標。

您也可以為漩渦元件內含的 3D 模型設定事件和動作。

預覽

在設定過程中預覽

您可以在編輯漩渦元件時預覽這個元件：

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

在瀏覽器中預覽

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

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

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

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