arduino端口凭空出现

This article was sponsored by Tumult. Thank you for supporting the partners who make SitePoint possible.

本文由Tumult赞助 。 感谢您支持使SitePoint成为可能的合作伙伴。

The goal of this article is to show how to create a rich media advertisement with Tumult Hype. It covers the basics of using the app in the context of building an ad and discusses ad-specific tips and tricks. By the end of reading you’ll be able to make HTML5 ads quickly and beautifully!

本文的目的是展示如何使用Tumult Hype创建富媒体广告。 它涵盖了在制作广告时使用该应用程序的基础知识，并讨论了针对广告的提示和技巧。 在阅读结束时，您将可以快速而精美地制作HTML5广告！

HTML5广告的兴起 (The Rise of HTML5 Ads)

It is well known that adding animation and interactivity in digital advertising makes ads more effective. Beyond catching visitors’ eyes, rich media ads can better convey the product or branding as well as add engagements leading to more clicks.

众所周知，在数字广告中添加动画和交互性可以使广告更有效。 富媒体广告不仅可以吸引访问者的眼球，还可以更好地传达产品或品牌，以及增加互动度带来更多点击。

As rich media ads are visual in nature, it makes sense to build them using visual tools. Changes are seen immediately. Adobe’s Flash reigned as king of the visual ad creation tools for years, but has been toppled by HTML5’s compatibility on mobile devices. As a technology, HTML5 ads have the additional advantage of often being more accessible while having lower power requirements. But HTML5 itself is just a markup language and has no inherently included visual tools, as Flash did with the Flash Professional app. Building ads via hand coding would be a laboriously slow process. Luckily, there are now sophisticated visual tools that can output HTML5.

由于富媒体广告本质上是视觉的，因此使用视觉工具来制作它们很有意义。 可以立即看到更改。 多年以来，Adobe的Flash一直是视觉广告制作工具的王者，但由于HTML5在移动设备上的兼容性而被其倒下。 作为一项技术，HTML5广告还有一个额外的优势，那就是通常更易于访问，同时具有较低的功耗要求。 但是HTML5本身只是一种标记语言，没有像Flash在Flash Professional应用程序中那样固有地包含视觉工具。 通过手工编码制作广告将是一个费时费力的过程。 幸运的是，现在有可以输出HTML5的复杂的可视化工具。

Tumult Hype是您的视觉设计工具 (Tumult Hype is Your Visual Design Tool)

Tumult Hype is the leading HTML5 animation and interactivity app for macOS. Hype’s raison d’etre is to be easy to use and quick to learn. Layout is similar to Keynote, and per-property animation keyframes can be automatically created with its quick “Record” functionality. Hype provides a powerful set of animation features, such as animation along curved motion paths, customizable easings/timing functions, simultaneously running timelines, and encapsulated reusable symbols. Coding is not required for most common interactivity, although JavaScript actions can extend its capabilities by integrating with other libraries and services.

Tumult Hype是适用于macOS的领先HTML5动画和交互应用程序。 炒作的存在理由是易于使用和快速学习。 布局类似于Keynote，可以使用其快速的“记录”功能自动创建每个属性的动画关键帧。 Hype提供了一组强大的动画功能，例如沿弯曲运动路径的动画，可自定义的缓动/定时功能，同时运行时间线和封装的可重用符号。 尽管大多数JavaScript动作都可以通过与其他库和服务集成来扩展其功能，但对于大多数常见的交互性而言，不需要进行编码。

While Tumult Hype can be used for a wide range of HTML5 content, it is especially capable for rich media ad creation. A plug-in system, called “Export Scripts”, can integrate ad platform features and help package its export output for delivery. Advanced Export functionality can further help automate export tasks. Hype’s runtime library is very small with a compressed size of 25KB, giving plenty of room for your assets. This runtime drives the animations and manages browser compatibility issues (though the app still gives warnings if a feature won’t work on specific browsers).

尽管Tumult Hype可用于各种HTML5内容，但它特别适合制作富媒体广告。 一个名为“导出脚本”的插件系统可以集成广告平台功能，并帮助打包其导出输出以进行投放。 高级导出功能可以进一步帮助自动执行导出任务。 Hype的运行时库很小，压缩大小为25KB，为您的资产提供了足够的空间。 该运行时驱动动画并管理浏览器兼容性问题(尽管如果某个功能在特定浏览器上无法使用，该应用仍会发出警告)。

