視覺廣告創建工作流程與動蕩的炒作

使用Tumult Hype高效製作富媒體廣告

(本文由Tumult贊助) 感謝您支持使SitePoint成為可能的合作夥伴。

本文旨在演示如何使用Tumult Hype創建富媒體廣告。它涵蓋了在構建廣告的上下文中使用該應用程序的基礎知識，並討論了特定於廣告的技巧和竅門。閱讀完畢後，您將能夠快速而精美地製作HTML5廣告！

關鍵要點

• Tumult Hype是macOS領先的HTML5動畫和交互式應用程序，使其成為創建具有動畫和交互功能的富媒體廣告的強大工具。
• 該應用程序提供類似於Keynote的用戶友好界面，大多數常見的交互不需要編碼。但是，它支持JavaScript操作以實現更高級的功能。
• Tumult Hype的廣告創建工作流程包括選擇廣告尺寸、導入資源、動畫元素、添加交互性和操作、預覽以及導出以進行最終交付。導出腳本插件系統可以集成廣告平台功能並自動化導出任務。
• Tumult Hype提供14天的完全功能試用版，專業版的完整版售價為99.99美元，但SitePoint用戶可享受25%的折扣。

HTML5廣告的興起

眾所周知，在數字廣告中添加動畫和交互性可以使廣告更有效。除了吸引訪問者的眼球之外，富媒體廣告還可以更好地傳達產品或品牌，並增加參與度，從而帶來更多點擊量。

由於富媒體廣告本質上是視覺化的，因此使用可視化工具構建它們是有意義的。更改會立即顯示。多年來，Adobe的Flash一直是可視化廣告創建工具之王，但已被HTML5在移動設備上的兼容性所取代。作為一項技術，HTML5廣告還具有更易訪問且功耗更低的額外優勢。但HTML5本身只是一種標記語言，不像Flash那樣具有內置的可視化工具（Flash使用Flash Professional應用程序）。通過手工編碼構建廣告將是一個非常緩慢的過程。幸運的是，現在已經有了一些複雜的可視化工具可以輸出HTML5。

Tumult Hype是您的可視化設計工具

Tumult Hype是macOS領先的HTML5動畫和交互式應用程序。 Hype存在的理由是易於使用且易於學習。佈局類似於Keynote，並且可以使用其快速的“錄製”功能自動創建每個屬性動畫關鍵幀。 Hype提供了一套強大的動畫功能，例如沿曲線運動路徑的動畫、可自定義的緩動/計時功能、同時運行的時間軸以及封裝的可重用符號。大多數常見的交互不需要編碼，儘管JavaScript操作可以通過與其他庫和服務的集成來擴展其功能。

雖然Tumult Hype可用於各種HTML5內容，但它尤其適合創建富媒體廣告。一個名為“導出腳本”的插件系統可以集成廣告平台功能並幫助打包其導出輸出以進行交付。高級導出功能可以進一步幫助自動化導出任務。 Hype的運行時庫非常小，壓縮大小為25KB，為您的資源提供了充足的空間。此運行時驅動動畫並管理瀏覽器兼容性問題（儘管該應用程序仍然會在某個功能無法在特定瀏覽器上運行時發出警告）。

使用Tumult Hype的廣告創建工作流程

獲取Tumult Hype和導出腳本

第一步是下載Tumult Hype。試用版功能齊全，可使用14天。 Tumult Hype有兩種模式：標準版和專業版。對於廣告創建（以及閱讀本文！），您需要使用Hype專業版。

然後，您可以選擇獲取導出腳本，這將為Hype添加額外的與廣告相關的功能。目前，有適用於Sizmek、DoubleClick Studio和DoubleClick Campaign Manager的腳本。如果您使用的是不同的廣告平台，則通常可以輕鬆地調整標準輸出。

您可以通過查看Hype的“偏好設置”來驗證是否已安裝導出腳本。導出腳本也可能在文檔檢查器中顯示選項。

選擇廣告尺寸

啟動Hype後，您需要將場景大小設置為與您要創建的廣告匹配。這可以通過在場景檢查器中設置寬度和高度或選擇預設尺寸之一來完成。 Hype包含常見廣告橫幅和矩形的預設尺寸。

如果您的廣告將具有不同尺寸的表示形式，您可以使用響應式佈局和靈活佈局系統。響應式佈局允許顯示基於寬度的斷點上的不同內容。稍後可以單獨導出它們。靈活佈局系統將根據容器尺寸調整元素的位置和大小。

導入資源

