Since the mid-1990s, Adobe’s Flash has been the tool of choice for animating Web pages. But ubiquity does not ensure popularity — while Flash is widely used, it’s also widely loathed, thanks to its closed, proprietary nature, along with its flaky, memory-hungry browser plug-ins.
The technology that threatens Flash’s dominance — even its eventual survival — is HTML5, the latest iteration of the language and protocols that define the structure of Web pages. While not as thoroughly scriptable as Flash, HTML5 allows for a much richer range of animations and transitions than previous versions of HTML. With Apple’s iOS-based universe a comprehensively — aggressively, even — Flash-free zone, and with even Adobe abandoning Flash development for mobile devices (see “Adobe Halts Development on Mobile Flash,” 9 November 2011), Web designers are turning to HTML5 as a means of creating dynamic content.
The problem with an open standard like HTML5, though, is that there’s no single party pushing it and ensuring the availability of authoring tools. While Flash is a closed product, Adobe — and Macromedia before that — has provided decent authoring tools to enable reasonably straightforward content development. Adobe has offered Edge as an example of what an HTML5 editor might look like, but Edge shows every sign of being a program destined to languish in “preview” status until it’s quietly forgotten.
In the meantime, Hype offers an easy way to get started in HTML5 animation and interactive content. Published by Tumult, a small startup founded by former Apple developers Jonathan Deutsch and Ryan Nielsen, Hype is a timeline-based WYSIWYG HTML5 editor that outputs HTML5 code that can be placed in existing Web pages. First released in May 2011, Hype has recently been updated to version 1.5.
Basic Usage — Working with Hype is reasonably effortless. As one might expect from a Mac program developed by one-time Apple developers, the interface is quite reminiscent of an iWork application. You place layout items such as text boxes and images on a canvas, and tweak their properties using a standard property inspector and color palette. Beneath the canvas is the timeline, on which you can specify any of a number of different style elements at any given instant.
For instance, you might want to have your logo slide in from the left, and fade in at the same time. Achieving this takes a few steps, but all of them are easy:
- Drag the logo to its starting position on the canvas from either a Finder window or Hype’s Media palette.
- Position the playhead at the starting point in the timeline.
Click the Record button.
Set the start properties for the logo, such as opacity or shadow, in the Element pane of the Inspector palette.
Move the playhead up the timeline to the point where you want your logo to be in its final position.
Drag the logo to its end position, then return to the Inspector to set the logo’s ending visual properties.
Click the Record button again to stop recording.
Hype automatically generates the necessary code to create the transition between the start and end key frames over the time between them in the timeline.
You can animate properties such as color, size, orientation, font family, type size and more using the timeline. And you can drag key frames along the timeline with a fair degree of precision, giving you tight control over the timing of events.
Working with elements on the canvas is straightforward, and has improved notably in version 1.5, thanks to the developers responding to concerns from users. Hype now allows grouping of objects and locking them on the canvas, a feature that was much missed in the original release. Contextual menus have been added, providing quick access to layout and organizational features without having to mouse away from the canvas, and there is now a zoom pop-up menu in the toolbar.
Previewing a Hype document can be done in two ways. Clicking the Play button in the timeline previews the document’s animations; however, actions based on mouse events require previewing in Safari. To do that, you click the Safari icon in the toolbar; Safari responds by opening a new window showing the content you’re working on just as it will appear on your Web site.
Quirks and Limitations — Though Hype has improved notably in version 1.5, there remain quirks that give one a moment’s pause. The Insert menu, for example, contains not a single keyboard shortcut, which is a little annoying when you insert the text, buttons, images, and other goodies that are the sine qua non of a Hype document. An Insert Elements pop-up menu in the toolbar across the top of the canvas offers an alternative means of inserting, but built-in keyboard shortcuts would have been appreciated (you can, of course, use the Keyboard pane of System Preferences or a utility like Keyboard Maestro to assign
More troubling is this: although Hype provides an easy way to design and develop HTML5 content, it provides access to only a subset of HTML5 animation capabilities. For instance, HTML5 animation options allow extensive control over an object’s movement. Hype, however, offers only a single option — time taken, courtesy of the draggable key frames in the timeline. Objects accelerate, move, decelerate, stop. While this is an obvious and attractive way of moving objects around a screen, and is likely to be the style most users would choose much of the time, it remains frustrating that Hype offers no control over speed or acceleration.
Similarly, although Keynote-like transitions between scenes in Hype can be performed using the full range of HTML5 animation styles — wipes, crossfades, swaps — you cannot access HTML5 timings, such as the time a transition will take, directly in Hype. What you see may well be what you get, but you get only what you’re given. This may be an inevitable tradeoff: HTML5 offers extensive fine-tuning possibilities for the motion of elements, but the price of Hype’s focus on ease of content creation is the lack of access to these options.
Furthermore, Hype still lacks much in the way of image manipulation tools. Resizing is easily managed, and can be automated from within the timeline, but masking and editing tools are still absent. You can move images around in Hype, but you’ll need to ready them in an external image editor before you can place them in a Hype document.