Using @Hypeapp from Tumult Adding An HTML5 Kickstart To WordPress Site

Apr 9, 2012 by

WOW!

Deutsch: HTML5 Logo English: HTML5 official lo...

Deutsch: HTML5 Logo English: HTML5 official logo (official since 1 April 2011, see FAQ) Français : Logo HTML5 ‪中文(简体)‬: HTML5标志 ‪中文(繁體)‬: HTML5標識 (Photo credit: Wikipedia)

I downloaded Tumult’s Hype about 3 p.m. and started playing with it and through a little manipulation and searching through their very generous support forums figured out that through Dropbox, adding an HTML 5 animation into a WordPress blog post is as easy as 1, 2 and 3.

Loading An Animated Logo To The Wonders Expedition Website

I’ve only begun to play with this, but it feels like Christmas Morning! The user interface for Hype is easy to use and straightforward.  The user support, FAQs and forum posts are easy to read, follow and have plenty of visual and text support.

Just playing and keeping things simple, I took the TWE logo and put it into the Hype timeline.  I then rotated Y axis of the logo back -60° and then set a second keyframe two seconds later.  At the second keyframe I set the Y Axis back to O°.  At the beginning keyframe I also set the opacity back to 0 so that as it did the build it brought the logo to 100 percent.

Then I went in and added text, having it fly in on the same Y Axis and percentages.

Then I went to Export.

I tried to use the HTML file upload and was able to do that with Fetch via FTP.  I got the page: http://thewondersexpedition.com/TWELogo2.html to work. But when I took that code as recommended and tried to embed it into an actual HTML setting on a post, I could not get it to work.

Ultimately, I tried the Export > to Dropbox public folder route and then added in the coding:

<iframe src=”http://dl.dropbox.com/u/2269153/TWELogo/TWELogo.html” frameborder=”0″ width=”600px” height=”450px”></iframe> and it works like a charm.

 

You can see an example of this very simple format working in Hanna Pethen’s post about the ancient Egyptian story, The Shipwrecked Sailor.

I’ve only begun to play, I mean, work with Hype, but it’s going to be every bit worth the $49.99 to buy it and then use it, taking all my sites and client sites into HTML5 with honor and glory and a lot of pizzaz.

This product is very much worth a go–if you have a Mac!

Other Uses For Hype

Of course the real reason for learning how to use Hype is to employ it as we continue to rapidly move forward with the development of our Interactive Books for the iPad.  More about that, soon!

 

Enhanced by Zemanta

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest

%d bloggers like this: