文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置:首页网页设计Flash → 鼠标效果系列教程:会动的眼睛

鼠标效果系列教程:会动的眼睛

时间:2004/11/7 2:26:00来源:本站整理作者:蓝点我要评论(0)


            
             
              
             
            

               
               

            



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



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只眼吧?仔细调整一下位置,让它们正好把头像上的眼睛部分挡住。必要的时候可以使用键盘上的方向键,以象素为单位精确的调整。


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


源文件下载


相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 Flash CS4基础入门 如何在Flash中打开一个定制的浏览器新窗口?学习ActionScript 3.0的6个好处几个小技巧精简Flash文件体积在Flash动画中添加“加为收藏”和“设为首页

人气排行 Flash游戏制作--小熊拼图用Flash实现几种镜头效果Flash制作动画知识:遮罩Flash如何做鼠标指针样式Flash制作环形文字Flash制作声情并茂的电子相册实例讲解flashMTV制作全过程(3)鼠标效果系列教程:游动的鱼