To kick off my session at FitC2006, I modified my Blazing Blazes demo to work off the bass level of a loaded music track using the new computeSpectrum feature in ActionScript 3. You can see it in action by clicking the screenshot below (Flash player 9 required). Note that while the demo is small (3kb), the music file is big, so it'll take a while to load.
I had a lot of fun building the Blaze demo, so on the flight home I played around some more and built a second, more complex visualizer demo using the drawing API, BitmapData and Filters. Again, click the screenshot to see it in action. This one is worth watching all the way through, as the music is quite varied, and produces some interesting results in different parts.
I learned a lot about the quirks of using computeSpectrum in AS3 from these, and plan to write a short article on the subject when I have some free time.
Comments (27)
Very nice. I liked the flames on the blaze logo before... Much better when set to music.
Posted by: Andrew Trice at October 10, 2006 11:59 AMURL: http://www.cynergysystems.com/blogs/page/andrewtrice
Great effects, great musics, great work !
Posted by: Cédric Néhémie at October 10, 2006 12:10 PMI have a preference for the second, witch really goes well with the RFAD BO.
URL: http://book.abe.free.fr
Is it feasible to read in an MP3 and capture the entire length of the sound into an object so you can draw a waveform? I would like to see something like what SoundForge does with the waveform for the entire sound but most samples I see are for the current portion of the sound only. Thanks for any advice.
Posted by: Lar at October 10, 2006 12:34 PMURL:
Just curious... the track in the second demo (spectrum_ring) sounds really, really familiar... what movie is that from?
Posted by: Troy Gilbert at October 10, 2006 02:45 PMURL: http://troygilbert.com/
Lar - not really. computeSpectrum only works on the combined waveform of all currently playing sounds in the player. The only way to generate a waveform of the full song would be to play back the full mp3.
Troy - it's Requiem Overture - it was originally from Requiem for a Dream, but this full orchestral version was used in marketing for the Two Towers.
Posted by: Grant Skinner at October 10, 2006 02:49 PMURL: http://gskinner.com/
Incredible demo - beautiful work. What's the track from the first demo?
Posted by: matt at October 10, 2006 03:05 PMURL:
Matt - the first track is "Spitfire" by Prodigy, from their "Always Outnumbered, Never Outgunned" album. It's a pretty good album imho!
Posted by: Grant Skinner at October 10, 2006 03:32 PMURL: http://gskinner.com/
you should throw the new Fullscreen option on these guys.
sweet stuff!
Posted by: Daniel Larsen at October 10, 2006 04:13 PMURL:
computeSpectrum is totally my favorite new addition to AS3 (besides the display list)
It was nice meeting you on the bus, btw!
Posted by: Terry at October 10, 2006 11:05 PMURL: http://www.eprize.com
Wow. Stunning and inspiring is all I can say.
Posted by: Randy Troppmann at October 12, 2006 09:57 AMURL: http://www.spintechnologies.ca/flashblog
Gorgeous !
Posted by: Thomas Poirier at October 14, 2006 04:33 PMURL: http://www.lesfilmsdumarche.fr
Awsome work Grant.
Yea this really opens alot of potential with this new class.
Looking forward to see more!
Posted by: Eric Chan at October 18, 2006 10:26 PMURL: http://eepmon.com
Great job!
Posted by: Chuck at October 26, 2006 06:38 AMURL:
Very good
Posted by: tolis at October 28, 2006 05:36 AMURL: http://www.interactivemania.com
Hi grant, excellent example.
Have you got any suggestion how analyze an external flv file with policy restrictions.?
I've got this the problem with youtube flv´s videos.
Thanks..! man
Posted by: luchyx at October 30, 2006 01:02 AMURL: http://riaevolution.com
you should remake this one for a Halloween special with a pumpkin face!! HEH :)
Posted by: corban at October 31, 2006 10:55 AMURL:
This burning effects is the most exiting one that I see in flash. It seems you use displacement map filter, perlin noise, glow and blur filter on bitmap image...
Can you give us some tips for making an exiting fire like yours? :)
Posted by: Özgür ALTAY at November 7, 2006 01:07 PMURL:
This burning effects is the most exiting one that I see in flash. It seems you use displacement map filter, perlin noise, glow and blur filter on bitmap image...
Can you give us some tips for making an exiting fire like yours? :)
Posted by: Özgür ALTAY at November 7, 2006 01:10 PMURL:
Ah, I just had to stop by to see if you accounted for that annoying security issue with having your vis running while another audio swf from another site is running. Good work, that must be the quirks you've spoke of. ;)
I've been playing with computeSpectrum a bit as well, and I'm working on some nice utility classes that make integrating spectral data throughout a site very easy and practical.
Posted by: Steve Schelter at November 7, 2006 01:44 PMURL: http://www.schelterstudios.com/blog
Cool Grant. You never cease to amaze.
My attempt at Actionscript 3 sound visualisation
http://www.soulwire-illustration.com/actionscript3-dynamic-sound-visualisation.html
Posted by: Justin Soulwire at May 15, 2007 05:46 AMURL: http://www.soulwire-illustration.com/actionscript3-dynamic-sound-visualisation.html
Give me the fla! Time for that: 1day
Posted by: Jack at October 14, 2007 03:29 AMURL:
When I saw your demo it got me thinking. How far *can* we push the Flash engine? I pulled out an old copy of Milkdrop from 2003 that was tuned for the graphics cards of the day. After a bit of hacking I have most of it running in ActionScript. The tricky part was recreating a texture mapping engine where (u,v) parameters that wrap do the right thing.
Still lots more to do, but for those interested they can see one version at http://flashoid.com/milkdrop.html
Posted by: Scott Penberthy at November 16, 2007 10:15 PMURL: http://flashoid.com/
Are you going to post the source code??
Posted by: Pat at November 28, 2007 08:43 PMURL:
nice man!!
Posted by: Jason at December 8, 2007 10:24 AMURL: http://www.communitymx.com/content/article.cfm?page=6&cid=8E9A0
I hate you.
I mean that as a compliment.
Posted by: Jackson at December 18, 2007 10:13 AMURL: http://jkr.knftech.com/
Looking for your article about using computeSpectrum in AS3. Will it be soon?
Posted by: MP3Hunt at February 7, 2008 07:08 AMURL: http://mp3muzz.net
Grant, I am trying to use your flame component to mimic the first example. When the soundspectrum levels get very small which equates to the lites going off what values are you changing in the flame component? The flameHeight value never gets it to nothing are you just using your clear function? In your example it looks like it fades to nothing. Thanks!
Posted by: Wade Arnold at April 4, 2008 11:14 PMURL: http://wadearnold.com/blog/