Disney Tron

online graphic novel with animation and effects

Microsoft and Disney partnership

Based on Vectorform's experience in using cutting edge technology to create ground breaking user experiences, Microsoft hired us to team up with Disney, creating an online extension of the Tron sequel. The goal was to produce a brand new interactive graphic novel built entirely in HTML5 for the latest incarnation of Internet Explorer, promoting both Disney and Microsoft properties. Provided with original illustration files from the Tron graphic novels and a deadline of just several weeks, the Vectorform team jumped in feet first and hit the ground running. While the development team worked on an interactive timeline that would allow for animation, effects, and user interaction, the design team worked on the user interface and motion design.

The Process

Ken Disbennet and I worked through all of the art assets in under a week, prepping everything for realtime animation. This involved repainting and expanding the artwork as we split elements into layers, but also included developing rules of motion and depth for each piece. To help direct this process I created detailed annotations on top of the original graphic novel panels. Each element that needed to be animated was clearly defined along with the type of animation required. Working with the development team, I also explored the effects available in HTML5, and along with the design team, determined the locations where they could be most effective. I worked to ensure the experience was paced to specific beats and that the illusion of depth pulled the user further into the world of Tron.

While all of the panels were based on original graphic novel pages (reformatted and reengineered for the online experience), some artwork had to be created from scratch. For example, using the nodal shading system in Lightwave 3D, I created a quick animation to be used during asset loading. Though built and rendered in 3D, the style matched the original illustrations, including both inking and shading nuances. I also mocked up the desired animation using javascript, and handed it off to the development team for final implementation (though the intended motion was unfortunately not retained, the sprite sheet assets I produced were still used).

As a key part of the production process, I researched and standardised our system for creating hybrid PNG files that combined index colours (more efficient) with full alpha transparency (required for feathered compositing of antialiased edges, glows, and shadows). Along with the implementation of a recursive compression toolset for maximum efficiency, I ensured the online graphic novel was both perfectly rendered and downloadable with exceptional speed.

Industry response

The project garnered a fair amount of industry coverage, from GeekWire to Fast Company, and attracted the likes of Oglivy and Coke for future projects.