Hype 1.0.3 lets you create HTML 5 animations without coding
At a Glance
Amazon Shop buttons are programmatically attached to all reviews, regardless of products' final review scores. Our parent company, IDG, receives advertisement revenue for shopping activity generated by the links. Because the buttons are attached programmatically, they should not be interpreted as editorial endorsements.
With Tumult’s Hype 1.0.3, you can create interactive HTML 5 animations without typing a single line of code. It’s simple enough to use that even novices will get great-looking results quickly, although there’s room for improvement. Limited design tools and an inflexible interface can interfere with building complex projects.
Design your scenes
Hype projects consist of one or more scenes, which function like slides in a Keynote presentation. Scenes can contain text, images, videos, and other elements, although importing audio files isn’t yet supported. It’s easy to precisely arrange and customize elements thanks to snap-to guides and auto-alignment commands. Hype’s Inspector lets you fine-tune properties like angle, color, and opacity while alerting you to potential incompatibilities with a customizable list of browsers as you work.
Hype’s iWork-like design tools are simple to use, but they lack many familiar features. Elements can’t be locked in place or grouped, and squares are the only built-in shapes available to add to scenes (although they can be tweaked to form rules or circles). There are no contextual menus, no image editing or masking tools, and no way to enlarge or reduce your view of the workspace, making it difficult to create large documents on Macs with small displays. These issues aren’t necessarily deal breakers, but they’re unfortunate omissions in an otherwise polished application.
Adding motion and interactivity
To fine-tune a project’s timing, keyframes can be freely repositioned, and the animations between them lengthened or shortened, in the timeline. Double-clicking animations there lets you enter exact keyframe start times, set animation durations, and choose whether animations ease in or out as they play. Managing multiple animations in the timeline can be difficult in projects with numerous elements, however. Element properties appear in a list beside the timeline, and seeing many of them together requires that you have a large screen—that or you must enlarge the timeline’s pane, obscuring your workspace. Elements can be dragged closer to each other in the list for easier comparison, but doing so also affects whether they appear above or beneath other elements in the scene.
Export and share
When your project is finished, you can export it to your Dropbox public folder to share with the world, or to an HTML 5 document and resources folder. These can be added to an existing site by selecting a few lines of clearly marked code from the exported HTML file, pasting them into an existing HTML document, then uploading the resources. An optional compatibility check at export lets you know which browsers, if any, will have issues playing your final project.
Here's the site I created with Hype, exported to Dropbox.
Macworld’s buying advice
Despite feature omissions and limitations, Hype 1.0.3 makes it easy and even fun to create HTML 5 Web animations or entire sites. But users looking for robust design tools should wait to see what future updates hold.
[Adam Berenstain is a freelance writer in upstate New York.]