flash电子书鼠标拖拽翻页效果原理分析(杂志部落)

Flash电子书鼠标拖拽翻页效果原理分析(杂志部落)设置遮罩和阴影之后的最终成品Flash演示大家用鼠标拖拽画面四个角即可看见效果主要原理：[attach]591[/attach]将电子书分为3个内容层，叠放顺序如图。第一层为当前页面层，是现在正在显示的页面；第二层是随鼠标拖拽时卷起的页角，第三层是当页角卷起时，露出下一页的层。设置遮罩：当页边卷起时，层1仅显示四边形FBDE内部分，层2仅显示ABCD部分，层3仅显示BGHD部分。旋转：层2内的内容要随着鼠标运动而不停变换倾斜角度，其角度始终与AC边斜度一致。翻页：当页面完全翻过时，层1的当前页数=当前页数+1[attach]592[/attach]程序的核心在于如何获得四个点ABCD的坐标，我使用的是求垂直平分线的方法，既：点C是鼠标位置，点H是页角位置，BD既为此两点间的垂直平分线。由已知的C，H坐标求出直线BD的一次函数y=kx+b以后再求出其与FG，EH的切点，既得点B，D坐标，点A是点G于直线BD的对称点，通过求点G对BD的对称点既可得点A坐标。demo1：4个顶点的计算[attach]593[/attach]其他几个要点：限制C点范围：当鼠标在下图灰色区域内时，点C的坐标既等于鼠标坐标，当鼠标离开灰色区域时，点C必须停留在区域内。弧KML是以点J为圆心，KJ为半径的圆，弧KNL是以点I为圆心，IK为半径的圆(demo1既未限制C点范围，若鼠标超过弧形区域就会出错。[flash=314,256][/flash]响应事件：设置4个热区，分别位于书的4个顶点，分别设置rollOver，rollOut，releaseOutside，release事件函数。事实上这一部分函数编写极费时间，需要考虑各种各样的可能性和针对性的处理方法。鼠标吸附及黏滞：当鼠标进入热区和快速移动时，页角是逐渐黏附向鼠标的，这样可以使动画看上去更流畅。demo4设置了吸附，demo1没有设置。[flash=314,256][/flash]Flash演示大家用鼠标拖拽画面四个角即可看见效果阴影：翻页时的阴影须时刻与直线BD的位置保持一致，书的背景阴影要考虑到首页和末页两个特殊情况。首页与末页：在翻动到首页与末页时层3遮罩须重新设置为整本书宽的1/2。