当前位置: 首页 > 图文教程 > Flash动画 > ActionScript > Flash AS3实例教程:物体运动速度向量(velocity)

ActionScript
FLASH AS3与网页JS参数值传递的问题
Flash AS3的parameters对象处理网页参数
Flash教程 认识Flash ActionScript的环境
Flash ActionScript编程基础
Flash AS3代码实现鼠标跟随喷枪涂鸦效果
falsh 跨域调用配置
Flash AS3.0 实例教程 喷泉动画特效
AS3 Loader与URLLoader的比较
ColorTransform类调整显示对象的颜色值
Flash AS3 快速制作烟雾动画
Flash AS3 制作文字飞出动画
ActionScript 学习小心得
ActionScript3.0读取网页FlashVars中的参数的问题
通过实例学习AS3.0:案例三
通过实例学习Flash AS3.0:案例四
通过实例学习Flash AS3.0:案例五
通过实例学习Flash AS3.0:案例六
Flash教程:认识Flash ActionScript的环境
Flash as入门(1):认识AS面板
Flash as入门(3):AS基本语法

ActionScript 中的 Flash AS3实例教程:物体运动速度向量(velocity)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-27   浏览: 246 ::
收藏到网摘: n/a

 本例为Flash AS3代码基础实例教程,主要讲解工具的运用、颜色的运用和补间形状的制作,代码部分未作讲解,希望能给朋友们带来帮助~~

效果演示:

物体运动的最基本属性就是速度。很多人把速度向量(velocity)和速度(speed)等同,这是不对的,因为速度仅仅是速度向量的一部分,速度向量的概念还包括一个非常重要的因素:方向。速度向量的简单定义是:某个方向上的速度。

向量由长度和方向组成。在速度向量中,长度就是速度。向量用带有箭头的线段表示,箭头的长度就是向量的长度,箭头所指的方向就是向量的方向。

需要注意的是,长度总是正数,如果一个长度为负数的向量只表示该向量的反方向,反速度向量为反方向的向量。

注意:向量没有起点,向量不能说明哪里是起点哪里是终点,它仅仅表示出了物体移动的速度与方向。因此,如果两个向量的方向及长度都相同,即使它们位于不同位置,那么它们仍是两个相等的向量。

单轴速度向量

首先,把速度(向量)只放在一个轴上:x 轴(水平轴)。让物体从屏幕的左侧到右侧,移动速度就是物体每一帧移动的像素值。因此,如果说速度向量在 x 轴上为5,就意味着物体在每一帧都会向右移动5个像素。同样,如果速度向量在 x 轴上为 -5,那么物体每一帧就会向左移动5个像素。

我们刚刚提到了向量长度等于负值,科学地讲,速度向量实际上应该为5,而方向应为180度。同理, y 轴正半轴上的速度向量应为90度(垂直向下),而负 y 轴负半轴上的速度向量应为270或90度(垂直向上)。

事实上,当计算 x,y 速度向量的分量时,通常可以记作正数或负数,比如“ x 速度向量为 -5”。在 x 轴上把减号看成“向左”的指示符,在 y 轴上则是“向上”的指示符。用 vx 表示 x 轴的速度向量,用 vy 表示 y 轴的速度向量。 vx 为正数表示向右移动,为负数表示向左移动, vy 为正数表示向下, vy 为负数表示向上。

下面我们来看一个速度向量的示例。

1、新建FLA文档

2、新建影片剪辑元件,选择椭圆工具,颜色任选,放射状填充,画50*50的圆。

3、返回到场景1,把图层1的名称改为小球,按Ctrl+L组合键,打开库面板,把小球拖到舞台中,在属性面板中输入实例名:ball。

4、添加图层2,改名为as,选中第1帧,打开动作面板,输入代码:

var vx:Number = 5;
addEventListener(Event.ENTER_FRAME,onEnterFrame);
function onEnterFrame(event:Event):void {
        ball.x += vx;
}

在这个例子中,首先设置一个 x 轴速度向量(vx)等于5。记住是指每一帧5像素,所以,在每一帧中, vx 都会被加到 ball 的 x 属性中。并为 enterFrame 设置事件处理函数。每走一帧,小球都会在前一帧的位置基础上向右移动5个像素。

双轴速度向量

使用两个轴对物体进行移动也非常简单,只需要定义 vx 和 vy,并在每一帧将 vx 加到 x 属性上, vy 加到 y 属性上。下面一个示例:

