SoundMixer – Sound Visualization in Actionscript 3.0

Fans of many different types of music are now beginning to develop a new appreciation for the visual component of the live concert.  Sophisticated light shows, digital displays, and entertaining special effects such as pyrotechnics and smoke all combine to enhance the entertainment experience by taking it to a whole new level of sensory stimulation.

Much of today’s music is delivered to the listener using some type of digital device. For those of you who listen to your library of songs on a computer, it is likely that your software application supports sound visualization. Both iTunes and WinAmp, which are among the most popular applications available, have supported sound visualization for quite some time.

As Flash designers and developers, we’ve struggled for many years to find an easy way to extract the appropriate data from an audio stream and create a visually compelling experience for our viewers. Several classes, recently introduced in Actionscript 3.0, have simplified the process for us.

The SoundMixer class contains static properties and methods for global sound control in the SWF file. To create sound visualization, the method we should focus on is called  computeSpectrum. This method takes a snapshot of the current sound wave and places it into a ByteArray object. The values are formatted as normalized floating-point values, in the range -1.0 to 1.0. This provides us with numerical values which we can use to manipulate the position, scale, color, or even the intensity of a filter… the possibilities are endless.

The method described above takes the data in the ByteArray and uses it to draw a series of line segments. The data is updated continuously using the EnterFrame event handler, and since the spectrum is overwritten each time, we can use it update the visual.

Hopefully the demo attached below will jump start your process for making your own sound visualizations. Feel free to post your examples below!

See the demo here.
Get the source here.

Using Flash’s Drawing API and bitmap blitting.

This is a fairly simple, yet still compelling way of using some of Flash’s built in features to create some cool effects. Despite continual increases in processor speed and graphic card performance, there is still a need to optimize animations within your Flash files, particularly when creating animations programatically.

The following example utilizes the Drawing API to create short line segments. I’ve used Zeh Fernando’s group of Actionscript methods found in MC_Tween to handle the “pen” movement around the screen. Each segment is drawn into a hidden movieClip.

A Bit About “Blitting”

For those of you not familiar with the process of “blitting”, it is actually a programming approach that has been around for some time. Originally called a “BitBlit”, it was a series of routines used by early developers of computer graphics to control drawing operations. The primary function of BitBlit was to copy bitmap graphics from one location to another. These routines were later streamlined in modern languages, and evolved into a function simplified as blit().

At the time of this writing, Actionscript does not have a built-in function called “blit”, but the process can be simulated by utilizing Flash’s built in bitmapData methods. In Actionscript we use the method draw().

This approach is used to lessen the strain on the Flash Player. Normally the player would have to render multiple objects on a screen, sending them to Flash Player’s display processor, each time the Stage is updated. In a situation where you might have 1000 sprites moving around the screen, the end result would be a creeping movement that severely impacts the user experience, especially in game applications.

By “blitting” or drawing the sprites located in a hidden movieClip, into a single bitmap, the result is that Flash only has to render that single bitmapData object. There is no need to spend precious processing cycles on anti-aliasing of multiple vector objects. And the performance benefits are quite impressive.

See the demo here.
Get the source here.