We see an incredible amount of quality artwork and animation here at Tumult HQ, and we really ought to share more. Today we’re featuring four illustrated & animated stories available on the iBooks store, an animated product guide, and a quick story starring a crazy bunny.

We’ll start with an animation created by Survey Legend, a Swedish team that produces survey software. Their transitions and play with perspective looks great on their site. You can watch a video of this animation below:

The above video was exported from Tumult Hype (read how to export a video).  Also, make sure to visit their Webby-deserving 404 page:

We’ll be posting a tutorial on controlling animations with scroll actions by the Survey Legend team soon!

Now for the kids: check out Noa and the Ladybird, filled with touchable objects, sounds, and interactive pages. We interviewed the creators of this story in the pages of this blog before: read our interview with the charming Somoiso team to see how they built, animated, narrated, and fine-tuned the water-colored world around Noa. Download a sample, or view it on the App Store.

Somoiso is currently putting the finishing touches on their latest story, “Noa & The Magic Pond.”

“The Slightly Annoying Elephant” by David Walliams & illustrated by Tony Ross, is a unique book for a number of reasons:

• The entire book is built within an HTML widget within an iBook.
• Animations produced with Tumult Hype, with additional JavaScript techniques for extra functionality
• Bookry, the code-slingers behind the book, added interesting features like adding photos to the wall within the actual story, and recording the reader’s name (see screenshot below).

Download on iTunes.

Next up, feast your eyes on Justices, a series drawn by Eric Esculier and produced by Guillaume-Ulrich Chifflot.  Download this free book from the App Store (French). This book was created with the help of the Baker framework, a great kickstarter for book developers to get their apps in the App Store either as a regular app, or as a Newstand-enabled app. Check out our Baker Framework tutorial here.

Justices was produced for Guillaume-Ulrich Chifflot’s “Nemo Magazine” which coincidentally is working on a crowd-funded comic book series you should check out:

Next, the “Damned Meanders” by Tom McGrane is a smash/bang/magic comic book with intense animations and a great vintage style of speech bubbles. View a sample, or download from the iBooks store.

And last but not least, Spooky the Scary Rabbit, created by Hayashi Shingo. I’m excited to see where this goes. Watch more wacky adventures here.

We hope you enjoyed this whirlwind tour of quality animations!

If you’re working on something you’d like to share, we want to see it. Reach out on Twitter (we’re @hypeapp) or share on our forums.

• What’s possible with Tumult Hype?
• How do I create iBooks Widgets?
• Where can I embed my animation?

This post also contains practical examples and working demos:

• Basic Quizzes & Scoring
• Next Level Quiz Design
• Scene Navigation for Presentations
• Working within SCORM (Sharable Content Object Reference Model)

To begin, I’d like to show off a couple demos of interactive content produced using Hype without writing a single line of code.

What’s possible with Tumult Hype?

If you’re just getting started with Tumult Hype, I highly recommend you visit our Tutorials page and watch videos demonstrating Hype’s core features. Our Gallery includes many examples you can download and examine.

To demonstrate educational content produced with Tumult Hype, I’ll begin with TimeMaps. Click the screenshot below to explore one map created by TimeMaps, a company consisting of teachers and cartographers who use Tumult Hype and other tools to teach history using a wide array of interactive maps. Using scenes, textual information, and map overlays, TimeMaps packs enormous amounts of information onto a single page to great effect. Many TimeMaps are also available as iOS applications:

If you’re interested in the process of preparing and planning infographics, read our interview with a Konstantinos Antonopoulos, who produces interactive content for Al Jazeera English. A course on ‘Data Driven Journalism’ at the City University of New York also provides tutorials for working with charts and data in Tumult Hype.

Another example of great information design, ‘Helvetica vs. Arial’ by Magnus Ulvsbäck demonstrates the differences between two similar fonts. Using the same export from Tumult Hype, Magnus has made Helvetica vs. Arial available as an iPhone app.

