You can now easily create HTML5 web content using the Mac app, Hype.
Translation: No coding required.
Think of it as: Adobe Flash meets Adobe Dreamweaver.
When you create interactive, animated HTML5 web content with Hype, it is accurately displayed across desktops, smartphones, and iPads.
This is Hype:
Interactivity
- Animations
Hype uses a keyframe-based animation system. If you’ve used just about any type of Flash building tool, you know exactly what that is. Hype gives you two ways to generate the animation. You can use the “Record” feature, whereby Hype records every move you make, automatically creating the keyframes for you. The second way to generate your animations, is manually add, remove, re-arrange, and fine-tune. I would imagine you can switch back and forth, first outlining your keyframes in record mode, and then go back and manually fine-tune and re-arrange as necessary. - Scenes
Think of them like slides in Power Point . It’s an easy way to simplify animation flow or divide your content. You can use as many scenes as you like, and there are plenty of actions that can be used to transition between them. - Timelines
If you’ve done much with Flash (or programs like them), this is looking really familiar by now. Timelines can be added to scenes, and play when triggered by the end-user. This, of course, is where you add your interactivity. Mousing over creates animations, etc … - Actions
These trigger your custom animations, scene transitions, or JavaScript functions based on the end-users mouse clicks, keystrokes, or documents events.
HTML5
- Styling
Box shadows – check. Reflection – check. 3D transformations – check. Hype outputs all the HTML5, CSS3, and JavaScript goodness that you’ll need. - Browser Support
First, Hype does its best to deliver 100% fidelity. If a CSS3 action isn’t supported, Hype automatically falls-back on JavaScript. When you export your Hype project, it will warn you about any browser incompatibilities, to avoided any “surprises.” - Mobile
Hype’s generated content will be accessible on desktop browsers, as well as smartphones and tablets.
WYSIWYG
- WebKit Based Canvas
Hype renders your work on a WebKit-based canvas, so what you create in Hype, is what your viewers will see in the browser. What you see is what you get! - Canvas Guidelines
Pixel perfect? Yes. Hype’s got layout guidelines. - Sizing & Alignment
Everything has its place, and Hype’s got the tools to make that effortless. - Inspector
Look under-the-hood and tweak every aspect.
Exporting
- Easy Embedding
Hype is very easy to embed. It’s export is completely self-contained, keeping all your resources and JavaScript together in one folder. Drop three lines of HTML into your existing webpage, and you’re done. - Upload to Dropbox
Share with ease.
Flexibility
- HTML Editor
Need to get your hands on the code? Easy. You’re always a few clicks away from making changes in your HTML code. Plus, it gives you a live preview as you edit. - Custom Javascript Actions
Need a custom function? Just add it! Also, the Hype JavaScript API can manipulate from the inside and outside of the embedded Hype content.
Native Mac App
- Hype was written in Cocoa, exclusively for Mac OS X. It’s intuitive, and launches in a second.
Pricing
For a limited time, you can grab it from the Mac App Store for only $29.99.
It seems like a steal, for that price, especially if you compare it to programs like Adobe Flash.
To learn more and catch a few videos of Hype in action, visit the Hype website.
Steve Tweeddale says
A quick view source on any of their gallery examples makes me a little sad – it’s all proud that it ‘Uses cutting edge html5, css and javascript’ but doesn’t mention that EVERYTHING relies on javascript.
Load one of those bad boys without it and you’ll get nothing. So unless I’m mistaken that makes it pretty much entirely innaccesible to search engines or anyone with javascript turned off in their browser (though in fairness I’d say that’s a rarity these days).
Eric Dye says
Certainly some good points, there. Maybe that explains the price point.
None the less, it’s great to see this kind of software come out. It makes me wonder what Adobe may have up its sleeve.
James Cooper says
When I first saw this I was also really excited. That was until, like Steve, I did a view source… I could see Hype being potentially useful for odd animated banners – but I’d not want to trust anything that needed any SEO to it.
Until apps like this produce *real* html/css/js I think I’ll be sticking with hand coding and using things like: http://css3generator.com/, http://www.css3maker.com/css3-animation.html and jquery.
Will be interesting to see if Adobe or someone like Panic can come out with an app that does real code.
Eric Dye says
I’m interested, too. It seems like an excellent opportunity for Adobe, considering the Flash flack.
James Cooper says
I’ve just remembered: http://animatable.com/ can’t wait until it’s fully out – looks very slick and some very nice code going on 😉