Flash Animation Without Flash

More than two years ago, I created a Flash Animation for my university class. Today, I converted the whole thing to plain Javascript and HTML5, using the new <canvas> tag to draw and the <audio> tag for music playback. It now runs smoother than it ever did in Flash.

Without further ado: Venetianization / HTML5 Animation

Some technical notes: For the original Flash Animation I used ActionScript 3 and created my own classes. Javascript doesn't have classes per se, but you can build something that looks and feels exactly like it. MooTools did an awesome job at that. Converting my ActionScript classes to MooTools classes was a no-brainer.

I was able to reuse most of the code with some basic search and replace throughout the source. One thing however, that is (to date) completely missing in Javascript, is the ability to analyze the current sound spectrum of an audio file. I ended up extracting the raw values of the spectrum with a sampling rate of 15Hz (which is enough for an animation that initially ran at 30Hz) and put them in a large array in one of the source files.

The thing that annoyed me the most however, is that I now have the music in two different formats: OGG Vorbis for Opera, Firefox and Chrome, and MP3 for Safari. I totally understand that Firefox, being open source and all, can't include MP3 support. What I don't get, is that Apple doesn't support OGG Vorbis – an audio format that is clearly superior to MP3 – instead, they choose to sit on their high horse and twiddle their thumbs. This is exactly the behavior that made Internet Explorer a laughable side note.

Side note: Of course none of this works in any version of Internet Explorer.