Flash AS3 Эффект изображения

Question

Я пытаюсь разделить изображение на отдельные блоки, что, в некотором роде, выполняется с помощью следующего учебника / источника ( код здесь ), но это неправильный способ - как мне настроить кодчтобы начать с полного изображения, а затем разбить его на части?

Оригинальный код (любезно предоставлено www.riacodes.com):

import com.greensock.*;
import com.greensock.easing.*;

const COLUMNS:uint=5;
const ROWS:uint=5;

var imagesGrid : Array = new Array();    

var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("image.jpg"));
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);

function onImageLoaded(e:Event):void {

    var originalBitmapData:BitmapData = e.target.content.bitmapData;

    var imageWidth : Number  = originalBitmapData.width / COLUMNS;
    var imageHeight : Number = originalBitmapData.height / ROWS;

    for (var i = 0; i < ROWS; i++) {

        for (var j = 0; j < COLUMNS; j++) {

            var imageHolder:MovieClip = new MovieClip();

            var image:Bitmap = new Bitmap();
            image.bitmapData=new BitmapData(imageWidth,imageHeight);
            image.bitmapData.copyPixels(
                                originalBitmapData,
                                new Rectangle(j * imageWidth, i * imageHeight,imageWidth, imageHeight),
                                new Point(0,0));

            imageHolder.addChild(image);

            imageHolder.x= j*imageWidth ;
            imageHolder.y= i*imageHeight ;

            imageHolder.alpha=0;

            imagesGrid.push(imageHolder);
            addChild(imageHolder);

        }
    }
    revealImage();
}

function revealImage():void {
    for (var i:int = 0; i <imagesGrid.length; i++){
        var imageGrid:MovieClip = imagesGrid[i] as MovieClip;
        imageGrid.alpha = 1;
        TweenLite.from(imageGrid,.8,{alpha:0,y:-200,delay:i*.1,ease:Back.easeOut});
    }
 }

Answer 1

Вам нужно изменить showImage ().

onImageLoaded () заботится о разбиении загруженного изображения на более мелкие части. На самом деле вы можете изменить размер деталей, манипулируя ими:

const COLUMNS:uint=5;
const ROWS:uint=5;

Как указывает shanethehat, когда функция завершена, изображения не видны, потому что следующей строки, которая устанавливает нулевое значение для прозрачности (максимальное значение = 1)

imageHolder.alpha=0;

Практически вы получаете массив клипов, каждый из которых содержит часть основного изображения. Затем в функцииIllImage () вы можете циклически проходить по этому массиву и назначать случайные значения как x & y каждого фрагмента ролика, чтобы разбить основное изображение на части.

for( var i:int ; i <imagesGrid.length; i++)
{
    var imageGrid:MovieClip = imagesGrid[i];
    imageGrid.alpha = 1;

    // Calculate a random value for x , y
    // Tweak this according to the Fx you're looking for
    var randomX:Number  = Math.random() * stage.stageWidth;
    var randomY:Number  = Math.random() * stage.stageHeight;

    TweenLite.to(imageGrid, 1, 
      {x:randomX, y:randomY, delay:i*.1,ease:Back.easeOut}});
}

Answer 2

Сначала измените строку 38 связанного кода на:

imageHolder.alpha=1;  

Это гарантирует, что части вашего изображения начинают видны.

Затем измените строку 52 на:

TweenLite.to(imageGrid,.8,{alpha:0,y:-200,delay:i*.1,ease:Back.easeOut});

Это изменяет функцию TweenLite с from() на to(), другими словами, каждый элемент оживляет до значений, данных в объекте.