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.
18 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!
This is very good work. Very tasteful music choice too.
How did you retrieve the sound spectrum?
Can't get it to load here, but maybe it's because of my network.
Brilliant, I was thinking just last week of doing a something like this and came across this while researching another animation project. Good choice of music too, venetian snares rock.
v.nicely done. i think the new ie9 supports the canvas now.
I can't imagine a world without Flash. I loved playing with it when it first came out. I think Google and Microsoft have a secret agreement to make it a thing of the past.
Telling me my browser was a "laughable piece of shit", and then recommending I use the very same browser I was using... yeah. Class act.
Hint: NoScript stops the canvas as much as it stops the javascript. Don't be a dick to your potential users.
wideo.co is an excellent free tool to create animation videos. You can upload your videos to youtube