Tagliare un' immagine con la classe Matrix di Actionscript 3.0

[Flep]

Tagliare un' immagine ? Qualcuno di voi, magari abituato a tagliare le immagini con un editor tipo FireWorks o PhotoShop, si starà chiedendo....ma è possibile tagliare un' immagine con Actionscript...?
Certo che lo è !
In questo esempio, utilizzando la classe Matrix e BitmapData, taglio un' immagine in tanti pezzetti ed ogni pezzetto lo converto in MovieClip a cui poi applico un effetto.
Come ?

Vediamolo...

Creo un FLA che salvo con nome ' matrix.fla '.
Importo un' immagine nella libreria, la trascino sullo Stage, la converto in MovieClip e gli assegno nome istanza ' image_mc ' .
Creo la Document Class, un file AS che salvo con nome ' Taglio.as ', così implementata:

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();
        }
    }
}

Senza script
Con lo script:


Analizziamo il codice:
vorrei porre l' attenzione sul metodo taglia()
creo 2 variabili numeriche a cui assegno il valore rispettivamente di: width dell' immagine diviso il numero delle righe e height dell' immagine diviso il numero delle colonne
var ww:int=Math.ceil(image_mc.width/righe);
var hh:int=Math.ceil(image_mc.height/colonne);
creo 4 istanze: Matrix, BitmapData, Point, MovieClip
var mat:Matrix;
var bitmap_data:BitmapData;
var point:Point;
var clip:MovieClip;
implemento 2 cicli innestati
for(var i:int=0;i < colonne;i++)
{
for(var j:int=0;j < righe;j++)
{
al cui interno per ogni iterazione
creo una nuova BitmapData
bitmap_data=new BitmapData(ww,hh,true,0x00FFFFFF);
assegno una nuova matrice alla matrice dell' immagine che ho sullo stage
mat=image_mc.transform.matrix;
faccio traslare la matrice del valore di ww e hh moltiplicato per il numero dell' iterazione del momento
mat.translate(-ww*j,-hh*i);
scatto una foto all' immagine sullo Stage usando il metodo draw() e passandogli come parametro la nuova matrice che ho traslato
bitmap_data.draw(image_mc,mat);
creo una nuova MovieClip
clip=new MovieClip();
la inserisco in un Array
clips_array.push(clip);
la aggiungo al DIspayObject ( o non sarebbe visibile )
addChild(clip);
creo una istanza di Point a cui assegno come coordinate: la X dell' immagine sullo Stage + ww moltiplicato per l' iterazione del ciclo del momento+ 1 pixel moltiplicato per l' iterazione del ciclo del momento..stessa cosa per la y del punto
point=new Point(image_mc.x+ww*j+1*j,image_mc.y+hh*i+1*i);
assegno la BitmapData ad una istanza della classe Bitmap ( per poter poi aggiungere la Bitmap al DisplayObject o non sarebbe visibile )
var bitmap:Bitmap=new Bitmap(bitmap_data);
ecco che aggiungo la Bitmap al DisplayObject
clip.addChild(bitmap);
assegno un valore di X e Y alla clip che contiene il pezzettino di immagine ( valori che sono la X e Y dell' istanza Point )
clip.x=point.x;
clip.y=point.y;

Enjoy !!