脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 媒体动画 > Flash教程 > ActionScript教程 >

Flash AS3代码基础教程：物理基础之速度向量

  发布时间：2014-07-19 10:16:26   作者：佚名   我要评论
本例为Flash AS3代码基础实例教程，主要讲解工具的运用、颜色的运用和补间形状的制作，代码部分未作讲解，希望能给朋友们带来帮助

本例为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;
}
}
}

以上就是Flash AS3代码基础教程介绍，希望对大家有所帮助！

相关文章

  • flash cs6鼠标跟随效果实现代码分享

    flash cs6想要实现鼠标跟随效果？该怎么制作呢？今天我们就来看看使用as2.0实现鼠标跟随效果的教程，需要的朋友可以参考下
    2019-05-19

  • Flash cs6怎么使用代码输入中英文文本?

    Flash cs6怎么使用代码输入中英文文本？Flash cs6中可以使用文字工具直接输入文本，也可以使用代码来输入文本，该怎么使用代码输入文本呢？请看下文详细的教程，需要的朋友
    2018-03-11

  • flash as3.0怎么定义抽象类和抽象?

    flash as3.0抽象类怎么定义？ as3.0中有很多抽象类，该怎么定义抽象类和抽象方法呢？下面我们就来看看简单的例子，需要的朋友可以参考下http://www.jb51.net/softs/408402.
    2018-02-28

  • flash cs6中怎么使用ActionScript3.0?

    flash cs6中怎么使用ActionScript3.0？flash cs6中想要使用ActionScript3.0功能，该怎么使用呢？下面我们就来看看详细的教程，需要的朋友可以参考下
    2018-01-25

  • Flash中怎么实现鼠标点击决定图像位置？

    本教程给大家分享一个Flash小教程，教大家在Flash CS6中怎么实现鼠标点击决定图像位置？方法很简单，感兴趣的朋友欢迎前来一起分享学习
    2018-01-12

  • Flash中如何用代码将图片放在自己想要的舞台位置?

    本教程教脚本之家的ActionScript教程学习者在Flash中如何用代码将图片放在自己想要的舞台位置，教程讲解的详细，感兴趣的朋友欢迎前来分享学习
    2017-11-20

  • 在Flash CS6中使用with函数绘制背景图教程

    本教程教脚本之家的ActionScript教程学习者如何在Flash CS6中使用with函数绘制背景图？教程一步步讲解的挺详细，方法也不难，非常适合Flash新手入门学习
    2017-11-18

  • Flash怎么设置元件坐标?flash使用代码设置元件的坐标的教程

    Flash怎么设置元件坐标？flash中导如的元件需要添加坐标，该怎么定位元件坐标呢？下面我们就来看看flash使用代码设置元件的坐标的教程，需要的朋友可以参考下
    2017-10-11

  • Flash怎么制作来回摇摆的花朵的动画?

    Flash怎么制作来回摇摆的花朵的动画？Flash中想要给花朵制作一段摇摆的动画效果，该怎么制作呢？下面我们就来看看详细的教程，很简单，需要的朋友可以参考下
    2017-05-23

  • Flash怎么制作流动七彩色的文字?

    Flash怎么制作流动七彩色的文字？想要让文字动起来，该怎么使用flash给文字制作一个流动七彩色的动画呢？下面我们就来看看详细的教程，需要的朋友可以参考下
    2017-04-23

最新评论

关注微信公众号

扫一扫