Breake apart to particles. Разбиение картинки на кусочки и соединение обратно.

В этом уроке будет рассказано и показано о том, как разбить картинку на маленькие кусочки, а потом воссоединить их обратно. Пример на Flex3

В данном уроке был написан класс навеянный статьей http://www.erikhallander.com/blog/2008/bitmapvector-into-firefly-particles-as30.html.

Для кусочков используется класс Pixel, который является расширением Sprite и содержит в себе Bitmap (один кусочек от целой картинки).

Движение кусочков происходит при использовании TweenMax и класса Pixelator. Входным параметром является Sprite, содержащий картинку или другие спрайты с картинками, текстом и т.п.
Запишем текущие координаты оригинального спрайта и перейдем к созданию кусочков - функция setupPixels(pixelColor) с комментариями

        private function setupPixels(pixelColor:uint):void
        {
            numPixels = 0;
//создаем новую битмапдату            
            orgBMD = new BitmapData(orgClip.width, orgClip.height);
//рисуем в ней нашу картинку
            orgBMD.draw(orgClip);
//создаем пикселы (здесь через каждый третий, очень сильно влияет на загрузку процессора, но чем больше тем правдоподобнее)
           for(var i:int = 0; i
            {
                for(var j:int = 0; j
                { 
//запоминаем местонахождение пикселов и установливаем точку его "полета"
                   var angle:Number = Math.random()*360;
                    var radius:Number = Math.random()*200;
                    orgBMD.getPixel(j, i);
                    var cPixel:Pixel = new Pixel(new BitmapData(2, 2, false, orgBMD.getPixel(j, i)), j, i);
                    cPixel.x = j;
                    cPixel.y = i;
                    cPixel.tox = Math.round(j+Math.cos(angle)*radius * 4);
                    cPixel.toy = Math.round(i+Math.sin(angle)*radius * 4);
//добавим пару эффектов
                   var glow:GlowFilter = new GlowFilter();
                    glow.color = orgBMD.getPixel(j, i);
                    var blur:BlurFilter = new BlurFilter(2, 2);
                    cPixel.filters = [glow, blur];
                    addChild(cPixel);
//и добавим наш пиксел в Pixelator
                   numPixels++;
                }
            }
            doneCreating = true;
        }

Также в классе Pixelator есть функции для разбиения картинки и обратного собирания: explode() и retract()
Функция explode()

        public function explode():void {
            orgClip.visible = false;
            pixelExplosion.visible = true;
            var rect:Rectangle = new Rectangle(0, 0, orgClip.width, orgClip.height);
            for(var i:int = 0; i
            {
                var cPixel:Pixel = Pixel(getChildAt(i));
                cPixel.visible = true;
                TweenMax.to(cPixel,3,{x:cPixel.tox,y:cPixel.toy});
            }
            var s:int = setTimeout(finishExplode, 3000);
        }

В ней разбрасываем наши пикселы по координатам записанным в tox и toy. По окончании цикла вызываем функцию finishExplode, которая сообщает о том, что процесс разбиения закончился.

Функция retract() делает обратное действие, перемещая пикселы в оригинальные координаты origX и origY:

        public function retract():void
        {
            var s:int = setTimeout(completeHandler, 3000);
            for(var i:int = 0; i
            {
                    var cPixel:Pixel = Pixel(getChildAt(i));
                    cPixel.visible = true;
                    TweenMax.to(cPixel, 3,{y:cPixel.origY,x:cPixel.origX, onComplete:function():void{cPixel.visible = false;}});
            };
            function completeHandler():void
            {
                orgClip.visible = true;
                pixelExplosion.visible = false;
                dispatchEvent(new Event("RETRACT_DONE"));
            }
        }

Это собственно и было основным в классе Pixelator.
Подключение класса:

            pixelator = new Pixelator(pictureSprite, 0xFFFFFF);
            container.addChild(pixelator);
            pixelator.alpha = 0.0;

Делаем нулевую прозрачность чтобы не было видно расплывчатой картинки (из-за эффеков), на кнопки вешаем действия   

          pixelator.alpha = 1;
          pixelator.explode();

и

        pixelator.retract();

Исходники - source, приложение - application