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.