Flash Music Visualization Engine

Better late than never… As I promised earlier, I uploaded the complete Flash and ActionScript source for Venetianization. It is, potentially, a framework for simple yet very powerful and accurate music visualization movies. Effects can be programmed for a set of elements and issued at nearly exact points in time. The complete source (Flash CS3, ActionScript 3) can be downloaded here: venetianization.zip

A few word about the inner workings of this: As you saw in my demo project, you work on an 2D array of circles. You basically animate these circles through 3 layers of definitions:

• Selections: which of the circles to animate
• Actions: what to do with them
• Sequence: when to issue them

All these definitions can be found in the Script.as beginning on line 47. Selections are specified from the base selection (none) and then chained through several methods. Most selections in my script are calculated on load if possible. However most computers have plenty of processing power to calculate a few complex selections for each frame dynamically. So don’t worry too much about this. All coordinates for the selection are specified in a normalized format (from (0,0) to (1,1)).

A selection could look like this:

parent.cache.myFancySelection = parent.base
    .rect( 0.4, 0.4, 0.6, 0.6 ).fill( 0.5, 0.5 )
    .circle( 0.2, 0.2, 0.2 ).fill( 0.2, 0.2 );

This creates a selection with the filled rectangle from (0.4, 0.4) to (0.6, 06) and the filled circle centered at (0.2, 0.2). All methods to modify selections can be found in Selection.as.

To define an action, we add a function to the script object:

this.script.myFancyAction = function( parent:Field, time:Number, age:Number ) {
    parent.cache.myFancySelection
        .each( parent.fx.plasma, {}, time/1000 )
        .each( parent.fx.scale, { factor: (1-age)*3 }, time );
}

This action takes our previously created selection and issues two effects on all selected circles. The age parameter tells us the how old the action is. It starts at 0 and dies at 1. To define when an action starts and when it ends, we have to put it in the queue:

this.queue = [
    { start: 1000, end: 3000, func: this.script.myFancyAction },
    { start: 4000, end: 6000, func: this.script.myFancyAction },
    { start: 7000, end: 9000, func: this.script.myFancyAction },
];

This will issue our action 3 times (at millisecond 1000, 4000 and 7000) with a duration of 2000 milliseconds each. So what we get from all of this, is a rectangle and a circle, whose elements will scale according to a plasma effect and their age.

Thats it in a nutshell. Be warned, some things were not really thought through or changed during the development of my project. For instance the Effects class does far less than I at first thought it would. You could extend this to transform elements, add a blur filter or the like. If there’s really interest in all this, I could write a more complete documentation. Just leave a comment and let me know.

Oh, and if you just want to see how a simple Flash Movie can use 100% of your CPU, just change the size of the Field and recompile (Field.as line 15).