A Review of Tumult Hype. Build HTML5 Animations Easy!

A Review of Tumult Hype. Build HTML5 Animations Easy!

22:04 15 January in Tumult Hype
3 Comments

image

When I first took the initiative to start learning how to do HTML5 animations I came across an amazing tool called Tulmult Hype. This tool took me by surprise with how much it could already do with HTML5 animations and how easy it was to use.

Since then I have taught a couple different sessions on Hype at various conferences and I get the same excited reaction with those in my session.

Often times they will come up to me saying how impressed they are with the tool and how they had no idea they could do that with HTML5 yet and I always emphasize the best part of it all, it’s only $29.99 from the Mac app store!

Coming from being a Flash developer I was reluctant to learn HTML5 due to Flash having GUI interface. While I know code and don’t mind using it, I often prefer working with a GUI interface I like having something I can actually see and liked knowing what is going to happen on my timeline at any given time. Well Hype gives me that ability for HTML5 right out of the box (Or should I say App Store?).

Here are some features that really stood out to me.

1. Easy to use Flash like timeline – If you are already use to Adobe Flash’s timeline, it will not take you long to get use to the timeline in Hype. Hype gives you easy automated key framing. What that means is you turn on the record button and then just move your play head where you want on the timeline then just move your object to the next location. It will automatically start creating keyframes for you. I personally like more control over the frames and do not want it creating frames unless I want it to. I can easily turn that off with the quick push of a button you can add the keyframes manually.

Hype Timeline

Hype Timeline

2. Scene Management – One thing that I really love about Hype is the ability to create different scenes. With Adobe Edge there is not an easy way to create different scenes (At least none that I have found yet) so to be able to manage my scenes and place my content in different areas of the interaction is very useful.

Hype Scenes

Scene Management

3. Different Button States – I learned Hype before I learned Adobe Edge and one thing I could not easily find in Adobe Edge was a way to do button states. When I say button states I mean hover, pressed and normal. Meaning what the button will look like when it is pressed or hovered over. I am pretty sure Adobe will add that in later since it seems to be standard in all their other tools however is not in Edge at this point.

Hype makes it easy for you to see that these states are there for you to change. When the button is selected you see another menu button shows that has the labels Normal, Hovered and Pressed. When you click on each of these you can see what the Normal state will look like (What it looks like before you hover over it), what it will looked like when it is hovered over and when it it is pressed.

Hype Button States

Button States

4. Easy Button Controls – I have taught Flash Basics for many years to people just starting out with anything programming like and one thing that is always hard is getting them to have their buttons do something (What good is a button that does nothing?). In order for them to get the button to do something you have to go into ActionScript which leads you to explain what ActionScript is and the basics of ActionScript before they could even understand how to make a button functional.

With Hype it is not that way at all. When you select any button you have options in Mouse Actions Inspector. Check out the options in the image below.

Hype Mouse Actions

Mouse Actions

You can see Hype places what you can do in a easy to understand area. You can see you have options to choose what will happen on the Mouse Click (Or tap if being displayed on a mobile device) as well as mouse up or some other options.

When you select on the drop down box different options will appear which I will go over each of those options.

Jump to Scene – This will take you to any other scene in the interaction. Once this option is selected just select the next drop down box of which scene you want it to go to.

Hype Jump to Scene

Jump to Scene

You can choose Next Scene or First Scene or a specific scene you want to jump to. After you select which scene you want to go to select what type of transition you want to have when it goes from the current scene to the next scene.

Hype Transitions

Scene Transitions

Play Timeline – The next option after Jump to Scene is Play Timeline. Play timeline will allow you to go to a certain timeline within the current scene. Every scene can have it’s own set of timelines. This is great because you can set up different timelines to do different things. Keep in mind you need to set up your timelines within the Scene Inspector.

Hype Timelines

Timeline Selection

Hype Timelines

Scene Inspector Timelines

Run Javascript – If these options above are still not what you are wanting, Hype gives you the flexibility to run your own Javascript. Select the run javascript option and then you can select from a drop down of old javascript code you have already created or you can create a new javascript function.

Hype Run Javascript

Run Javascript

Open URL – When need you can also link to another URL. Simply copy and paste the URL into the open field.

Hype Open URL

Open URL

5. Default Sizes – The default sizes found in the Document Inspector are very useful. Instead of trying to figure out what size the iPhone Safari is in portrait, you can select the default size option to be that. So whether you are trying to target mobile or web, it gives you a use starting place.

Hype Default Sizes

Default Sizes

6. Element Inspector – One advantage that Hype has over Adobe Edge is the Element Inspector. In Edge I could not resize my images within the tool I had to resize the image outside the tool which would then update in the tool. With Hype I can resize my images within the tool but I can also add shadows and reflections to my images to make it that much better. I think Tumult has done a great job with this area and makes someone who cares a lot of about visual control very happy ­čÖé

Hype Element Inspector

Element Inspector

7. Attribute Animation – The last thing I want to go over in this review is the many different attributes that you can animate. Hype easily lets you select what you want to animate. Next to the item in the timeline select from the drop down box the attribute of the object you to animate. This can range from drop shadow to word spacing. This gives you more control over how your animations will look.

Hype Attributes

Hype Attributes

All these features at the price of $29.99 makes Hype a no brainer!

I will be doing some extensive training on Hype and will show you from start to finish how to start animating in Hype. I will update this post with the link to that training once I am done. These are just some of the things Hype can do, please feel free to share some other things you may like or even things you wish Hype had.

Try out Hype for yourself!

Be Sociable, Share!

Jeff Batt

jeff@kinetic-media.com
3 Comments
  • Jeroen Kleijn 16:44h, 01 November Reply

    No Brainer? In the appstore hype goes for 50 euros!

  • Alejandro De Anda 08:39h, 30 January Reply

    Hi, I want to know why if I put something on the button, the button does not work.

    Example, I have a button with Normal-Hover-Pressed, but if a put on a rectangle with an opacity 10% in the same place of the button, the button does not work.

    thanks,

    • Jeff Batt 20:29h, 30 January Reply

      Hey Alejandro – Good question. Not sure off the top of my head. Can you email me the files? jeff@kinetic-media.com

Post A Comment