Tumult Hype的广告制作工作流程 (The Ad Creation Workflow with Tumult Hype)

抢答炒作和导出脚本 (Grab Tumult Hype and an Export Script)

Step zero is to download Tumult Hype. The trial is fully functional for 14 days. Tumult Hype has two flavor modes: Standard and Professional. For ad creation (and following along with this article!), you’ll want to use Hype Professional.

步骤零是下载Tumult Hype 。 该试用版可正常运行14天。 Tumult Hype有两种口味模式：标准和专业。 对于广告创建(以及本文后面的内容！)，您将需要使用Hype Professional。

You can then optionally grab an Export Script, which will augment Hype with extra ad-related features. Currently there are scripts for Sizmek, DoubleClick Studio, and DoubleClick Campaign Manager. If you are using a different ad platform, the steps are usually straightforward to adapt the standard output.

然后，您可以选择获取Export Script ，这将为Hype提供更多与广告相关的功能。 当前有用于Sizmek，DoubleClick Studio和DoubleClick Campaign Manager的脚本。 如果您使用其他广告平台，则通常这些步骤很容易调整标准输出。

You can verify an Export Script has been installed by looking within Hype’s Preferences. Export Scripts may also have options that are show in the Document Inspector.

您可以通过在Hype的首选项中查看来验证是否已安装导出脚本。 导出脚本还可能具有在文档检查器中显示的选项。

选择广告尺寸 (Choosing an Ad Size)

After launching Hype, you’ll want to set the scene size to match the ad you are creating. This can be done in the Scene Inspector by setting the width and height, or choosing one of the Preset Sizes. Hype contains presets for common ads banners and rectangles.

启动Hype之后，您需要设置场景大小以匹配要创建的广告。 可以在场景检查器中通过设置宽度和高度，或选择一种“预设大小”来完成此操作。 炒作包含常见广告横幅和矩形的预设。

If your ad will have different size representations, you could make use of the Responsive Layout and Flexible Layout systems. Responsive Layout allows different content that is shown on width-based breakpoints. They can later be individually exported. The Flexible Layout system will adjust element positions and sizes based on container dimensions.

如果您的广告具有不同的尺寸表示形式，则可以使用自适应布局和灵活布局系统。 响应式布局允许在基于宽度的断点上显示不同的内容。 它们可以稍后单独导出。 灵活布局系统将根据容器尺寸调整元素位置和大小。

导入资产 (Importing Assets)

Tumult Hype has basic shape and text primitives, but it is most likely you’ll be importing image assets from another program like Photoshop, Illustrator, or Sketch. These can simply be dragged to the scene editor or added via the Insert… menu item. Hype keeps a copy of the assets but will ask to update if it notices changes on the original to help when iterating.

Tumult Hype具有基本的形状和文本基元，但很可能您将从其他程序(例如Photoshop，Illustrator或Sketch)导入图像资产。 这些可以简单地拖到场景编辑器中，也可以通过“ 插入...”菜单项添加。 Hype保留资产的副本，但是会询问是否更新原始资产的更改以在迭代时提供帮助。

You can later find assets in the Resource Library. One of the options here is to Automatically optimize when exporting. This feature is enabled by default and automates a few tasks:

您以后可以在资源库中找到资产。 这里的选项之一是在导出时自动优化 。 默认情况下启用此功能，它会自动执行一些任务：

1. Generates retina (@2x) and non-retina (@1x) variants of the images (the Hype runtime chooses which to load)生成图像的视网膜(@ 2x)和非视网膜(@ 1x)变体(Hype运行时选择要加载的图像)
2. Reduces image sizes to the maximum dimensions used in the document将图像尺寸减小到文档中使用的最大尺寸
3. Attempts to compress images when feasible and if there is a file size improvement在可行且文件大小有所改善的情况下尝试压缩图像
4. Converts non web-safe image formats转换非网络安全图像格式

While this is generally useful, it may work against file size goals for your ad. For example, overall ad file size is usually measured from the zip and not actual contents downloaded — as such having both retina and non-retina variants will add weight. Also you may be able to do better at visual compression quality or size than Hype can do in an automated fashion (using a tool like ImageOptim). You may need to uncheck this box.

