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.
10 Comments:
amazing, this remembers me that thing don't live forever.
flash r.i.p.
sweet
would be well nice as visuals at a concert if you have audio-input that triggers the visuals... Though i guess that's not what you're doing
way to go though!
Very useful (and pretty) animation (and code) ;) .
Oh wow, this is simply amazing :)
Any chance you could point me in the direction of some good sources for HTML5 and JavaScript knowledge (such as the references you used)? I'll check back here for a response.
@Sol: Mozilla has a pretty good primer for the <canvas> tag: developer.mozilla.org/en/Canvas_tutorial
For JavaScript itself I can highly recommend all the talks by Douglas Crockford. You should already have some basic understanding of JS, though:
youtube.com/results?search_query=douglas+crockford
Nice work, keep it up.
Anwsome work! Loved your alert message under IE.
Dude this is great! Thanks for a real sweet example of HTML5's flashlike capability. Does anyone have other HTML5 examples?
props!
Kevin
wuaaaaaaaaaau!!
WOW is all I can say. That was amazing! I've always wanted to learn flash, but I might have to just go straight to HTML5. Crazy!
Post a Comment: