Thoughtful, detailed coverage of the Mac, iPhone, and iPad, plus the best-selling Take Control ebooks.



Pick an apple! 
Fight Gravity with Game Your Video

The Reverse button in Game Your Video can often provide hilarious results. Use the Reverse button if you have filmed yourself eating something or diving into a pool, and get some cool anti-gravity effects.

Visit Global Delight


Believe Most of Tumult’s HTML5 Hype

Send Article to a Friend

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:

  1. Drag the logo to its starting position on the canvas from either a Finder window or Hype’s Media palette.

  2. Position the playhead at the starting point in the timeline.

  3. Click the Record button.

  4. Set the start properties for the logo, such as opacity or shadow, in the Element pane of the Inspector palette.

  5. Move the playhead up the timeline to the point where you want your logo to be in its final position.

  6. Drag the logo to its end position, then return to the Inspector to set the logo’s ending visual properties.

  7. 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.

Hype also allows for interactive control of Web content. Any layout item placed on the canvas can have associated actions based on mouse movement (these effects work best when viewed in a computer’s Web browser: the absence of a mouse in an iOS device makes hover-based actions problematic). Mousing onto or off of a button can trigger actions, such as changing the “scene” (Hype’s name for what is presented on the entire canvas, including its background), or executing a JavaScript script.

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.

Exporting content from Hype is also straightforward. Hype generates an HTML document, as well as a folder containing the supporting files required to drive the page. This typically includes any graphics files the page may include, along with a JavaScript (.js) document containing the scripts required for the animations on the page.

Hype’s HTML code is self-contained, and can be published as it stands. But it’s more likely that you’ll want to insert it into other documents, and for that purpose, the code is clearly marked up with comments showing the lines that actually call the JavaScript and make it work. These lines can be copied and pasted into another HTML page: upload that page along with the folder containing the supporting files to your Web server, and your shiny new Web page is ready to leap off the screen. You can see a quick sample of Hype’s output at my Web site.

Modifying your Web page after the fact requires the original Hype document; the HTML that Hype generates is readable, but limited, with the vast majority of the action taking place in the accompanying JavaScript file. That file is editable, of course, but not easily; if you want to change, for example, something as simple as a font, you’ll definitely want to edit the original Hype document, since even that level of detail is stored in the resulting JavaScript file, and not in a CSS file.

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 your own).

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.

But I don’t want to sound too negative. While Hype may not yet offer full access to all of HTML5’s animation tools, or all of the features a Web designer might want in a single program, it’s best seen as another useful tool that designers can employ in the process of building a standards-compliant site. (Technically, Hype can create self-contained Web pages, but few people will find it sufficiently capable as a standalone Web authoring tool.) For what Hype does in terms of creating animated and interactive content, it’s both easy to use and convenient, and will be attractive to designers who would otherwise be reluctant to get their hands dirty with HTML5 and JavaScript code. At $49.99 from the Mac App Store, Hype is a good investment for the Web designer who wants to add a little dynamic content to an otherwise still page.


CrashPlan is easy, secure backup that works everywhere. Back up
to your own drives, friends, and online with unlimited storage.
With 30 days free, backing up is one resolution you can keep.
Your life is digital; back it up! <>

Comments about Believe Most of Tumult’s HTML5 Hype
(Comments are closed.)

Graziano  2012-04-16 23:30
Is it possible to use Hype also with a webpage-application-software like Rapidweaver?
JohnB (SciFiOne)   2012-04-18 10:07
We're going to need something equivalent to Flash-block.
Paul F Henegan  2012-04-25 21:17
" 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."

Nonsense. Adobe is currently accepting pre-orders on its HTML5 authoring tool "Muse," with "Edge" planned as part of the the "Creative Cloud" service. There is no way they will miss out on the opportunity to be early with an integrated development suite for HTML5.