Flash AS3基础教程:物理基础之速度向量(Velocity)

上官丶帅

上官丶帅

2016-01-29 12:15

Flash AS3基础教程:物理基础之速度向量(Velocity),本例为Flash AS3基础教程,主要讲解物理基础中的速度向量(Velocity)的概念及表现形式和注意事项,并通过实例详细讲解了速度向量的演示效果,希望能给朋友们带来帮助~~

本文由 中国 cao4811 原创,转载请保留此信息!

本系列Flash教程由中国Flash互助课堂专为Flash新手制作,更多教程和练习请点击这里,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临! 

在学习中遇到问题请到 论坛 发贴交流!

更多AS 3.0教程:http://www.jcwcn.com/portal-topic-topicid-2.html

 本例为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 为负数表示向上。

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

[next]

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),就可以改变物体运动的速度及角度。

[next]

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/fjc/)

下面制作鼠标跟随

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 就可运行。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/fjc/) 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;
                }
        }
}

对本文感兴趣的朋友可以到这里提交作业、老师会为作业点评、加分:http://bbs.jcwcn.com/viewthread.php?tid=249133

展开更多 50%)
分享

猜你喜欢

Flash AS3基础教程:物理基础之速度向量(Velocity)

flash教程
Flash AS3基础教程:物理基础之速度向量(Velocity)

Flash AS3基础教程:物理基础之速度向量

FLASH flash教程 autocad教程
Flash AS3基础教程:物理基础之速度向量

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Flash AS 3.0基础教程:物理基础之重力

flash教程
Flash AS 3.0基础教程:物理基础之重力

速度滑冰教程 基础篇3

滑冰 花样滑冰
速度滑冰教程 基础篇3

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

FLASH基础教程:初级鼠绘教程整理

flash教程
FLASH基础教程:初级鼠绘教程整理

Flash初学者基础教程——flash的入门

flash教程
Flash初学者基础教程——flash的入门

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

《全民水浒》三十六天罡星人物解析

《全民水浒》三十六天罡星人物解析

PSV《讨鬼传 极》长枪瞬间伤害加成测试数据

PSV《讨鬼传 极》长枪瞬间伤害加成测试数据
下拉加载更多内容 ↓