Creating a web page or site used to be simple: you would enclose sentences in HTML code, and the code would only differ based on structural decisions: a paragraph, a heading or a list perhaps. Later on, when web page designers wanted to improve the looks of a page, they added Cascading Style Sheet (CSS) code. Meanwhile, HTML evolved and became XHTML in its last iteration. And now we are entering the HTML 5 era, an era in which we can move objects around on the page with ease. With ease, you say? With an application like Hype, perhaps, but not if you have to hand code.
The Hype document window is a blank canvas with a timeline running underneath and a scene list running above. The canvas is also called the scene editor; it’s where you create and change scenes. Scenes are like slides in a PowerPoint presentation. For example, if you want to show a text box when a visitor clicks a button and you want that text box to disappear when the visitor hovers over another button, you’ll need to create a scene for each action.
The timeline is another dynamic element in Hype. Each scene can have multiple timelines. If you want to create a really simple scene, you can have a couple of timelines that run when specific actions occur, e.g. a button being clicked. In the example I used earlier, you could make a different text box appear for each button the user clicks on the page, but each box would stay visible after having been ‘launched’.
Timelines automatically duplicate all elements on them. Scenes do not, but you can duplicate scenes with or without animations. The idea — if I understand it correctly — is that a timeline is meant to keep all elements on them at all times, no matter if you make them invisible or not, while scenes can have totally different elements.
A good example of this would be a navigation design where each scene consists of a different navigation set. Clicking on a button could take you to the following navigation set (which is a scene) and so on.
The decision to create different scenes or multiple timelines, or both, must be about the most difficult aspect of Hype. And difficult is relative: once you know the drill, you can repeat it endlessly. However, it must be said: although there are a couple of tutorial videocasts to teach you the basics, the choice between scenes and timelines is not all that well explained. Being the novice with the application that I am, I had a bit of trouble to create a “switch” — a button that would switch a text box between visible and invisible.
I needed some help with that, and much to my surprise my solution only took one extra step that I kept overlooking. However, the help was swift and to the point, and I wouldn’t be too surprised to see more tutorial videos from the developer and his team soon.
Hype’s HTML elements meanwhile are relatively basic: a box, a text box, two types of buttons, video and image. All of these elements can be positioned and moved around on the canvas much the same way as with an illustration program, including the alignment and “move to back / move to front” menu items. Boxes and text boxes can have rounded border corners, colour, image, and gradient fills, and shadows. And if that isn’t enough for you, you can also directly change the HTML in the canvas. I used this functionality to quickly turn a regular text box into a box with a list.
Animating elements is comparable to how you animate in Adobe After Effects. You mainly work with keyframes, with the animation in-between being automatically interpolated (tweening). About every CSS property can be animated, so you can dynamically change opacity over time, but also borders, backgrounds, positioning, etc.
If you don’t know how to create keyframes manually, and you’re too lazy to read the quick start guide, you can just hit the Record button and change the properties you want; Hype will do the rest. Furthermore, you can create abrupt transitions or ease-in/ease-out — there’s a HUD to change that behaviour per element.
Finally, animations make use of a concept called relative keyframes. This implies that objects will never jump, even if you’re using multiple timelines for the same object, same property. The next timeline will simply take off where the previous one ended. It’s an important concept to understand when working with Hype.
Exporting a Hype document is easy, but you can set a few options. For example, you can choose to save a HTML file that will overwrite the last HTML file you exported. You can create an enclosing folder and a small watermark that gives Hype credit. The generated document is ready to use as a web page, but if you copy the code between the commented parts in the HTML file, you can paste that in any sort of web page (including WordPress templates, etc).
Hype is a one of a kind program that I believe will save a lot of time for developers both beginners and experienced people. It’s also the first of its kind and it’s available now, for approx. 22.00 Euros.