As you may have heard, iBooks Author uses the Dashcode HTML widget format for embedding HTML, so any HTML within that format can be embedded in a book. It’s just a matter of placing your exported Hype animation within the dashcode format. You won’t be needing Dashcode, since we’ve prepared a info.plist file for this purpose. This is the general workflow:

Hype Export → Create a Widget → iBooks Author → HTML5 Animations within iBooks!

To get started, you’ll need a Tumult Hype exported document and iBooks Author.

Note: Your exported Hype document should be 900 width × 640 height or smaller. This is the area of the widget space. Any size larger than this will be scaled down. Sizes smaller than this will produce a centered element in the widget preview space.

Creating a .wdgt file from a Hype export Folder

1. First, export your Hype document and make sure you have both ‘Also Save .html’ and ‘Create Enclosing Folder’ options checked. If you name your file ‘index’ then you will need to make fewer changes.
2. In the folder you’ve just created, add the file ‘Info.plist’, which you can get from our set of demo files here. Open that file with a text editor, and match up the name of your .html file to the value under the ‘MainHTML’ area. You’ll also need to match the width and height of your document. You can find your document size in the ‘Document Inspector.’
3. Set a preview image for your widget by adding an image named ‘Default.png’ to this folder. A quick way to do this is to go to your first scene, take a screenshot by pressing command+shift+4, and then click and drag over your scene area. This generates a PNG on your desktop which you can rename and move into place.
4. Now that you have Info.plist in order, and a default image, your folder structure should look like the image below. The final step to create your widget is to rename the folder that contains those files to have .wdgt at the end.

Importing your Widget to iBooks Author

To add your Hype document to a book in iBooks Author, go to the page where you’d like to place it, then click ‘Widgets’ > HTML. It’s best to be in ‘Landscape’ mode to do this. You’ll then see a new widget and a file button in the inspector where you can select the widget you just exported. You’ll notice that your ‘Default.png’ image is the placeholder for your animation. To preview your widget, click on it, then click ‘Edit HTML’. To see it on your iPad, plug it into your computer, then click the ‘Preview’ button.

You’ll notice that your animation will place once, so depending on the effect you’re going for, you may want a ‘replay animation’ button for your users.

That’s it! You now have an HTML5 animation within a book ready for iTunes.

We’d love to see what you make. Please share with us @hypeapp or in our forums if you’ve put together a Hype-enabled ebook.

Note: At this time it seems that .mp4 videos within iBooks widgets are not supported, though there is a workaround that involves referencing an .mp4 file via an iframe.

“recognize our favorite products released during the past year (from November 1, 2010 to November 1, 2011). It’s a task we take very seriously; starting with a list of over 130 candidates, we spend weeks discussing each product, debate its merits, and whether it fulfills our standards of quality, utility, innovation, value, and excellence. The result of all this is the list presented here, the 23 best products of 2011.”

We’d like to thank our amazing and creative users, Macworld, and everyone at the academy. Check out the other winners on Macworld.

Banner animated by Sasha Zivanovic with Tumult Hype

It’s an exciting time for web animation. The accelerating development and adoption of web technologies are turning Flash developers, motion graphics professionals, and even print designers to create rich animations and interactive content for the web. Animators and designers of all backgrounds are turning to device-agnostic animation tools like Tumult Hype for creating interactive web content.

In the hands of a skilled animator, Tumult Hype is a powerful tool for creating engaging and interactive content. Our hope is that Hype enables talented animators as they move towards cross-platform web technologies and away from technologies like Flash, which is losing support from Adobe on mobile devices.

Today, we’re showcasing an animated ad banner created by Sasha Zivanovic, the animation director at Pixelpusher. Sasha produced the animation above in the first two hours after installing Hype. As Pixelpusher’s senior animator & animation director, Sasha has 10 years of award winning animation experience behind him. It was a treat to see his first production in Hype. It’s worth mentioning that this banner looks virtually identical on the major desktop and mobile browsers.

In this post, I’ll be going through Sasha’s Tumult Hype document to expose some of his tricks. Don’t worry, we have his permission

You can rewatch this animation by refreshing the page, or viewing it on its own page.

The Puff of Smoke

The brief cloud of smoke was achieved by briefly enlarging a transparent PNG. The element is quickly made visible by adjusting the opacity from 0 – 100% opacity in the timeline, and rapidly increased in size. In the image below, you can make out minor movements in the X and Y axes as well, which give the puff a bit of a shake over the puff’s 4 frames, which comes out to about 1/10th of a second:

Shooting the ducks

As the gun fires, the ducks appear to fall at the exact same time, then quickly descend below the water. To accomplish this, Sasha created two duck images: one upright, and one laying down. After the gun is shot, the normal Duck’s opacity is reduced to zero, and the ‘Duck_laying’ image appears in its place. You’ll notice a few other effects: the water and the pussy willows on stage left and right quiver after the shot is fired. The ducks also quickly move below the surface of the water, which is illustrated by the red animation path in the image below:

Animating the Lights

Sasha added a nice touch: blinking lights along the top area to follow through with the mock-carnival game aesthetic. Sasha switched from an ‘off’ version of the lights, and alternated two separate blinking versions:

You can view this animation on its own page here or download the original Tumult Hype document to get your hands dirty. If you don’t have Hype, take our 14 day trial for a spin.

Want to show off your Tumult Hype document? Please get in touch.

• Fitting your document to the width of devices
• Removing the Mobile Safari user interface (URL & navigation bar)
• Adding home screen icons and a loading screen, also known as a ‘Startup Image’ (iOS only)
• Detecting swipes
• Showing a different site based on the orientation of the device (Landscape & Portrait). Also: keeping the current scene in sync between those two orientations using the Tumult Hype javascript API.
• Mobile Safari-specific CSS

LA Times: Cirque du L.A. | ‘Iris’ at the Kodak Theatre

Designed by Raoul Rañoa for the LA Times, this Hype animation makes use of multiple moving stage elements to illustrate a complex setup built for Cirque du L.A. at the Kodak Theatre. Check it out →

NASA’s Global Exploration Roadmap

NASA’s ‘Global Exploration Roadmap‘ outlines the trajectory of solar system exploration in cooperation with the International Space Exploration Coordination Group (ISECG). To explain decades of missions and goals, they turned to Hype:

…Our goal has been to distill the essence of the Global Exploration Roadmap into a graphic document that contributes to a conversation that can be had between a 5 and 95 year old. How did we think we could do this? Quite simply we tried answering “where are we going” with a map.

Influenced by 1950′s Disneyland designs, video game visuals, and Peter Pan Neverland maps, we hoped to describe the complexity of international space projects with simple highlights. We began development of the Global Exploration Roadmap infographic by describing it as a treasure map of sorts.

I highly recommend you read how Dennis Bonilla reached the final design.

iBooks Revisited

Timo Lessmoellmann built this gorgeous iBooks redesign concept for a research project at the University of Wolverhampton in UK. This is a great example of a well-designed app demo made with Tumult Hype. Watch it here →

Australian Agency: cplx creative  

Sam Thompson of CPLX creative, an Australia-based advertising agency, sent us his company’s site. They’ve put together a slick, minimalist and subtle design with Tumult Hype to promote their branding and design strategies without writing any code. View the site here →

Have you made something you’d like to share with Tumult Hype? Comment below, or better yet, post your creation in our forums.