What on earth is Hype? Is it a website builder? An HTML5 animation tool? An eBook interactive diagram assistant? A way to build simple cross-platform apps for phones? Yes. All of those and more. The new update to Hype 3 and Hype 3 Professional makes whole new classes of things possible, but here we’ll look at the whole app from scratch. If you’re an Adobe Creative Cloud user, you’ll find Hype occupies some of the same ground as Edge Animate, though each has strengths and weaknesses.
My free interactive kids book was animated in Hype and inserted page-by-page into iBooks Author.
As its core, Hype is an HTML5 animation tool, which means that you can create animations for the web that don’t require Flash. While there’s still plenty of work being done with Flash, the writing has been on the wall for years: it’s not supported on mobile (not iOS nor Android) and its decline is therefore assured. If you want to create an ad that everyone can see, you’re stuck with non-interactive GIF or the wonderful next-gen joy that is HTML5.
A simple document in Hype, with an object selected for animation.
Hype has several panes within its one-window interface. The main canvas is in the middle, with the timeline below. Properties are broken into several categories in an Inspector on the right, and Scene and Layout panes can appear to the left. Everything can be hidden at will, and if you go for the Pro upgrade, you can rearrange everything too. It’s a modern Mac app, with the Inspector built into the main window rather than floating, and with plenty of predictable shortcuts. Everyone can enjoy a light-colored interface, but if you want it dark, you’ll have to go Pro.
The animation world long ago settled (more or less) on a timeline-driven interface with keyframes, and it’s in full flow here. You can create simple objects (circles, rectangles and so on) or drag in bitmap (PNG/JPEG) or vector (SVG) artwork, and they’ll be added to your timeline. The top half of the timeline shows your objects, while the bottom half shows currently accessible properties for the currently selected object(s).
So, so many properties to animate.
Each object has many, many properties which can all be keyframed individually, though only a few are shown by default. If you want to work with one, choose it from the Properties panel and it’s added to the lower half of the timeline. While all the basic properties work as expected, if you want to use something fancier, you’ll need to be aware of the limitations of your target platforms. For example, if you’re unlucky enough to have to support Internet Explorer, you won’t be able to use CSS3 filters like Blur. Indeed, some platforms have issues with using SVG at all, which may stick you to pixels for now. Luckily, you can choose which versions of which platforms you’d like to see warnings for, so you won’t be swamped with useless information.
Motion paths? Sure!
Manual keyframing support is good, though it follows a fairly rigid model—you have to create all keyframes manually, not just the first one. If you can’t get used to that, no problem: turn on keyframe recording with the big red button instead.
In terms of recording object motion, you can use traditional X/Y parameters, or turn on Motion Path support for any given object, then create whatever crazy curvy paths you want to. Option-clicking keyframes creates bézier handles as you’d expect, so it’s likely to be a familiar experience.
There are many preset timing graphs — though you can only create custom graphs in Pro.
No matter how you create your animation, double-clicking the line between two keyframes will show a rich timing editor, which lets you choose and then (in Pro only) customise the transition between two parameters. This is similar to the easing graphs in Edge Animate and Flash, and is a welcome addition.
All the basics of clicking and dragging are supported.
Preview in any browser or on a nearby iPad running Hype Reflect.
It’s pretty easy to check what your work will look like on-screen — just play it — but you can’t really know how it feels until you hold it in your hands. Luckily, the free Hype Reflect app lets you preview your current document on an iOS device on your network. Hype can also show your document in any browser on your system, so you can spot and fix problems early in the development process. Not all browsers and platforms will deal with all animations equally, and it’s good to know where you have to compromise before the client approves an effect you can’t actually deliver.
When you’re done, you can export a folder with HTML and support files, or a dashboard widget usable in iBooks Author. OAM export is a (pro-only) feature for InDesign users, which makes it possible to include Hype-made HTML animation in InDesign-made EPUBs (though currently there are extra issues on the InDesign side of things that must be worked around). You can also export to non-interactive formats, which can be useful as a fallback for older browsers. Animated GIF and H.264 MPEG-4 videos are both options here.
Why yes, this is four balls bouncing against a user-controllable paddle.
While Hype 3 is a free upgrade for existing users, Hype 3 Professional is an optional in-app purchase that brings lots more to the table. As well as the rearrangeable, optionally dark interface, you can work with responsive layouts, providing different object positioning for different sizes of screens, or for different orientations on a tablet. Percentage-based measurement is also available.
Also in Pro, Symbols let you package up an object (or group of objects) along with their animation, then re-use that chunk over and over again in a single timeline. This kind of object management is very useful for large projects and has long existed in Edge Animate and Flash, so it’s great to see it here too. Some smaller features are Pro-only too: grids, templates and custom behaviors.
Lastly, physics support is going to be of great interest to some developers; you just need to designate an object as Dynamic and it will bounce against other objects in your scene. You can keep objects within bounded areas by using Static objects; they don’t move, but objects can bounce against them. (Invisible static objects are possible too.) Most exciting of all, you can change gravity by tilting your device. If you’ve ever wanted to create a home-brew pachinko table, now’s your chance — no coding required!
Grab the trial from tumult.com rather than the App Store.
If you have Hype already, this is an easy upgrade to recommend; it’s a great update to a mature app. And if you don’t have it, but need an HTML animation tool? Still a great choice. If you have Creative Cloud you have Edge Animate already, but there are several areas (scene support, live previewing on devices, file handling) where Hype has the edge.
Should you go Pro? If you think you *might* use any of the pro features, it’s an easy choice, but if you’re not sure, grab the trial first and see how you go. Definitely recommended.
Hype 3: US$49.99 + US$49.99 for Pro upgrade, Mac App Store
Free 14 day trial: http://tumult.com/hype/download/