一则响应鼠标打击的趣味动作实例

鼠标|响应

  最近找到一个有趣的鼠标实例,试着实现了一下,发现它的实现思路对我们做游戏之类的东西是很有参考价值的,所以就把过程写了下来,希望对大家有用。

  下载本例源文件(rar压缩文件,278K)

  效果预览:(全屏观看)

试试用鼠标煽他几巴掌或揣他几脚

  一、实现思路

  我们先来看看实例的效果,鼠标在场景中的不同地方划过,场景中的小人都会有不同的反应。尤其有趣的是,当鼠标划过的速度不同的时候,反应的强弱也是不同的。这就跟游戏中的实现很相似了。

  总的来说,实现的思路大概是这样的:先制作好鼠标划过不同部位所响应的动作特效,再用几个Movie Clip来捕捉鼠标划过的位置跟速度,然后播放不同的动作特效,这就是我们所看到的效果。

  二、实现过程

  下面我们来看看具体的实现过程。

  1、按“Ctrl + N”,新建一个Flash文件,按“Ctrl + F8”,新建一个Movie Clip,命名为“All Motion”。

  2、进入此Movie Clip,用鼠标右键点击图层的名称,依次插入“label”、“Action”、“sound”、“idle”四个图层,在“label”层第一帧的属性面板上设置帧的label为“c_idle”,在第34帧上点击鼠标右键,插入一个关键帧,并设置此帧的label为“ML_w”,同理,依次在第47帧、第77帧、第89帧、第139帧、第154帧、第168帧、第220帧、第255帧、第267帧、第310帧、第358帧、第372帧、第430帧、第446帧上分别插入一个关键帧,并分别设置帧的label为“ML_s”、“MR_w”、“MR_s”、“TL_m”、“TL_w”、“TL_s”、“TR_m”、“TR_w”、“TR_s”、“B_m”、“BL_w”、“BL_s”、“BR_w”、“BR_s”。

  3、在“Action”层的第33帧上面点击鼠标右键,插入一个关键帧,在此帧的Action Script面板上面添加语句:gotoAndPlay(1); 同理,在此层的第46帧、第75帧、第85帧、第120帧、第151帧、第165帧、第205帧、第252帧、第266帧、第301帧、第357帧、第369帧、第420帧、第440帧、第464帧分别插入一个关键帧,并分别在帧的Action Script面板上面添加语句:gotoAndPlay(1);

  4、在“idle”图层的第34帧上面插入一个关键帧,在此图层第1帧的场景中用绘图工具画一个小人,如图1所示。这是在没有鼠标动作时候显示的。

图1
  5、在“layer1”图层的第34帧和第45帧上分别插入一个关键帧,在第34帧至第45帧之间制作出当鼠标以比较慢的速度从小人的左边手臂处划过的Movie Clip效果。以此类推,在第34帧至第45帧之间制作出当鼠标以比较慢的速度从小人的左边手臂处划过的Movie Clip效果。在第47帧至第74帧之间制作出当鼠标以比较快的速度从小人的左边手臂处划过的Movie Clip效果。在第77帧至第84帧之间制作出当鼠标以比较慢的速度从小人的右边手臂处划过的Movie Clip效果。在第89帧至第119帧之间制作出当鼠标以比较快的速度从小人的右边手臂处划过的Movie Clip效果。

  6、在第139帧至第150帧之间制作出当鼠标以中等的速度从小人的左边头部处划过的Movie Clip效果。在第154帧至第164帧之间制作出当鼠标以比较慢的速度从小人的左边头部处划过的Movie Clip效果。在第168帧至第204帧之间制作出当鼠标以比较快的速度从小人的左边头部处划过的Movie Clip效果。在第220帧至第251帧之间制作出当鼠标以中等的速度从小人的右边头部处划过的Movie Clip效果。在第255帧至第265帧之间制作出当鼠标以比较慢的速度从小人的右边头部处划过的Movie Clip效果。在第267帧至第300帧之间制作出当鼠标以比较快的速度从小人的右边头部处划过的Movie Clip效果。

  7、在第310帧至第356帧之间制作出当鼠标以中等的速度从小人的腿部划过的Movie Clip效果。在第358帧至第368帧之间制作出当鼠标以比较慢的速度从小人的左边腿部划过的Movie Clip效果。在第372帧至第419帧之间制作出当鼠标以比较快的速度从小人的左边腿部划过的Movie Clip效果。在第430帧至第439帧之间制作出当鼠标以比较慢的速度从小人的右边腿部划过的Movie Clip效果。在第446帧至第463帧之间制作出当鼠标以比较快的速度从小人的右边腿部划过的Movie Clip效果。

  8、至此,所需要的Movie Clip就制作完成。此时帧内的层结构应该如图2所示。注意,这是最花时间的一个步骤,也是对最终效果影响最大的一步,值得用心去做。如果想要更好的效果,可以在适当的地方插入声音效果。

图2
  9、按“Ctrl + F8”新建一个Movie Clip,用绘图工具在这个Clip用画一个半圆。

  10、回到影片的主场景中,在用鼠标右键点击图层名,插入4个图层,分别命名为“Action”,“Hit_Area”,“Motion_All”,“label”。

  11、在“Motion_All”层的第2帧插入关键帧,在第7帧插入帧,将第1至8步所制作的Movie Clip从图库拖到场景中,在属性面板上设置实例名为“Motion_All”。

  12、在“Hit_Area”层的第2帧插入关键帧,在第7帧插入帧,将第9步所制作的Movie Clip从图库拖六次到场景中,拼成一个图形如图3所示,并分别在属性面板上设置实例名为“Area_Head_Left”、“Area_Arm_Left”、“Area_Leg_Left”、“Area_Head_Right”、“Area_Arm_Right”、“Area_Leg_Right”。

