Hype Testing 3

I recently purchased Hype in the Mac App Store. You can learn more about Hype and why I was interested in this software by checking out the Tumult Hype page. Afterwards, hit the link below to check out my first Hype HTML5 animation (a small banner) and to read a few things I learned during the process.

{NOTE} This post began as a test, but over time, as I modified the Hype animation, I added progress updates. So after the link, you will see that I left these updates intact. I am still considering a full length post about Hype and its features. That will take some time. For now, this post should give you a very quick look at how you can add interactivity to your website or blog without the need to utilize that processor-intensive/battery-draining technology called Adobe Flash.

As soon as the software download was complete, I was anxious to see if I could embed a Hype generated HTML5 animation within a Blogger blog post. If it was indeed easy to create animations, as the authors and reviews claim, I have a plethora of ideas for my various blogs.

After about 30 minutes, I was able to create a very rudimentary animation, upload the collection of files to my Dropbox public folder (this feature is built into Hype), copy the script code, make a few modifications and then insert the script code into the Blogger editor. It was indeed simple.

{UPDATE, June 20, 2011} Another animation modification. I changed the background, added a replay button. You can now click on the text to learn more about Doc’s Tech Notes. It was easy to make the changes and I simply uploaded the changes to DropBox. No modification to the code within the blog post was necessary. Not bad. I also found a way to get rid of the made with Hype tagline that appears. Wish the developers would make this an option in the software rather than a modification of the javascript. {Update, June 26, 2011} I just received a Tweet from the developers, this option is found in the General Preferences (I should have seen this...doh!) or in the export option (which I never saw as I was exporting directly to Dropbox and this is not an option). Apologies to the Hype team.

{UPDATE 2, June 26, 2011} Added more animation and interactivity to the banner. You now get the answer to the question posed, not by loading a page, but by the inclusion of another scene in the banner. I included a button to reset the animation. Lastly, I was also able to figure out how to modify the water mark (it involves changing the code in the javascript file -- very easy).

So there you have it, a very simple two scene animation with a bit of interactivity all compressed into a tiny banner. The process was extremely simple and if you have done any interactive Keynote or PowerPoint presentations, you will feel right at home with Hype. Anyone else playing with Hype? Let me know by dropping a comment below. Be sure to include a link to your Hype animation.