艺虎动画 > AS3运用:一种纸牌效果的制作

AS3运用:一种纸牌效果的制作

翼虎动漫   2010-7-16

 

 

 

本示例在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);

}

好了,可以测试了。在下面的附件中提供了一些纸牌的图片,供有兴趣的朋友练习之用,是EPS格式的,解压后在Illustrator中打开全选复制,然后在Flash中粘贴。粘贴过来后注意按Ctrl+G键组合,否则对齐时将拧成一团。

附件下载:纸牌.rar