您现在的位置: 圆点视线 >> 教程 >> flash教程 >> 实例教学 >> 文章正文
[组图]鼠标效果系列教程—会动的眼睛         
鼠标效果系列教程—会动的眼睛
作者:橙贝贝  文章来源:5D  点击数:  更新时间:2005-8-7 21:36:07 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:

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

 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:apoints    责任编辑:apoints  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章:
  • 最新文章
    相关文章
    使用html为flash页面添加音乐
    freehand也能做flash动画
    Flash格斗动画[鬼斗]的镜头处理教程
    在flash里获取PHP变量
    Flash+ASP实现电子互动地图在线标注功能
    让Flash调用符合web标准
    Flash实例:鼠标点选不同层次的层叠图片
    Flash AS代码简单实现动态文本包边效果
    用Flash 8 AS代码写摄像头拍照功能
    Flash遮罩轻松制作鼠标弹性跟随放大镜
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门