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:
Code:
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 !!
29-09-07, 09:39
Re: Slicing an image with the Matrix Class of Actionscript 3.0
Linear Mode
