Hype 3 Professional for dynamic, animated page designs, infographics and games

Now Reading
Hype 3 Professional for dynamic, animated page designs, infographics and games

With Hype you can create web pages, animations, presentations, infographics and anything else that you’d like to dynamically put on display for people to enjoy. Hype uses HTML 5 and Javascript to work its magic. It has just received a major overhaul and is now available as a free update to Hype 2. It has an in-app purchase ability to Hype 3 Professional.

Developer Tumult sent me the Hype 3 Professional golden master to review. Hype Pro for short comes with a plethora of new powerful features, including responsive layouts, physics, symbols, persistent symbols, a dark interface theme, editable animation timing, a grid system, a rearrangeable interface, templates, custom behaviours and OAM widget export.

Add-layout

I tried out most of the new stuff and was blown away by the ease of use and the power that you now have to create every conceivable interactive design. Of course I started with the most spectacular: the physics engine. One word: awesome. With three or four clicks you can create scenes that look like the real thing. I started with the classic ball falling on a rectangle and then worked my way up to balls falling in a bowl and rolling from one side to the other, photos bouncing off a not too sloped square and more fun stuff. You can even create games for mobile devices — e.g. balls rolling inside a tube, reacting to the device’s tilt, balls on a pool table behaving ‘real’, etc. — literally in minutes.

But physics, although fun, is just one of the new features that put Hype Pro in a league of its own. The grid system with customisable gutter width is a boon for web designers, as is the layout system. Next to the Scenes icon, there’s a Layout icon. Click on it and a new panel will open, allowing you to instantly create layouts specifically targeting iPads, iPhones and other devices. Hype comes with an iOS app to let you view your layout designs on an iPhone or iPad so you can continuously switch between iOS and OS X to check your design.

By creating for the largest viewport, creating new layouts for smaller viewports and rearranging the scene elements for each new layout, you are making your design fit for anything the user might view it on in minutes — literally. Best of all, you can adjust the breakpoint width to customise the layout for viewports that don’t fit the preset ones.

Layouts

Layouts can also be made flexible and scalable so the document scales as you change the viewport size. Element pinning and scaling completes this capability.

Symbols are another big new feature in Hype Pro. There are two types:

  • Symbols
  • Persistent symbols.

Symbols are elements that spawn instances. What you do is this: you either create a symbol from scratch or from a selection. The symbol gets a special icon in the Resources Library and now, when you drag it to the scene, each subsequent instance will have the same characteristics as the symbol itself. Changes you want to make to the symbol will immediately reflect in the instances as well.

Symbols include the animation characteristics and behaviours you set out the symbol to have in the first place. Now, when you select a symbol in the scene — not in the editor, which you access by double-clicking a symbol — a rectangle appears around it as always, but if you then give that rectangle a colour, the symbols themselves won’t get that colour, but only the rectangle. Same with resizing the selection rectangle: the symbol will stay the same, only the selection rectangle will change.

Physics

This might be a bug or a feature, but it isn’t what you would normally do with symbols anyway, unless you forgot you’re dealing with one. A purple outline fixes that, but I found myself messing about occasionally with the selection rectangles anyway.

There are also persistent symbols, and they are there to stay the same across scenes. Needless to say both types of symbols save you a lot of time.

Editable animation timing is another big thing. Hype Pro comes with a bunch of timing presets, including Elastic and Bounce, but until now you couldn’t change these timings. Now you can and it’s incredibly easy to do. Each timing has a curve that sits in a list you can access when you click on the “Ease In/Out” button of the Properties timeline. Each curve can be adjusted by manipulating the curve and you can even create your own new timings.

Scene-1

Last but not least, Hype Pro has custom behaviours. It’s the one feature I haven’t really tried out, simply because I couldn’t come up with anything useful as the behaviours already available in Hype will do just fine as far as I’m concerned. Neverheless, your inspiration may go much further than mine, so if you need them, they’re here.

Conclusion

Hype Pro is a powerhouse. It beats similar apps for the Mac by a large margin. In some cases it’s much more user-friendly, in most cases it’s also more powerful with more features that really fit in with what users need.

I wouldn’t stay with Hype 3, but would recommend an upgrade to Hype Pro. Although it costs a bit more, it has so much more power that it’s simply ashame to miss out on any of its features. Hype 3 Professional can be purchased for approx. €94.00, an In-App upgrade costs about €47.00. Hype 3 will be free to existing Hype 2 users, but cost approx. €47.00 when you buy it as a new user.

Run an example of a Hype 3 Professional document with physics applied to a photo here.