源码下载点击这里

以下是我的理解：

package  {

import flash.display.MovieClip;

import com.greensock.*;

import com.greensock.easing.*;

import com.greensock.plugins.*;

import tv.snorkl.utils.bitmap.BitmapTileGrid;

import tv.snorkl.utils.bitmap.BitmapTile;

import flash.events.MouseEvent;

public class BMTsitePreview extends MovieClip {

public var grid1:BitmapTileGrid;//BitmapTileGrid是一个非常好的工具类，用来将一个mc按横纵数目，分割开，并存储在一个数组中

public var tween1:TimelineLite;//TimelineLite用来建立时间轴序列--这些时间轴可以是并发的，也可以是有先后次序的，具体见后面例子

public var grid2:BitmapTileGrid;

public var tween2:TimelineLite;

public var grid3:BitmapTileGrid;

public var tween3:TimelineLite;

//note TimelineLites are being used to contain the allFrom() tweens.

//allFrom creates an array of tweens, and you can't play() or pause() an allFrom() group of tweens directly.

//view the TimelineLite Ultimate Starter Guide tutorials on ActiveTuts+ to learn more: http://bit.ly/t7yXS6

//visit www.snorkl.tv every day.

//英文大意：TimelineLites一般与allFrom函数搭配，allFrom用来建立一个共同的动作序列

public function BMTsitePreview() {

// **** SET UP GRID 1 *****

grid1 = new BitmapTileGrid(image1_mc, 1, 20);//将mc分割成1列20行

grid1.x = image1_mc.x;

grid1.y = image1_mc.y;

addChild(grid1);

image1_mc.visible = false;//原图不可见

tween1 = new TimelineLite({paused:true}) //建立动作序列并停止它---因为后面会用按钮来触发开始，所以不用急着开始播放

tween1.appendMultiple(TweenMax.allFrom(grid1.tilesArray, 1, {y:0, alpha:0, rotationX:-180, yoyo:true, repeat:2}, .02));//高级货来了，注意allFrom的目标必须是一个array(这跟后面的insert方法是有区别的),将数组中所有小块从y=0,alpha=0开始播放,yoyo是反复播放，反复2次，注意这个2次是在原来播放1次的基础上再追加2次,高级货又来了，“.02”这个参数是些每个小块动画播放时都滞后0.02秒，这样才有次序感，想知道区别，把这个参数置为0再试就知道了。

tween1.currentProgress = 1;//将当前播放进度置为100%，这样才能看到完成后的效果。

image1_btn.addEventListener(MouseEvent.CLICK, playTween1);//点击按钮开始播放

// **** SET UP GRID 2 *****前面写过的这里都不重复写了

grid2 = new BitmapTileGrid(image2_mc, 5, 5);

grid2.x = image2_mc.x;

grid2.y = image2_mc.y;

addChild(grid2);

image2_mc.visible = false;

tween2 = new TimelineLite({paused:true}) 

tween2.appendMultiple(TweenMax.allFrom(grid2.tilesArray, 2.3, {alpha:0, scaleX:0, scaleY:0},0.2));

tween2.currentProgress = 1;

image2_btn.addEventListener(MouseEvent.CLICK, playTween2);

// **** SET UP GRID 3 *****

grid3 = new BitmapTileGrid(image3_mc, 25, 25);

grid3.x = image3_mc.x;

grid3.y = image3_mc.y;

addChild(grid3);

image3_mc.visible = false;

tween3 = new TimelineLite({paused:true}) 

var grid3TilesMax:int = grid3.tilesArray.length;

///这里用了循环，因为每个碎片的动作都不一样了，没办法用allFrom这样的“全体一样”的动作了，2次循环，代表碎片展开--然后合拢

for(var i:int = 0; i < grid3TilesMax; i++){

var tile:BitmapTile = grid3.tilesArray[i] as BitmapTile;//每个碎片置入tile变量中

tile.alpha = 0;

tween3.insert(TweenMax.to(tile, .8, {x:Math.random()* image3_mc.width, y:Math.random()* image3_mc.height, alpha:1, scaleX:1.5, scaleY:1.5, ease:Back.easeOut}));//所有碎片都有随机量

}

var time:Number = tween3.duration//使用相同长度的变化时间

for(var n:int = 0; n < grid3TilesMax; n++){

var tile2:BitmapTile = grid3.tilesArray[n] as BitmapTile;

trace("ss");

tween3.insert(TweenMax.to(tile2, .5, {x:tile2.originX, y:tile2.originY, ease:Back.easeOut, scaleX:1, scaleY:1}), time);//第2次循环是把已经跳出来的碎片再飞回原来位置originX/originY

}

tween3.currentProgress = 1;

image3_btn.addEventListener(MouseEvent.CLICK, playTween3);

}

////点击按钮可反复播放

private function playTween1(e:MouseEvent):void{

tween1.restart();

}

private function playTween2(e:MouseEvent):void{

tween2.restart();

}

private function playTween3(e:MouseEvent):void{

tween3.restart();

}

//////总结：这个例子中最高明地方：1、BitmapTileGrid很方便将mc对象碎片化并记入数组；2、TimelineLite及allFrom等 ，将所有碎片进行规律化运动。使用这种思路，可以变化出很多很多的切换类动画。

}

}

 

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: TimelineLiteTimelineLite BitmapTileGridBitmapTileGrid allFromallFrom
相关日志: