Article Preview

REVIEW

Hype

Issue: 9.6 (September/October 2011)
Author: Marc Zeedar
Article Description: No description available.
Article Length (in bytes): 7,012
Starting Page Number: 14
Article Number: 9603
Related Web Link(s):

http://itunes.apple.com/us/app/hype/id436931759?mt=12
http://rsdeveloper.com/laborday.shtml
http://tumultco.com/hype/gallery/

Full text of article...

I'll admit that when it comes to HTML tools, I usually prefer the manual edit-the-code approach. As a graphic designer, this is rather odd and similar to doing page layouts with a typewriter. But I just find HTML itself so limiting and frustrating that unless a tool gives me the flexibility and design accuracy of Adobe InDesign, I'm just not interested. Thus I create my own code by hand in BBEdit with the occasional help of a code snippet or two.

But with all the hype about HTML5 out there, I was curious about how to make use of its features. I didn't want a full website tool, just something that would let me explore HTML5, and then I discovered Hype, available on the Mac App Store at the introductory price of just $30.

Hype is not designed for creating entire websites, though I suppose you could. It's ideal for subsections or specific pages. The idea is you use Hype to add animation and other HTML5 features to a page or website.

Hype gives you a page where you can draw or drop items such as buttons, graphics, or text and, similar to Real Studio's window editor, it has ruler lines that show up to help you keep items centered or aligned.

There's a timeline view at the bottom of the window. If you change any characteristics of an item in your window—position, size, visibility—at two different points on the item's timeline, Hype will automatically create the appropriate transitions between the elements to make that happen.

For example, I placed the RSD logo on a page and made it small (see Figure 1). Then I clicked the diamond button to add add a keyframe at that location on the timeline (the beginning point). Then I moved the timeline to three seconds with the logo still selected and added another keyframe. Hype displayed a red dotted line between the two keyframes (visible when you move the item). I resized the logo (see Figure 2). When I hit "Play," Hype automatically performed the scaling animation!

If you like, you can see my feeble animation attempt as part of my Labor Day sale (http://rsdeveloper.com/laborday.shtml)—but note that the sale prices are only good for September 5, 2011.

At any time I can go back and select any keyframe and change any aspect of the item I want at that point. For instance, I could change its opacity: make it initially faint so that it gradually fades in.

I can also create "scenes," which are analogous to individual web pages. Each scene is a fresh page and I can link between them. So a button on scene1 could jump to scene2 (or whatever). I can even set a transition between the scenes. Buttons can also run Javascripts or link to a URL. This can allow me to create an impressive site with Hype.

With Hype I can even add video, though it does need to be in an appropriate browser-supported format (such as H.264). I can even do bizarre things like apply a "reflect" attribute to a video (making a gradient-faded upside-down duplicate of the video play under the full video).

When you are finished with your Hype-created site, you simply export it to a folder. Hype generates a simple HTML wrapper file which just runs a Javascript that loads and runs the animation. This is nice because you only have a couple of lines of HTML code to copy and paste into your own template or pages to add the animation to your website. Hype also generates a folder of required resources for the animation (Javascripts, images, videos, etc.). It's your responsibility to make sure that the folder is in the proper place for the script to find it: if it's not, you get a blank animation area—no error message to indicate the problem.

Speaking of errors, though Hype will tell you upon export of any potential browser incompatibilities, it's a bit frustrating that it waits until then to warn you: it would be nice to know that while you're working. For example, I placed a PNG with a transparent background without a problem. But when I exported, I was alerted that Internet Explorer doesn't support transparent PNGs.

Also along those lines, Hype doesn't do any format conversion. This allowed me to drop a .PSD file into my layout and it simply exported it: but while the Mac handles .PSD files just fine, I'm not sure other platforms would be so compatible. Automatic conversion to JPEG or PNG would be helpful.

In terms of help, Hype comes with good documentation as well as video tutorials and a nice gallery of demo sites (http://tumultco.com/hype/gallery/) that will inspire you and show you what it can do and how to do it.

Hype is very impressive, though it's important to understand that it's a limited tool. It's not a "do everything in HTML5" tool. It's strictly a simple layout/animation program. But for the right uses, it's phenomenal.

At the current price it's a no brainer—even if you only use it to create the occasional banner ad or create the code for you to place a video on your site.

End of article.