×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
楼主: cao4811

[AS] Flash物理基础—速度向量(Velocity)[本文已收录教程库]

[复制链接]
发表于 2009-6-5 07:38:07 | 显示全部楼层 |阅读模式
本帖最后由 xyl7422 于 2009-10-21 15:37 编辑

Flash物理基础—速度向量(Velocity)
演示:


物体运动的最基本属性就是速度。很多人把速度向量(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帧,打开动作面板,输入代码:
  1. var vx:Number = 5;
  2. addEventListener(Event.ENTER_FRAME,onEnterFrame);
  3. function onEnterFrame(event:Event):void {
  4.         ball.x += vx;
  5. }
复制代码
在这个例子中,首先设置一个 x 轴速度向量(vx)等于5。记住是指每一帧5像素,所以,在每一帧中, vx

都会被加到 ball 的 x 属性中。并为 enterFrame 设置事件处理函数。每走一帧,小球都会在前一帧的位置

基础上向右移动5个像素。

双轴速度向量

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

到 y 属性上。下面一个示例:

1--4 步同上,输入代码:
  1. var vx:Number = 5;
  2. var vy:Number = 5;
  3. addEventListener(Event.ENTER_FRAME,onEnterFrame);
  4. function onEnterFrame(event:Event):void {
  5.         ball.x += vx;
  6.         ball.y += vy;
  7. }
复制代码
角速度

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

,对边长为 vy 的边,因为角的正弦值等于对边/斜边,或是对边等于正弦乘以斜边。实际使用的代码:
vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;

示例代码:
  1. var angle:Number = 45;
  2. var speed:Number = 3;
  3. addEventListener(Event.ENTER_FRAME,onEnterFrame);
  4. function onEnterFrame(event:Event):void {
  5.         var radians:Number=angle * Math.PI / 180;
  6.         var vx:Number=Math.cos(angle) * speed;
  7.         var vy:Number=Math.sin(angle) * speed;
  8.         ball.x += vx;
  9.         ball.y += vy;
  10. }
复制代码
与前面 vx,vy 主要不同的地方是变成了 angle 和 speed,计算出的速度向量作为局部变量被使用。当然,

由于是一个简单的示例,角度(angle)和速度(speed)都不变,那么完全可以只计算一次,然后保存在类中

作为变量。而对于更高级的运动来说,角度和速度应是不断变化的,所以 vx 和 vy 的值也是变化的。
只需要改变角度(angle)与速度(speed),就可以改变物体运动的速度及角度。

下面制作鼠标跟随

1、新建FLA文档

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

3、返回场景1,选中第1帧,打开动作面板输入代码:
  1. var speed:Number = 5;
  2. addEventListener(Event.ENTER_FRAME,onEnterFrame);
  3. function onEnterFrame(event:Event):void {
  4.         var dx:Number = mouseX - arrow.x;
  5.         var dy:Number = mouseY - arrow.y;
  6.         var angle:Number = Math.atan2(dy, dx);
  7.         arrow.rotation = angle * 180 / Math.PI;
  8.         var vx:Number = Math.cos(angle) * speed;
  9.         var vy:Number = Math.sin(angle) * speed;
  10.         arrow.x += vx;
  11.         arrow.y += vy;
  12. }
复制代码
先计算出箭头与鼠标的 x 距离和 y 距离,并使用 Math.atan2 计算出它们的夹角。然后使用这个角度

使箭头旋转,再使用 Math.cos 和 Math.sin 与速度相乘计算出 x,y 速度向量,最后将它们加到箭头的坐标

上。

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

行。
  1. Arrow类(绘制箭头)
  2. package {
  3.         import flash.display.Sprite;
  4.         public class Arrow extends Sprite {
  5.                 public function Arrow() {
  6.                         init();
  7.                 }
  8.                 public function init():void {
  9.                         graphics.lineStyle(1,0,1);
  10.                         graphics.beginFill(0xff0000);//填充
  11.                         graphics.moveTo(-50,-25);
  12.                         graphics.lineTo(0,-25);
  13.                         graphics.lineTo(0,-50);
  14.                         graphics.lineTo(50,0);
  15.                         graphics.lineTo(0,50);
  16.                         graphics.lineTo(0,25);
  17.                         graphics.lineTo(-50,25);
  18.                         graphics.lineTo(-50,-25);
  19.                         graphics.endFill();
  20.                 }
  21.         }
  22. }
复制代码
  1. FollowMouse类(鼠标跟随)
  2. package {
  3.         import flash.display.Sprite;
  4.         import flash.events.Event;
  5.         public class FollowMouse extends Sprite {
  6.                 private var arrow:Arrow;
  7.                 private var speed:Number = 5;
  8.                 public function FollowMouse() {
  9.                         init();
  10.                 }
  11.                 private function init():void {
  12.                         arrow = new Arrow();
  13.                         addChild(arrow);
  14.                         addEventListener(Event.ENTER_FRAME, onEnterFrame);
  15.                 }
  16.                 private function onEnterFrame(event:Event):void {
  17.                         var dx:Number = mouseX - arrow.x;
  18.                         var dy:Number = mouseY - arrow.y;
  19.                         var angle:Number = Math.atan2(dy, dx);
  20.                         arrow.rotation = angle * 180 / Math.PI;
  21.                         var vx:Number = Math.cos(angle) * speed;
  22.                         var vy:Number = Math.sin(angle) * speed;
  23.                         arrow.x += vx;
  24.                         arrow.y += vy;
  25.                 }
  26.         }
  27. }


复制代码
本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=249133
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x

评分

参与人数 3金币 +15 威望 +1 热心度 +4 收起 理由
祁连山 + 1 支持教程哈,辛苦啦.
xyl7422 + 7 + 2 支持原创教程,辛苦了
sanbos + 8 + 2 多谢教程

查看全部评分

发表于 2010-5-24 18:04:24 | 显示全部楼层
酷素材
//我写的一个作业
var speed:Number = 5;
addEventListener(Event.ENTER_FRAME,onEnterFrame);
function onEnterFrame(event:Event):void {
        var dx:Number;
        var dy:Number;
        var angle:Number;
        var vx:Number;
        var vy:Number;

        //方式一
        dx = mouseX - qiu_mc.x;
        dy = mouseY - qiu_mc.y;
        if (dx!=0|| dy!=0) {
                angle = Math.atan2(dy, dx);
                vx = Math.cos(angle) * speed;
                vy = Math.sin(angle) * speed;
                if ((qiu_mc.x+vx>mouseX && mouseX>qiu_mc.x)
                   || (qiu_mc.x+vx<mouseX && mouseX<qiu_mc.x) ) {
                        qiu_mc.x =mouseX;
                        qiu_mc.y =mouseY;
                } else {
                        qiu_mc.rotation = angle * 180 / Math.PI;
                        qiu_mc.x += vx;
                        qiu_mc.y += vy;
                }
        }
}
回复 支持 反对

使用道具 举报

发表于 2010-12-7 15:17:46 | 显示全部楼层
本帖最后由 hslisy 于 2010-12-7 15:33 编辑

实例命名为arrow,鼠标不动能不闪吗?

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

发表于 2010-12-7 15:31:59 | 显示全部楼层
Arrow类(绘制箭头)
FollowMouse类(鼠标跟随)
代码是不是有小问题呀?jc:yiwen
回复 支持 反对

使用道具 举报

发表于 2012-1-19 12:04:54 | 显示全部楼层
酷素材
本帖最后由 一帆风顺2012 于 2012-1-19 12:06 编辑

as2.0制作的效果:
代码:
onEnterFrame = function () {
        var angle:Number = Math.atan2(_ymouse-mc._y, _xmouse-mc._x);
        var speed:Number = 5;
        var X = Math.cos(angle)*speed;
        var Y = Math.sin(angle)*speed;
        mc._rotation = angle*180/Math.PI;
        mc._x += X;
        mc._y += Y;
};

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[立即注册]

x
回复 支持 反对

使用道具 举报

发表于 2014-11-25 19:23:07 | 显示全部楼层
酷素材
很好的教材。顶一个。
回复 支持 反对

使用道具 举报

发表于 2018-1-2 17:19:10 | 显示全部楼层
很不错。。。
回复 支持 反对

使用道具 举报

发表于 2018-1-2 18:01:39 | 显示全部楼层
楼主是超人
回复 支持 反对

使用道具 举报

发表于 2018-1-2 17:26:52 | 显示全部楼层
顶顶多好
回复 支持 反对

使用道具 举报

发表于 2018-1-2 18:10:58 | 显示全部楼层
真心顶。。。。
回复 支持 反对

使用道具 举报

发表于 2018-1-2 17:32:13 | 显示全部楼层
好帖子要收藏
回复 支持 反对

使用道具 举报

发表于 2018-4-28 12:49:07 | 显示全部楼层
真心顶。。。。
回复 支持 反对

使用道具 举报

发表于 2018-4-28 12:56:06 | 显示全部楼层
说的非常好
回复 支持 反对

使用道具 举报

发表于 2018-4-28 13:40:38 | 显示全部楼层
果断收藏了
回复 支持 反对

使用道具 举报

发表于 2018-4-28 13:44:54 | 显示全部楼层
教程网我挺你
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [立即注册]

本版积分规则

2345