The Benefits of Using HTML5 and Hype

Move over Flash and Dreamweaver; Tumult’s Hype is living up to its own hype. Many creative professionals, such as animators and designers are switching from Adobe’s Flash to this newer program to create HTML5 encoded animations, interactive sites, and interactive storybook adventures. Hype has become a very popular choice because of its many advantages, including a very easy-to-use platform.

Hype is Mac only and requires little to no prior coding knowledge, although familiarity with JavaScript and HTML may come in handy. The inspectors make it easy to get up and running with the program rather quickly. Here you can add and modify text, manipulate images, and transform shapes without resorting to coding techniques. However, if you would like the opportunity to show off your coding prowess, you have that option as well. Hype allows very simple and easy access to the code for each design element within your project.

The true beauty of Hype is its versatility. Designers can integrate all of the latest HTML5 and CSS elements very quickly and easily, using the app’s Inspector feature. You can add these elements without even writing any of the code yourself. You simply make the adjustments using the Inspector, and Hype will make all of the adjustments to the code for you. Of course, you still have the option of inspecting and modifying each section of code if you would like.

Using the Export function, Hype generates an html file and a resources folder containing compatible code and your imported images, if any. The export preview will alert you to any anticipated browser compatibility issues. It is a good practice to test the output by previewing in those browsers. To make this easier, I recommend running Windows 7 in a virtual environment such as VMware Fusion (the one I use) or Parallels. Using the Hype editor, it is possible to make manual changes to the design in order to increase its functionality and compatibility with a given browser. You can also see how your creation looks using the built in iPhone simulator.

This is one of the main attractions of Hype: unlike Flash, you create animations that are supported by iOS devices such as the iPhone and iPad. Getting the output to display properly on Internet Explorer 7 and 8, however, can be tricky. These browsers don’t support opacity settings and transparent PNG files. We’ve found that you can often solve the problem by converting your PNG’s into GIF’s, but you will have to use masks instead of opacity to simulate fading in and out. In most cases, IE 9 support is not a problem. To their credit, Tumult has done a superb job of getting around Internet Explorer’s limited support for HTML 5.

If you are looking for a reliable animator that is accessible and intuitive, especially for those (like me) who are accustomed to working in the Flash environment, Hype is certainly worth its weight in gold and then some. This application does most of the hard work for you and makes it easy to check browser compatibility. There is no free player to download, as the animations play right in the browser. The slides on this site’s homepage were built using Hype.

Hype can provide a great medium for new designers to begin completing animations and designs as they become more familiar with writing and modifying code. That being said, it’s scope remains somewhat limited perhaps due to the limitations of the standard. Flash still remains by comparison a more advanced platform, but as HTML 5 evolves I believe Hype will ride right along with it. If you are ready to experiment with a tool outside of Adobe’s Flash, Hype is certainly worth a try.

Price: $49.99 USD

Where: the App Store

Mac Only

Version 1.5.2 Reviewed

Download Trial

Table of Contents