AS3-Category Display图片展示效果
Demo：
Fla Source：http://dl.getdropbox.com/u/477487/flash/as3/categoryDisplay.fla
Core Codes：
[js]
//生成项目的函数
function initCreateCat () {
for (var i:uint=0; i < (numItemTotal*numCat); i++) {
//复制总的项目个数个e_item
var e_item=new mcCat();
//设置每个e_item的初始位置
e_item.x=Math.random()*600;
e_item.y=Math.random()*600;
//移动到刚才设置的aryDis数组位置，在移动完后再加入e_item的鼠标事件，不然在运动过程中如果触发事件，tween会终止
TweenLite.to (e_item,0.5,{x:aryDis[i]["0"],y:aryDis[i]["1"],alpha:0.2,onComplete:initOk,onCompleteParams:[e_item]});
//设置e_item移动到aryNum[i]对应的帧，由于刚才已经对aryNum进行了乱序操作，所以每次会产生不同的排列顺序
//PS：帧是没有第0帧的，所以要加1
e_item.gotoAndStop ((aryNum[i]+1));
loader.addChild (e_item);
}
}
[/js]
接着是按钮点击事件：
[js]
//分类按钮部分
btnCatA.addEventListener (MouseEvent.CLICK,btnCLK);
btnCatB.addEventListener (MouseEvent.CLICK,btnCLK);
btnCatC.addEventListener (MouseEvent.CLICK,btnCLK);
function btnCLK (_evt:MouseEvent) {
//trace(_evt.target.name);
for (var i:uint=0; i < (numItemTotal*numCat); i++) {
switch (_evt.target.name) {
case "btnCatA" :
//注：上边我们排列项目的时候从第1个到最后一个在loader里的索引序列是0～总项目数
//而每个项目显示的图片,也就是对应的类mcCat里的帧数，就是aryNum[i]，当这个值小于numItemTotal时，是属于第分类一的
if (aryNum[i] < numItemTotal) {
TweenLite.to (loader.getChildAt(i),0.5,{alpha:1});
} else {
TweenLite.to (loader.getChildAt(i),0.5,{alpha:0.2});
}
break;
case "btnCatB" :
if (numItemTotal <= aryNum[i] && aryNum[i] < numItemTotal * 2) {
TweenLite.to (loader.getChildAt(i),0.5,{alpha:1});
} else {
TweenLite.to (loader.getChildAt(i),0.5,{alpha:0.2});
}
break;
case "btnCatC" :
if (numItemTotal*2 <= aryNum[i]) {
TweenLite.to (loader.getChildAt(i),0.5,{alpha:1});
} else {
TweenLite.to (loader.getChildAt(i),0.5,{alpha:0.2});
}
break;
}
}
}
[/js]
February 16th, 2009 - 12:03
发现一个更方便方阵排列的方法，使用2个for循环来排列，如6*6的方阵：
for (var i:uint=0; i < 6; i++) {
for (var j:uint=0; j < 6; j++) {
var e_item=new Item ;
e_item.x=e_item.width * j;
e_item.y=e_item.height * i;
addChild(e_item);
}
}
[Reply]