Issue: 9.6 (September/October 2011)
Author: Marc Zeedar
Article Description: No description available.
Article Length (in bytes): 6,560
Starting Page Number: 14
RBD Number: 9603
Resource File(s): None
Related Web Link(s):
Known Limitations: None
Full text of article...
IN BRIEF Product Hype Manufacturer Tumult, Inc. Price $30 (introductory) Contact Info http://itunes.apple.com/us/app/hype/id436931759?mt=12 Pros Well-designed and elegant; easy to learn and use; surprisingly powerful; tons of options for element adjustment; easy to copy generated HTML code to use on your own web pages. Cons Limited in scope to HTML5 animations; doesn't convert incompatible graphics formats, though it lets you use them; not designed for creating entire websites (though useful for simple sites such as teasers or introductions); Mac-only and exclusive to the Mac App Store (which means it requires Lion or Snow Leopard). Rating (1.0-5.0): 4.5
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.
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).
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.
Figure 1: The main Hype window showing the RSD logo at the first keyframe position.
Figure 2: The same Hype file at a later keyframe with the RSD logo resized and other elements added. Hype automatically creates the animation between the keyframes and generates all the HTML5 code to reproduce the effect in any HTML5-capable browser.
End of article.
Article copyrighted by REALbasic Developer magazine. All rights reserved.