Dr Bill Heitler at the University of St Andrews in the UK leveraged Hype to demonstrate “a neural mechanism for the brain to detect very small differences in the time of arrival of sound at one ear compared to the other, and thus determine the horizontal (azimuth) origin of the sound.”

These are just a few examples of the types of interactive content you can produce with Tumult Hype. For more inspiration, visit our gallery & Animation Gallery on our Forums.

How do I create iBooks Widgets?

Tumult Hype has supported the creation of HTML widgets for use in iBooks since the beginning and remains a popular tool for producing interactive content for iBooks. Dropping HTML widgets into the free iBooks Author application is easy. Since one Tumult Hype document may be easily exported directly to an iBooks widget and HTML5, building once and deploying everywhere is simple.

For a bit more information about how to export your animation as an HTML widget for use in iBooks, read ‘A Teachers Intro to Using Tumult’s Hype 3 to Create Widgets for iBooks Projects‘, our documentation or dig a little deeper by reading our knowledge base articles our reading our blog post on iBooks Widgets.

Where can I embed a Hype document?

Because Hype exports standard HTML5, MPEG-4 videos, and animated GIFs, Hype documents can easily be embedded almost anywhere. Visit our list of our exporting guides for help. Managed content management systems like ‘WordPress.com’ often have security restrictions which deny Tumult Hype document embeds.  

Quizzes & Scoring

Tumult Hype animations are great for illustrating difficult to explain concepts, but they can also be built to test knowledge. The example in this knowledge base article demonstrates a simple example of a scored quiz. The document uses this basic structure:

• One question per scene
• Selecting an answer plays a ‘Correct’ timeline and adds one number to the ‘score’.
• Incorrect answers show a ‘Wrong’ timeline.
• On the final scene, a JavaScript function displays the score inside of a box. (This uses a single line of code)

Using this basic structure, you can create quizzes which display a final score to the quizzed.

For a quiz system with many more options, please check out SlickQuiz, maintained by jewlofthelotus. SlickQuiz, and other quiz systems based in HTML and JavaScript can be easily embedded within Tumult Hype documents as an HTML widget.

Here’s one example of a quiz produced with Tumult Hype by Steven Morgan for a photography course. This quiz requires no code:

To examine this interactive, download the .hype document.

Next Level Quiz Design

The three quizzes included below each has their unique way of visualizing questions and providing feedback for answers. By adding additional animation to answer feedback as shown in these examples, quizzes can be much more than just a question and list of multiple choices. To download these example documents, click here. To try out these quizzes for yourself, click the thumbnails below:

Scene navigation for presentations

If you’ve create a long Tumult Hype document with multiple scenes to show off in class, here’s how you can use the arrow keys to navigate between scenes:  First, select your scene, and add a new JavaScript that runs ‘On Scene Load’. Add the following JavaScript:

document.onkeydown = checkKey;

function checkKey(e) {

e = e || window.event;

if (e.keyCode == '39') {
    // right arrow
    hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushRightToLeft);
}
else if (e.keyCode == '37') {
    // left arrow
    hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushLeftToRight);
}
}

An example document can be downloaded here. If you don’t care which button transitions to the next scene, you can also use the ‘On Key Press’ > Jump to Scene action in the Scene inspector.

SCORM (Sharable Content Object Reference Model)

We occasionally receive questions about using Tumult Hype within Learning Management Systems (LMS) that support SCORM objects. To use a Tumult Hype element as an object:

1. Export your Tumult Hype document
2. Create a manifest file (in XML) that contains references to each of the images, media, and files used in your Tumult Hype file
3. Optionally setup rules that report results back to your LMS.

Please see this knowledgebase article on SCORM to download a Dreamweaver extension or Grunt task built for generating this file.

Let’s keep this going

Try using Hype in your classroom today to create presentations, e-learning materials, and quizzes. If you have  any questions about using Hype, please get in touch.

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.