| 网站首页 | 建站学院 | 资源下载 | 建站教程 | 图片素材 | 网贝社区 | 
您现在的位置: 网贝建站 >> 建站学院 >> 图像动画 >> Flash >> 实例教学 >> 正文 用户登录 新用户注册
专 题 栏 目
最 新 热 门
最 新 推 荐
相 关 文 章
发散的彩球教程
雪夜的作法讲解
很逼真的鼠标跟随的鱼的
flash组件制作情书生成器
犀牛做棒球的教程
图片转场效果全教程
黑白电视雪花效果
制作你的3D模型教程
火焰制作
利用Date对象制作多功能
[组图]鼠标效果系列教程—会动的眼睛         ★★★
鼠标效果系列教程—会动的眼睛
作者:橙贝贝 文章来源:闪吧 点击数: 更新时间:2005-5-15 1:23:27
——转自5D
老头的眼睛会跟着你的鼠标转!   

先准备一张人或动物头像的图片,把它导入你的Flash文件里。当然,你要有耐心,自己在Flash里画也行。
先制作眼球。新建一个影片剪辑,在编辑区选择椭圆工具,按住Shift画一个正圆,用从白到灰的渐变色填充。如图1   

图1

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

图2

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

图3

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

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


图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只眼吧?仔细调整一下位置,让它们正好把头像上的眼睛部分挡住。必要的时候可以使用键盘上的方向键,以象素为单位精确的调整。
终于大功告成了!看看效果吧。眼睛一动,是不是感觉小人儿也活起来了?俗话说的好,“画龙点睛”嘛!

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)