HTML5 is very much at the top of everybody’s interest list - people are talking about it, and now, starting to implement it into their sites.

Aside from the endless capabilities of making your website more semantic using the new HTML5 tags (being the semantic-nazi I am), the introduction of the <canvas> element had me very excited. I had never been a big fan of Adobe Flash, but before now there hasn’t been much more of an alternative.

Whilst <canvas> isn’t the main topic of this blog post, if you wish to read more about HTML5 canvas, I urge you to read HTML5 Doctor’s post, ‘An introduction to the Canvas 2D API’.

HTML5 <canvas> can look incredibly daunting to get up and running with, and during my R&D time, I wanted to experiment and see if I could reproduce the interactive banner found on our services page, but this time using <canvas> rather than traditional HTML, CSS3 and jQuery.

To cut a long story short, and so we can get to the good bit, I stumbled upon Hype for Mac and was intrigued as to how easy it would be to create a HTML5 interactive piece using a desktop interface, and without writing a single line of code. This blog post outlines my experiences with Hype for Mac, and hopefully help people get an understanding of what to expect out of it.

Setting up the initial view

The first step I took was to set up the starting point of my interactive banner - this also gave me a good opportunity to get a handle on the the app’s interface and see what was achievable.

True to Mac’s native apps, Hype for Mac uses an ‘Element Inspector’ to set various properties. For example, position, dimensions, radius (to create circles), fill (background images, colours), text formatting, shadowing, opacity.. the list goes on!

However, when setting up the background of the ‘scene’, I found that whilst I could apply a background colour, I was not able to set an image as the background. To get around this I had to import the image as an element, and move it to overlay the background. Not the most ideal way, but nothing I’m sure a future version could fix.

One major plus that the interface had for me was the ability to drag elements around the ‘scene’ and the apps intuitiveness to help lock items to a grid or in relation to other elements. Maybe that’s just me, but simple minds and all that.

Another thing to note that I found useful when creating the elements within the scene, the user interface will prompt you if you are applying a property which a major browser does not support - this way preventing any surprises further down the line!

It wasn’t long before I had set up my initial view, and was ready to animate.

Implementing animations & my problems with it

For a first-time user, applying animations to your elements can prove a mystery - straight away there isn’t a lot to go on in terms of getting started. However, after watching some quick videos on the Hype for Mac website, everything fell into place and you could simply run away with it.

In short, you can either set your own keyframe start/end points using the timeline at the bottom and using the Element Inspector just change properties that you wish to see animate. Even easier, the app offers a recording function which will automatically capture properties which have changed and generate the timelines required when you click stop. I was very impressed with this, and hats off to the creators for making it so easy.

However, nothing is without it’s problems and there were a few things which I found irritating:

Layer ordering

As you can see from my initial view (above), a lot of the main elements overlap each other and as part of the animation I would have liked to bring elements ‘to the front’ when hovered over. Much like you see in any picture editing software such as Adobe Photoshop, the layer ordering is depicted by the order the elements appear in your scene (see screenshot). So I was a bit disappointed to find that layer/element ordering was not a property you could animate.

Duplication of effects

When creating an animation for each of the elements, I found things becoming very repetitive. For example, the hover in/out animations for each of the main circles in my banner are the same, just with a different position. Hype for Mac does not seem to offer any help in duplicating animations on elements, you are left with just repeating steps of animating properties numerous times, a bit tedious after a few.

‘Jump to’

You can fast forward or click to a certain time within the timeline, however it would be nice for Hype for Mac to implement a ‘Jump to’ function which allows you to - well, jump to a certain time within the timeline. A nice animation within my project was the arrows found in the other circles would slowly follow the path of the circle round - completing a 360degree rotation. In theory, I would want my arrows to slowly move, perhaps 1degree for every second - however, I could not jump to 360 seconds in the timeline to apply the animation end point.

The output

At the end of the day, we want our interactive element to be the best it could be - and whilst the ease of use that Hype for Mac offers, I was disappointed with the outcome.

The first thing you notice, and something your end users will also notice is the animations appear chuggy, and not smooth. If you wish your interactive elements to be realistic, believable and earn the user’s trust, you don’t really want your animations to feel slow or judders.

As I mentioned before, a part of my project was for the arrows to slowly rotate round the main circles, to make this nicer we would want this animation to continuously loop. So if the user were on the page for longer than 360 seconds, the arrows would not just stop at the end, but start going around again - giving a much more polished interaction. However, I could not find a way within Hype to set animation to loop - again rather disappointing that something that would be easy to implement from a code point-of-view could not be achieved by using the app.

Being me, I couldn’t resist a peek under the hood and see what was being exported by our app. I was shocked to see that our markup just consisted of

Aside from that, the output from Hype for Mac was lightweight and easy to implement within a web template.

View a working demo of the (unfinished) interactive banner here.

In conclusion, whilst I ran into a lot of problems with the effects I wanted to achieve, and my issue with the lack of semantic markup and not using all of HTML5’s potential, Hyper for Mac offers a quick and easy way to add interactivity to your website.