這個元件不適用於 AMP HTML 廣告、影片廣告和圖像廣告。
如何使用粒子效果元件:
-
依序開啟「元件」面板和「圖像與效果」資料夾。
-
在 [粒子效果] 元件上按兩下,或將該元件拖曳至中心區域。
-
在中心區域內的元件上按兩下,或點選「屬性」面板中的「設定...」按鈕 ,即可開啟「粒子效果」對話方塊。
-
將您要添加為圖層的圖片從「資源庫」面板拖曳至「圖層」面板。如要新增其他圖片,請按一下該面板底部的「新增圖片」按鈕 。
-
在底部的「預設」面板中選取所需效果,然後將該效果拖曳至中心區域,或點選效果上顯示的「新增」按鈕 。系統會在中心區域顯示效果快照,並以外框標出粒子起點區域 (系統產生粒子的位置)。您可以將多個效果分別新增為不同圖層。
調整圖層順序
圖層順序代表各圖層重疊時的前後關係。如要變更圖層的堆疊順序,請按照下列步驟操作:
- 在中心區域內的元件上按兩下,或點選「屬性」面板中的「設定...」按鈕 ,開啟「粒子效果」對話方塊。
- 在「圖層」面板中,將圖層拖曳至新位置。
調整圖層位置
您可以移動圖片或某個效果的粒子起點區域,前提是該項目不得超出元件邊界。如要移動圖層,請按照下列步驟操作:
- 在中心區域內的元件上按兩下,或點選「屬性」面板中的「設定...」按鈕 ,開啟「粒子效果」對話方塊。
- 選取要移動的圖層,這時系統會在圖片或效果的粒子起點區域周圍顯示外框。您也可選取多個圖層,以便同時移動這些項目。
- 選擇下列其中一種做法:
- 在中心區域上:
- 將圖層拖曳到新位置。
- 使用方向鍵來移動圖層 (一次移動 1 像素的距離)。如果按住 Shift 鍵並同時按下方向鍵,可將圖層往所選方向移動 10 像素的距離。
- 在「屬性」面板中:
- 如要調整圖片,請編輯上方和左側的位置屬性。
- 如要調整效果,請展開「進階」屬性,然後編輯「X 軸放射距離」和「Y 軸放射距離」的值。只要開啟「保持連鎖狀態」選項 ,即可在不調整大小的情況下移動粒子起點區域。
- 在中心區域上:
調整圖層大小
您可以針對圖片或某個效果的粒子起點區域調整大小,前提是該項目的寬度或高度不得超過元件。對於效果,您可以調整粒子起點區域的大小。如要調整圖層大小,請按照下列步驟操作:
- 在中心區域內的元件上按兩下,或點選「屬性」面板中的「設定...」按鈕 ,開啟「粒子效果」對話方塊。
- 選取要調整大小的圖層,這時系統會在圖片或效果的粒子起點區域周圍顯示外框。您也可以選取多個圖層。
- 選擇下列其中一種做法:
- 在中心區域上:拖曳外框側邊或角落的控點。
- 在「屬性」面板中:
- 如要調整圖片,請編輯寬度和高度屬性。
- 如要調整效果,請展開「進階」屬性,然後編輯「X 軸放射距離」和「Y 軸放射距離」的值。同時,請確認「保持連鎖狀態」選項 已停用。
移除圖層
如要從元件中刪除圖層,請按照下列步驟操作:
- 在中心區域內的元件上按兩下,或點選「屬性」面板中的「設定...」按鈕 ,開啟「粒子效果」對話方塊。
- 在「圖層」面板中,選取您要刪除的一或多個圖層。
- 按下 Delete 鍵,或點選面板底部的「刪除圖層」按鈕 。
隱藏及顯示圖層
您可以隱藏某個圖層,以便更輕鬆地處理其他圖層。隱藏的圖層不會顯示在預覽畫面或發布檔案中。如要隱藏或顯示圖層,請按照下列步驟操作:
- 在中心區域內的元件上按兩下,或點選「屬性」面板中的「設定...」按鈕 ,開啟「粒子效果」對話方塊。
- 找出您要隱藏或顯示的圖層,然後在「隱藏所有圖層」圖示 下方勾選與該圖層對應的方塊。
屬性
在元件的所有屬性中,您可以設定元件所含各個效果的屬性。
粒子效果元件屬性
屬性 |
說明 |
---|---|
名稱 | 設定粒子效果元件的名稱。 |
自動播放 |
勾選這個屬性即可在元件載入時自動播放動畫。 注意:每個效果也分別都有自動播放屬性。 |
設定動畫時間限制 | 勾選這個屬性即可在指定時間長度 (以秒為單位) 後停止播放動畫。 |
個別效果的屬性
您可以在「粒子效果」對話方塊中查看個別效果專用的屬性。只要在中心區域內的粒子效果元件上按兩下,或點選「屬性」面板中的 [設定...] ,即可開啟「粒子效果」對話方塊,然後您可以選取效果,查看專用屬性。
預設設定
每個預設項目都有一組預設的屬性,您可以在「預設」下拉式選單上按一下滑鼠右鍵並選取 [預設],藉此還原各項屬性。當您選取其他預設設定時,系統會將下列屬性重設為新預設設定的預設值。
雖然 Google Web Designer 原本就已內建數個預設設定,但您也可以儲存自己的預設設定,然後匯出並匯入這些設定,以供其他電腦使用 (請參閱自訂預設設定一節)。
屬性 |
說明 |
---|---|
ID | 效果 ID (可供您在事件中參照特定效果)。 |
數量 | 在這個效果動畫未停止或循環播放的情況下,系統產生的粒子總數。 |
大小 | 初始粒子大小的範圍,最大值和最小值皆以像素為單位。 |
形態 | 粒子形狀。
|
色彩 | 起始色彩和結束色彩。 |
不透明度 | 起始不透明度等級的最大值和最小值,0 表示透明,1 則表示不透明 (請使用小數值表示半透明)。 |
速度 | 起始速度的最大值和最小值。 |
方向 |
粒子移動方向的最大和最小角度。 您也可以使用圓形粒子的控制項來設定角度範圍。 |
進階 | |
X 軸放射距離 |
粒子產生位置的最大和最小 X 座標,以像素或百分比為單位。 設定「保持連鎖狀態」選項 後,即可自動將所有變更套用到這兩個欄位,藉此維持粒子起點區域的寬度。 |
Y 軸放射距離 |
粒子產生位置的最大和最小 Y 座標,以像素或百分比為單位。 設定「保持連鎖狀態」選項 後,即可自動將所有變更套用到這兩個欄位,藉此維持粒子起點區域的高度。 |
大小變化速率 | 粒子大小的變化速率,以像素為單位 (小數值有效)。如果這個屬性的值是負數,粒子就會變小。 |
隨機顏色 | 勾選這個屬性後,初始粒子顏色就會在起始色彩和結束色彩之間隨機變化。 |
顏色變化速率 | 顏色從起始色彩變成結束色彩的速率。勾選 [隨機顏色] 時,也會一併停用這個屬性。 |
不透明度變化速率 | 不透明度的變化速率。如果這個屬性的值是負數,粒子就會變成透明。 |
自動播放 | 勾選這個屬性後,即可在元件開始播放時自動播放此效果動畫。即使不勾選這個屬性,您也可以透過事件觸發動畫。 |
循環 | 勾選這個屬性可持續播放此效果動畫。如果您不勾選此屬性,系統會在產生指定的粒子總數後停止播放動畫。 |
放射間隔 | 系統每隔多久會產生一個新粒子。 |
快轉 | 在系統產生的粒子數量達到指定百分比時,開始播放動畫。 |
加速 | 粒子移動時的水平加速度和垂直加速度。 |
擾亂 | |
頻率 | 影響粒子移動情形的擾亂頻率。這個屬性的值越大,每個粒子的路徑就越常出現不規則變化。 |
強度 | 擾亂強度。如果不想擾亂粒子移動情形,請將這個屬性的值設為 0。 |
強度變化速率 | 擾亂強度的變化速率。 |
軌跡 | 粒子沿著移動路徑留下的軌跡長度。如果不想讓粒子留下任何軌跡,請將這個屬性的值設為 1。 |
擾亂效果可能會降低廣告播放速度或網頁效能,當您設定了較長的軌跡時更是如此。
自訂預設設定
只要將一組屬性儲存為自訂預設設定,即可重複使用這組屬性。
儲存新的自訂預設設定
- 調整現有預設設定的屬性。
- 在底部的「預設設定」面板中,按一下「儲存為預設」 按鈕。您可以在中心區域的效果上,或是在「屬性」面板中的 [預設設定] 下拉式選單上按一下滑鼠右鍵。
- 為新的預設設定輸入專屬名稱,然後按下 Enter 鍵或點選 [確定]。
完成上述步驟後,該預設設定就會出現在「屬性」面板的下拉式選單以及「預設」面板中 (顯示預設設定圖示 )。
重新命名自訂預設設定
- 在「預設」面板中找出要重新命名的預設設定,然後在上方按一下滑鼠右鍵,並選取 [重新命名...]。
- 輸入新名稱,然後按下 Enter 鍵或點選 [確定]。
刪除自訂預設設定
- 在「預設」面板中找出要刪除的預設設定,然後在上方按一下滑鼠右鍵,並選取 [刪除]。
- 按一下 [確定] 確認您要刪除。
匯出自訂預設設定
只要匯出自訂預設設定,即可將該預設設定分享給其他 Google Web Designer 使用者。
- 在「預設」面板中找出要匯出的預設設定,然後在上方按一下滑鼠右鍵,並選取 [匯出...]。
- 選取匯出檔案的目標資料夾。
匯出的 .zip 檔案名稱會與預設設定的名稱相同。
匯入自訂預設設定
如果您有自訂預設設定的匯出檔案,可以將該檔案匯入您的 Google Web Designer 執行個體。
- 將匯出的.zip 檔案複製到您要匯入預設設定的電腦。
- 使用該電腦在 Google Web Designer 中開啟「粒子效果」對話方塊。
- 在底部的「預設設定」面板中按一下「匯入預設」 按鈕。
- 根據已匯出的自訂預設設定,選取相應的 .zip 檔案。
匯入的預設設定會隨即顯示在「屬性」面板的下拉式清單和「預設」面板中。
事件和動作
粒子效果元件傳送的事件您可以透過下列粒子效果元件事件觸發其他動作:
事件 | 說明 |
---|---|
已達時間限制 | 在動畫播放至指定時間上限時傳送。 |
以下粒子效果元件動作可透過其他事件觸發:
- 播放
- 暫停
- 停止
在「事件」對話方塊中選取以上任一動作時,請將粒子效果元件或特定效果設為「接收端」。
瞭解如何設定事件。
預覽
當您在「粒子效果」對話方塊中處理相關作業時,「設計」分頁上會顯示元件外觀的靜態快照。
只要切換到「預覽」分頁,即可觀看已套用目前設定的動畫。在播放預覽的過程中,您可以修改各項屬性,立即確認變更生效後的情況。
此外,您也可以先點選對話方塊底部的 [儲存],再按一下 [預覽] 按鈕,透過您慣用的瀏覽器預覽文件。