It’s been a while since I’ve been impressed by a computer application. Most of the software that I use today is basically the same from 10-15 years ago. Where’s the revolutionary software that changes how I work — for the better? I remember the days when I first learned of Photoshop, Illustrator and InDesign. With these programs, I dramatically improved my career. That’s great for design, but what about Web Development? While Adobe is trying with programs like Muse and Edge Animate, I wasn’t feeling the same excitement. With all the rumbling about the death of Flash, where’s the replacement for creating online interactivity?
I have seen some hotspots in fun web development apps. Artisteer is great for creating WordPress/Drupal templates, but that’s not a replacement for Flash. GameSalad and Stencyl are great game development apps, but their HTML5 support isn’t quite prime time yet. (Stencyl 3.0 is still in private beta and I don’t know what GameSalad is doing with “Project: Masala”.) With the proliferation of mobile devices, I was surprised that this was such a problem. How am I supposed to quickly create interactive content — sites that works on browsers as old as IE6 or as new as iOS6?
Enter Hype!
Back in 2011, I learned about Hype at the Apple Store. I was told about the awesomeness of the software. It was supposed to be great for creating interactive web content. But at first, I didn’t see it. Hype had a timeline like Flash, but I couldn’t pause the action. I couldn’t trigger timeline actions either, not like I could with ActionScript. Sure, it looked like a possible replacement for Flash, but I couldn’t do anything significant with the software. Version 1.6 changed that. It took a while, but Hype finally lived up to the hype.
So what is Hype?
The first thing to know is that the software is Mac only. Using Hype is like being part an exclusive club. I haven’t seen Mac only software like this since the early days of Photoshop or QuarkXPress. Also, it’s a digital download — primarily through the Mac App Store, but it’s also available at FastSpring.
Starting from a blank document, Hype divides web content into two main groups of content – scenes and boxes (elements). Each box can be filled with text, images or HTML. They can also be used as shapes. What’s special about these boxes is that they can be animated or used as buttons. The position, size and style of the boxes can be changed. These changes can be viewed by playing the timeline or by previewing in a web browser.
The WYSIWYG interface is pretty straightforward. What’s special is how intuitive it can be. A great example is lining up content. Guides appear for easy alignment of elements. Distributing content evenly across the scene is a snap. Hype has taken the tedious part of web design and simplified it. Instead of having to position artwork by editing lines of HTML code, the process is visual. It’s a boon for web design.
There is a bit of a learning curve though. I found myself confused with setting up animations. Lots of different properties can be applied to an element, leaving lots of room for getting lost. This is especially true with Hype documents that have plenty of layers. Part of my problem was adjusting from Flash. I missed things like dumping multiple symbols in a single layer. Fortunately, elements can be grouped in Hype. (It took me a while to figure that out though.)
Now that I’m comfortable with using Hype, I’m not missing ActionScript as much. That’s because Hype works with JavaScript – including libraries like jQuery. If there’s a feature that Hype is missing natively, I can use my own JavaScript code to add it. This doesn’t have to be limited to JavaScript either. Additional fallbacks can be added using IE Conditional Statements. Vector graphics can be added using HTML and SVG. With a little extra work, an IE6 user could get a JPEG image while an iPad user can enjoy retina display quality vector graphics. While not an absolute replacement for Flash, Hype can now pick up much of the work. The difference is that I can work faster in Hype. It’s not such a chore to create buttons or scene changes.
The speed is great too. Hype doesn’t use HTML5 Canvas, which can be slow. With Hype, fairly large images can glide across the screen. But if you want to use Canvas, just create a new box/element and then edit its HTML. While things can get messy editing HTML code in a little window, the power of raw code is available.
With Pixelmator for image editing — and now Hype for web animation — there are two great reasons to own a Mac.