Mac App of the Week: Hype 2.0 is a solid WYSIWYG tool for HTML5 animation and interactive graphics

When I made the transition from print designer to web producer in January, I wanted to make my graphic designing skills with me. PennLive.com, my day job, utilizes HTML5 to make the site desktop- and mobile-friendly and steers clear of Flash. While I knew some coding, I didn't know enough to create some of the elaborate interactive projects that other newspapers have done, such as the New York Times' Snow Fall and reshaping New York projects. In addition to custom components, the staff utilized jQuery and HTML5.

Nothing beats a good, solid foundation in writing code, but as someone making the transition from designing full-time in InDesign, I wanted to work with a WYSIWYG editor. Adobe came out with Edge in 2011, but it requires a Creative Cloud subscription. Sencha Animator is available as well, but the US$99 price tag might be a deterrent.

Then there's Hype. Created by two former Apple engineers, it is a low-cost, yet powerful tool for creating keyframe-based animation in HTML 5. Version 1 made its debut in May 2011, and 2.0 was released on August 20. Some impressive work has been done with Hype, including this graphic from the Los Angeles Times, and I was eager to try it.

Design

If you've ever used Flash, Hype will look very familiar. Most of the program centers around the stage, with timeline and properties bars beneath it. On the stage, you can expand various panels for adding scenes to your content or various elements. The preview button allows you to toggle among your browser of choice to view your project.

Additional panels include an inspector, where you do the majority of your tweaking, a list of project resources, colors and fonts. Hype lets you bring your own fonts into the system through custom CSS or browsing popular open-source Google fonts, which is a really nice touch.

In addition to the stage, you'll spend most of your time with the Inspector panel. The Swiss Army knife of Hype controls document settings, scene settings, metrics, elements, text, actions, and identity. There's a number of pre-set canvas sizes you can use based off standard monitors, iPhone and iPad screens. You can change stage sizes on the fly, which is good for when a project's demands suddenly change on you and you don't want to start over from scratch.

Hype's Jonathan Deutsch equipped me with a copy of Hype and pointed me to the site's extensive documentation and YouTube tutorials. A lot of the newest tutorials addresses the features of Hype 2.0 -- the biggest being the ability to preview your work on iOS using the free Hype Reflect. To go along with this, Hype lets you build the ability to add touch and swipe events so your project is desktop- and mobile-friendly at the same time. Other new features include the aforementioned web fonts, audio actions, curved motion paths and more.

Use

I had a bit of Flash training about six years ago, and a lot of it came back to me as I played around with Hype. If you understand the concept of key frames and animating elements between those frames, you won't have an issue with Hype. You can bring in all sorts of material to Hype: images, video, HTML widgets and more.

A lot of Hype's power comes from using the record button. In the timeline, either click where you want your key frame to be, or type in the time on the timeline. Hit the record button and either drag the object where you want it to go next or use the inspector panel to control things such as changing color, shape or opacity. You can establish different key frames for elements in the properties bar: movement can have one set of key frames, while opacity and color can have their own key frames.

Creating some of the graphic elements is where my frustrations came in. I really wish there was an easy way to create something as simple as a triangle in Hype without having to mask part of another shape or bring it in as an image. Food for thought for a future release. Some of the keyboard shortcuts were a bit perplexing as well. I'd like to see a switch to using the standard zoom keyboard shortcuts (⌘+ and ⌘-) rather than the ones built into the app (⌘> and ⌘<), which didn't even work when I tried using them because they conflict with bringing up the preference panel.

(Update: Deutsch explained that the keyboard shortcut match those for Keynote, which makes sense. Part of it was user error on my end as well. To zoom, I needed to press the shift key while doing ⌘> and ⌘<.)

One of my favorite Hype features is an ongoing tracking of browser and mobile compatibility. I learned that no matter what I did, the animation I was developing was not going to be Opera-friendly. Internet Explorer hated my attempt at using background gradients.

My test project concerned homicides in Harrisburg in 2013, and each new discovery in Hype added to our excitement for the project. We figured out we could link to our site's video player in Hype, letting us integrate previously posted videos into the graphic. You can see a version of the test graphic (note only one button is active) here.

After creating the graphic, I added a couple of swipe gestures and did a preview through Hype Reflect. If on the same network as the Hype desktop client, your iOS device will show up as an available preview option. In Hype Reflect, you have the option to test your animation in mobile Safari, access console messages and utilize a mirroring option that lets you make changes on the Mac and see them instantly on Hype. Using Hype Reflect, I was able to see that the video link didn't work on mobile, and that the text rendered a bit differently than from the desktop version. Ah, well, back to the drawing board!

Another feature I really like is the ability to export to Dropbox, in addition to exporting to a folder. That made it very easy for me to share the test animation with a couple co-workers. You can also export your project as a widget for use in iBooks or Dashboard.

Conclusion

If you're wanting to transition from doing Flash-based animation to HTML 5-based, Hype is a fantastic tool to start with if the thought of hand-coding interactive graphics sends a chill down your spine. I'm looking forward to using this more.

The 2.0 release addresses a lot of issues reviewers had with the initial release two years ago, and the support system is excellent. Tumult features work being done with Hype on its site and is experimenting with doing live tutorials through Google+.

Hype retails for $59.99 through the Mac App Store or Tumult, but is on sale for $29.99 until September 10. Those who purchased Hype 1.6 after July 20 are eligible for a free upgrade, and volume licensing is available. A 15-day trial is on site for those who want to give it a try.