交互控制

http://www.flashempire.com/school/author.php?id=边城浪子

 

FLASH交互控制实训案例

王承辉,栾文娟

(烟台职业学院 计算机与信息工程系 山东 烟台 264000)

摘要:采用有针对性分阶段向学生提供教学示例的方法，训练学生的示例分析、程序分析及可运行程序制作等能力，是完成Flash交互控制实训教学的较为可行的方法，可收到良好的教学效果。

关键字:交互;程序原理;MovieClip;帧

中图分类号:TP391.41           文献标识码:A   文章编号:1673-5382(2007)03-0088-05

Flash提供了强大的交互功能，使用户可以参与到动画中，自由控制动画。本文设计了一个实训项目，介绍如何使用交互控制物体的运动方式，使学生跟随例子学习使用Flash交互功能，达到制作可运行程序的目的。

Flash交互控制实训案例内容:

①实训课程：动画设计

②使用软件：Flash MX 2004

③实训目的:掌握Flash交互，学习控制鼠标。

④实训时间：两天12学时，四个阶段，第一、二、三阶段分别2学时，第四阶段6学时。

⑤实训安排：第一、二、三阶段两节课，第一节听课学习，第二节上机完成程序；第四阶段一天时间调试完成导弹跟踪程序。

⑥实训要求：通过学习能够上机独立完成控制Flash交互的可运行程序。

具体教学内容及过程如下：

 

第一阶段：最直接的跟踪

 

1.具体形象：当用户移动鼠标，指定的物体就会跟随移动。

2.程序原理：

如果(鼠标x坐标 <> 物体x坐标){

    调整物体x坐标，趋近鼠标x坐标}

如果(鼠标y坐标 <> 物体y坐标){

    调整鼠标y坐标，趋近物体y坐标}

3.程序分析　

首先需要两个不同的 MovieClip 放置在舞台上，实例名是 player和enemy。

通过鼠标来实现物体的移动的代码是：

player._x = _xmouse-10;

player._y = _ymouse-10;

updateAfterEvent();

数学解析部分，通过上面的图片可知不管鼠标和物体处于什么位置，只要不重合，两个角色之间总是具有一定距离的，我们用dx和dy来代表 x 方向和y方向的差值。根据dx和dy，基于物体靠近鼠标的概念，就可以得出物体应该前进的方向。物体应该具有一定的速度，根据这个速度向鼠标靠近。可以先定义一个变量来代表物体的速度：enemySpeed。根据分析，得出下面的计算公式：

   dx= player._x-enemy._x;

   dy= player._y-enemy._y;

   if (Math.abs(dx)>=enemySpeed) {

enemy._x+=((dx>=0)?enemySpeed:-enemySpeed);

   }

   if (Math.abs(dy)>=enemySpeed) {

enemy._y += ((dy>=0) ? enemySpeed : -enemySpeed);

   }

其中用一个 Math.abs(dx)^[1]>=enemySpeed 来限制物体运动，避免抖动现象。

enemy._x += ((dx>=0) ? enemySpeed :-enemySpeed)

用来判断物体的运动方向，根据 dx和 dy 的正负情况，来决定向哪个方向运动。

4、具体代码

完整的第一帧源代码：

var enemySpeed:Number = 2;

var dx, dy:Number;

tracker = function () {

   player._x = _xmouse-10;

   player._y = _ymouse-10;

//鼠标控制物体移动

   dx = player._x-enemy._x;

   dy = player._y-enemy._y;

   if (Math.abs(dx)>=enemySpeed) {

   enemy._x += ((dx>=0) ? enemySpeed : -enemySpeed);

   }

   if (Math.abs(dy)>=enemySpeed) {

enemy._y += ((dy>=0) ? enemySpeed : -enemySpeed);

   }//鼠标及物体移动

   updateAfterEvent();

};

setInterval(tracker, 10);

　　程序先定义变量，确定物体的运动速度，这是可更改的，函数 tracker 主要用来处理鼠标移动及物体移动。 updateAfterEvent 保证流畅度。使用 setInterval^[2]，每隔 10 毫秒触发一次 tracker 函数，保证程序正常运行。

 

