Efficiently create rich media ads with Tumult Hype
(This article is sponsored by Tumult) Thank you for supporting the partners who made SitePoint possible.
This article aims to demonstrate how to create rich media ads using Tumult Hype. It covers the basics of using the app in the context of building an ad and discusses ad-specific tips and tricks. After reading, you will be able to quickly and beautifully create HTML5 ads!
As we all know, adding animation and interactivity to digital ads can make ads more effective. In addition to attracting visitors’ attention, rich media advertising can better communicate products or brands and increase engagement, resulting in more clicks.
Because rich media ads are visual in nature, it makes sense to build them with visualization tools. Changes will be displayed immediately. For years, Adobe's Flash has been the king of visual ad creation tools, but has been replaced by HTML5's compatibility on mobile devices. As a technology, HTML5 advertising also has the added advantage of being more accessible and less power consumption. But HTML5 itself is just a markup language, and does not have built-in visualization tools like Flash (Flash uses Flash Professional apps). Building an ad by hand code will be a very slow process. Fortunately, there are now some complex visualization tools that can output HTML5.
Tumult Hype is macOS's leading HTML5 animation and interactive application. Hype exists for ease of use and easy to learn. The layout is similar to Keynote, and each attribute animation keyframe can be automatically created using its quick "recording" feature. Hype provides a powerful set of animation features such as animation along the curve motion path, customizable easing/timer functions, a timeline that runs simultaneously, and encapsulated reusable symbols. Most common interactions do not require encoding, although JavaScript operations can extend their functionality through integration with other libraries and services.
While Tumult Hype can be used for a variety of HTML5 content, it is especially suitable for creating rich media ads. A plug-in system called "Export Scripts" can integrate advertising platform features and help package its export output for delivery. Advanced export features can further help automate export tasks. Hype's runtime library is very small, with a compression size of 25KB, giving you plenty of room for your resources. This runtime drives animations and manages browser compatibility issues (although the application still warns when a feature cannot run on a specific browser).
The first step is to download Tumult Hype. The trial version is fully functional and can be used for 14 days. Tumult Hype comes in two modes: Standard and Professional. For ad creation (and reading this article!), you need to use Hype Pro.
You can then choose to get the export script, which will add additional ad-related features to Hype. Currently, there are scripts for Sizmek, DoubleClick Studio, and DoubleClick Campaign Manager. If you are using a different advertising platform, you can usually easily adjust the standard output.
You can verify that the export script is installed by looking at Hype's "Preferences". Export scripts may also display options in the Document Inspector.
After starting Hype, you need to set the scene size to match the ad you want to create. This can be done by setting the width and height in the scene inspector or selecting one of the preset sizes. Hype contains preset sizes for common ad banners and rectangles.
If your ad will have a different size representation, you can use a responsive layout and a flexible layout system. Responsive layout allows different content on width-based breakpoints to be displayed. They can be exported separately later. The flexible layout system will adjust the position and size of elements according to the container size.
Tumult Hype has basic shapes and text primitives, but you'll most likely import image assets from other programs like Photoshop, Illustrator, or Sketch. These can be simply dragged and dropped into the scene editor or added via the "Insert..." menu item. Hype keeps a copy of the resource, but if it notices changes to the original resource, it asks for updates, which helps iterate.
You can find resources in the resource library. One option here is to automatically optimize when exporting. This feature is enabled by default and the following tasks are automatically performed:
While this is usually useful, it may conflict with your ad file size target. For example, the overall file size of an ad is usually measured from a zip file rather than the content actually downloaded – so having both retinal and non-retinal variants adds weight. Also, you may be able to do better than Hype in an automated way (using tools like ImageOptim). You may need to uncheck this box.
Anyway, bitmap-based resources may accumulate very quickly. You may want to consider using SVGs, which are widely supported by your browser. Hype treats them as images, but does not try to optimize them.
By the way, IAB recommends no more than 15 resources loading initially to help keep the page streamlined.
Once an element is created by dragging an asset or inserting text/shapes, it can be easily animate it through the following steps:
Recording is a UI shortcut to add each attribute keyframe. You can create or edit them manually at any time. This includes changing their timing functions to different easing or effects such as elasticity and rebound. Position animation can be further improved by dragging the motion path to shape it into a curve.
The timeline in Hype can be considered an animation stream. Scenes in Hype always have at least one timeline—the main timeline. Multiple timelines can be created and run in parallel. This is often useful for animate specific elements in response to operations or keeping loops.
Symbols can play a similar role—they represent reusable "scenes in scenes" and contain their own elements and running independently timeline animations. Like other applications with symbols, changes in one instance will be reflected in all other instances.
The advantage of choosing HTML5 instead of video/animated GIF is that it allows interaction and interaction with users. Interaction is a response to an event. These events can be mouse clicks, drags, slides, scene loading, waypoint hits, or even key presses. Operational response depends on the creative goal. You may want to start an animation, bind the animation to drag, change the scene, or even trigger custom code. In the advertising world, a typical task is to have the button click go to an external URL (also known as "exit") or trigger a counter that can be reported back to the ad server.
In most cases, interactiveness is created without code. The following are the basic steps to run an animation in response to mouse clicks:
The export script can also provide ad-specific actions that can be selected in response to events. These will appear in the same action pop-up list.
In addition, running JavaScript… operations can be used for any custom code, including calling ad-related functions or calling the Hype API.
It is important to frequently preview ads during the build process to ensure final animation and interactivity run as expected. The preview menu allows quick switching between different browsers on your computer. If you hold down the option key, you can preview the specific scene/layout currently selected in Hype. Hype can also preview to iOS devices using the free Hype Reflect app.
If you are using an export script, its output can also be included in the preview. To do this, open the preview menu and check the scripts under "Preview with Export Scripts".
After the ad is finished, you need to export for final delivery. The "File>Export to HTML5" menu contains the "Folder..." option, which generates the default .html page and the corresponding resource folder. This menu also provides options provided by any export script. These will be packaged automatically, usually removing unnecessary resources and compressing into a single .zip file.
For further automation, you may need to use the "File>Advanced Export..." tool. This can split the ad into specific scenarios or layouts, and also use an export script. "File >Export as Video" provides some static image/video options if needed.
These are the main steps to create rich media HTML5 ads with Tumult Hype! As a visualization tool, Hype can significantly speed up the creation and iteration process without limiting functionality or functionality. Ad-specific workflow features in export scripts automate many common tasks in digital ad production. These export scripts can be built or modified by anyone, so if you don't have an ad system or automation, you can build it as you like!
If you are interested in learning more, please visit the documentation and tutorials on the Tumult website. Hype offers a 14-day full feature trial, with the full version of the Professional version priced at $99.99.
But now, as a SitePoint user, you can get the Pro version here for just $74.99. This is a 25% discount!
Tumult Hype is a powerful tool that allows you to create interactive and animated content. Unlike the main design tools Canva or Adobe Express, Tumult Hype focuses on animation and interactivity. It provides a timeline-based interface, which makes it easy to create complex animations without any coding. However, it also supports JavaScript for more advanced features. This makes it a universal tool for a wide range of projects, from simple animations to complex interactive content.
Yes, you can create ads for Facebook using Tumult Hype. This tool allows you to create HTML5 content, which Facebook supports. You can create interactive and animated ads to help engage your audience and increase the effectiveness of your campaigns. However, be aware that Facebook has specific requirements for advertising, so you should make sure your content meets these requirements.
Tumult Hype has a steeper learning curve compared to tools like Canva or Adobe Express. This is because it provides more advanced features such as animation and interactivity. However, it has a user-friendly interface and provides a range of tutorials and resources to get you started. Once you have mastered it, you will find that it provides a lot of flexibility and control for your design.
Tumult Hype is a paid tool that is different from some other ad creation tools that offer free versions. However, it offers a free trial, so you can try it before deciding whether to buy it or not. The cost of the tool is a one-time fee, which includes all future updates. This makes it a cost-effective option if you plan to use it regularly.
Tumult Hype supports the ad creation workflow by providing a range of features that make creating, editing, and publishing ads easy. It provides a timeline-based interface to create animations, support interactivity, and allows you to preview ads in real time. It also supports a range of export options, allowing you to easily post ads to different platforms.
While Tumult Hype offers advanced features, it is also suitable for beginners. It has a user-friendly interface and provides a range of tutorials and resources to get you started. The timeline-based interface makes creating animations easy, even if you don't have any experience.
Currently, Tumult Hype is only available for Mac. However, content created with Tumult Hype can be viewed on any HTML5-enabled device, including Windows and Linux computers, as well as smartphones and tablets.
With Tumult Hype, you can create a variety of ads, from simple animations to complex interactive content. This includes banner ads, interstitial ads, video ads, and more. The tool supports a range of formats, including HTML5, GIF, and video, making it a versatile option for ad creation.
Tumult Hype provides a range of features that make it different from other ad creation tools. This includes timeline-based interfaces to create animations, support for interactiveness, live previews, and a range of export options. It also supports JavaScript for more advanced features.
Currently, Tumult Hype does not support collaboration within the tool. However, you can share your project with others by exporting it as a Hype document. This allows others to edit and modify your project using Tumult Hype.
The above is the detailed content of Visual Ad Creation Workflow with Tumult Hype. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
