收藏本站 | 站点地图 | 繁體中文
沭阳乐园
您现在的位置: 沐阳乐园 >> 文章中心 >> 网络教程 >> 动画实例 >> 正文
[组图]Flash电子书鼠标拖拽翻页效果原理分析         ★★★
Flash电子书鼠标拖拽翻页效果原理分析
作者:佚名 文章来源:原创 点击数:1514 更新时间:2012-1-17 14:59:09

最近要做些电子书,本来准备去网上买现成的鼠标拖拽翻页效果的组件,但一看报价吓一跳,而且执行效率也不高,一个叫AsFlipPage4。0的组件CPU占用率高居70%,喊价1000RMB,真是恐怖。下载了几个开源的程序自己也看不懂。于是一咬牙自己做了一个。

设置遮罩和阴影之后的最终成品

Flash演示 大家用鼠标拖拽画面四个角即可看见效果

主要原理:

  • 将电子书分为3个内容层,叠放顺序如图。第一层为当前页面层,是现在正在显示的页面;第二层是随鼠标拖拽时卷起的页角,第三层是当页角卷起时,露出下一页的层。
  • 设置遮罩:当页边卷起时,层1仅显示四边形FBDE内部分,层2仅显示ABCD部分,层3仅显示BGHD部分。
  • 旋转:层2内的内容要随着鼠标运动而不停变换倾斜角度,其角度始终与AC边斜度一致。
  • 翻页:当页面完全翻过时,层1的当前页数=当前页数+1

程序的核心在于如何获得四个点ABCD的坐标,我使用的是求垂直平分线的方法,既:点C是鼠标位置,点H是页角位置,BD既为此两点间的垂直平分线。由已知的C,H坐标求出直线BD的一次函数y=kx+b以后再求出其与FG,EH的切点,既得点B,D坐标,点A是点G于直线BD的对称点,通过求点G对BD的对称点既可得点A坐标。

demo1: 4个顶点的计算


Flash演示 将鼠标移到黄色热区并拖动即可看见效果

其他几个要点:

限制C点范围:当鼠标在下图灰色区域内时,点C的坐标既等于鼠标坐标,当鼠标离开灰色区域时,点C必须停留在区域内。弧KML是以点J为圆心,KJ为半径的圆,弧KNL是以点I为圆心,IK为半径的圆(demo1既未限制C点范围,若鼠标超过弧形区域就会出错。

响应事件:设置4个热区,分别位于书的4个顶点,分别设置rollOver,rollOut,releaseOutside,release事件函数。事实上这一部分函数编写极费时间,需要考虑各种各样的可能性和针对性的处理方法。

鼠标吸附及黏滞:当鼠标进入热区和快速移动时,页角是逐渐黏附向鼠标的,这样可以使动画看上去更流畅。demo4设置了吸附,demo1没有设置。

Flash演示 大家用鼠标拖拽画面四个角即可看见效果

阴影:翻页时的阴影须时刻与直线BD的位置保持一致,书的背景阴影要考虑到首页和末页两个特殊情况。

首页与末页:在翻动到首页与末页时层3遮罩须重新设置为整本书宽的1/2。

↘ 点击参考:利用源文件做Flash相册

文章录入:晴天    责任编辑:音乐听听 
  • 上一篇文章:
  • 下一篇文章:
  • 【字体: 】 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    广告招商
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    ::发表评论::
     姓 名:
     评 分: 1分 2分 3分 4分 5分
     评论内容:
  • 严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
  • 用户需对自己在使用本网服务过程中的行为承担法律责任。
  • 本站管理员有权保留或删除评论内容。
  • 评论内容只代表网友个人观点,与本网站立场无关。
  • 广告招商
    文章 下载 图片 文字广告
    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告 | 管理登陆

    备案/许可证编号: 闽ICP备16020960号-1号 域名创建于2016年8月
    版权: 沐阳乐园 All Rights Reserved 站长:张萍 邮箱:381415887@qq.com 联系QQ:联系站长