Getting down and dirty using Hype HTML 5 web creator

Hype is the extremely easy to use Mac application for creating HTML 5 webpages. On account of the fact that Flash is not much longer for this world, well in particular not really going to be for this world of mobile computing, we need to get into HTML 5 coding for our webpages. I bought this Hype html 5 app from the Mac App Store and I didn’t really get doing much with it initially. The application was in a very early stage and has needed to have a couple of upgrades to bring it up to a state where it was much more usable and fully functional. Yesterday I decided that is was high time that I created a web page or two using the Hype html 5 editor application. You can take animations created in Hype and put them in the iBook Editor from Apple, iBooks Author.

Hype HTML 5 quick and easy to get creative

To get started, you don’t even have to learn html 5. The application gives you a nice canvas to begin with to add your web page elements. Below that canvas you get the timeline. In some ways creating HTML 5 webpages using Hype is a little bit like using a video or animation application, like Motion or After Effects. One of the things that makes Hype so easy to use is the fact that you can record what you do on the screen and it will automatically create keyframes for you. So if for example, you choose and click on an element, after you have hit the record button, then move the play head to 3 seconds down the timeline and change the element in some way or other, Hype will create the keyframes and save your animation. All you have to do then, is to turn off the record feature, move the play head to the start of the timeline and press play to see your webpage element do its stuff. You have your first html 5 demo made without having to do any coding.

Clean and simple working space in Hype

The application is deceptive at first, in that due to the clean and well-designed working space, you don’t get to see all of the things that you can do with Hype at first a look. For instance, when you’re looking at your object in the timeline and you use the disclosure triangle to see all of the things that you can set and adjust as part of your animation you see just five options. These are going to be the most used options of opacity, and the four measurements that determine the size and position of your element. If you look at the right hand side of that area though, you also see a huge long list of other things that can be set and changed with the animation. In there you have everything from inner HTML, rotation, word spacing and even the angle of the gradient that you’ve used.

What sort of HTML 5 elements can you add to a Hype webpage

You have a button on the toolbar at the top and from there you can choose from a drop-down list. In the list you have boxes, text, video, two types of button and images. When you have the text in the text box you can make whatever changes to it necessary. Very easy to use the handles of the text box to change the size of it and to adjust to position it on the page, where you want it. Not only that, but you can also select text or portions of your text and alter the formatting to suit your design.

Here is a page I made with HypeIt is very easy for you to add the webpage buttons and to have the buttons looking just the way that you want them. You can format the text on the buttons, you can change the shape of the buttons and add borders to them if you require. It is also very easy to format the buttons for the three conditions that the button has, normal, mouseover and button pressed. If you have placed a button on the web page, then you are also likely to want that button to do something, such as change the page to a new scene or link to a completely separate webpage. Very easy to do that for the elements that you have placed on there, specifically as buttons, but you can also place an image on a page which can be a link to another scene. So you can have a picture of a fancy looking button, or indeed any sort of image which when clicked, will do something for you.

Giving your buttons created within Hype, that little something extra

You can have a button whatever size you like and format the text on the button to suit your design also on your html 5 page. You can also give the text on the button a shadow to make it stand out from the surface of the button. When you have finished altering the text so that it looks spot on, you can then start work on the actual shape of the button. You may add an outline to the button and also change the look of the outline. There are a number of styles of outline you can choose from. Maybe have a dashed outline or one that gives the illusion of a ridge. Apart from being able to have a flat colour on your button you can also have a gradient which might a simple gradient going from one colour to another. Then again you might choose to have an image created in Pixelmator 2 as a background for your button.

Adding art to the HTML 5 App

Within a web page, if you’re using a button then why not use an image from ArtText 2. You can make it more obvious to the user that it was a button by having the button change its background when you hover over it. So you could do this where it changes from one image to another for its background, or go from one colour to another colour. It is quite handy that the facility is built-in to put a drop shadow onto your buttons although you will see a warning to say that those drop shadows are not supported in Internet Explorer.

Beautiful looking webpages

While beauty is in the eye of the beholder, it is easy to see that with this Hype the Mac HTML 5 editing application you can create some really very nice looking websites. As is often the case with design, less is more and if you don’t overdo it with the elements and movement or animation on the page, then you will have something that is both great looking and effective as a webpage.

HTML 5 App

The Hype HTML 5 editor can be used for making complete webpages or can be used to design an element to go within another website or web page, that you have already designed. If you want to put it into your other webpage then you copy the three lines of code from the HTML that is produced by Hype and you paste it into your other webpage. The only other thing that you have to do, is to make sure that the resource folder is placed in the same folder as your webpage.

By placing the Hype HTML 5 code into another web page you could use hype as a way to have animated banners for your webpage. If you look in the gallery on the website for Hype you will get more ideas about how you could use hype to create elements for your websites. What would be a nice feature in a later version of Hype would be to have templates that you could use, that would have a drag-and-drop area so that you could drop in images or text. With such a feature it would be possible to quickly create popular types of features very easily and with a minimum of fuss. It is still early days with this application and certainly I would expect it to get more proficient as time goes by.

What is missing from Hype?

Another thing that I find is a glaring omission within this early version of Hype the HTML 5 editor for Mac, is the ability to add audio to your webpage. When you use the insert elements drop down list you have your text, buttons, images and even video and I just find it amazing that audio has not been included within that list. One of the problems with including audio using HTML 5 is that you do need to have your audio in either two or three versions to cover all of the web browsers. Easy to make the audio all the versions that you need in AmadeusPro 2.

Hyped timelines

It is possible with Hype to create numerous timelines and with this you could have your main timeline which works across the whole of the webpage. Then there could be other timelines which only works when a certain button is pressed and only on a specific element within the design. With this feature and your imagination you could create webpages that are interactive as well as animated. You could possibly have your main timeline which gives you the animation that happens when the page is first opened to put things into place. Then there could be secondary timelines which cause things to happen when the mouse hovers over a button or an image in the html 5 app Hype. There’s no reason why you shouldn’t be able to make some amazing looking webpages with this Mac HTML 5 editor.

Video two of the tutorial – When you have already made the pictures ready for the animation in Pixelmator

Video three of the tutorial series to finish things off with the making of the animated banner.