尽管这通常很有用，但可能会违反广告的文件大小目标。 例如，总体广告文件大小通常是从zip而不是实际下载的内容来衡量的-因此，具有视网膜和非视网膜两种变体都会增加重量。 另外，在视觉压缩质量或大小上，您可能比以自动化方式(使用ImageOptim之类的工具) 做得更好 。 您可能需要取消选中此框。

Regardless, bitmap-based assets can add up fast. You may want to consider using SVGs, which are widely supported by browsers. Hype treats these as images, yet won’t attempt to optimize them.

无论如何，基于位图的资产可以快速累加。 您可能要考虑使用浏览器广泛支持的SVG。 Hype将这些视为图像，但不会尝试对其进行优化。

As a side note, IAB recommends no more than 15 initially loaded assets to help keep pages lean.

附带说明，IAB建议初始加载的资产不超过15个，以帮助保持页面精简。

动画101 (Animating 101)

Once elements have been created by dragging in assets or inserting text/shapes, they can be animated easily with these steps:

通过拖动资源或插入文本/形状创建元素后，可以通过以下步骤轻松对其进行动画处理：

1. Hit the Record button

   点击录制按钮

2. Drag the playhead to a later time将播放头拖到以后
3. Change the position of the element or modify any other properties (like Opacity)更改元素的位置或修改其他任何属性(如不透明度)

Recording is a UI shortcut for adding per-property keyframes. You can always manually create or edit them. This includes changing their timing functions to different easings or effects like elasticity and bounce-back. Position animations can be further refined by dragging a motion path to be shaped into curves.

录制是用于添加每个属性关键帧的UI快捷方式。 您始终可以手动创建或编辑它们。 这包括将其计时功能更改为不同的缓动或效果，例如弹性和反弹。 可以通过拖动要成形为曲线的运动路径来进一步完善位置动画。

A timeline in Hype can be thought of as a stream of animations. A scene in Hype always has at least one timeline — the Main Timeline. Multiple timelines can be created and run in parallel. This is often useful to animate specific elements in response to actions, or to maintain looping.

Hype中的时间轴可以看作是动画流。 Hype中的一个场景始终至少具有一个时间轴-主时间轴。 可以创建多个时间轴并并行运行。 这通常对于响应动作来为特定元素设置动画或保持循环很有用。

Symbols can play a similar role – they represent reusable “scenes within a scene” and contain their own elements and independently running timeline animations. Like other apps with Symbols, a change in one instance will be reflected in all other instances.

符号可以起到类似的作用-它们代表可重复使用的“场景中的场景”，并包含它们自己的元素和独立运行的时间轴动画。 像其他带有Symbol的应用一样，一个实例中的更改将反映在所有其他实例中。

添加互动和动作 (Adding Interactivity and Actions)

The beauty of choosing HTML5 over a video/animated GIF is that it allows for interactivity and engagement with users. Interactivity is a response to an event. These events could be mouse clicks, drags, swipes, scene loads, waypoint hits, or even key presses. The action response depends on the goals of the creative. You may want to kickoff animations, bind animations to a drag, change scenes, or even trigger custom code. Within the realm of ads, typical tasks would be having a button click go to an external URL (also called an “Exit”) or triggering counters that can be reported back to the ad server.

在视频/动画GIF上选择HTML5的好处在于，它可以实现与用户的互动和互动。 交互性是对事件的响应。 这些事件可能是鼠标单击，拖动，滑动，场景加载，航路点命中甚至按键。 动作响应取决于广告素材的目标。 您可能需要启动动画，将动画绑定到拖动，更改场景，甚至触发自定义代码。 在广告领域中，典型的任务是单击按钮单击外部URL(也称为“退出”)或触发可以向广告服务器报告的计数器。

Interactivity can be created without the need for code in most cases. These are the basic steps for running an animation in response to a mouse click:

在大多数情况下，无需代码即可创建交互性。 这些是响应鼠标单击而运行动画的基本步骤：

1. Select an element选择一个元素

2. Go to the Actions Inspector and press the + next to On Mouse Click

   转到动作检查器 ，然后按“ 鼠标单击”旁边的+

