AS3模拟书本翻页效果
用AS3可以作出很多图形特效,但是我还没深深研究过,现在公司要做电子杂志项目。由于公司广告理念的创新性,使用常见的Zcom或IEBook制作出的电子杂志根本不能满足目前公司广告的需求。于是决定自己研发,从Flash平台到Exe打包平台,都自行研发。
其他的就不说了,很多技术细节说起来可是没完没了,杂志的效果可以看http://www.kansoubao.com/files/online/200911/Soubao.html。下面重点讲一下翻页特效的实现!
这里运用到了一个现成的AS3类“PageFlip”,这个类可以根据你设定的坐标位置以及翻页页角作出翻页效果。注:我自己根据需要对这个类进行了简单的修改,让他翻页的时候有点阴影的效果。
调用这个类的方法:
var o:Object = PageFlip.computeFlip(
new Point(rx,ry), // 页角要到达的坐标
new Point(1,1), // 从哪一个角翻开
475, //要翻开页面的宽度
650, // 高度
true, // 这个我也不知道是什么
1); // 这个也是
PageFlip.drawBitmapSheet(o, // computeflip returned object
render, // target
page0, //页面正面的图
page1); // 页面背面的图
添加到你的Flash或者Flex项目中,你可以看到翻页的效果。

说明一下:指定从那个页角开始翻页是这样的,以页面的左上角为坐标原点,以右下角为坐标(1,1),所以(0,0)表示左上角、(0,1)表示左下角、(1,0)表示右上角、(1,1)表示右下角。如下所示:

好了,能做出翻页效果了,但是这仅仅是静态的,你没指定一次他做一个效果,至于让他怎么翻那就仁者见仁智者见智了。我自己想了一种椭圆坐标显示法。即把页面的左下角想象为坐标圆点,画二维坐标轴,以页面宽为长轴a,以自定义高度为短轴b作椭圆。于是便有翻页的运动轨迹如下红线所示:

根据椭圆公式:x2/a2 + y2/b2 = 1,可以通过匀速变化的x来求的变动的y,然后就可以达到翻页效果了。


欢迎订阅:
最新评论
热评文章