学步园

 

flash非组件的翻书效果制作过程

作者:tiger_0309 | 来源:闪吧 

网上有好多这样的东西，但是大都用组件做成的，有的往往还有收费，我的这个不用组件，基本都是代码，但是结构很简单，一目了然，大家下载原文件就可以看出来，至于代码的含义我就不详细说了，我在这主要说一下替换自己的图片时候怎么样改写代码。
主场景一共有四帧代码：
第一帧代码：x1=50;y1=50
x2=250;y2=50
x3=450;y3=50
x4=50;y4=200
x5=250;y5=200
x6=450;y6=200
//这六个坐标点就是书摊开后的左上，中上，右上，左下，中下，右下点；其中左上点(x1,y1)是定位点，可以决定书在舞台的位置,然后其余的五个坐标就由你的图片大小决定，(x2-x1)和(x3-x2)相等是书的单页宽，同理(x5-x4)和(x6-x5)相等也是一样的道理，(y4-y1)和(y5-y2)和(y6-y3)相等是图片的高。
attachMovie("cover","p0",100)
//这是第一张
attachMovie("bottom","p19",120)
//这是最后一张
for(i=2;i<=20;i+=2){
        attachMovie("Page"+i,"p"+i,100+i/2)
}
//17这个数字是总图片数20-3得出
for(i=1;i<=17;i+=2){
//这个111的数字是根据上面Page20的level是110得出
        attachMovie("Page"+i,"p"+i,111+(i-1)/2)
}
//你的图片多少不一样，每张图片所在的level也很重要，这要你自己根据我的原文件的图片数目和你的比较后调整
//图片都是从库里调用，所以都要有链接标识符，得把所有的图片建成影片剪辑，在每个影片剪辑里都要把图片左对齐和底对齐到舞台，这点很重要，还有你要准备的图片必须是双数
//影片剪辑Page20里面画一个和图片大小一样的矩形，颜色和背景色一样，也要左对齐和第对齐到舞台
mask1._x=x6；
mask1._y=0
mask2._x=x6
mask2._y=0
//遮罩尽量做大一点，在主场景里各占一半
mask1._visible=false
mask2._visible=false
page=0
mouse2=0
x=x6
y=y6
xmouse=x6
ymouse=y6

第二帧代码：
flag=1
if(page>0){
        eval("p"+(page-1))._visible=true
        eval("p"+(page-1))._x=x4
        eval("p"+(page-1))._y=y4
        eval("p"+(page-1))._rotation=0
}
//20是我用的图片数字，你用多少改为多少
if(page<20){
        eval("p"+page)._visible=true
        eval("p"+page)._x=x5
        eval("p"+page)._y=y5
        eval("p"+page)._rotation=0
        eval("p"+(page+1))._visible=true
        eval("p"+(page+1))._x=x6
        eval("p"+(page+1))._y=y6
        eval("p"+(page+1))._rotation=0
        eval("p"+(page+1)).setMask(mask1)
        eval("p"+(page+2))._visible=true
        eval("p"+(page+2))._x=x5
        eval("p"+(page+2))._y=y5
        eval("p"+(page+2))._rotation=0
        eval("p"+(page+2)).setMask(mask2)
}
//这也要改
for(i=0;i<=20;i++){
        if(i<page-1||i>page+2){
                eval("p"+i)._visible=false
        }
}

第三帧代码：
xx=_xmouse
yy=_ymouse
if(Key.isDown(1)){
        mouse1=1
}
else{
        mouse1=0
}
if(mouse2==1&&mouse1==1&&((xx-x5)*(xx-x5)+(yy-y5)*(yy-y5)<=(x6-x5)*(x6-x5))&&((xx-x2)*(xx-x2)+(yy-y2)*(yy-y2)<=(x6-x5)*(x6-x5)+(y5-y2)*(y5-y2))){
        xmouse=xx
        ymouse=yy
}
if(mouse2==0&&mouse1==1){
//150是我主场景宽的一半左右，它的值决定你的鼠标的灵敏度，你可以根据你的场景来调整
        if(flag==1&&xx<150&&page>0){
                page-=2
                x=x4
                y=y4
                xmouse=x4
                ymouse=x4
                gotoAndPlay(2)
        }
}
if(mouse1==1){
        flag=0
        x=xmouse/5+x*4/5
        y=ymouse/5+y*4/5
}
if(mouse1==0){
//这个150也要改，和上面一样
        if(xmouse>150){
                x=x6/6+x*5/6
                y=y6/4+y*3/4
        }
        else{
                x=x4/6+x*5/6
                y=y4/6+y*5/6
        }
}

eval("p"+(page+1))._x=x
eval("p"+(page+1))._y=y
if(flag==0&&page<20&&Math.abs(x-x4)+Math.abs(y-y4)<1){
        page+=2
        x=x6
        y=y6
        xmouse=x6
        ymouse=y6
        flag=1
        gotoAndPlay(2)
}
if(Math.abs(x-x6)+Math.abs(y-y6)<0.5){
        a=0
        flag=1
}
else{
        a=Math.atan2(y6-y,x6-x)
}
eval("p"+(page+1))._rotation=2*a*180/Math.PI
mask1._x=(x+x6)/2
mask1._y=(y+y6)/2
mask1._rotation=a*180/Math.PI
mask2._x=(x+x6)/2
mask2._y=(y+y6)/2
mask2._rotation=a*180/Math.PI
mouse2=mouse1
第四帧代码：
gotoAndPlay(3)；

下载:翻书2.rar

附件: 翻书2.swf