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

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

本文旨在演示如何使用Tumult Hype創(chuàng)建富媒體廣告。它涵蓋了在構(gòu)建廣告的上下文中使用該應(yīng)用程序的基礎(chǔ)知識，并討論了特定于廣告的技巧和竅門。閱讀完畢后，您將能夠快速而精美地制作HTML5廣告！

關(guān)鍵要點(diǎn)

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

HTML5廣告的興起

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

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

Tumult Hype是您的可視化設(shè)計工具

Tumult Hype是macOS領(lǐng)先的HTML5動畫和交互式應(yīng)用程序。Hype存在的理由是易于使用且易于學(xué)習(xí)。布局類似于Keynote，并且可以使用其快速的“錄制”功能自動創(chuàng)建每個屬性動畫關(guān)鍵幀。Hype提供了一套強(qiáng)大的動畫功能，例如沿曲線運(yùn)動路徑的動畫、可自定義的緩動/計時功能、同時運(yùn)行的時間軸以及封裝的可重用符號。大多數(shù)常見的交互不需要編碼，盡管JavaScript操作可以通過與其他庫和服務(wù)的集成來擴(kuò)展其功能。

雖然Tumult Hype可用于各種HTML5內(nèi)容，但它尤其適合創(chuàng)建富媒體廣告。一個名為“導(dǎo)出腳本”的插件系統(tǒng)可以集成廣告平臺功能并幫助打包其導(dǎo)出輸出以進(jìn)行交付。高級導(dǎo)出功能可以進(jìn)一步幫助自動化導(dǎo)出任務(wù)。Hype的運(yùn)行時庫非常小，壓縮大小為25KB，為您的資源提供了充足的空間。此運(yùn)行時驅(qū)動動畫并管理瀏覽器兼容性問題（盡管該應(yīng)用程序仍然會在某個功能無法在特定瀏覽器上運(yùn)行時發(fā)出警告）。

使用Tumult Hype的廣告創(chuàng)建工作流程

獲取Tumult Hype和導(dǎo)出腳本

第一步是下載Tumult Hype。試用版功能齊全，可使用14天。Tumult Hype有兩種模式：標(biāo)準(zhǔn)版和專業(yè)版。對于廣告創(chuàng)建（以及閱讀本文！），您需要使用Hype專業(yè)版。

然后，您可以選擇獲取導(dǎo)出腳本，這將為Hype添加額外的與廣告相關(guān)的功能。目前，有適用于Sizmek、DoubleClick Studio和DoubleClick Campaign Manager的腳本。如果您使用的是不同的廣告平臺，則通常可以輕松地調(diào)整標(biāo)準(zhǔn)輸出。

您可以通過查看Hype的“偏好設(shè)置”來驗(yàn)證是否已安裝導(dǎo)出腳本。導(dǎo)出腳本也可能在文檔檢查器中顯示選項(xiàng)。

選擇廣告尺寸

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

如果您的廣告將具有不同尺寸的表示形式，您可以使用響應(yīng)式布局和靈活布局系統(tǒng)。響應(yīng)式布局允許顯示基于寬度的斷點(diǎn)上的不同內(nèi)容。稍后可以單獨(dú)導(dǎo)出它們。靈活布局系統(tǒng)將根據(jù)容器尺寸調(diào)整元素的位置和大小。

導(dǎo)入資源

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

您可以在資源庫中找到資源。這里的一個選項(xiàng)是在導(dǎo)出時自動優(yōu)化。此功能默認(rèn)啟用，并自動執(zhí)行以下幾個任務(wù)：

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

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

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

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

動畫入門

一旦通過拖動資源或插入文本/形狀創(chuàng)建了元素，就可以通過以下步驟輕松對其進(jìn)行動畫處理：

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

錄制是添加每個屬性關(guān)鍵幀的UI快捷方式。您可以隨時手動創(chuàng)建或編輯它們。這包括將它們的計時功能更改為不同的緩動或效果，例如彈性和回彈?？梢酝ㄟ^拖動運(yùn)動路徑將其塑造成曲線來進(jìn)一步完善位置動畫。

Hype中的時間軸可以被認(rèn)為是動畫流。Hype中的場景至少始終具有一個時間軸——主時間軸?？梢詣?chuàng)建多個時間軸并并行運(yùn)行。這通常對于響應(yīng)操作動畫特定元素或保持循環(huán)非常有用。

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

添加交互性和操作

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

在大多數(shù)情況下，無需代碼即可創(chuàng)建交互性。以下是響應(yīng)鼠標(biāo)點(diǎn)擊運(yùn)行動畫的基本步驟：

1. 選擇一個元素
2. 轉(zhuǎn)到操作檢查器，然后按鼠標(biāo)點(diǎn)擊旁邊的
3. 為操作選擇啟動時間軸…，然后在時間軸彈出按鈕中選擇新建時間軸…
4. 命名時間軸，然后創(chuàng)建動畫

導(dǎo)出腳本還可以提供可以在響應(yīng)事件時選擇的特定于廣告的操作。這些將出現(xiàn)在相同的操作彈出列表中。

此外，運(yùn)行JavaScript…操作可用于任何自定義代碼，包括調(diào)用與廣告相關(guān)的函數(shù)或調(diào)用Hype API。

預(yù)覽

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

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

導(dǎo)出和交付

廣告完成后，您需要導(dǎo)出以進(jìn)行最終交付?！拔募?導(dǎo)出為HTML5”菜單包含“文件夾…”選項(xiàng)，該選項(xiàng)生成默認(rèn)的.html頁面和相應(yīng)的資源文件夾。此菜單還提供任何導(dǎo)出腳本提供的選項(xiàng)。這些將自動執(zhí)行打包，通常會去除不必要的資源并壓縮為單個.zip文件。

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

結(jié)論

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

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

但現(xiàn)在，作為SitePoint用戶，您可以在這里僅需74.99美元的價格獲得專業(yè)版。這是25%的折扣！

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

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

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

我可以使用Tumult Hype為Facebook創(chuàng)建廣告嗎？

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

與其他廣告創(chuàng)建工具相比，Tumult Hype的學(xué)習(xí)曲線如何？

與Canva或Adobe Express等工具相比，Tumult Hype的學(xué)習(xí)曲線更陡峭。這是因?yàn)樗峁┝烁呒壍墓δ?，例如動畫和交互性。但是，它具有用戶友好的界面，并提供一系列教程和資源來幫助您入門。一旦掌握了它，您就會發(fā)現(xiàn)它為您的設(shè)計提供了很大的靈活性和控制力。

我可以免費(fèi)使用Tumult Hype嗎？

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

Tumult Hype如何支持廣告創(chuàng)建工作流程？

Tumult Hype通過提供一系列功能來支持廣告創(chuàng)建工作流程，這些功能使創(chuàng)建、編輯和發(fā)布廣告變得容易。它提供基于時間軸的界面來創(chuàng)建動畫，支持交互性，并允許您實(shí)時預(yù)覽廣告。它還支持一系列導(dǎo)出選項(xiàng)，使您可以輕松地將廣告發(fā)布到不同的平臺。

Tumult Hype適合初學(xué)者嗎？

雖然Tumult Hype提供了高級功能，但它也適合初學(xué)者。它具有用戶友好的界面，并提供一系列教程和資源來幫助您入門?；跁r間軸的界面使創(chuàng)建動畫變得容易，即使您沒有任何經(jīng)驗(yàn)。

我可以在不同的操作系統(tǒng)上使用Tumult Hype嗎？

目前，Tumult Hype僅適用于Mac。但是，使用Tumult Hype創(chuàng)建的內(nèi)容可以在任何支持HTML5的設(shè)備上查看，包括Windows和Linux計算機(jī)，以及智能手機(jī)和平板電腦。

我可以使用Tumult Hype創(chuàng)建哪些類型的廣告？

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

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

Tumult Hype提供了一系列使其與其他廣告創(chuàng)建工具不同的功能。這包括基于時間軸的界面來創(chuàng)建動畫、支持交互性、實(shí)時預(yù)覽和一系列導(dǎo)出選項(xiàng)。它還支持JavaScript以實(shí)現(xiàn)更高級的功能。

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

目前，Tumult Hype不支持在工具內(nèi)進(jìn)行協(xié)作。但是，您可以通過將項(xiàng)目導(dǎo)出為Hype文檔與其他人共享您的項(xiàng)目。這允許其他人使用Tumult Hype編輯和修改您的項(xiàng)目。

以上是視覺廣告創(chuàng)建工作流程與動蕩的炒作的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！