Shempi Vis from Patrick Gunderson on Vimeo.

This is a demo of a music visualization I made in flash. This was recorded in real-time.

I love using music for data vis because the spectrum contains copious amounts of organized, yet seemingly random data.

The music is Shempi by Ratatat who have an album coming in June http://www.ratatatusic.com

creep from Patrick Gunderson on Vimeo.

Here’s something new: A video of a flash program performing audio spectrum analysis. This was recorded in real-time.

The music is Scala & Kolacney Brother’s “Creep”.

If AllowScriptAccess is set to never or sameDomain, the call will fail.

Counting Frames Method

First let’s go over the more basic, but ultimately more complex method. Since movieclips can execute commands every frame using an onEnterFrame event handler (a specially named function) if we know the framerate, we can count the frames and divide to find the number of seconds past.

Declare a new variable timeLeft and give it a value of 10 (our counter will count down from 10). Create a new Movieclip called tenSecondTimer and assign it properties for frameRate, and counter. We’ll use the counter to count how many frames have passed.

var timeLeft:Number = 10;
createEmptyMovieClip("tenSecondTimer", getNextHighestDepth());
tenSecondTimer.frameRate = 24; // this movie runs at 24 fps
tensecondTimer.counter = 0;

Now create an onEnterFrame event handler, which will be executed with every frame, that increases the counter, compares it to the framerate, and if they match (a second has passed) reduce the timeLeft by one. for this function we’ll use the modulo operator (%), the increment operator(++) and the decrement operator (–). The modulo operator (%divides two numbers and returns the remainder. if the remainder is 0 then the first number is evenly divisible by the second. The increment operator (++) increases the value by one. x++ is the same as x = x + 1. The decrement operator (–) reduces the value by 1. x– is the same as x = x – 1.

tenSecondTimer.onEnterFrame = funtion(){
    this.counter++;
    if (this.counter % this.frameRate == 0){
        _root.timeLeft--;
    }
}

In addition to decreasing the timeLeft after every second, we want it to do something when the time is up. Then remove the timer.

tenSecondTimer.onEnterFrame = funtion(){
    this.counter++;
    if (this.counter % this.frameRate == 0){
        _root.timeLeft--;
    }
    if (timeLeft <= 0){
        trace("TIME'S UP");
        this.removeMovieClip();
    }
}

We also have the button which we want to stop the clock, so we can define an onRelease event handler for it.

stopButton.onRelease = funtion(){
    trace("TIMER STOPPED");
    _root.tenSecondTimer.removeMovieClip();
}

setInterval Method

The second method for creating a countdown timer uses the setInterval command. setInterval creates a timer that will execute a function after a certain number of milliseconds. Otherwise the method is similar. This simplifies things a bit because now we don’t have to count frames to determine if a second has passed, flash will do that for us.

Setup the stage the same way as above, with the textfield and the stopButton.

Declare timeLeft, but this time we don’t need a counter or framerate, so all se need is to make a setInterval.

var timeLeft:Number = 10;

// execute the function countdown every 1000 miliseconds (1 second);
tenSecondTimer = setInterval(countDown, 1000);

now we need to define a function CountDown to decrease the limeLeft every second, and to do something once timeleft is 0.

function countDown(){
    timeLeft--;
    if (timeLeft <= 0){
        trace("TIME'S UP");
        clearInterval(tenSecondTimer);
    }
}

Be sure to clear the interval when time is up and when the stop button is clicked or else you will get “TIME’s UP” messages every second for the rest of your movie!

stopButton.onRelease = funtion(){
    trace("TIMER STOPPED");
    clearInterval(_root.tenSecondTimer);
}

There you have it. Two different methods to display a countdown timer and to stop the countdown with a stop button.

About the author: Patrick Gunderson is a web developer and designer at TWBA\Tequila in Los Angeles.

[kml_flashembed movie="http://www.theorigin.net/tutorialFiles/HockeyPuck/hockeypuck.swf" height="400" width="550" /]

To setup the stage, create a movieclip that contains a square aligned at 0,0. Place an instance on the main stage and give it a name of “puck”.

First we need to enable a click and drag on the puck. To do this we’ll use the onPress Event handler to create an onEnterFrame function that keeps the puck aligned with our mouse.

puck.onPress = function(){
	this.onEnterFrame = function(){
        this._x = _root._xmouse;
        this._y = _root._ymouse;
    }
}

This script is OK, but rather than smoothly picking up the puck where the mouse touched it, the puck snaps its top corner to our mouse. To alleviate this we need to subtract the mouse position relative to the puck from the mouse position relative to the stage by setting an anchor when the mouse is pressed. We won’t worry about garbage collecting this onEnterFrame because we are going to overwrite it when the mouse releases.

Note: in general you shouldn’t just leave open onEnterFrame functions running. When you get a number of onEnterFrame functions going at the same time the performance of your movie can suffer greatly or even crash. For this reason you should terminate your onEnterFrame functions when they have finished their purpose. This is called garbage collection.

puck.onPress = function(){
     anchorX = this._xmouse;
	anchorY = this._ymouse;
	this.onEnterFrame = function(){
        this._x = _root._xmouse - anchorX;
        this._y = _root._ymouse - anchorY;
    }
}

Now we need a way to determine which way the mouse was moving when it released the puck. For this we can record _xmouse and _ymouse values every frame that the mouse is down and store them for use in the onEnterFrame we are going to create onRelease.

puck.onPress = function(){
    anchorX = this._xmouse;
	anchorY = this._ymouse;
	this.onEnterFrame = function(){
        lastXMouse = _root._xmouse;
        lastYMouse = _root._ymouse;

        this._x = _root._xmouse - anchorX;
        this._y = _root._ymouse - anchorY;
    }
}

To make the calculation as to which direction to send the puck after release, we only need the mouse position one frame back, but if we were to record more frames, we could get an average direction just prior to release or even find a curve for the puck to follow. Here though we’ll just send the puck in a straight line.

The math to determine which direction the mouse was moving is a simple slope equation using two points (our current and previous mouse points) We’ll define this function for onRelease and onReleaseOutside just in case your mouse is a bit quicker than your movie.

puck.onRelease = puck.onReleaseOutside = function(){
    xDirection = (_root._xmouse - lastXMouse);
    yDirection  = (_root._yMouse - lastYMouse);
}

We use the direction data to create a new movieclip that moves the puck around.

puck.onRelease = puck.onReleaseOutside = function(){
    xDirection = (_root._xmouse - lastXMouse);
    yDirection  = (_root._yMouse - lastYMouse);
    this.onEnterFrame = function(){
	    this._x += xDirection;
	    this._y += yDirection;
    }
}

In order to make the puck bounce off the walls we need to check to see whether or not it has reached the edge of the stage, and have it reverse direction if it has.

puck.onRelease = puck.onReleaseOutside = function(){
    xDirection = (_root._xmouse - lastXMouse);
    yDirection  = (_root._yMouse - lastYMouse);
    this.onEnterFrame = function(){

	// Bounce off the Walls
	if (this._x < 0){
			xDirection *= -1;
			this._x = 0;
		}
		if (this._x + this._width > Stage.width){
			xDirection *= -1;
			this._x = Stage.width - this._width;
		}
		if (this._y < 0){
			yDirection *= -1;
			this._y = 0;
		}

		if (this._y + this._height > Stage.height){
			yDirection *= -1;
			this._y = Stage.height - this._height;
		}

        // Set New Position
        this._x += xDirection;
	    this._y += yDirection;
     }
}

Finally we want the puck to slow down and eventually stop over time so we’ll add a decay function to the x and Y directions that reduce them by 10% every frame.

Additionally once our puck has stopped, we need to terminate and garbage collect the onEnterFrame function.

puck.onRelease = puck.onReleaseOutside = function(){
    xDirection = (_root._xmouse - lastXMouse);
    yDirection  = (_root._yMouse - lastYMouse);
	this.onEnterFrame = function(){

		// decay x
		if (Math.abs(xDirection) > 0.5){
			xDirection *= .9;
		} else {
			xDirection = 0;
		}

		// decay y
		if (Math.abs(yDirection) > 0.5){
			yDirection *= .9;
		} else {
			yDirection = 0;
		}

		//Garbage Collection
		if (xDirection == 0 && yDirection==0){
			this.onEnterFrame = null;
		}

		//Bounce off the walls
		if (this._x < 0){
			xDirection *= -1;
			this._x = 0;
		}
		if (this._x + this._width > Stage.width){
			xDirection *= -1;
			this._x = Stage.width - this._width;
		}
		if (this._y < 0){
			yDirection *= -1;
			this._y = 0;
		}

		if (this._y + this._height > Stage.height){
			yDirection *= -1;
			this._y = Stage.height - this._height;
		}

		//Position
		this._x += xDirection;
		this._y += yDirection;

	}
}

Download Source

Patrick Gunderson is a Flash Designer and Developer at TBWA\Tequila\ in Los Angeles.