BOUNCING DISCO BALLS VIA AS3                                      as3


    This tutorial shows how to create nice looking effect of bouncing balls changing colors each time they hit the edge of the stage with blur and blend filters. Everything apart edges of the stage were created by actionscript. At the end of this tutorial you should get something like this:



     Create new actionscript 3 flash file. Draw 4 lines , two 550px long and two 400px long (depends on the size of your stage). Convert them into 4 separate movieclips. Set their instance names to left_mc, right_mc, top_mc, bottom_mc and place them on the stage accordingly to their names. They will serve as the hittest objects to detect edge of the stage. Now set the background color of the stage to black. Open actions window and copy in following actionscript code: 



var i:Number=0;
var n:Array=new Array();
var m:Array=new Array();
var multiply:Number=20;//number of bouncing balls
var blur:BlurFilter=new BlurFilter(15,15,3);//x blur, y blur, quality(1-low,3-high)
var ballProperties:Array = new Array();

function COLORCHANGE(i) {
	var red:Number=Math.random()*255;
	var green:Number=Math.random()*255;
	var blue:Number=Math.random()*255;
	ballProperties[i].transform.colorTransform=
										new ColorTransform(1,1,1,1,red,green,blue);
}

while (i< multiply) {
	ballProperties[i] = new Shape();
	ballProperties[i].graphics.beginFill(0x000000);
	ballProperties[i].graphics.drawCircle(200, 200, 50);
	ballProperties[i].graphics.endFill();
	ballProperties[i].graphics;
	COLORCHANGE(i);
	ballProperties[i].blendMode="add";
	ballProperties[i].filters=[blur];
	addChild(ballProperties[i]);


	n[i]=Math.random()*(5);
	m[i]=Math.random()*(5);
	i++;
}


var myDelay:Timer=new Timer(10);
myDelay.addEventListener(TimerEvent.TIMER, MOVEMENT);
myDelay.start();	  

function MOVEMENT(e:Event) {
	i=0;
	while (i< multiply) {
		ballProperties[i].x=ballProperties[i].x+n[i];
		ballProperties[i].y=ballProperties[i].y+m[i];
		i++;
	}
} 
 

stage.addEventListener(Event.ENTER_FRAME,HITTEST);
function HITTEST(e:Event) {
	i=0;
	while (i< multiply) {
		if (ballProperties[i].hitTestObject(right_mc)) {
			n[i]=-5;
			COLORCHANGE(i);
		}
		if (ballProperties[i].hitTestObject(left_mc)) {
			n[i]=5;
			COLORCHANGE(i);
		}
		if (ballProperties[i].hitTestObject(top_mc)) {
			m[i]=Math.random()*5;
			COLORCHANGE(i);
		}
		if (ballProperties[i].hitTestObject(bottom_mc)) {
			m[i]=Math.random()*(-5);
			COLORCHANGE(i);
		}
		i++;
	}
}

     Lines 1-6 are variables used in the script. Lines 8-14 represents function that changes color of each ball every time they hit edge of the stage. Red,green.blue variables sets the random color , you can control the ammount RGB by changing the number behind math.random (for example red*0 means no red in colors, and red*255 maximum amount of red in colors). While loop on lines 16-31 creates all of the balls with default properties (black, size 50, blend "add"...)and places them on stage. Lines 34-45 is function that moves the balls around the stage. This function executes every 10ms.On lines 48-70 is event listener that checks if any of the balls hit the edge of the stage and turns the movement of the ball the other way.


DOWNLOAD SOURCE FILE