北京电子杂志设计制作-杂志网ZineNet.com

北京电子杂志制作电子画册制作

  
首页 → 新闻动态 → 相关知识
Flash电子书鼠标拖拽翻页效果原理分析
http://www.ZineNet.com 发布日期:2009-4-18  来源:网络转载 点击:1916次



设置遮罩和阴影之后的最终成品
Flash演示 大家用鼠标拖拽画面四个角即可看见效果

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

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

  demo1: 4个顶点的计算 
3.gif
  其他几个要点:

  限制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跨域读取数据
 新闻动态
· 中国最赚钱电子杂志的幕后故…
· 论电子杂志制作的商业化道路…
· 韩寒首推电子杂志《ONE·一个…
· 推出廉政电子杂志 创新反腐倡…
· 《收获》拟筹办电子杂志 电子…
· 成都推出电子杂志 旨在打造城…
· 电子样本的好处
· 论一种基于社交网站的正面典…
 
本类内容排行
北京电子杂志设计,北京电子杂志制作,北京电子期刊制作 什么是电子杂志
北京电子杂志设计,北京电子杂志制作,北京电子期刊制作 电子杂志制作公司
北京电子杂志设计,北京电子杂志制作,北京电子期刊制作 用JS实现网页里的Flash全屏功能…
北京电子杂志设计,北京电子杂志制作,北京电子期刊制作 电子杂志是什么?
北京电子杂志设计,北京电子杂志制作,北京电子期刊制作 服务器端使用代理实现flash跨域…
北京电子杂志设计,北京电子杂志制作,北京电子期刊制作 电子杂志官方网站
北京电子杂志设计,北京电子杂志制作,北京电子期刊制作 什么是电子画册?
北京电子杂志设计,北京电子杂志制作,北京电子期刊制作 如何创办企业内刊?
北京电子杂志设计,北京电子杂志制作,北京电子期刊制作 企业内刊是什么
北京电子杂志设计,北京电子杂志制作,北京电子期刊制作 FLASH键盘键码一览表(键盘按键…
 
 

关于我们  |  合作原则  |  友情链接  |  付款方式  |  人才招聘  |  联系我们
Copyright 2009-2016 版权所有 www.ZineNet.cn
关键字:电子杂志 电子海报 电子画册 企业商刊