Flash新手入门教程:AS2代码制作拖动和碰撞侦测效果

2016-01-29 12:30 16 1 收藏

Flash新手入门教程:AS2代码制作拖动和碰撞侦测效果,本例讲解了使用Flash AS代码实现拖动和碰撞侦测效果,本文是基础的拖放和碰撞检测的练习,对新手朋友掌握AS代码有一定的帮助,喜欢的朋友赶紧提交作业吧~~

【 tulaoshi.com - Flash 】

本文由中国 sanbos 原创,转载请保留此信息!

 

本系列Flash教程由中国Flash互助课堂专为Flash新手制作,更多教程和练习请点击这里,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临!

 

效果演示:用鼠标将小狗拖到小车的座位上,小狗就会将车开走

这是一个基础的拖放和碰撞检测的练习,现在我们就来做这个练习。首先新建一个影片剪辑元件,画一只小狗,如图:

 

你也可以就用我后面提供的素材,不过记住,导入后将小狗扣出来,即去掉背影。

然后再新建一个元件,画一个小车,同理如果用我提供的素材,需要将小车扣出,即去掉背影。

 

下面建第三个影片剪辑元件,画一个小狗开车的图。

 

现在回到主场影,按下图绘制舞台:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

新建图层,将小狗元件和小车元件从库中拖出,按下图摆放:

小狗元件在属性面板中命名为dog_mc,小车元件命名为car_mc.

新建一图层,在小车的座位处画一无笔触,仍一填充色的图形,形状跟小车座位差不多,实际就是画一图形将小车座位遮住,一会用于检测碰撞,就是说当小狗触碰到这个图形后,小狗就坐进车内,将车开走。画好后中,将图形转换为影片剪辑,在属性面板中将其命名为pz_mc,并将其透明度设为0

 

下面,再新建一图层,在第2帧插入关键帧,从库中将小狗开车的元件拖入,放在上一层中小车相同位置,差不多就行,不一定精确。然后在第80帧插入关键帧,将开车的图片拖到舞台右侧之外

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

 

在第2帧-第80帧之间建立补间动画。然后在第81帧插入关键帧,将开车图片拖到舞台左侧之外

 

在100帧插入关键帧,将开车图片拖到第2帧的位置

在81帧和100帧间建立补间动画

接下来,我们来写代码,新建一图层,取名为action,打开行为面板。

 
因为本动画要用户来操作才能动,所以我们要让动画停在第1帧,等候用户的操作。所以在第1行输入:
stop();


接下来,就是要让小狗能被拖动,当我们在小狗上面按下鼠标时,小狗将能被拖动。所以接下来的代码是:
dog_mc.onPress = function() { // 当在元件dog_mc上按下鼠标时
dog_mc.startDrag(); //元件dog_mc开始拖动
}
dog_mc.onRelease = function(){ //当在元件dog_mc上放开鼠标时
dog_mc.stopDrag(); //元件dog_mc停止拖动
hit = dog_mc.hitTest(pz_mc);//hitTest是碰撞检测语句,判断两个对象是否碰撞(交叉,重叠)。如果的碰撞则返回true.这一句就是检测小狗dog_mc与我们画在小车座位那里的图形pz_mc是否发生了碰撞,也就起到了判断小狗是否被拉到了座位的作用。
if (hit) {//如果发生了碰撞,即小狗被拖到了座位上。
gotoAndPlay(2);主时间轴从第2帧开始播放,即小狗将车开走。
}
}
附完整代码,要直接复制代码的话,请复制下面的代码:
stop();
dog_mc.onPress = function() {
dog_mc.startDrag();
}
dog_mc.onRelease = function(){
dog_mc.stopDrag();
hit = dog_mc.hitTest(pz_mc);
if (hit) {
gotoAndPlay(2);
}
}

对本文感兴趣的朋友可以到这里提交作业,会有老师给作业点评和加分:http://bbs.jcwcn.com/viewthread.php?tid=185135

来源:http://www.tulaoshi.com/n/20160129/1486357.html

延伸阅读
标签: flash教程
本文由 中国  sanbos  原创,转载请保留此信息! 本系列Flash教程由中国Flash互助课堂专为Flash新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临!  在学习中遇到问题请到 论坛Flash研讨版块 发贴交流! 效果演示: 1. 新建一个...
标签: flash教程
本文由 中国 zctmh0336(诚信为人) 原创,转载请保留此信息! 本系列Flash教程由中国Flash互助课堂专为Flash新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临! 效果演示: 1,建立FLASH文档,起名为“立体球”,保存。设置背景为深蓝色,其他属性默认。...
标签: flash教程
本文由 中国 清风掠影 原创,转载请保留此信息!  本系列Flash教程由中国Flash互助课堂专为Flash新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临! 继上一篇:Flash新手入门教程:初识Flash的页面、界面、工具栏,我们今天来介绍Flash文件的导出和导入: ...
标签: flash教程
本文由 中国 随意 原创,转载请保留此信息!   本系列Flash教程由中国Flash互助课堂专为Flash新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临!    写给FLASH初学者的水晶按钮制作教程及按钮的使用方法 本人学习Flash也才两个多月,还很菜的哈,这个教...
标签: flash教程
本文由 中国 sanbos 编译,转载请保留此信息! 本系列Flash教程由中国Flash互助课堂专为Flash新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临!    效果演示:(请用鼠标点击小球观看效果) 在这个Actionscript 3教程中,我将为你展示怎样创建...

经验教程

178

收藏

92
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部