All Articles Web
An Introduction to Hype: An HTML Animation Tool
Iain Anderson on Tue, June 25th 0 comments
Adobe (and many others) continue to abandon Flash in favor of HTML for mobile devices. Iain Anderson looks into Hype as a way to create HTML animations and widgets for the web, iBooks Author and more.

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.


Prepare layer-based media in Photoshop

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.

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.

Alternatively, if you have a solid file, split it up with the Slice tool, then Save for Web.


Prepare slice-based media in Photoshop

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.

When you save the slices, just save All Slices.


Create a new Hype document

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.

Hype supports a vast range of different sizes, and custom sizes too.


Import your media

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.

The image slices have been added and positioned, so now add text or boxes if desired.


Add additional objects

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


Inspector tricks

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.

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.


Keyframe the final state of each object

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.

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.

This is where you add properties that you want to keyframe.


Keyframe the initial state of each object, then change them

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:

  • Move the keyframes around.
  • Move an entire object around by dragging the rectangles in the Main Timeline section.
  • Change the timing for an object by dragging the ends of those same rectangles.


Once you begin animating, you’ll see flexible controls like these.

Once you begin animating, you’ll see flexible controls like these.


Add links

The sixth pane of the Inspector, the Mouse Action Inspector, lets you add a response to clicking or hovering over any element. Select any element, press the Plus to the right of On Mouse Click, then choose an action. Go To URL is handy for a link in an ad, but Run Javascript is obviously quite flexible.

Remember the invisible boxes trick mentioned above if you want to apply a link to a larger area.

Remember the invisible boxes trick mentioned above if you want to apply a link to a larger area.


Export 

Finally, we’ll Export as a Folder. This produces an HTML file with supporting documents, including a new copy of all the images you’ve inserted and a couple of Javascript files. To some degree, these are editable, so if you need to override anything (like the background color, or anything else that CSS can change), then you can do that directly. The animation, though, is opaque, and isn’t designed to be read.

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.

And now you simply export a folder that makes it all work.


Other possibilities

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!

Related Videos
Comments (0)

You must be logged in to comment.

Synthi V Explored
Arturia V 105
Dream It. Do It.
Do you want to learn Synthi V Explored?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: