HOME | DD

mx-chronos — Flash - Waveform Visualizer

Published: 2008-05-20 07:23:34 +0000 UTC; Views: 6839; Favourites: 4; Downloads: 505
Redirect to original
Description It seems a little strange to categorize this as Interactive since there is nothing interactive about it, but code like this seems to fit here better than it would in Animations or Movies, etc.

Anyway, this was a brief exercise in scripting I put together to recreate the types of swirling visuals used in various media players. The first one of these I can really remember was Geiss for Winamp, but the idea dates way back in audio recording technology. This example is a very basic one, displaying the soundwave rising and fading towards the top of the screen as it shifts randomly through a range of colors. The basic technique is to draw the present frame of the sound wave into an empty DisplayObject, and then draw that object into a separate BitmapData which can then have a Blur filter applied. I was satisfied with this basic result, but I am pretty sure that with a little more work this could be tweaked to reproduce a lot of the more advanced visual effects that other such progams create.

I will confess that I copied the base code to draw the actual wave from an example provided in the Flash manual, but I modified and added so much to it that I feel confident in calling this my own work. I just did this as an exercise to work with BitmapData, and to see what sort of non-vector images Flash could be used to produce. It is ineresting that such a dynamic piece of media can be more or less achieved with 1-2 KB of code; the majority of the filesize comes from the music itself, a public domain loop provided by FlashKit .
Related content
Comments: 2

FecarytheLion [2012-06-15 16:07:42 +0000 UTC]

I am wondering how you managed the actual vizualisation that well. You don't seem to be using SoundMixer.computeSpectrum() for getting the frequency float values, for that method is by far to unprecise, but what then?
As far as I know there are no other way to analyze a sounds frequency spectrum...
Or did you probably simply change the floats depending on their position in the ByteArray?

I'd really like to know how the vizualisation works here. Could use this for a project I'm currently working on and would be glad if you could share the way you did it.

👍: 0 ⏩: 0

psykopath [2008-05-21 00:38:01 +0000 UTC]

Good stuff I'm pretty sure everyone who's ever done this in Flash started with that Help file

👍: 0 ⏩: 0