第二阶段：指定范围内的跟踪

 

第一阶段完成最基本的物体跟踪，在此基础上限制一下物体的活动范围。

1.具体形象：现在物体周围有一个范围，只有当鼠标进入这个范围时，物体才会来追赶它。

2.程序原理

如果(鼠标进入物体范围)

{ 如果(鼠标x坐标 <> 物体x坐标){

      调整物体x坐标，趋近鼠标x坐标}

 如果(鼠标y坐标 <> 物体y坐标){

      调整物体y坐标，趋近鼠标y坐标}

}

3.程序分析

在 enemy 里面放置一个圆形的范围，给一个实例名叫做 range，enemy.range 就是物体的范围。通过判断鼠标是否和物体的范围碰撞来实现。

4.具体代码

完整的第一帧源代码：

var enemySpeed:Number = 1;

var dx, dy:Number;

tracker = function () {

   player._x = _xmouse-10;

   player._y = _ymouse-10;

   dx = player._x-enemy._x;

   dy = player._y-enemy._y;

   if(enemy.range.hitTest(player._x, player._y, true)) { //碰撞范围判断

   if(Math.abs(dx)>=enemySpeed) {

enemy._x += ((dx>=0) ? enemySpeed : -enemySpeed);

       }

   if(Math.abs(dy)>=enemySpeed) {

enemy._y += ((dy>=0) ? enemySpeed : -enemySpeed);

       }

}

updateAfterEvent();

 }//鼠标及物体移动

setInterval(tracker, 10);

其中if(enemy.range.hitTest(player._x, player._y, true))是用来判断鼠标是否和物体的范围碰撞的语句。

 

第三阶段、半随机移动的物体

 

1.具体形象:物体按照一定的规律从上面到下面移动。主要的规律是自上而下，但是移动的范围是随机的。这种方法在早期的游戏里经常使用，包括一些大型的游戏。其实这是一种非常简单的运动方式。

2.程序原理

物体每次向一个方向以随机的速度走八步，然后再改变方向，再走八步。物体走到画面底部以后，重新回到原来的位置，重新再走。

3.程序分析

创建一个对象 enemy_obj 来保存物体的运动状态，把这个对象的属性直接赋予给 enemy 这个 MovieClip。以下是 enemy_obj 的一些属性：

speedX : x 方向速度

speedY : y 方向速度

dirX : 方向， -1 or +1

cur : 当前步数

写一个初始化函数 init() 来初始化上面的数据：

init = function () {

enemy_obj.speedX = enemy_obj.speedY=0;

   enemy_obj.dirX = -1;

   enemy_obj.cur = 0;

   enemy._x = 150;

   enemy._y = 50;

};

初始化完成以后，就是物体运动的函数。

在这里初始定义的方向是（-1），也就是向x的负方向。然后开始不断的增加步数，enemy_obj.cur = (++enemy_obj.cur)%8可以让步数维持在8步以内。一旦达到第一步，就开始改变方向，通过 enemy_obj.dirX = (enemy_obj.dirX == 1) ? -1 :1来实现。接下来就开始随机生成速度，因为规定物体向下走，所以y方向是固定的；x方向随 enemy_obj 的方向来改变，所以在随机生成x的速度以后，要再乘以 enemy_obj.dirX，。　　

4.具体代码

完整的第一帧源代码：

var enemy_obj:Object = new Object();

init = function () {

enemy_obj.speedX=enemy_obj.speedY=0;

   enemy_obj.dirX = -1;

   enemy_obj.cur = 0;

   enemy._x = 150;

   enemy._y = 50;

};//物体运动初始化

tracker = function () {

   enemy_obj.cur = (++enemy_obj.cur)%8;

   if (enemy_obj.cur == 1) {

   enemy_obj.dirX = (enemy_obj.dirX == 1) ? -1 : 1;

enemy_obj.speedX=(15+random(5))*enemy_obj.dirX;

   enemy_obj.speedY = 1+random(5);

   }

   enemy._x += enemy_obj.speedX;

   enemy._y += enemy_obj.speedY;

   if (enemy._y>380) {init();

   }

   updateAfterEvent();

};//鼠标及物体移动

