晚上在逛天地会时,看到一个关于TweenLite的示例,觉得蛮实用的,整理了一下偷过来:)
注:播放完后,鼠标猛击胸部即可重放:)
思路点评:刚开始看到这个效果时,觉得应该蛮复杂的,后来看了代码之后,发现居然如此简单! 关键:先加载一张完整的图片,然后利用BitmapData的copyPixels功能,把每个小块的像素copy出来,形成一系列新的BitmapData(也就是一块块小图片),然后再利用TweenLite让其依次(延时)移动即可。
代码:
package
{
import flash.display.Sprite;
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.display.Bitmap;
import flash.geom.Point;
import flash.events.MouseEvent;
import gs.TweenLite;
import gs.easing.Back;
public class ImageUp extends Sprite
{
var _originalImageData:BitmapData;
var _cols:uint = 5;
var _rows:uint = 5;
var _imgArr:Array = new Array();
var _w:Number = 0;
var _h:Number = 0;
var _flag:Boolean = false;
public function ImageUp()
{
init();
}
private function init():void
{
_originalImageData = new MiMi();//MiMi是库中导入的一张图片
//计算每个小块的宽度、高度
_w = _originalImageData.width / _cols;
_h = _originalImageData.height / _rows;
var i:uint = 0,j:uint = 0;
for (i=0; i<_rows; i++)
{
for (j=0; j<_cols; j++)
{
var _imgCell:BitmapData = new BitmapData(_w,_h);
//关键:从原图中复制相应的小区域像素到imgCell中
_imgCell.copyPixels(_originalImageData,
new Rectangle(j*_w,i*_h,_w,_h),
new Point());
var _sprite:Sprite = new Sprite();
_sprite.addChild(new Bitmap(_imgCell));
//定位
_sprite.x = j * _w;
_sprite.y = i * _h;
this.addChild(_sprite);
_imgArr.push(_sprite);
}
}
this.stage.addEventListener(MouseEvent.CLICK,mouseClick);
begin();
}
private function mouseClick(e:MouseEvent)
{
begin();
}
private function begin():void
{
for (var i:uint=0,j=_imgArr.length; i<j; i++)
{
TweenLite.from(_imgArr[i],0.5,{delay:0.1*i,y:(_flag?-1:1)*_h*_rows,alpha:0,ease:Back.easeOut});
}
_flag = !_flag;
}
}
}