邮件订阅
5ucms培训,鼠标效果系列教程:会动的眼睛
作者: 来源: 日期:2017/4/3 18:02:48 浏览量:23(滞后) 人气:LOADING...(实时) 【

5ucms培训,鼠标效果系列教程:会动的眼睛
这次我们要做的效果也非常漂亮,老头的眼睛会跟着你的鼠标转!先准备一张人或动物头像的图片,把它导入你的Flash文件里。当然,你要有耐心,自己在Flash里画也行。先制作眼球。新建一个影片剪辑,在编辑区选择椭圆工具,按住Shift画一个正圆,用从白到灰的渐变色填充。如图1

图1制作瞳孔。新建影片剪辑,也很简单,就是分别用蓝灰、黑色和白色绘制三个大小不等的正圆。如图2

图2组合眼睛。再新建个MC。把第一层命名为眼睛层。把刚才做好的眼球拖入第1帧。打开信息面板,点选中心对齐(看见那9个小方块了吗?点中间的那个。另一个选项就是左上角对齐),在X、Y栏里都输入0。如图3。这样可以精确的定位目标。

图3再把做好的瞳孔拖进这一帧。用同样方法把它定位到中心。如图4。

图4并在属性面板里,把它命名为“tk”。如图5。

图5下面进行最关键的动作脚本的编写。点选眼睛层第1帧,打开动作面板写入如下语句:X" = _xmouse; //获取鼠标位置
Y = ymouse; //注意这里的坐标系统是以眼睛的中心为原点的
L = Math.sqrt(X*X+Y*Y); //计算从原点到鼠标的直线距离
if (L<45) { //如果鼠标指在眼球上
setProperty("tk", _x, X);
setProperty("tk", _y, Y);
} else { //如果鼠标在眼睛外
setProperty("tk", _x, 45/L*X);
setProperty("tk", _y, 45/L*Y);
}简单分析一下编程的思路。首先获取鼠标位置。如果忘了坐标系统的理论,可以再看看本教程第2课。用数学对象中的平方根函数Math.sqrt()计算从眼球中心到鼠标的距离。根据这个值分为两种情况进行处理。一、 如果L小于眼球的半径,说明鼠标指在眼睛上了,这时控制瞳孔直接跟随着鼠标就行了。二、 当鼠标在眼睛外时,我们画个图分析一下算法。如图6

图6假设鼠标在A点,我们想让瞳孔跟随到图示的位置。很容易就可以看出,tk._y/_ymouse=45/L,于是得到tk._y=45/L*_ymouse。同理,tk._x=45/L*_xmouse。到这里大家就看出来了吧,最后的效果中其实眼球并没动,动的只是瞳孔。在眼睛层的第2帧按F6插入关键帧做成一个循环,让眼睛真正动起来。只是这样还不行,不能让瞳孔跑到眼睛外边去呀。在眼睛层上面增加一层,命名为遮罩层,在第1帧中也拖入一个眼球,把它对齐到中心。然后在这个层上点右键,选“遮罩层”,好,现在瞳孔就不会瞪出眼睛去了。到了最后的收尾阶段了,胜利就在眼前!回到主场景,把第一层命名为“脑袋”。把头像图片拖进来,调整好大小和位置。新建一个眼睛层,把我们刚做好的眼睛拖进来2个,你的头像上只有2只眼吧?仔细调整一下位置,让它们正好把头像上的眼睛部分挡住。必要的时候可以使用键盘上的方向键,以象素为单位精确的调整。终于大功告成了!看看效果吧。眼睛一动,是不是感觉小人儿也活起来了?俗话说的好,“画龙点睛”嘛!源文件下载
"

无忧CMS,5ucms.org建站仿站首选!

本站推荐: 5ucms模板下载 5ucms插件下载 仿站联系Q3876307       [复制给好友] [打印] [关闭] [返回] [顶部]
上一篇:5ucms模版,FlashMX经典实例-文字类:倒影字
下一篇:5ucms培训,鼠标效果系列教程:游动的鱼
本站声明:本网站所载文章等内容,目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权及其它问题,请在30日内与本网联系(Email:3876307#qq.com),我们将在第一时间删除内容。若原创内容转载请注明出处。
5ucms培训,鼠标效果系列教程:会动的眼睛的关键词:
评论信息
相关分类
本周热门
本月热门
关于我们 - 版权/免责 申明 - 建站服务 - 网站地图 - 稿件投递 - 联系我们 - 5ucms
Copyright © 2008-2015 www.5ucms.org