Tricking IE6-8 into Being an HTML5 Browser

Every browser has its own set of differences and quirks. For the most part, variety in CSS property names, dimensions, or known bugs are easily worked around. Many property applier functions in the HYPE.js runtime simply look like this:

var boxShadowValue = “” + xOffset + “px “ + yOffset + “px “ + boxShadowBlurRadius + ” “ + boxShadowShadowColor;

// webkit

element.style["-webkit-box-shadow"] = boxShadowValue;

// mozilla

element.style["MozBoxShadow"] = boxShadowValue;

// firefox 4.0+

element.style["boxShadow"] = boxShadowValue;

// ie/standard

element.style["box-shadow"] = boxShadowValue;

It isn’t always this easy. Supporting older versions of Internet Explorer (6-8) has its own set of challenges and many saving graces. Internet Explorer has a filter system that allows for a surprising number of effects, many of which have since become standard on modern browsers. For example, while the CSS3 “tranform:rotate(45deg)” syntax is not supported, IE’s filter system can allow the same through this CSS property:

element.style["-ms-filter"] = “progid:DXImageTransform.Microsoft.Matrix(SizingMethod=’auto expand’, M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)”;

It might look ugly and requires additional repositioning of the element to match CSS3-supporting browsers, but it does work. For other CSS3 effects, such as background gradients, border radius, and box shadows (as seen above), Tumult Hype takes advantage of a project called CSS3PIE. If you’ve seen the “PIE.htc” file in its exported resources folder, that’s what it is for.

Video in older versions of Internet Explorer presents a more interesting problem. The HTML5 <video> tag is not supported, and there are no simple workarounds like CSS3PIE. We decided to fallback to the QuickTime plugin for displaying video. It is widely installed (thanks to iTunes) and can playback .mp4/.m4v videos which are typically used for the <video> tag on Safari/IE9+. Plugin loading can be delayed, so we had to use poll-based timing tricks to make sure attributes like autoplay, loop, and mute were being set properly.

The biggest downfall of Internet Explorer 6-8 is lack of support for transparent PNGs. There’s adequate workarounds in IE 7 and 8, but unfortunately IE6 is out of luck (hacks exist, but do not work well enough). Our recommendation is to use transparent gifs when this becomes a problem.

We’re mostly happy with standards support in IE9 and what we’ve seen of IE10.

Here’s a video we put together showing the Buckley’s Duckleys Ad across a variety of browsers:

Avoidance of CSS3 for Animation

More interesting may be the decisions we made when approaching how to animate content across browsers. Animations historically were made using a quickly repeating timer in JavaScript (a “heartbeat”) and then programmatically changing the desired properties. Newer CSS3 features such as Transitions and Animations were developed to make this process easier for site creators and more efficient by processing inside the browser. With the goal of optimizing animation performance, Tumult Hype 1.0.x had a hybrid model of using CSS3 transitions and falling back to JavaScript hearbeat-based animations for older browsers or on unsupported transition properties. We did not use CSS3 Animations because Safari (Mac/iOS) and Chrome were the only two browsers supporting it during initial development. To make sure the timing functions (ease-in, ease-out, etc.) were identical, we even transcribed WebKit’s UnitBezier.h into JavaScript using identical control points.

Ultimately, we found the approach of using CSS3 Transitions had several drawbacks:

• Timing Issues – There are no specific guarantees for when a CSS3 Transition will actually kick off, which is important given our dynamic animation system. It is therefore not possible to synchronize different elements together. This also applies for the same element; when we introduced the heartbeat-based bounce timing function in Tumult Hype 1.5, we found there were jumps in the animation playback between the CSS3 Transition and our bounce animation since the transition had not started at the time we expected.
• Lack of Control – CSS3 transitions and animations give no affordance for fine-grained pausing or frame steps. While Tumult Hype does not support these now, we’d like to give greater flexibility in the future.
• Syntax – The code for an CSS3 transition is most typically made with a single string property on the element. While not impossible to work with, it is unwieldy and we would prefer being able to have control from JavaScript directly. It is unfortunate for tool creators such as ourselves that the direction of many new CSS properties is to use string lists instead.

We abandoned using CSS3 Transitions in Tumult Hype 1.5 for the reasons listed above. It’s also a new technology, and not without a few bugs we hit. From a performance standpoint, the impact was minimal and we also adopted the requestAnimationFrame API so several of the browser optimizations could still be applied. We also found it simplified our code, testing, and will allow for more features in the future since full control is in our hands.

Other Considerations

