素材图片酷 图酷镜像二 | 壁纸酷 壁纸镜像二 | 写真扫图酷 | Free Wallpaper | 贴图论坛 | ·设为首页 ·加入收藏
您现在的位置: 图酷 >> 自习室 >> 多媒体制作 >> Flash >> 教程实例 >> 教程正文

  没有公告


flash电子书鼠标拖拽翻页效果原理
作者: hxgenius
教程来源: 蓝色理想
教程等级:         ★★★
教程录入: 烤焦面包
教程审核: 烤焦面包
添加时间: 2006-8-29
点击次数:
字体选择: 【字体:
相关操作: 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
热门信息:
推荐内容:

    最近要做些电子书,本来准备去网上买现成的翻页效果的组件,但一看报价吓一跳,而且执行效率也不高,一个叫AsFlipPage4.0的组件CPU占用率高居70%,喊价1000RMB,真是黑心商人。下载了几个开源的程序自己也看不懂。于是一咬牙自己做了一个,并放上源程序。过两星期再把变量接口做好,免费发布。
设置遮罩和阴影之后的 最终品:

http://file.tucoo.net/net/swf/88104981.swf





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

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

demo1:4个顶点的计算:将鼠标移到黄色热区并拖动

/Upload/2006-08/8200_20068916182265.gif


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




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

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



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

首页与末页:在翻动到首页与末页时层3遮罩须重新设置为整本书宽的1/2
  • 上一篇教程:
  • 下一篇教程:
  • ::版权和投稿说明::
    • 任何媒体、网站或个人转载、链接、转贴或以其他方式复制发表本站文章,在使用时务必注明“稿件来源:图酷”及“www.tucoo.com”字样,多谢。
    • 本站已注明“来源”的文章均为转载稿,本站转载出于传递更多信息之目的。如本站转载稿涉及版权等问题,请来信与本站联系。
    • 如果您有自己原创的作品,请向我们投稿哦!您可以通过Email:gogocat@21cn.com投出自己的作品,赶快行动吧!
    • 如果觉得我们的资源有用,请推荐给朋友,谢谢!
    ::相关教程::
    《银河动画》鼠绘教程 (2)
    《银河动画》鼠绘教程 (1)
    星星跟我走
    模拟机械波动画制作教程
    实例教学--蜻蜓菜单
    Flash绘精致矢量图——逼真土豆
    Flash8绘制秋之落叶
    FLASH简单制作科技之光
     
    网友评论:(评论内容只代表网友观点,与本站立场无关!) 发表评论