Tumult Hype具有基本的形狀和文本基元，但您很可能會從Photoshop、Illustrator或Sketch等其他程序導入圖像資源。這些可以簡單地拖放到場景編輯器中，也可以通過“插入…”菜單項添加。 Hype會保留資源的副本，但如果它注意到原始資源的更改，它會要求更新，這有助於迭代。

您可以在資源庫中找到資源。這裡的一個選項是在導出時自動優化。此功能默認啟用，並自動執行以下幾個任務：

1. 生成圖像的視網膜（@2x）和非視網膜（@1x）變體（Hype運行時會選擇要加載的變體）
2. 將圖像大小縮減到文檔中使用的最大尺寸
3. 在可行的情況下並如果文件大小有所改進，則嘗試壓縮圖像
4. 轉換非網絡安全圖像格式

雖然這通常很有用，但它可能會與您的廣告文件大小目標相衝突。例如，廣告的整體文件大小通常是從zip文件而不是實際下載的內容中測量的——因此同時擁有視網膜和非視網膜變體會增加重量。此外，您可能能夠比Hype以自動化方式做得更好（使用ImageOptim之類的工具）。您可能需要取消選中此框。

無論如何，基於位圖的資源可能會很快累積。您可能需要考慮使用SVG，它們被瀏覽器廣泛支持。 Hype將它們視為圖像，但不會嘗試優化它們。

順便說一句，IAB建議初始加載的資源不超過15個，以幫助保持頁面精簡。

動畫入門

一旦通過拖動資源或插入文本/形狀創建了元素，就可以通過以下步驟輕鬆對其進行動畫處理：

1. 點擊錄製按鈕
2. 將播放頭拖動到稍後的時間
3. 更改元素的位置或修改任何其他屬性（如不透明度）

錄製是添加每個屬性關鍵幀的UI快捷方式。您可以隨時手動創建或編輯它們。這包括將它們的計時功能更改為不同的緩動或效果，例如彈性和回彈。可以通過拖動運動路徑將其塑造成曲線來進一步完善位置動畫。

Hype中的時間軸可以被認為是動畫流。 Hype中的場景至少始終具有一個時間軸——主時間軸。可以創建多個時間軸並並行運行。這通常對於響應操作動畫特定元素或保持循環非常有用。

符號可以發揮類似的作用——它們代表可重用的“場景中的場景”，並包含它們自己的元素和獨立運行的時間軸動畫。與其他具有符號的應用程序一樣，一個實例中的更改將反映在所有其他實例中。

添加交互性和操作

選擇HTML5而不是視頻/動畫GIF的優點是它允許與用戶進行交互和互動。交互是對事件的響應。這些事件可能是鼠標點擊、拖動、滑動、場景加載、航路點命中甚至按鍵。操作響應取決於創意的目標。您可能希望啟動動畫、將動畫綁定到拖動、更改場景，甚至觸發自定義代碼。在廣告領域，典型的任務是讓按鈕點擊轉到外部URL（也稱為“退出”）或觸發可以報告回廣告服務器的計數器。

在大多數情況下，無需代碼即可創建交互性。以下是響應鼠標點擊運行動畫的基本步驟：

1. 選擇一個元素
2. 轉到操作檢查器，然後按鼠標點擊旁邊的
3. 為操作選擇啟動時間軸…，然後在時間軸彈出按鈕中選擇新建時間軸…
4. 命名時間軸，然後創建動畫

導出腳本還可以提供可以在響應事件時選擇的特定於廣告的操作。這些將出現在相同的操作彈出列表中。

此外，運行JavaScript…操作可用於任何自定義代碼，包括調用與廣告相關的函數或調用Hype API。

預覽

在構建過程中頻繁預覽廣告非常重要，以確保最終動畫和交互性按預期運行。預覽菜單允許快速在計算機上的不同瀏覽器之間切換。如果您按住option鍵，則可以預覽Hype中當前選擇的特定場景/佈局。 Hype還可以使用免費的Hype Reflect應用程序預覽到iOS設備。

如果您使用的是導出腳本，則其輸出也可以包含在預覽中。為此，請打開預覽菜單並檢查“使用導出腳本預覽”下的腳本。

導出和交付

廣告完成後，您需要導出以進行最終交付。 “文件>導出為HTML5”菜單包含“文件夾…”選項，該選項生成默認的.html頁面和相應的資源文件夾。此菜單還提供任何導出腳本提供的選項。這些將自動執行打包，通常會去除不必要的資源並壓縮為單個.zip文件。

