If Adobe’s abandoning of Flash on mobile devices and tablets is leaving you worried, you might well need an HTML animation tool. Adobe have one of the their own, Edge Animate, which is quite good, but you might also like to know about Hype, from developer Tumult. It’s a flexible tool that can not only make animations for websites, but also widgets for iBooks Author, or web pages you can use in InDesign publications destined for Adobe’s Digital Publishing Suite. Flexible indeed, so let’s take a quick look at it all.
One way to get started is to prepare a layer-based layout in Photoshop. If your layout is currently in InDesign or Illustrator, copying and pasting into a document of the right size is one way to get here, but you might well have created it in Photoshop anyway. It’s easy enough either way: each piece of artwork that will be separately animated needs to be saved to a separate file.
If your Photoshop file is split into layers or layer groups already, Save each section for Web as a separate PNG-24 file.
Note: if there are soft edges on these chunks, then you’ll need to create PNG-24 files to allow for transparency on the edges. PNGs are larger than JPEGs, so be careful of your total file size.
Once you’ve organized your layers, selectively show your layers so that only one part of your file is visible, then Save for Web and choose PNG-24 at the top. Hide those layers, show others, then repeat.
Alternatively, if you have a solid file, split it up with the Slice tool, then Save for Web.
If your document is just a flat file — perhaps a client didn’t supply the components — then you can simply slice the file up. Use the Slice tool to divide the file up, then Save for Web, and save All Slices at once. This is easier, though less subtle.
When you save the slices, just save All Slices.
Open Hype, and create a new document. Use the first pane of the Inspector to adjust the size to match your file. There are many presets, or you can just type a custom size.
Hype supports a vast range of different sizes, and custom sizes too.
The easiest option here is simply to drag the images into your Hype document. If you don’t like drag-and-drop for some reason, you could also use Insert > Image. If you’ve sliced the image up, the separate positions will have been lost, so drag the components back into place. They’ll helpfully snap into line.
The image slices have been added and positioned, so now add text or boxes if desired.
Hype can, if needed, create its own content. If required, you can add text, boxes, buttons, and more. (One particularly handy trick is that you can create a box, add a link to it, then make the box invisible. Bear that in mind when we discuss links later on.)
The third Inspector pane is Metrics, and there you can adjust the size, position and rotation of any object. Dragging on the corners of an object also works to adjust the size, and the usual tricks like Shift-dragging let you move in straight lines. The fourth pane is the Element inspector, and it lets you change almost anything about an object’s appearance. Not just Opacity, but Blur, Hue Saturation, Brightness and Contrast; Reflections, Shadows and Borders, even Gradient or Image fills.
Many parameters can be edited, just activate and keyframe them first if you want to animate them.
All of those things can be animated, but it’s not obvious at first how to do it. Luckily, that’s pretty easy too. We’ll make the assumption that you’ve designed the final state of the image, and you want to animate it into existence.
Drag the playhead down the timeline a few seconds, however long you want the animation to last. I’m going for a quick four second animation here. Select one of the separated objects on your timeline. Now, click the keyframe button just to the right of a property you want to change. For example, if you want to fade and move the object into position, you want to keyframe Origin (Left), Origin (Top) and Opacity. Locking these values at this point is a great way to make sure the animation will end at the right spot.
Move a few seconds down the timeline, select each object in turn, and keyframe the final state of each slice.
Select each separate object in turn, creating keyframes on each property you might change. If you don’t see the property you want, choose it from the Properties drop-down first.
This is where you add properties that you want to keyframe.
Right, that’s how your animation will end. Now, move the playhead back a few seconds, create another keyframe on one or more of the properties, then move the object or change the property using the Inspector. Creating keyframes must be done explicitly.
The easiest way to get started is to move the image components out of the screen, and possibly fade them back to 0%. You’ll want to tweak the timing, and this is simple — you can:
Once you begin animating, you’ll see flexible controls like these.
Remember the invisible boxes trick mentioned above if you want to apply a link to a larger area.
Still, test out your site in whatever browsers you want — it should work well.
And now you simply export a folder that makes it all work.
There’s much more possible here — we’re only scratching the surface. Multiple scenes can be stored and manipulated in a single document, allowing you to build a virtual book. While I recommend creating keyframes manually, the process can be automated somewhat, and you can output in many different ways. I’ve used Hype’s output as part of an iOS publication, to animate once-static ads. We’d also love to hear about what uses you can find for it — so sound out in the comments!