1--4 步同上,输入代码:

var vx:Number = 5;
var vy:Number = 5;
addEventListener(Event.ENTER_FRAME,onEnterFrame);
function onEnterFrame(event:Event):void {
        ball.x += vx;
        ball.y += vy;
}

角速度

假如想让物体以每帧3像素的速度向45度的位置移动,这里要用到三角学。
已知角度为45度,斜边长为3像素,就可以使用 Math.cos 和 Math.sin 求出 vx 和 vy 的长度。
角的邻边长度为 vx,因为角的余弦值等于邻边/斜边。也可以说,邻边等于角的余弦值乘以斜边。同样,对边长为 vy 的边,因为角的正弦值等于对边/斜边,或是对边等于正弦乘以斜边。

实际使用的代码:
vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;

示例代码:

var angle:Number = 45;
var speed:Number = 3;
addEventListener(Event.ENTER_FRAME,onEnterFrame);
function onEnterFrame(event:Event):void {
        var radians:Number=angle * Math.PI / 180;
        var vx:Number=Math.cos(angle) * speed;
        var vy:Number=Math.sin(angle) * speed;
        ball.x += vx;
        ball.y += vy;
}

与前面 vx,vy 主要不同的地方是变成了 angle 和 speed,计算出的速度向量作为局部变量被使用。当然,由于是一个简单的示例,角度(angle)和速度(speed)都不变,那么完全可以只计算一次,然后保存在类中作为变量。而对于更高级的运动来说,角度和速度应是不断变化的,所以 vx 和 vy 的值也是变化的。只需要改变角度(angle)与速度(speed),就可以改变物体运动的速度及角度。

下面制作鼠标跟随

1、新建FLA文档

2、新建影片剪辑元件,绘制一个箭头。

3、返回场景1,选中第1帧,打开动作面板输入代码:

var speed:Number = 5;
addEventListener(Event.ENTER_FRAME,onEnterFrame);
function onEnterFrame(event:Event):void {
        var dx:Number = mouseX - arrow.x;
        var dy:Number = mouseY - arrow.y;
        var angle:Number = Math.atan2(dy, dx);
        arrow.rotation = angle * 180 / Math.PI;
        var vx:Number = Math.cos(angle) * speed;
        var vy:Number = Math.sin(angle) * speed;
        arrow.x += vx;
        arrow.y += vy;
}

先计算出箭头与鼠标的 x 距离和 y 距离,并使用 Math.atan2 计算出它们的夹角。然后使用这个角度使箭头旋转,再使用 Math.cos 和 Math.sin 与速度相乘计算出 x,y 速度向量,最后将它们加到箭头的坐标上。

下面是文档类的两个as文件,copy到同一目录下,创建一个FLA文件,文档类:输入FollowMouse 就可运行。

Arrow类(绘制箭头)
package {
        import flash.display.Sprite;
        public class Arrow extends Sprite {
                public function Arrow() {
                        init();
                }
                public function init():void {
                        graphics.lineStyle(1,0,1);
                        graphics.beginFill(0xff0000);//填充
                        graphics.moveTo(-50,-25);
                        graphics.lineTo(0,-25);
                        graphics.lineTo(0,-50);
                        graphics.lineTo(50,0);
                        graphics.lineTo(0,50);
                        graphics.lineTo(0,25);
                        graphics.lineTo(-50,25);
                        graphics.lineTo(-50,-25);
                        graphics.endFill();
                }
        }
}

FollowMouse类(鼠标跟随)
package {
        import flash.display.Sprite;
        import flash.events.Event;
        public class FollowMouse extends Sprite {
                private var arrow:Arrow;
                private var speed:Number = 5;
                public function FollowMouse() {
                        init();
                }
                private function init():void {
                        arrow = new Arrow();
                        addChild(arrow);
                        addEventListener(Event.ENTER_FRAME, onEnterFrame);
                }
                private function onEnterFrame(event:Event):void {
                        var dx:Number = mouseX - arrow.x;
                        var dy:Number = mouseY - arrow.y;
                        var angle:Number = Math.atan2(dy, dx);
                        arrow.rotation = angle * 180 / Math.PI;
                        var vx:Number = Math.cos(angle) * speed;
                        var vy:Number = Math.sin(angle) * speed;
                        arrow.x += vx;
                        arrow.y += vy;
                }
        }
}