Академический Документы
Профессиональный Документы
Культура Документы
2. All will happen in the code so open the actions panel. As often, we’ll use the
Tweenlite engine.
import com.greensock.*;
3. Declare 2 constants to store the number of columns and rows that you like
the image to be sliced into and an Array variable to stores later all the sliced
images.
const COLUMNS:uint=10;
const ROWS:uint=10;
4. Next load the image. When the image is loaded, it will call the
onImageLoaded function.
Then we loop through the columns and through the rows. Inside this double
loop, we create for each iteration a movie clip (imageHolder) that will contain a
piece of the original image. The small piece is created by using the copyPixels()
method that copies a rectangular area from the original image into the small
piece. We set the imageHolder’s x and y properties and set its alpha property to
0 to make it invisible. We add the imageHolder to the gridImages array and add
it to the display list.
Finally when all our sliced images have been created we call the revealImage()
function that we’re going to create right now.
function onImageLoaded(e:Event):void {
originalBitmapData,
new
Rectangle(i * imageWidth, j * imageHeight,imageWidth, imageHeight),
new
Point(1,1));
imageHolder.addChild(image);
imageHolder.x=i*imageWidth;
imageHolder.y=j*imageHeight;
imageHolder.alpha=0;
imagesGrid.push(imageHolder);
addChild(imageHolder);
}
}
revealImage();
}
6. The revealImage() function loop through the imagesGrid array and for each
image uses the Tweenlite engine to animate its alpha property. We specify the
delay parameter to make the pieces of the original image appear one after
another.
function revealImage():void{
for (var i:int = 0; i < imagesGrid.length; i++){
var imageGrid:MovieClip = imagesGrid[i] as MovieClip;
TweenLite.to(imageGrid, .5, { alpha: 1,delay:i*.2});
}
}
import com.greensock.*;
const COLUMNS:uint=10;
const ROWS:uint=10;
function onImageLoaded(e:Event):void {
originalBitmapData,
new
Rectangle(i * imageWidth, j * imageHeight,imageWidth, imageHeight),
new
Point(1,1));
imageHolder.addChild(image);
imageHolder.x=i*imageWidth;
imageHolder.y=j*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;
TweenLite.to(imageGrid, .3, { alpha: 1,delay:i*.15});
}
}
You can download this source code from here: View Demo
You can view the live demo: Download
Screenshot: