视觉广告创建工作流程与动荡的炒作

使用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中文网其他相关文章！