图3

  13、在“Action”层的第2帧插入关键帧,在第7帧插入帧,此时主场景中的层应该如图4所示。点击“Action”层的第2帧,在此帧的Action Script面板上面添加语句下所示。

图4

  注释1:定义一些变量,分别用来判断鼠标是否以比较慢、中等、比较快的速度划过对象。
  注释2:隐藏用来捕捉鼠标动作的对象。
  注释3:初始化鼠标的参数。
  注释4:这个函数是用来捕捉鼠标划过的速度和划过的位置。
  注释5:这个函数是用来判断鼠标划过地速度,分别为强、中、弱。
  注释6:这个函数是判断鼠标划过的位置,分别对应场景中的对象的头、手、脚。
  注释7:在这个函数中,播放鼠标动作所触发的相应场景。
  注释8:这是整个场景的启动函数,不断的循环,不断地对鼠标动作产生响应。

三、小结

  总的来说,就是让场景中的对象响应鼠标动作,相应的鼠标动作触发播放相应的Movie Clip。其中Movie Clip的制作好坏,对整体效果的影响是很大的,值得用心去做好Movie Clip。

  下载本例源文件(rar压缩文件,278K)

时间: 2024-10-02 14:40:48

一则响应鼠标打击的趣味动作实例的相关文章

Flash中制作响应鼠标打击动作讲解

  一.实现思路 我们先来看看实例的效果,鼠标在场景中的不同地方划过,场景中的小人都会有不同的反应.尤其有趣的是,当鼠标划过的速度不同的时候,反应的强弱也是不同的.这就跟游戏中的实现很相似了. 总的来说,实现的思路大概是这样的:先制作好鼠标划过不同部位所响应的动作特效,再用几个Movie Clip来捕捉鼠标划过的位置跟速度,然后播放不同的动作特效,这就是我们所看到的效果. 二.实现过程 下面我们来看看具体的实现过程. 1.按"Ctrl + N",新建一个Flash文件,按"C

JS实现网页游戏中滑块响应鼠标点击移动效果_javascript技巧

本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果.分享给大家供大家参考,具体如下: 这是网页游戏中的一个有趣效果,可以完成以下几个动作:滚动.scroll 8个方向.鼠标坐标获娶对象上下左右位置获取,大家可以自己添加.MoveReady和ScrollReady两个注释掉了 取消注释后防止鼠标连续点击效果叠加. 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-game-click-move-demo/ 具体代码如下: <!DOCTYPE html

JS实现超精简响应鼠标显示二级菜单代码_javascript技巧

本文实例讲述了JS实现超精简响应鼠标显示二级菜单代码.分享给大家供大家参考.具体如下: 这是一款精简版的二级导航菜单,响应鼠标的动作,鼠标放上即显示出菜单,常见的一种菜单样式.喜欢的朋友拿去修改一下,再美化一番,就够用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/ 具体代码如下: <html> <head> <title>二级菜单,响应鼠标</

Jquery实现鼠标移动放大图片功能实例

 这篇文章主要介绍了Jquery实现鼠标移动放大图片功能,实例分析了jQuery操作鼠标与图片的技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了Jquery实现鼠标移动放大图片功能的方法.分享给大家供大家参考.具体分析如下: 做毕业设计,老师看完小样后,嫌弃我购物车里商品图片太大,不美观,让美化个效果.上网查查代码,修改了一个简单版的. 使用的是jquery, 未使用JavaScript获取鼠标状态,这主要和JavaScript需在标签本身内含写出所调用到的动作,太麻烦了,一

jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】_jquery

本文实例讲述了jQuery实现响应鼠标事件的图片透明效果.分享给大家供大家参考,具体如下: 实现的思想: 1.当鼠标放在图片上面的时候触发mouseover mouseenter两个事件(图片变得透明) 2.当鼠标离开图片的时候触发mouseleave mouseout两个事件(图片变为不透明) 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

jQuery实现响应鼠标滚动的动感菜单效果_jquery

本文实例讲述了jQuery实现响应鼠标滚动的动感菜单效果.分享给大家供大家参考.具体如下: 这是响应鼠标滚动的一款jQuery动感菜单,横向竖向这个大家怎么改吧,使用了jquery插件,不要忘记载入哦.看效果的时候如果加载有错误,请刷新一下页面就行了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-dg-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-

jQuery实现响应鼠标背景变化的动态菜单效果代码_jquery

本文实例讲述了jQuery实现响应鼠标背景变化的动态菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery响应鼠标背景变化的动态菜单,菜单的背景在鼠标放上后有所变化,这款菜单的实现主要是使用了图片,修改菜单的时候要修改图片,有些麻烦,不过效果不错,引入的jquery插件是1.7版本,高版本jQuery未测试,应该也可以啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-co

JS实现响应鼠标点击动画渐变弹出层效果代码_javascript技巧

本文实例讲述了JS实现响应鼠标点击动画渐变弹出层效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

Java Applet程序响应鼠标键盘的例子

与用户的交互是Java的主要作用,也正是Java吸引人的原因,用户可以通过鼠标与Java Applet程序对话.我们先来看响应鼠标的例子: //Mouse.java import java.awt.*; import java.applet.*; public class Mouse extends Applet { String text=""; public void paint(Graphics g) { g.drawString(text,20,20); } public bo