Use Hype to create HTML5 animations that will play on any device

What You'll Need:

>> Tumult Hype 1.0.5 (available on the Mac App Store for $29.99)
>> 20 minutes

Difficulty: Medium

HTML5 animation is definitely on the up. While Flash is still common for animated banners and the like on the web, there are disadvantages. You can’t view them on iOS for a start. And recently, Adobe announced it would be ceasing development of Flash on mobile platforms and putting its efforts into HTML5.

There are a number of ways to create HTML5 animations. If you’re a whizz at HTML, you’ll not have a problem doing everything in lines of code. And while we’d all love to be able to do this, it’s just not realistic. You can also use a tool called Edge that Adobe currently offers as a free download at http://labs.adobe.com (but it is a beta preview). Or, you could use Tumult’s Hype.

Hype is a new tool for creating HTML5 animated content. It takes a lot of its central ideas from animation tools, such as After Effects, so if you’re familiar with the principles of key framing and in-betweens you’ll be up and running in no time. Even if you’re not, Hype has some great features for creating animations. One is the Record Animation button on the timeline (and in the Animation menu). Essentially, it enables you to move objects around in the application, recording their motion path, scale and other transformations as you go. You can then, of course, tweak the keyframes as necessary to finetune your animation.

In this tutorial, we’ll be creating a simple animated logo to be used on the splash screen of a mobile site for iOS. But this is just one potential use for Hype. It’s perfect for creating HTML5 animated banners. You can also create small animated content for apps (including Adobe Digital Publishing Suite), without any coding. Exporting and choosing your desired browser and destination is easy – go to Export > HTML5. You can even export straight to a Dropbox account to share it.

What’s more, Hype is only $29.99 and available from the Mac App Store. It’s a bargain at that price and you can begin creating HTML5 animations for websites, mobile sites and apps in no time at all. So let’s get started on a simple animation. Remember, this is just a guide, so apply it to your own images, graphics and so on.

The Hype Interface

1 of 7

How to Make Web Animations Using Hype

• View the full image

  Initial Setup

  Open Hype. The default page size is 600x400 pixels. You can change this to any dimension, or use the Default Sizes drop-down menu to specify a size. We’re going to create an animated logo splash screen for use on a mobile site, so use iPhone Full Portrait (320x480).

• View the full image

  Import Graphics

  Now to import your logo. Save it from your graphics app as a transparent PNG file. Go to Insert > Image and choose your file. Repeat for other files you want to bring in. You can create text natively in Hype, but for more control we’ve created it in a graphics application.

• View the full image

  Record Animation

  The images show in the timeline. We’ll add a simple scale effect to an image and a fade-in effect to the text. Move the text off the stage onto the pasteboard. Position your image at the place and size you want it to start at and go to Animation > Record animation (Command+R).

• View the full image

  Continue Animating

  Now, drag the playhead to around two seconds on the timeline and scale the image up so it fills the screen. Hype will then animate this for you. Go to Animation > Record Animation again to turn it off and then hit the spacebar to preview the animation.

• View the full image

  Fine Tune

  Drop the image name into the timeline. You’ll see a number of diamonds at the two-second mark. These relate to the kind of transformation you’ve applied. For example, to scale faster, drag back along the timeline; to scale slower, drag them forward.

• View the full image

  More Effects

  Put the playhead back to 0 and bring your text into the center. Hit Record Animation again and, in the Element Inspector, change the opacity to 0. Drag the playhead up to the end of your animation and change the opacity to 100. Hit [Space] and you’ll see your text fades in. At 0 on the timeline, scale down your text. Using the Metrics Inspector, rotate the angle of it on the Z Axis. At the end of your animation, scale and rotate again – this is how your text will finish.

• View the full image

  Quick Tip Add interactivity to your animation by using the Mouse Action Inspector. With it you can: point to a URL; specify to play a different Hype scene; and run a different timeline or run JavaScript. Note that no hover events will work on iOS.

• 
• 
• 
• 
• 
• 
•