With the reignited rapid pace of browser development, we’ve also run into many bugs/regressions that have appeared in updates. Some of these include not being able to see fullscreen videos in Safari, random blue page backgrounds in Chrome, and not being able to rotate and move elements at the same time in iOS and Mac Safari. WebKit regressions can be especially nasty since they may also affect the Tumult Hype application. Sometimes we can workaround them with alternate methods of doing the same manipulation — in the rotation bug’s case we used -webkit-transforms’s translateX/Y instead of setting the CSS style.left/top properties. Other times we must simply wait it out until the browser vendor has a fix.

One of our goals for Tumult Hype is to always adopt the bleeding edge of new HTML and CSS features. Because of this, we realize no matter how much effort we put into supporting older browsers, some capabilities (like 3D transformations on IE6) will simply be infeasible. For these features, we developed a warning system in the Hype application itself. In the Document Inspector (command-1) you can select which browsers you would like to support, and thus see warnings for when using an unsupported feature. These appear both in the inspector and in a summary list at export time. While it is no substitute for testing across different browsers, the system does act as an early way to detect possible compatibility issues.

Tumult Hype arose out of the need for a creative tool to create animations on the web without dredging through code, browser inconsistencies, and learning a complex program. We work hard to keep web animation simple so users don’t have to!

It’s our pleasure to announce the release of Tumult Hype version 1.5.1. This update features:

• Option-clicking the per-property add keyframe button will add keyframes to all properties on selected elements
• Copy/Paste scenes
• Bug fixes

It is recommended that everybody upgrade. Please visit our detailed history page for more information.

It’s exciting to see photographers, architects, fine artists, and musicians (see below) create beautiful and interactive sites for themselves in Tumult Hype. Seeing so many creative people make use of Tumult Hype as an expressive tool makes us extremely happy.

Today we’d like to spotlight a site Jimmy Gilmore created to showcase his drumming career. Jimmy writes that he first created his interface in Photoshop, and then tweaked his animations within Hype:

I’ve streamlined this project as much as possible by developing the overall look and concept with extensive work in Photoshop first, so that even without Hype’s brilliant animation and media ability my site would still look pretty interesting (at least, visually) on its own.

His site sports a beautiful retro theatre façade at jharleygilmore.com (And you can peek into how he built it by downloading his .hype file!)

More awesome Tumult Hype sites:

• The photographer Jeff Hargrove’s site at jeffhargrove.com
• Clayton Kimball’s architecture portfolio at claytonkimball.com
• Adam C Gordon’s Fine Art & Illustration at adamcgordon.com
• Another site by J Gilmore: A tribute to Freddie Gruber

Looking for more? Check some of the other Tumult Hype creations shared on our forums and submit your own or holler @hypeapp – #madewithhype.

The iPads arriving today across the world bring out amazing details in websites. Graphics and text are stunning on the 2048 x 1536 resolution screen, and this is great for the web and for Tumult Hype users. If you want to optimize your Tumult Hype animation for the new high resolution display we have a few words of advice:

Consider the tradeoff: bandwidth vs. high resolution images

In our tests, standard 72 DPI JPEG images have noticeable artifacts if you look closely, but they don’t look bad. A double resolution image looks amazing.  As you may know, the iPad 3rd gen sports 264 PPI (Pixels Per Inch) display, up from 132 PPI in the iPad 1 & 2. This screenshot shows the difference between a standard and retina-ready image at full size. Read this excellent article from Bjango for more details on what exactly PPI is.

Most Tumult Hype documents created using standard image creation practices will look fine on the new iPad. If you want to provide the best visual experience, your visitor will need to download higher DPI (and higher file size) graphics. Tumult Hype documents preload images so this will increase the time before your visitors can view your site.

A retina-ready graphic contains four times as many pixels, and equates to ≈ 30% more time downloading. With multiple retina images, this means more bandwidth per page.

Retina optimized images take approximately 30% longer to load

That being said, a couple extra seconds may not make a huge difference, but a document with many images will negatively impact your visitors’ experience. Re-export images like your logo and small UI elements used across your site.

Note: If you’re creating a Hype animation for use within an iOS app or as an iBooks Author Widget and the resources are stored on the device, you should use only retina-ready graphics.

Use SVG graphics or Glyphs

A vector will scale up infinitely, no matter the resolution of your target device. These graphics are also very small in file size, so they’re perfect for any display. You can drag a SVG graphic directly into Hype.

Text renders beautifully on the new iPad. A character that would normally have about 100 pixels devoted to it will now be shown far crisper. Take advantage of this: “→”. Instead of creating an arrow graphic, why not use the arrow character? Using HTML character entities from will shave bytes off your document, and ensure that your content scales up correctly. Here are a couple resources.

