In this tutorial you’ll learn how to create an effect which has surely caught your eye before (for example in files such as this one), the Pixel Explosion. During the process of making it we’ll learn how to extract BitmapData from a MovieClip, how to use a tweening engine and how to use event listeners.

Let’s get started then!

Step 1: Setting Up the Stage

The first thing we’ll do is create an AS3 flash file. Then we’ll set up our stage to 400px x 400px and 30 fps. We’ll be coding on the timeline to make things simple, but those who know to program in OOP are welcome to write this code in classes. You will need a basic knowledge of AS3 to understand all the processes this tutorial involves; however, I will try to keep it very simple. The blue hovered buttons are the ones you’ll have to press in your IDE. It may seem like a lot of work at first, but it really is very simple..

Step 2: Drawing our Main Image

We’ll now draw a vector image of what we need. You can really set up any image with this effect (.jpg, .png), but vectors are cooler. As you’ll notice, I’m not much of a designer. All you need to do is draw your image(or import a jpg from your computer ), select it and convert it to a MovieClip (press F8 on Windows).

Step 3: Preparing For the Code

Once you’ve transformed your image into a Movieclip, you can prepare it for the code that will target it. We’ll create a new layer for the actions (1.) and then give it an instance name of mcLogo (2.). Then we’ll import the classes for use in our actions layer. For this effect we’ll need a good tweening engine. The best one I found that handles both speed and stability is TweenMax. You can download it from http://blog.greensock.com/tweenmaxas3/ (donate if you like it). Remember to copy the classes directory in the same directory as your .fla (as you can see in the blue box). Finally, import the TweenMax class in your timeline(3.).

Step 4: Preparing For the Action

We’ll now set up the stage and our main variables. We’ll align the stage to the TOP_LEFT corner and set it up so it doesn’t scale the contents. On the variables side, we’ll create a container to hold all the pixels that will explode. We’ll also create a GlowFilter, this is optional of course, but it will enhance the awesomeness of the effect. "Animating" is a switch that will turn true when the effect is taking place and "pixelBMP" is the bitmap data of your image.

stage.align = StageAlign.TOP_LEFT;
  stage.scaleMode = StageScaleMode.NO_SCALE;

  var pixelContainer:MovieClip = new MovieClip();
  var glow:GlowFilter = new GlowFilter(0xFFFF00, 1, 10, 10,5,2);
  var animating:Boolean=false;
  var pixelBMP:BitmapData;

Next, we’ll create repeat variables and assign the pixel container position to be the same as your image.

	var i:int = 0;
  	var j:int = 0;
  

Step 5: Create the Pixel Holders

We’ll now extract the bitmap data (pixel colors) from the image you set up (1.) . Remember these two lines, the’ll help you in other projects too. We’ll create a new symbol from the library (2.) and click the Advanced button. Once clicked, select Export for Actionscript(3.). Search for the Class text field and type "myPixel".

Step 6: Set up the MyPixel Class

Now we’ll set up the pixel container. We’ll enter our newly created pixel effect and make a layer named "action".

Step 7: Setting Up the Pixels to Receive Colors

On the actions layer we’ll set up the bitmap. This little piece of code will help you every time you want to manipulate the bitmapData of an object (for example with other useful effects like desaturation and blur).

pixelBMP=new BitmapData(mcLogo.width,mcLogo.height,true,0x000000)
pixelBMP.draw(mcLogo)

I’ve created a circle which holds the color of each pixel, but you can customize it to whatever you wish; square, triangle or even a simple pixel. We add the pixel glow effect from the function parameter:

var orgX:int=0;
var orgY:int=0;
var bmpImg:Bitmap;
function setUpPixel(bdData:BitmapData,glow:GlowFilter)
{
	var mc:MovieClip = new MovieClip();
	mc.graphics.beginFill(bdData.getPixel(0,0));
	mc.graphics.drawCircle(0,0,2)
	mc.graphics.endFill();
	mc.filters=[glow];

	addChild(mc);

}

Step 8: Crossing All Pixels

We’ll create two "for" statements to cover all the pixels of our image. The first for(i) is for vertical and the second(j) for horizontal. The getPixel method returns a unit representing the color of the pixel at that position. If it’s not null, it will start the operations presented at Step 9. We’ll cross the pixels two by two because of memory management.

for(i = 0; i < mcLogo.height; i+=2)
for(j = 0; j < mcLogo.width; j+=2)

Step 9: Giving Color to the Pixels

We’ll start by assigning the pixel color to the glow filter. Then we’ll create a new myPixel that we’ll name "pixel_mc". We’ll call the function "setUpPixel" which we defined during step 7. This passes the bitmapData – 2 pixels wide, 2 pixels tall, color of the current pixel, originalX, originalY and the glow filter. Finally, we add this pixel to the pixel container(line 12)

