java 鼠标动眼睛动_鼠标效果系列教程：会动的眼睛

这次我们要做的效果也非常漂亮，老头的眼睛会跟着你的鼠标转！

ARAM NAME="_cx" VALUE="14552">

pluginspage="http://www.macromedia.com/go/getflashplayer"

type="application/x-shockwave-flash" width="550"

height="400">

先准备一张人或动物头像的图片，把它导入你的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只眼吧？仔细调整一下位置，让它们正好把头像上的眼睛部分挡住。必要的时候可以使用键盘上的方向键，以象素为单位精确的调整。

终于大功告成了！看看效果吧。眼睛一动，是不是感觉小人儿也活起来了？俗话说的好，“画龙点睛”嘛！

分享：