Hype 3, by Tumult, is an OS X application for creating HTML5 animations. If you ever used Flash’s iconic timeline tools, Hype 3’s interface will seem very familiar. In this tutorial we’ll quickly get acquainted with the application, then we’ll make a basic Material Design animation using the tools available.
$$’s
Hype 3, at the time of writing, costs $49.99 for the standard application, or, if you need more advanced features, Hype 3 Professional is available for $99.99. You can download a 14 day trial version for the purposes of following along.
And, sorry, this is Mac only.
Interface
As a Mac user, you’ll be perfectly at home with the app layout. We’re using Hype 3 standard edition (the pro version has a darker, fuller UI), so let’s run through the main parts:
- This is the upper tool bar, where you’ll find some basic controls and quick menus.
- The left hand sidebar can be toggled (visible or invisible) and displays the scenes.
- As you’d expect, the central area is reserved for the stage, or canvas.
- The inspector on the right can also be toggled, has a tabbed interface, and is packed full of tools and options.
- Lastly, perhaps most importantly, the timeline and keyframe tools can be found at the bottom.
1. New Document
When you open the application you’ll be given a blank document by default. Begin by figuring out how big you’d like your canvas.
Under the Scene tab you’ll see some options to set out the current scene. I’ve opted to give the canvas dimensions of 600x400px. With that done, click the color picker under Background and change that to #424242.
Note: we’ll only be working with one scene and one timeline in this tutorial, but it’s possible to have multiple scenes, with numerous timelines, and switch between them all.
2. Some Objects
We’re going to animate one of Google Material Design’s Floating Action Buttons, so head up to the Elements menu icon and select the Ellipse:
Use your mouse cursor to draw on the stage–holding shift will constrain the proportions to a circle (much like any graphics application). According to Material Design guidelines, the large floating action button should be 56px wide, with an icon of 24px. Make yours proportional to these numbers:
Tip: go to View > Show Ruler to make rulers appear alongside your stage. Drag some guides, from the rulers onto the stage, to help you position objects.
3. Button Color
With the ellipse selected, under the Element tab you can change its background color (I’ve used #00E676 from the Material Design color palette) and remove its border.
Also under the Element tab, you’ll see you can add a shadow to the circle. I’ve given ours a 5px blur, and moved it 5px on the Y axis. It has a color of #2E2E2E, though you won’t be able to select any blend modes. Now it’s looking very “Material Design”, I think you’ll agree:
4. +
To add a “plus” symbol to the button we have a few options open to us. We could use the drawing tools to make it ourselves, but the tools are limited (especially if you’re used to the freedom of Adobe Illustrator or Sketch). Instead, we’re going to grab the SVG icon from Google.
Select the “add” icon, choose the white variant, then download it.
You can now drag the SVG file directly into your document, at which point it will be added as an image layer.
With the SVG icon selected, under the Metrics tab, make sure it’s the correct size for your animation:
SVG Limitations
Our SVG icon hasn’t been imported as an editable vector. Instead, if you look at the Elements tab, you’ll see it’s a separate resource and is being applied as a background image. This means we can’t go changing its color, or anything else like that (shame).
Also, this approach can cause issues in some browsers, though Hype 3 will warn you of that:
5. Group Hug
As with many graphics applications, you can now select the two layers we’ve added to our timeline, then go to Arrange > Group to organize them a bit better. Double-click the group layer name to rename it:
6. Let’s Animate!
Hype 3 provides a couple of methods for animating objects and their properties. We’ll begin with the most straightforward, so go ahead and hit the big, red Record button:
Now, drag the playhead across the timeline, stopping at frame 24.
Note: you’ll see seconds marked along the timeline, each one comprising 30 frames.
With the playhead now on frame 24, select the “add” icon, go to the Metrics tab in the right sidebar, then find the Rotation section and alter the Z value to 45°. This will rotate the icon, so that it now looks like a cross (×).
You can now click the Record button again, to end the process.
Keyframes
Hype 3 will have automatically added a property keyframe at the start of the timeline (this is the beginning state) and one at the end of the animation (the end state). In this case, we’ve only altered the Rotation Angle (Z) property, so that’s where the keyframes appear.
If you press play, or drag the playhead along the timeline, you’ll see the icon animate smoothly between the two property states.
Timeline Scale
To make it easier to view what’s happening on the timeline, make the timeline scale value higher using the slider on the upper right:
Easing
With our property animation selected (click on it) we can alter the easing type used on the animation. By default it will be ease-in-out, which means the animation will begin slowly, accelerate, then slow down again towards the end.
7. Another Object
What else shall we animate? Let’s make it look like our button is doing something–we’ll reveal a card when the button appears to have been clicked.
Use the Elements menu to add a Rectangle to the stage. Name the layer “Card”. Give it a background color (#757575) and place the layer underneath the button group. Position it off stage, to the bottom, and reduce its Opacity to 0 (we’re going to animate a couple of properties this time).
Now, instead of hitting Record, this time we’re going to do things manually. With the playhead at the beginning of the animation, and the Card layer selected, click Add Keyframe on the Opacity property layer. Then move the playhead to the end of the animation and add another keyframe.
Whilst on the final keyframe, in the Element tab, give the rectangle an Opacity of 100%. You will now have a neat animation between the two states.
8. Another Property
Having animated the opacity of the rectangle, now animate its position (we want it to slide upwards). This is achieved with the Origin (Top) property, so repeat the process we just did, adding a keyframe at the beginning of the animation, one at the end, then altering the position of the rectangle on the final keyframe.
You should see a path drawn, indicating the motion taken by the rectangle:
9. Timing
At the moment, everything happens at the same time, as soon as the scene starts, but we can change that. Let’s make it so that there’s a short delay, then the icon rotates quickly, then the card slides in gradually.
Drag the animation bars on the upper timeline, so that they time the various elements differently:
Note: don’t forget you can alter the easing to give different effects. Take a look at Google’s guidelines on Authentic Motion for more inspiration.
10. Export
Once your animation is complete, head over to File > Export as HTML5 or File > Export as Movie. The options available are fairly self-explanatory; choose to output a directory with HTML along with the JavaScript and SVG assets, animated GIF, MP4 and so on.
Bear in mind that when exporting as a movie, any interaction you’ve added (we didn’t in this case) might ruin the sequence.
11. Your Turn
Time for an assignment! By following this tutorial you’ve been armed with the skills to take this animation much further. Download the source and you’ll find the starter files you need to bring you to this point, then:
- Add a flash to the button; a white circle which fades quickly in to give a click effect
- Change the button to red once it’s been clicked
- Round off the animation by taking everything back to its original state!
Conclusion
Timelines are seriously helpful for visualizing animation as you build. Beyond what we’ve done here, Hype 3 also allows for all kind of interaction, events, and timeline control (but that’s a whole other tutorial). Have fun playing with these tools, get building, and show us what you come up with in the comments!
