Slicing an image with the Matrix Class of Actionscript 3.0

[Flep]

Slicing an image" Some of you, maybe used to slice an image with an editor such as Fireworks or Photoshop, shall be asking themselves"
is it possible to slice an image using Actionscript""
You surely can!
In this example, using the Matrix and BitmapData class, I will slice an image in more pieces and convert each one of them into a Movie Clip to which I will then apply an effect.
How"
Let"s take a look at it"
I create a FLA and save it as "matrix.fla".
I import an image to the library and drag it on Stage. I convert it to a Movie Clip and give it an instance name "image_mc".
I create a Document Class, an AS file saved as "Taglio.as", implemented this way:

package
{
	import flash.display.MovieClip;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.geom.Point;
	import flash.geom.Matrix;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import fl.transitions.*;
	import fl.transitions.easing.*;
	
	public class Taglio extends MovieClip
	{
		private var clips_array:Array;
		
		private var righe:int=10;
		private var colonne:int=10;
		
		private var timer:Timer;
		private var t_e:TimerEvent;
		
		public function Taglio()
		{
			init();
			taglia();
			startTimer(t_e);
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			image_mc.visible=false;
			
			clips_array=new Array();
		}
		
		private function taglia():void
		{
			var ww:int=Math.ceil(image_mc.width/righe);
			var hh:int=Math.ceil(image_mc.height/colonne);
			var mat:Matrix;
			var bitmap_data:BitmapData;
			var point:Point;
			var clip:MovieClip;
			
			for(var i:int=0;i < colonne;i++)
			{
				for(var j:int=0;j < righe;j++)
				{
					bitmap_data=new BitmapData(ww,hh,true,0x00FFFFFF);
					mat=image_mc.transform.matrix;
					mat.translate(-ww*j,-hh*i);
					bitmap_data.draw(image_mc,mat);
					
					clip=new MovieClip();
					clips_array.push(clip);
					addChild(clip);
					point=new Point(image_mc.x+ww*j+1*j,image_mc.y+hh*i+1*i);
					
					var bitmap:Bitmap=new Bitmap(bitmap_data);
					clip.addChild(bitmap);
					clip.x=point.x;
					clip.y=point.y;
				}
			}
		}
		
		private function callStartTimer():void
		{
			timer=new Timer(4000,1);
			timer.addEventListener(TimerEvent.TIMER,startTimer);
			timer.start();
		}
		
		private function startTimer(t:TimerEvent):void
		{
			timer=new Timer(10,clips_array.length);
			timer.addEventListener(TimerEvent.TIMER,abbaglia);
			timer.addEventListener(TimerEvent.TIMER_COMPLETE,finito);
			timer.start();
		}
		
		private function abbaglia(t:TimerEvent):void
		{
			TransitionManager.start(clips_array[t.target.currentCount-1],
			{type:Photo,direction:Transition.IN,duration:.5,easing:Strong.easeOut});
		}
		
		private function finito(t:TimerEvent):void
		{
			callStartTimer();
		}
	}
}

Without script:

With script:

Let's analise the code
I would like to pay attention to the method taglia()
I create 2 numerical variables to which I assign the value of 1. Width of the image divided by the number of rows 2. Height of the image divided by the number of columns
var ww:int=Math.ceil(image_mc.width/righe);
var hh:int=Math.ceil(image_mc.height/colonne);
I create 4 instances: Matrix, BitmapData, Point, MovieClip
var mat:Matrix;
var bitmap_data:BitmapData;
var point:Point;
var clip:MovieClip;
I implement 2 nested cycles
for(var i:int=0;i < colonne;i++)
{
for(var j:int=0;j < righe;j++)
{
Into which for each iteration
I create a new BitmaData
bitmap_data=new BitmapData(ww,hh,true,0x00FFFFFF);
I assign a new matrix to the matrix of the image placed on stage
mat=image_mc.transform.matrix;
I let the matrix translate the value of ww and hh multiplied by the number of iteration of the moment
mat.translate(-ww*j,-hh*i);
I take a picture of the image on stage using the method Draw() and passing as parameters the new translated matrix
bitmap_data.draw(image_mc,mat);
I create a new MovieClip
clip=new MovieClip();
I insert it in a new Array
clips_array.push(clip);
I add it to the DisplayObject (otherwise it would be invisible)
addChild(clip);
I create an instance of Point to which I assign as coordinates: the X of the image on stage + ww multiplied by the cycle"s iteration at that moment + 1 pixel multiplied by the cycle"s iteration at that moment"same thing for the Y
point=new Point(image_mc.x+ww*j+1*j,image_mc.y+hh*i+1*i);
I assign the BitmapData to an istance of the Bitmap Class (to be able to add the Bitmap to the DisplayObject otherwise it would be invisible)
var bitmap:Bitmap=new Bitmap(bitmap_data);
Here I add the Bitmap to the DisplayObject
clip.addChild(bitmap);
I assign an X and Y value to the clip which holds the sliced piece of the image (value which are the X and Y of the instance Point)
clip.x=point.x;
clip.y=point.y;

Enjoy !!

[hard_overclocker]

Flep, your code is awesome.
Your site is so usefull that when I have a problem in cs3, I search here before I search google.

About this script here, I have changed something about it:

mat.translate(-ww*i-image_mc.x, -hh*j-image_mc.y);

This way the images you are slicing doesn't have to be at x,y = 0.

Keep it up

[Flep]

Thank you dude

[Maldor]

Great site and tutorials are greatly helping me transition from AS2 to 3.....with the slicing example im getting these errors...ive tried a few things and am getting no results....what am i doing wrong??

1119: Access of possibly undefined property visible through a reference with static type Class.
image_mc.visible=false;

[Flep]

Great site and tutorials are greatly helping me transition from AS2 to 3.....with the slicing example im getting these errors...ive tried a few things and am getting no results....what am i doing wrong??

1119: Access of possibly undefined property visible through a reference with static type Class.
image_mc.visible=false;

HI

That error seems to say that you did not assign a name at tha MC you have in the stage.

[Maldor]

yeah sorry bout that i got a little ahead of myself...thought the image was being called from the library....looked at the code and resovled it...thx for the help and the code...

[jonhy_doe]

Hi, this is my first post, so I would like to congratulate the forum author for the very usefull information presented here, but first of all I would like to say that this effect is awesome .

So, i'm trying to use your idea but a bit different, I would want to erase all the image while it's fading.

More or less like this : http://www.webpontonet.info/temporario/matrix.swf

If you want to see the files matrix.fla / Taglio.as it's here http://www.webpontonet.info/temporario/matrix.zip

I would be very appreciated if you could help me with this.

Dont be suprised with some "non logic" on the "actionscript" as i'm not a good programmer at it.

Thanks for your time.
Manuel Seromenho

[Kuadratic]

good work...I needed something to slice up bitmapdata and apply an effect and your code was a good starting point. Code for my version is at Flash Games...: Bitmapdata Image Effects in Actionscript 3 demo with code

[karfes]

i am not getting past adding the effect after tha script. how do i get the slices animated separately. my movie shows no error. i need some little explanation of how to get the matrix class hooked to the image movie instance. i thought it 'd be automatic.

[karfes]

i have gotten somewhere by now but am getting these errors:
1120: Access of undefined property image_mc.
1120: Access of undefined property image_mc.

etc, etc.

what am i doing wrong?