為了進一步自動化，您可能需要使用“文件>高級導出…”工具。這可以將廣告拆分為特定的場景或佈局，還可以使用導出腳本。 “文件>導出為影片”提供一些靜態圖像/視頻選項，如果需要的話。

結論

這些是使用Tumult Hype創建富媒體HTML5廣告的主要步驟！作為一種可視化工具，Hype可以顯著加快創建和迭代過程，而不會限制功能或功能。導出腳本中的特定於廣告的工作流程功能自動化了許多數字廣告製作的常見任務。這些導出腳本可以由任何人構建或修改，因此，如果您不存在廣告系統或自動化，您可以隨意構建它！

如果您有興趣了解更多信息，請訪問Tumult網站上的文檔和教程。 Hype提供14天的完全功能試用版，專業版的完整版售價為99.99美元。

但現在，作為SitePoint用戶，您可以在這裡僅需74.99美元的價格獲得專業版。這是25%的折扣！

使用Tumult Hype進行可視化廣告創建工作流程的常見問題解答 (FAQ)

Tumult Hype與Canva或Adobe Express等其他廣告創建工具相比如何？

Tumult Hype是一個強大的工具，允許您創建交互式和動畫內容。與主要的設計工具Canva或Adobe Express不同，Tumult Hype專注於動畫和交互性。它提供基於時間軸的界面，這使得創建複雜的動畫變得很容易，無需任何編碼。但是，它也支持JavaScript以實現更高級的功能。這使其成為一個通用的工具，可用於各種項目，從簡單的動畫到復雜的交互式內容。

我可以使用Tumult Hype為Facebook創建廣告嗎？

是的，您可以使用Tumult Hype為Facebook創建廣告。該工具允許您創建HTML5內容，Facebook支持該內容。您可以創建交互式和動畫廣告，以幫助吸引您的受眾並提高廣告系列的有效性。但是，請注意，Facebook對廣告有特定要求，因此您應確保您的內容符合這些要求。

與其他廣告創建工具相比，Tumult Hype的學習曲線如何？

與Canva或Adobe Express等工具相比，Tumult Hype的學習曲線更陡峭。這是因為它提供了更高級的功能，例如動畫和交互性。但是，它具有用戶友好的界面，並提供一系列教程和資源來幫助您入門。一旦掌握了它，您就會發現它為您的設計提供了很大的靈活性和控制力。

我可以免費使用Tumult Hype嗎？

Tumult Hype是一個付費工具，與其他一些提供免費版本的其他廣告創建工具不同。但是，它提供免費試用版，因此您可以在決定是否購買之前試用它。該工具的成本是一次性費用，其中包括所有未來的更新。如果您計劃定期使用它，這使其成為一個具有成本效益的選擇。

Tumult Hype如何支持廣告創建工作流程？

Tumult Hype通過提供一系列功能來支持廣告創建工作流程，這些功能使創建、編輯和發布廣告變得容易。它提供基於時間軸的界面來創建動畫，支持交互性，並允許您實時預覽廣告。它還支持一系列導出選項，使您可以輕鬆地將廣告發佈到不同的平台。

Tumult Hype適合初學者嗎？

雖然Tumult Hype提供了高級功能，但它也適合初學者。它具有用戶友好的界面，並提供一系列教程和資源來幫助您入門。基於時間軸的界面使創建動畫變得容易，即使您沒有任何經驗。

我可以在不同的操作系統上使用Tumult Hype嗎？

目前，Tumult Hype僅適用於Mac。但是，使用Tumult Hype創建的內容可以在任何支持HTML5的設備上查看，包括Windows和Linux計算機，以及智能手機和平板電腦。

我可以使用Tumult Hype創建哪些類型的廣告？

使用Tumult Hype，您可以創建各種廣告，從簡單的動畫到復雜的交互式內容。這包括橫幅廣告、插頁式廣告、視頻廣告等等。該工具支持一系列格式，包括HTML5、GIF和視頻，使其成為廣告創建的多功能選擇。

就功能而言，Tumult Hype與其他工具相比如何？

Tumult Hype提供了一系列使其與其他廣告創建工具不同的功能。這包括基於時間軸的界面來創建動畫、支持交互性、實時預覽和一系列導出選項。它還支持JavaScript以實現更高級的功能。

使用Tumult Hype時，我可以與其他人合作嗎？

目前，Tumult Hype不支持在工具內進行協作。但是，您可以通過將項目導出為Hype文檔與其他人共享您的項目。這允許其他人使用Tumult Hype編輯和修改您的項目。

以上是視覺廣告創建工作流程與動蕩的炒作的詳細內容。更多資訊請關注PHP中文網其他相關文章！