Create a high resolution alternate version of your document

If you choose to create a high resolution version of your document, don’t force non-retina viewers to download all those extra pixels. Add this script to the head of your exported document to send retina devices to a page built for them:

<script type="text/javascript">
  if( window.devicePixelRatio >= 2 ){
  window.location.replace("http://site.com/retina.html");}
 </script>

Add this script to the <head>…</head> of your exported .html file. Here is the full document code.

Automate the creation of your image assets

If you have made high resolution images for your retina-targeted Hype document, you can drop your images into the free Mac app called Unretiner to quickly generate images for the non-retina version. Here’s the workflow for that:

1. Create your retina-sized image assets with this naming format: image@2x.jpg. (Prepend @2x to the extension).
2. Add them to your retina-Hype document and export your document to a folder.
3. Drop your resources folder into Unretiner, and export the reduced version to a folder.
4. Duplicate your Tumult Hype document and replace your retina-sizes graphics with your newly generated files. Select an image, go to the element inspector, and select the replacement file Unretiner created. (Note: Unretiner changes the file name of your image@2x.jpg image to the name image.jpg and reduces the size by 50%.)

For more tips on creating a Tumult Hype document for mobile devices, read our guide.

For more information on the new iPad’s display properties, read this article by Display Mate.

Zebra image via Jon Barbero.

“How far can you drive with a budget of 10 euros (from 1970 till now)”
“New fashion trends for summer” (with links to www.standaard.be)
“Financial support for energy efficient living in Flanders”
“Republican primaries in the United States”

Sometimes digging into project files is the best way to learn new tricks so we’re pleased to make Bart’s project files available for download. To explore the infographics, click the images below, or visit the links immediately following.

Here’s a few more links to Bart’s work for Standaard (he’s a busy guy):

http://www.standaard.be/extra/conflicten_2012
http://www.standaard.be/extra/gezichtstransplantatie
http://www.standaard.be/extra/Laura_Dekker
http://www.standaard.be/extra/elfstedentocht
http://www.standaard.be/extra/kredietratings
http://www.standaard.be/extra/brandstofprijzen
http://www.standaard.be/extra/atoombunker
http://www.standaard.be/extra/begrotingsakkoord

We’re also pleased to share  a few high quality infographics from Modesto Juan Carrasco Castro of El Mundo, a major newspaper in Spain:

• Armada invencible
• Sonda a Marte
• Meteosat
• Submarino Cameron
• Titanic

We’re pleased to announce the release of Tumult Hype 1.5! With Adobe recently dropping support for Mobile Flash, Tumult Hype has become a critical tool to making animated content for smartphones and tablets. This version is a major update containing over 30 new features, including:

• Export as iBooks Author widget
• Redesigned animation interface separating element and property keyframe editing
• Element grouping
• Scene zooming
• Element locking and visibility toggles
• Improved Lion support: versions, autosave, and scrolling
• Rulers and guidelines
• “Paste with Animations” for element copying
• Bounce and instant animation timing functions
• Insert “HTML Widget” for arbitrary code/script execution
• Significantly smaller exported Javascript files (about 1/3 the size)
• New app icon (animator’s lightbox)

We’ve been working hard at this update and there should be something for everyone! Version 1.5 knocks out our top requested features, further elevating it as a mature professional design tool. For more details, please checkout our What’s New In Tumult Hype 1.5 page. We also produced a video showing off 25 Features in 10 Minutes:

Tumult Hype 1.5 is available on the Mac App Store or the Tumult Store for $49.99 USD to new users or as a free upgrade to existing customers.

If you purchased from the Mac App Store, you can update by these steps:

1. Open the App Store by going to the Apple menu and selecting App Store
2. Make sure you are signed in via the Store menu
3. Click the Updates tab at the top of the App Store window
4. If you have not already upgraded, it should be listed in the Updates section, and clicking the Update button will install the latest update for free.

If you purchased from our Tumult Store, you can update by these steps:

1. Open Tumult Hype
2. Choose the ‘Hype > Check for Updates…’ menu
3. Install and relaunch when prompted.

We look forward to seeing what you create with Tumult Hype 1.5!

Update: Version 1.5 of Tumult Hype allows direct exporting to iBooks Author widgets. The below explanation is for version 1.0.5, but may be an interesting read if you’re interested in the inner workings of iBooks widgets…

Yesterday Apple announced iBooks Author, an application that makes designing rich ebooks for the iPad as easy as creating a Keynote presentation. We’ve been asked many times already whether a Tumult Hype animation will work within iBooks 2. The answer is Yes.

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.

Macworld’s editor’s choice awards:

“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.

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.