for(i = 0; i < mcLogo.height; i+=2)
	for(j = 0; j < mcLogo.width; j+=2) {
	if(pixelBMP.getPixel(j, i)>0)
	{
		glow.color = pixelBMP.getPixel(j, i);
		var pixel_mc:myPixel = new myPixel()
		pixel_mc.setUpPixel(new BitmapData(2, 2, false, pixelBMP.getPixel(j, i)), glow)
		pixel_mc.y = i;
		pixel_mc.x = j;

		pixelContainer.addChild(pixel_mc);
		pixelContainer.visible=false;

	}
}

Step 10: Testing What We’ve Done so Far.

Little mistakes are very common in programming, this is why we need to test our movieclip from time to time. This gives us our image, but also some blur. The blur is because of the glow filter, so no worries there. As you might already know, we don’t need these pixels to be visible, except when they have our effect applied. Until then we have our nice image. So all you need to do in this step is uncomment line 13 – pixelContainer.visible=false; and you’ll get your original image back.

Step 11: Setting Up the Explosion Effect

We have the pixels in place, now all we need to do is animate them. This is were TweenMax enters the scene. We start the function by making the original image invisible and the pixels visible. Next we’ll set the original image and the button which we’ll create later (to enable the function) at the top most index. Remember this function – setChildIndex(yourmc,numChildren-1) it will help you in other projects.

function explode() {
    pixelContainer.alpha=1;
    mcLogo.visible = false;
    setChildIndex(mcLogo, numChildren - 1)
    setChildIndex(btn_mc,numChildren-1)
    pixelContainer.visible = true;
}

Step 12

This is where the pixels will come to life. The "for" crosses every child of the pixelContainer. The pixel is extracted through the getChildAt(i) method. The xdest and ydest are some random destinations where our pixels will fly to (since Math.random() returns a number between 0 and 1 it’s necessary to multiply it). Finally, we add the transition and an ease type through TweenMax.

function explode() {
    pixelContainer.alpha=1;
    mcLogo.visible = false;
    setChildIndex(mcLogo, numChildren - 1)
    setChildIndex(btn_mc,numChildren-1)
    pixelContainer.visible = true;

    for(var i:int = 0; i<pixelContainer.numChildren; i++) {
    var pixel_mc:myPixel = myPixel(pixelContainer.getChildAt(i));
    pixel_mc.visible = true;
    var xdest:int = Math.random()*(stage.stageWidth+300)-300;
    var ydest:int = Math.random()*(stage.stageHeight+300)-300;
    TweenMax.to(pixel_mc,14,{x:xdest,y:ydest,ease:Circ.easeOut});

}
}

Step 13: Implosion

For implosion, of course, we need to store our initial values somewhere. We’ll create(1.) 2 arrays – xArray and yArray which store these values. After this (2.) we’ll insert in the for(j = 0; j<mcLogo.width; j+=2) the code to push the values in the next index.

var xArray:Array = new Array();
var yArray:Array = new Array();

for(i = 0; i0)
	{
		glow.color = pixelBMP.getPixel(j, i);
		var pixel_mc:myPixel = new myPixel()
		pixel_mc.setUpPixel(new BitmapData(2, 2, false, pixelBMP.getPixel(j, i)), glow)
		pixel_mc.y = i;
		pixel_mc.x = j;
		xArray.push(j);
		yArray.push(i);

		pixelContainer.addChild(pixel_mc);
		pixelContainer.visible=false;

	}
}

Step 14

Now we’ll also add a retract effect. It’s mostly the same as the explosion effect, only it will use the values stored in the previously created array.

Step 15: The Button

