Since I started messing around with HTML back in the 90s, I’ve had a long-standing hatred of WYSIWYG editors. (It probably stems from too many late nights yelling at early versions of Dreamweaver and its terrible, terrible output.) To this day, I prefer to manually code almost everything I do.
But hand-coding HTML5 animation today is about as fun as hand-coding image maps in the 90s—you don’t really want to spend your day neck-deep in CSS and number-transforms if you can get away with it. Hype 1.0 was the first program to make this breathlessly simple and cross-browser friendly, and I loved the app for it. Hype 2 is a huge upgrade to an already-fantastic program, packing in ten new features (and more than a few tiny ones). I took Hype’s new version for a spin; here are some observations.
The glory of instant preview
One of Hype’s coolest new features is actually another app altogether—Hype Reflect, a free program for iOS devices that lets you instantly preview your work on an iPhone, iPad, or iPod touch.
The app works flawlessly, with no iBooks Author-esque tethering required—all you need is to be connected to the same Wi-Fi network as your Mac running Hype. My iPad popped up instantly, and loaded my project in seconds.
Hype Reflect also supports Mirror mode, which automatically reflects any changes you make to your document in real time; viewing individual Scenes from your timelines; opening the developer console; and sending your preview to mobile Safari. I had no hitches, hiccups, or other problems with this handy little companion app—everything worked like a charm.
All about mobile
Hype has placed a lot of emphasis on mobile development in its second version, and Hype Reflect is only one part of a much, much larger strategy. Hype 2 offers new viewport settings so that you can build animations designed for specific mobile screens; it now allows user scaling and touch events, and can highlight taps; and you can even design a project to be a home screen web app.
Better still, you can play the entire project offline if you enable the new offline application cache feature, which saves all resources locally so that you can load it anytime—whether you’re connected to the Internet or just looking to pass some time on the plane.
Swipe, touch, and click
Hype’s animations just got a lot more touchable: You can now program swipe and touch events for gestures like swipe left, swipe right, swipe up, swipe down, and drag. By default, mouse events will automatically translate to touch events on a mobile device.
You can also use swiping and dragging to control timeline playback—say, if you want to create a gallery or carousel.
I had a lot of fun building a simple gallery with timeline swiping—Hype’s keyframe tools make this a breeze. (If you’re not sure how to use Hype’s keyframes, the apps’s tutorials are very helpful.)
Noise, noise, noise
While no one particularly likes auto-playing audio, it’s sometimes useful to be able to play a sound clip or music for your website. To that end, Hype now has support for audio actions, which let you play sound in response to an action.
Audio actions support MP3, OGG, and WAV, and files can be dragged and dropped into your documents library like you would an image file or font. You can even disable preloading for large files.
I only toyed around briefly with audio, but it seems to be as simple to set up as most other Hype interactions. Audio can be triggered on scene-load or with a specific action, like a tap. I will note (and Hype does too in its documentation) that iOS devices won’t automatically play sound unless your webpage is coming from a native app or home screen Web app; instead, users must tap or perform other actions to trigger audio.
On the curved motion coaster
If you’re looking to expand your animation beyond linear transitions, Hype 2 also offers support for curved motion paths. All elements begin with left and top origins, but you can click the Bezier curve to the left of either path in the properties section of the timeline to switch to Motion Path mode. Once enabled, you can click the animation line and add Bezier curves much like you would in any other graphics program. Hype can even automate rotation of your element as it follows your path.
Motion Path mode works and renders fabulously, though I occasionally found myself creating crazy loops that the program had trouble smoothing out. (Turns out doing a 360-degree turn in a small space is not recommended.)
Free your fonts
Over the last year or so, custom fonts have become much more prominent throughout the Web; Hype now offers full integration with Google’s Web font library in addition to support for any custom font you wish to embed. (All Google’s fonts are free to use, but if you plan to upload a custom font, you should make sure you have a license for displaying said font on the Web.)
Picking a Google font is easy: Just go to the text inspector and click Add More Fonts, then choose Google Fonts as the source and pick your favorite. You can see previews of each font, type in custom preview text, and even change the size and color to get an accurate idea of the font; once you’ve found one, just click Add Font to bring it into your project.
It’s slightly more difficult to add a custom font: If you’re using a third-party service like Typekit, you can add in the relevant CSS and Hype will load the font from Typekit’s servers; otherwise, you have to add CSS and upload the font to your Hype resource library. (Thankfully, Tumult offers great documentation for this on its website.)
New shapes and better previews
Even Hype’s smaller improvements, like new CSS-created shapes and better previewing, are welcome features.
If you prefer using CSS-built shapes over images of circles and rounded rectangles, Hype now lets you do so from its Insert menu. You can resize and rotate these shapes at will; Internet Explorer has a few quibbles about opacity and rounded shapes, but all other browsers support these combinations just fine.
Seeing these new shapes in your browser of choice is as simple as clicking Hype’s Preview button in the toolbar. Safari is selected by default, but clicking the arrow to the right of the button displays a dropdown menu with all your available browsers, along with the iPhone simulator and any devices connected via Hype Reflect. Choose a different browser or device, and it becomes the default Preview button until you select something else—a great way to test browser by browser. You can also preview just the current scene in your browser, rather than the whole animation.
Search everywhere (even on OS X) and make it full screen
It may not be the flashiest feature, but full-text search is a great way for people to find your content online—and Hype now supports it for any project. This means that if you’re bent on creating your entire website in Hype, it’ll still be fully searchable via major search engines.
Full-text search is also supported right on OS X for your project files; you can type any phrase or words from your Hype file into Spotlight to find it, and the Quick Look preview even displays your first scene’s animation.
If you’re struggling with screen real estate, you can additionally pop into full screen mode for a more comfortable working experience. Though I don’t often use full screen for apps, I find it incredibly useful for creative endeavors and am glad to see it integrated into Hype 2.
Time to play
If you want to check out Hype 2—and if you’ve ever wanted to build HTML5 galleries, animations, or games, I suggest you do—Tumult offers a free 14-day trial on its website. You can also pick up Hype 2 at its $30 upgrade pricing until September 10 on either the Mac App Store or Tumult’s website; after that, it returns to its regular $60 price.
Author: Serenity Caldwell, Associate Editor
Serenity has been writing and talking and tinkering with Apple products since she was old enough to double-click. In her spare time, she sketches, writes, acts, sings, and wears an assortment of hats.