Play it now!

Before I delve into the remainder of this blog, go “play” Invincible… Forever!

Tumult Hype

Tumult Hype

I was recently introduced to a neat tool called Hype by San Francisco developer Tumult. Hype is an HTML 5 Animator, a tool to help build fast, fluid animated web content without using a proprietary or expensive program like Adobe’s Flash.

The result can be exported directly to a web page, or exported as an HTML 5 widget to insert into Apple’s iBooks Author, creating an animated, interactive e-book.

The concept isn’t entirely original, and several other companies are currently developing similar solutions: Adobe Edge (preview), and Sencha Animator ($199). Tumult Hype sets itself apart by its simplicity, ease of use, and a very reasonable $49.99 price tag.

Because HTML 5 animations are very cross-platform friendly, and work on all modern browsers, as well as many mobile devices, they’re a future-proof solution for producing more dynamic content for web pages.

The Making Of “Invincible… Forever!”

To test out the capabilities of this app, I decided to put together an animated “game” with sprites from the game Super Mario Bros. Mario would be invincible, and run to the right infinitely, while enemies appear on the right, collied with him, and die.

For running Mario, I simply imported an animated .gif image. Mario would remain stationary in the center of the screen, and the ground would move underneath him to give the appearance of movement.

For the ground, I created a box, set its background to the brick image, and set the image to repeat. Now I could animate it!

I positioned the box at the start, on the left, hit “record”, moved the slider along the timeline, and dragged the box across the screen. Presto! Mario runs.

Now for the enemies, shrubs and cloud: Create .gif images, drag into scene. Position, record, position, done! Surprisingly simple and straightforward.

Minor Quibbles

Despite the relative ease-of-use, I did run into a few minor issues that I feel limit the usefulness of Tumult Hype.

Sound

The animation was only half the work. Afterwards, I had to put together the simple web site, and add… sound? Hmm… yes it seems that Tumult Hype lacks any kind of support for sounds and/or music. The developer claims that HTML5 Audio is “lousy across browsers and devices” (source). To me, that seems like a lousy excuse. Within 10 minutes, and after a quick consultation to my CSS3 charts I had sound and music that works in most browsers.

Javascript

One issue with the sound/music is that they’re controlled by javascript completely independently of the animation. The problem with this is that after a little while, the sounds no longer sync up with the animation, due to differences in timing. One thing I really wanted to do was set keyframe-triggered javascript events. If I could fire an event on a specific keyframe, then I could hook into the event and trigger the sound, and never worry about it becoming out of sync.

Curves

Another thing I could find no mention of is a facility for creating custom, curved animation paths. When the enemies are hit by Mario, they go flying, and fall off the screen. If you hit something, it generally flies in a curved path, arcing upward before falling. This kind of effect is apparently impossible to create in Tumult Hype.

Left: The path I used... Right: The path I wanted.

In the end result, it doesn’t seem too apparent that I had to use an angular path, but it would have been nice… you know?

Better Keyframe Positioning

It doesn’t seem like there’s an easy way to fine-tune keyframe positioning. If I highlight one or more keyframes, and use the arrow keys, it either nudges the object’s position (Arrgh!) or moves the playhead around, de-selecting the keyframes in the process. It’s tricky to get that kind of fine-grained control on such a small user-interface element using a trackpad.

Conclusions

If Tumult keeps working on Hype, then it’s definitely going to have a place in the toolkits of future web developers. It could be a real competitor to Flash, and many other, much more expensive, HTML5 animators.

As it stands, I’d recommend that anyone who develops on the web take a little bit of time and at least check out the demo. At the very least, you might have fun putting together some neat animations on the internet.