Mar 11

Getting into Flashplayer 11 & Away3D 4.0

Lazy saturdays … playing around a bit with the previews of Away3D and the new Flashplayer 11 incubator build gave me some impressive results – an unoptimized model of over 917.000 polys with 3 dynamic lightsources and shading running at 12 – 15 fps on a rather poor Geforce 9400M! Can’t wait until those technologies are ready to roll in public & stable builds.

(Audi R8 courtesy http://thefree3dmodels.com)

Sep 10

Audi A1 – one hell of a “microsite”

For the record: Audi A1 was the biggest microsite we ever did! Work started as soon as spring 2009 with the final version being released in spring 2010 (which is quite a short timespan for such an ambitioned project).

Just for the sake being – each content really was a major “wow factor” (at least for a geek). Here comes the shortlist:


This module might just be your standard threesixty. But: we did dynamic typo synchronized to the camera movement and with country-specific embedded fonts. No easy feat :)

Also a first-timer: we used MP4 as the overall video-format (when no alpha was required) with the industry-standard for subtitling – DFXP. Gone are the times of fiddling with timestamps and texts, at least for the developers. We did use a common movie subtitling/synchronization company which can deliver DFXP. Thanks to OSMF (which we did use from alpha status on).

Style advisor

Great module where the user could choose a personal style of car depending on a set of polaroids. The tricky part here? The alpha video had to be matched to the movements of the polaroids. Also all the logik for assigning cars is completely customizable for each market this site is rolled out for.

The movie

This module started as a plain chapter video player. But after a short while it became clear, that we had to give the user at least two spoken language versions and 12 languages for subtitles.

And the biggest feature was yet to come: from the ending-point of each chapter a transition was to be implemented to an interactive 360° of the the last frame. In this panoramic view hidden goodies could be discovered and won. We did learn a lot about projection, stitching and MP4 compression settings in this part of the site. And did i mention the movies had Justin in them? ;)


This module might be the most fun from a user perspective. The challenge here was to get all the layering and logical implications implemented correctly. And also for QA to get this tested ;) Circular UI elements are by the way an interesting exercise for any self-respecting developer …

The gallery gained at least 60.000 submissions over two runs, which could be voted upon – leading to one of the best-voted design to win a real A1. Also each of this customized design could be posted on facebook.

Each design was saved in full-size directly from flash to the backend. Also the user could download his custom wallpapers in the correct size. This required image-creation and -compression in the frontend – easy only at the first moment. In the end we did go for an optimized asynchronous solution – accelerated by custom native code (alchemy).

Community hub

This might look just like some RSS fetched into the site. But: we did build a custom backend for this, which crawls Facebook, Twitter, Flickr, Google Blogs and Youtube for the search term “Audi A1″ and keeps track of what changes are going on in the results. This felt a bit like building google sometimes. But performed far better than expected.


Might seem boring, eh? But is easily the biggest accomplishment of the site. We don’t save any data in our own backends nor do we define registration form layouts/field definitions for all the country specific versions. Instead we are talking to some clever webservices hosted directly in front of the Audi CRM, which deliver form definitions, userdata and also do all the necessary validation, storage and single-sign on. So in the end we had one cool form-rendering-engine, which was easy skinned by using ASwing.

The features you don’t see

  • 146 language versions
  • more than 2.5 GB assets, 3-4 hours of video
  • tons of language files
  • more than 180.000 lines of code
  • more than 1.500 jira issues
  • more than 14 releases until now, with up to 3 releases being in parallel development
  • a completely modular structure
  • build mechanisms using ANT and continuous integration (hudson) with automatic generation of config-files via XSLT and validation of each XML in the project
  • we did in fact bottom out the flex compiler at some points, you can do only so much by putting more ram into a machine
  • at least 20 moments of enlightenment

I’m not sure i would again want to do such a big microsite in the near future. But we learned so much in the process, that this was not only a success for the client, but also for us.

Thanks to the team (Aaron, Alex, Anja, Christian, Eva, Frank & Frank, Martin, Peyman, Philipp, Thien)- you rocked hard!

Aug 10

Adobe Media Encoder not hinting MP4 files?

After compressing some clips for a recent project, something strange was happening – the Flash Player would always download the whole mp4-file, before it started playing it. After some research it became clear that there were no streaming information – or as they are called “hint tracks” – embedded in the files. When exporting via handbrake or Quicktime Pro the resulting files would contain those tracks (you have to enable “streaming” in the output options). Bad luck, as neither handbrake (always crashed on encoding raw input files) nor Quicktime (no 2-pass encoding and no batch options) worked for us. As always some command line magic helped, but this isn’t the optimal solution as missing hint tracks can easily be overlooked.

But for the curious readers – the following approaches are working:

Using mp4creator:

mp4creator -hint=1 movie.mp4
mp4creator -hint=2 movie.mp4
mp4creator -optimize movie.mp4

(first hinting video and audio track, afterwards optimizing the structure)

Using MP4Box:

MP4Box -hint -mpeg4 movie.mp4

It isn’t completely clear to me if only the hint-tracks have the outcome that the files aren’t streamed by flash or if it is the fact that the MOOV-atom isn’t positioned at the beginning of the file.

Aug 10

Eclipse + Processing

This tutorial on processing in eclipse should speed up the first developments: tutorial on processing.org – no need to leave your accustomed workspace any more ;)

Need some candy to to warm you up? Here you go!

toxiclibs showreel from postspectacular on Vimeo.

V&A Decode generative identity from postspectacular on Vimeo.