Actionscript 3 TV Snow Effect


In this tutorial, I'll show you how to create a Flash TV snow effect via Actionscript 3.0. So start your Flash CS3 IDE and let's get started.

Setting up the environment

1. Create a new Flash Actionscript 3.0 document of size 300x300.

2. Draw a white rectangle shape of size 10x2.

3. Convert the shape into a movie clip. I named the movie clip to "tile". You can name it however you want. Set the registration point at the top left corner.

4. Double click the movie clip. In the movie clip, insert a second keyframe on frame 2.

5. Draw another rectangle of size 10x2. This time use a black fill color.

Drawing another rectangle

6. Linkage the movie clip to a class called "Tile".

7. Remove the movie clip from the stage.

Moving into Actionscript 3.0

8. Create an actions layer and type the following.

//We get 150 rows, since the height of a single tile is 2 pixels
var rows:Number = 150;

//We get 30 columns, since the height of a single tile is 10 pixels
var columns:Number = 30;

//This array will hold all the tiles seen on the stage
var tiles:Array = new Array();

//Loop through each row
for (var i = 0; i < rows; i++) {

	//Loop through each column
	for (var j = 0; j < columns; j++) {

		//Create a new tile
		var tile:Tile = new Tile();
		
		//Assign a position
		tile.x = tile.width*j;
		tile.y = tile.height*i;
		
		/*
		Let's decrease the scale y.
		I chose 0.2 because that looks good (no magic there)
		*/
		tile.scaleY = 0.2;
		
		//Stop the movie clip in the first frame
		tile.stop ();
		
		//Add the tile to the stage
		addChild (tile);
		
		//Add it to array
		tiles.push (tile);
	}
}

//The times is calls the changeColor() method every 10 milliseconds
var timer:Timer = new Timer(10 , 4000000);
timer.addEventListener (TimerEvent.TIMER, changeColor);
timer.start ();

//This function changes the color for random tiles
function changeColor (e:Event):void {
	for (var i = 0; i < 2048; i++) {
		
		//Select a random index from the array
		var randomIndex:int = Math.floor(Math.random() * tiles.length);
		
		//Fetch a random tile from the array
		var tile:Tile = (Tile)(tiles[randomIndex]);
		
		//Go to previous frame if we are in the last frame
		if (tile.currentFrame == tile.totalFrames) {
			tile.prevFrame ();
		}
		//Else go to the last frame
		else {
			tile.nextFrame ();
		}

	}
}

Bookmark and Share