Let’s create our button. Start by drawing it(1.) . Making it a movieclip(as you learned in step 2. Making a new actions layer and typing stop(); (2.) . This prevents our mc from looping. We’ll now insert a keyframe for when the button has been pressed(3.) . This will change the text and show that now, when you click it, it will reverse the process.

Step 16: Exporting our Button for ActionScript

We’ll need to do the same thing we did to our image, giving the button an instance name.

Step 17: Setting Up the Button

The buttonMode property sets the normal cursor to change in the action one.

The mouseChildren property when set to false forbids the buttons children to steal mouseEvents.

The addEventListener method enables the button to launch function clickHandler when clicked(MouseEvent.CLICK).

function initbutton()
{
	btn_mc.buttonMode=true;
	btn_mc.mouseChildren=false;
	btn_mc.addEventListener(MouseEvent.CLICK, clickHandler);
}
initbutton();

Step 18: The Detonator

We’ll now set up the function which sets up the explosion. "animating" is the value which indicates whether the pixels should explode or implode.

function clickHandler(e:MouseEvent) {
			if (animating==false) {
				explode();
				animating = true;
				btn_mc.gotoAndStop(2);
			}
			else {

				implode()
				btn_mc.gotoAndStop(1);
			}
}

Step 19: Customizing

Adding filters, changing the filters’ values and modifying the easing types of the transitions are great things to play with. For changing the easing types you need to import the easing classes. You can preview the tweening types here.

import gs.easing.*;

Step 20: Smoothing the Transition

If you’ve been testing the movie as we’ve gone along, you may have noticed that the transition between pixels and actual image is quite harsh. We can add an onComplete parameter on the implode tween to call a function which smooths that transition:

onComplete:smoothit

function smoothit()
    {
        mcLogo.visible=true;
        TweenMax.to(pixelContainer,1,{alpha:0,onComplete:function(){pixelContainer.visible=false; mcLogo.visible=true; animating = false;}}
    }

Step 21: Review

So, what have we covered today?

1. Importing our main classes.
2. Aligning the stage.
3. Declaring the main variables.
4. Adding a pixel container on stage.
5. Extracting the Bitmap Data from our image.
6. Creating a MyPixel class and sending the color of each of the image pixels to those pixels.
7. Making a function which selects all pixels, then tweens them to a random position.
8. Making a function which tweens the pixels back to the original position.
9. Making a button which calls those functions.

Final Code

import gs.TweenMax;
import gs.easing.*;

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

var pixelContainer:MovieClip = new MovieClip();
var glow:GlowFilter = new GlowFilter(0xFFFF00, 1, 10, 10,5,2);
var animating:Boolean=false;
var pixelBMP:BitmapData;

var i:int = 0;
var j:int = 0;

var xArray:Array = new Array();
var yArray:Array = new Array();

addChild(pixelContainer)
pixelContainer.x=mcLogo.x;
pixelContainer.y=mcLogo.y;

pixelBMP=new BitmapData(mcLogo.width,mcLogo.height,true,0x000000)
pixelBMP.draw(mcLogo)

for(i = 0; i<mcLogo.height; i+=2)
	for(j = 0; j<mcLogo.width; j+=2) {
	if(pixelBMP.getPixel(j, i)>0)
	{
		glow.color = pixelBMP.getPixel(j, i);
		var pixel_mc:myPixel = new myPixel()
		pixel_mc.setUpPixel(new BitmapData(2, 2, false, pixelBMP.getPixel(j, i)), glow)
		pixel_mc.y = i;
		pixel_mc.x = j;
		xArray.push(j);
		yArray.push(i);

		pixelContainer.addChild(pixel_mc);
		pixelContainer.visible=false;

	}
	}
function initbutton()
{
	btn_mc.buttonMode=true;
	btn_mc.mouseChildren=false;
	btn_mc.addEventListener(MouseEvent.CLICK, clickHandler);
	function clickHandler(e:MouseEvent) {
			if (animating==false) {
				explode();
				animating = true;
				btn_mc.gotoAndStop(2);
			}
			else {

				implode()
				btn_mc.gotoAndStop(1);
			}
			}
}
initbutton();

function explode() {
	pixelContainer.alpha=1;
			mcLogo.visible = false;
			setChildIndex(mcLogo, numChildren - 1)
			setChildIndex(btn_mc,numChildren-1)
			pixelContainer.visible = true;

			for(var i:int = 0; i<pixelContainer.numChildren; i++) {
				var pixel_mc:myPixel = myPixel(pixelContainer.getChildAt(i));
				pixel_mc.visible = true;
				var xdest:int = Math.random()*(stage.stageWidth+300)-300;
				var ydest:int = Math.random()*(stage.stageHeight+300)-300;

				TweenMax.to(pixel_mc,14,{x:xdest,y:ydest,ease:Circ.easeOut});

			}
}

function implode()
{
	for(var i:int = 0; i<pixelContainer.numChildren; i++) {
	var pixel_mc:myPixel = myPixel(pixelContainer.getChildAt(i));
	pixelContainer.visible=true;
	TweenMax.to(pixel_mc,3,{y:yArray[i],x:xArray[i],ease:Strong.easeIn,onComplete:smoothit});
	}
}
function smoothit()
{
	mcLogo.visible=true;
	TweenMax.to(pixelContainer,1,{alpha:0,onComplete:function(){pixelContainer.visible=false; mcLogo.visible=true; animating = false;}})
}

I hope you enjoyed this tutorial. Thanks for reading!