init();

setInterval(tracker, 25);

 

第四阶段、实际应用;跟踪导弹

 

通过上面学习的积累，就可以完成一些实际的应用，以下一个小游戏，跟踪导弹。

1.具体形象；在动画屏幕上按下鼠标，导弹就会跟踪玩家，直到击中玩家

2.程序分析

⑴导弹的方向

敌人的导弹是要朝向玩家的，要解决如何让敌人有方向感。设定一个变量，布尔类型的 clickable。初始化为true。

var clickable:Boolean;

init = function () {

   enemy._x = 40;

   enemy._y = 350;

   enemy._rotation = 0;

   clickable = true;

};

当鼠标按下的时候，判断 clickable 是否为真，如果为真执行新语句，并且将 clickable 设为 false。这样，如果鼠标按下一次以后，再按就不起作用了。

onMouseDown^[3] = function () {

   if (clickable) {

       setInterval(run, 10);

       clickable = false;

   }

};

⑵改变导弹的角度

 

敌人到玩家之间一般情况下是会有一个夹角的。使用Flash提供的Math.atan2(y,x) 来求得上图中所表示的 angle!。得到这个值为 Math.atan2(dy, dx)*180/Math.PI。得到 angle!后，发现一个问题，导弹在 enemy._rotation=0的时候，已经处在上图 90 度的位置上，在 enemy._rotation=90 的时候，已经处在上图-180(也是0) 度的位置上，在 enemy._rotation =180的时候，已经处在上图 -90 度的位置上。所以要做一下处理，给它减去 270 度，而为了让这个角度很好的保持在 0 到 360 度之间，我们再给它加上720度,然后针对 360 度取模，最后的公式是：

(Math.atan2(dy,dx)*180/Math.PI+450)%360

3.具体代码

完整的第一帧源代码：

var clickable:Boolean;

init = function () {

   enemy._x = 40;

   enemy._y = 350;

   enemy._rotation = 0;

   clickable = true;

};//方向变量初始化

onMouseMove = function () {

   player._x = _xmouse-10;

   player._y = _ymouse-10;

   updateAfterEvent();

};//鼠标控制物体移动

onMouseDown = function () {

   if (clickable) {

       setInterval(run, 10);

       clickable = false;

   }

};//射击判断

getAngle = function ():Number {

   var dx:Number = player._x-enemy._x;

   var dy:Number = player._y-enemy._y;

   return ((Math.atan2(dy,dx)*180/Math.PI+450)%360);

}; //导弹处理

 

run = function () {

   var angle:Number = getAngle();

   enemy._rotation = angle;

};

// 运行程序

init();

 

本文的案例依次介绍了最直接的跟踪、指定范围内的跟踪、半随机移动的物体等几个使用了Flash交互功能的典型示例，通过具体形象、程序原理、程序分析、程序代码等内容进行了多方面清楚的讲解，最后是提供一个跟踪导弹的实际应用，学生可通过此次实训了解掌握Flash强大的交互功能。

参考文献：

[1]林德新.Flash MX游戏制作[M].北京:中国铁道出版社,2005:306.

[2]郑伯鸿,张智龙.Flash MX ActionScript语法参考辞典[M].北京:中国铁道出版社,2005:110.

[3]杨戈.Flash MX ActionScript与实例高手教程[M].西安.西安电子科技大学出版社,2004:117.

FLASH Interaction Control Case

WANG Cheng-hui, LUAN Wen-juan

 (Computer & IT Engineering Faculty of Yantai Vocational College, Yantai 264000, China)

 

Abstract: Providing students with specific teaching models by steps and training students' capabilities on case analysis, program analysis and making of operational procedure are a better feasible method to realize the practical teaching of the FLASH interaction control with good teaching effects.

Key words: interaction; program principle; MovieClip; frame

(责任编辑 侯中岩)

收稿日期:2007-04-09

作者简介:王承辉(1978- ),女,山东龙口人,烟台职业学院计算机与信息工程系教师.

 

http://www.ytet.edu.cn/xzjigou/xb/web-zy/ml/703/073flash71.htm