3. Choose Start Timeline… for the action and select New Timeline… in the Timeline popup button

   选择“ 开始时间线”作为操作，然后在“时间线”弹出按钮中选择“ 新建时间线”。

4. Name the timeline and then create animations命名时间轴，然后创建动画

Export Scripts also can provide ad-specific actions that can be chosen in response to events. These will appear in the same Action popup list.

导出脚本还可以提供特定于广告的操作，可以根据事件进行选择。 这些将出现在同一“动作”弹出列表中。

Additionally, the Run JavaScript… action can be used for any custom code, including invoking ad-related functions or calling the Hype API.

此外，“ 运行JavaScript…”操作可用于任何自定义代码，包括调用与广告相关的功能或调用Hype API 。

预览版 (Previewing)

It is important to preview an ad frequently while building to ensure that final animations and interactivity behave as you intend. The Preview menu allows for quickly changing between different browsers on your computer. If you hold down the option key, you can preview the specific scene/layout that is currently selected in Hype. Hype can also preview to an iOS device using the free Hype Reflect app.

重要的是在制作广告时经常预览广告，以确保最终的动画和互动行为符合您的预期。 预览菜单允许您在计算机上的不同浏览器之间快速切换。 如果按住Option键，则可以预览Hype中当前选定的特定场景/布局。 Hype还可以使用免费的Hype Reflect应用预览到iOS设备。

If you are using an Export Script, its output can be included in the Preview as well. To do this, open the Preview menu and check a script underneath Preview Using Export Script.

如果您使用的是导出脚本，则其输出也可以包含在“预览”中。 为此，请打开“预览”菜单，然后在“ 使用导出脚本预览”下检查脚本 。

出口和交货 (Exporting and Delivery)

Once your ad is complete, you’ll want to export for final delivery. The File > Export as HTML5 menu contains the Folder… option, which produced the default .html page and corresponding folder of resources. This menu also provides any Export Script-provided options. These will automate packaging, generally stripping unnecessary resources and compressing to a single .zip file.

广告制作完成后，您将希望导出以进行最终投放。 “ 文件”>“导出为HTML5”菜单包含“ 文件夹...”选项，该选项产生默认的.html页面和相应的资源文件夹。 此菜单还提供任何导出脚本提供的选项。 这些将自动打包，通常会剥离不必要的资源并压缩为单个.zip文件。

For further automation, you may want to use the File > Advanced Export… tool. This can split an ad into specific scenes or layouts, and also make use Export Scripts. File > Export as Movie provides some static image/video options if need be, too.

为了进一步自动化，您可能需要使用“ 文件”>“高级导出...”工具。 这样可以将广告拆分为特定的场景或布局，也可以使用导出脚本。 如果需要，“ 文件”>“导出为电影”还提供了一些静态图像/视频选项。

结论 (Conclusion)

Those are the primary steps for creating a rich media HTML5 ad with Tumult Hype! As a visual tool, Hype can significantly speed up the creation and iteration process without limiting in features or functionality. The ad-specific workflow features in Export Scripts automate many common tasks for digital ad production. These Export Scripts can be built or modified by anyone, so if there’s an ad system or automation that doesn’t exist you are free to build it!

这些是使用Tumult Hype制作富媒体HTML5广告的主要步骤！ 作为可视化工具，Hype可以显着加快创建和迭代过程，而不会限制功能。 导出脚本中特定于广告的工作流程功能可自动执行许多常见任务，以进行数字广告制作。 任何人都可以构建或修改这些导出脚本，因此，如果不存在广告系统或自动化系统，则可以自由构建 ！

If you’re interested in learning more, there’s documentation and tutorials on the Tumult site. Hype is available for a 14-day fully functional trial and costs $99.99 USD for the full Professional version.

如果您想了解更多信息，请在Tumult网站上找到文档和教程 。 Hype可以进行14天的全功能试用 ，完整版专业版的价格为99.99美元。

But right now, as a SitePoint user you can get the Professional version for just $74.99 here. That’s a 25% discount!

但是现在，作为SitePoint用户，您可以在此处 以74.99美元的价格获得Professional版本。 那是25％的折扣！

翻译自: https://www.sitepoint.com/visual-ad-creation-workflow-with-tumult-hype/

arduino端口凭空出现