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

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

 

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

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

 

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

 

现在回到主场影，按下图绘制舞台：

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

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

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

 

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

 

在第２帧－第８０帧之间建立补间动画。然后在第８１帧插入关键帧，将开车图片拖到舞台左侧之外

 

在１００帧插入关键帧，将开车图片拖到第２帧的位置

在８１帧和１００帧间建立补间动画

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

 
因为本动画要用户来操作才能动，所以我们要让动画停在第１帧，等候用户的操作。所以在第１行输入：
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);主时间轴从第２帧开始播放，即小狗将车开走。
}
}
附完整代码，要直接复制代码的话，请复制下面的代码：
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);
}
}

评论 (0) All

登陆 还没注册？