本示例在CS4中用AS3编程测试通过。制作这个效果需要准备几张纸牌正面图片,本示例中用了18张,一张背面图片,下面说一下制作步骤:
新建Flash文件(ActionScript3.0),设置舞台长宽为600×400,图片导入到库中,在库中新建19个影片剪辑,分别命名为p,p0,p1,p2……p17,其中p为引导牌,在p中画一个矩形,大小与纸牌相同,右对齐、上下居中对齐。在p0中第一帧拖入一张纸牌正面,写上代码stop();第二帧拖入纸牌背面,都是右对齐、上下居中对齐。p1---p17依次类推。
将影片剪辑p,p0,p1,p2……p17依次拖入舞台,实例名称也定义为p,p0,p1,p2……p17,注意拖放顺序!p随便找个地方,就放在舞台外面吧,并且设置透明度为0,使其不可见。p0---p17按下图依次排列放好。
并在第一帧加上以下代码:
var k:int;
var oldX:Number=0;
//将纸牌放入数组
var ps:Array=[p0,p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,p11,p12,p13,p14,p15,p16,p17];
stage.addEventListener(MouseEvent.MOUSE_DOWN,onMousedown);
stage.addEventListener(MouseEvent.MOUSE_UP,onMouseup);
function onMousedown(e:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_MOVE,onMousemove);
}
function onMousemove(e:MouseEvent):void {
if (mouseX>oldX) {//当鼠标向右移时
k=1;
} else {//当鼠标向左移时
k=-1;
}
if(k==1){
p.rotationY-=2;/*p是引导牌,按2°递增,
当引导牌旋转时,第一张牌同时旋转,其他
牌每隔10°开始旋转,180°时停止旋转*/
for(var i:int=0;i<18;i++){
if(p.rotationY<=-10*i){
ps[i].rotationY-=2;
if(ps[i].rotationY<-180){
ps[i].rotationY=-180;
}
//当旋转90°时显示另一面,并改变深度
if(ps[i].rotationY<-90){
setChildIndex(ps[i],17-i);
ps[i].gotoAndStop(2);
}
}
}
if(p.rotationY<-180){
p.rotationY=-180;
}
}
//反向旋转时
if(k==-1){
p.rotationY+=2;
for(i=17;i>=0;i--){
if(p.rotationY>=10*(17-i)-180){
ps[i].rotationY+=2;
if(ps[i].rotationY>0){
ps[i].rotationY=0;
}
if(ps[i].rotationY>-90){
setChildIndex(ps[i],i);
ps[i].gotoAndStop(1);
}
}
}
if(p.rotationY>0){
p.rotationY=0;
}
}
oldX=mouseX;
}
function onMouseup(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMousemove);
}
var oldX:Number=0;
//将纸牌放入数组
var ps:Array=[p0,p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,p11,p12,p13,p14,p15,p16,p17];
stage.addEventListener(MouseEvent.MOUSE_DOWN,onMousedown);
stage.addEventListener(MouseEvent.MOUSE_UP,onMouseup);
function onMousedown(e:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_MOVE,onMousemove);
}
function onMousemove(e:MouseEvent):void {
if (mouseX>oldX) {//当鼠标向右移时
k=1;
} else {//当鼠标向左移时
k=-1;
}
if(k==1){
p.rotationY-=2;/*p是引导牌,按2°递增,
当引导牌旋转时,第一张牌同时旋转,其他
牌每隔10°开始旋转,180°时停止旋转*/
for(var i:int=0;i<18;i++){
if(p.rotationY<=-10*i){
ps[i].rotationY-=2;
if(ps[i].rotationY<-180){
ps[i].rotationY=-180;
}
//当旋转90°时显示另一面,并改变深度
if(ps[i].rotationY<-90){
setChildIndex(ps[i],17-i);
ps[i].gotoAndStop(2);
}
}
}
if(p.rotationY<-180){
p.rotationY=-180;
}
}
//反向旋转时
if(k==-1){
p.rotationY+=2;
for(i=17;i>=0;i--){
if(p.rotationY>=10*(17-i)-180){
ps[i].rotationY+=2;
if(ps[i].rotationY>0){
ps[i].rotationY=0;
}
if(ps[i].rotationY>-90){
setChildIndex(ps[i],i);
ps[i].gotoAndStop(1);
}
}
}
if(p.rotationY>0){
p.rotationY=0;
}
}
oldX=mouseX;
}
function onMouseup(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMousemove);
}
好了,可以测试了。在下面的附件中提供了一些纸牌的图片,供有兴趣的朋友练习之用,是EPS格式的,解压后在Illustrator中打开全选复制,然后在Flash中粘贴。粘贴过来后注意按Ctrl+G键组合,否则对齐时将拧成一团。
附件下载:纸牌.rar