All hail flexible layouts
I had my first foray into building a website with responsive design back in 2012. From that experience, I learned far too much about scaling, device-widths, and all sorts of fun CSS rules that start with “@” and end with lots of pounding on a keyboard at 2:00 A.M.
In contrast to all that, Hype’s responsive controls are almost laughably simple. To enable them, just check the Scale box under the document inspector, then use the Pins & Sizing controls under Flexible Layout. You can also adjust the way your elements scale when a window is resized by adjusting the Scaling Behavior dropdown: Choose to stretch your element, or preserve its aspect ratio by shrinking to fit or expanding to fill.
If you’re an iOS developer, you might recognize the style of Hype’s responsive design implementation; in fact, Tumult openly acknowledged taking a card from iOS’s “Springs and Struts” model when building Hype’s responsive tools. “Our users create all kinds of different content, from infographics to children’s books, so we wanted a system that had been proven to work well on a wide range of documents,” co-founder Jonathan Deutsch told Macworld in an email. “From a user interface perspective, the notion of pinning to sides seemed very straightforward, and with the example area users can immediately see how the element will behave.”
That aforementioned example area is an excellent touch, and typical of the care and respect Tumult has for Hype’s users. The app doesn’t expect you to be familiar with responsive design or “Springs and Struts”; even if you’ve never dealt with it before, the example area quickly helps you start working responsively. The tools aren’t perfect for every task—in the test animation I built, for example, I had trouble getting an absolutely-positioned element to scale but stay in the same place as the window was resized—but they’re great for the majority of your basic responsive projects.
Not just for the Web anymore
From the start, Hype has been a pretty nifty program for building basic animations, but it was an HTML tool first and foremost; if you wanted to display your creation, you needed to host it online, and varying CSS browser standards meant that your viewers might not always have seen what you intended. This is no strike against Hype; the app tries very hard to make sure your project is fully cross-compatible for all computers and browsers. But depending on what you’ve built, it may not always succeed.
Hype 2.5 addresses this issue in a major way, offering two alternative platforms for viewing animations: video and GIF animation. HTML5 is still clearly the program’s focus, but in expanding its export options, Hype 2.5 has opened itself up to an entirely new kind of user: budding animators.
Now, I have no intention of ever making animation more than an occasional hobby, but it was astonishing how quickly I was able to put a basic piece together. The drawing and lettering, done in Photoshop, took around an hour and a half; the actual animation took just about two hours, despite having to familiarize myself with Hype’s tools during that process. I don’t think the result will win me any awards, but it’s very satisfying to produce a solid piece from an evening’s worth of work.
And if your interest in animation is on the GIF side, you don’t even have to go that far. My first Hype 2.5 test was a three-second looping animation of flickering stars: drawn in a half-hour, built and exported in ten minutes.
You do need to know a little bit about keyframes to animate in Hype, but Tumult has a host of great tutorials to get you started right.
Hype Reflect, the perfect mobile accessory
Hype Reflect’s minimalist iOS 7 interface mostly stays out of the way when you’re interacting with your project in mobile, which I appreciate; its focus, after all, should be more on the project than the app’s various trimmings. Even without many controls to fuss with, however, the app offers a decent amount of flexibility between previewing, Mirror Mode, and sending your project to mobile Safari.
Tweaks, trims, and efficiency boosters
Beyond the major showcase features in Hype 2.5, Tumult did a ton of work to improve the program’s usability along with adding under-the-hood tweaks, and it shows. You can now upload Retina-sized images; Hype then automatically calibrates these images so that the right size displays for the proper device, in order to save bandwidth. Building animations is also a lot smoother with the addition of basic timeline-editing features such as element snapping, arrow key manipulations, and keyframe keyboard shortcuts.
Though these bits and bytes may seem small on their own, together they really refine an already excellent program. Retina image support and automatic image optimization cement Hype’s responsive design tools as a way to build for all platforms, while timeline improvements and new element options add more power and flavor to the program’s animation components.