Question

我正在尝试将图像拆分成单独的块，这是使用以下教程/源（code here）完成的，但这是错误的方法 - 如何调整代码以便从完整的图像开始，然后将其分解成碎片？

原始代码（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

您需要更改revealImage（）。

onImageLoaded（）负责将加载的图像分成更小的部分。您可以通过操作这些来实际更改零件的大小：

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

正如shanet所指出的那样，当功能完成时，图像不可见，因为以下行，为透明度设置零值（最大值= 1）

imageHolder.alpha=0;

实际上，你最终会得到一个电影剪辑数组，每个剪辑都包含一个主图像片段。在revealImage（）中，您可以循环通过此数组并将随机值分配给x＆amp;每个影片剪辑的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()，换句话说，它会使每个元素为设置动画对象中给定的值。

Flash AS3图像效果

2 个答案: