2010/07/31 | as3代码练习-----移动的线条
类别(Flash课件设计) | 评论(0) | 阅读(1025) | 发表于 19:20

    用简单的代码来实现一个精彩的效果,这样的学习乐趣会多一些。

    先热个身,做一个移动的小球。新建一个元件,球形,在属性中设置链接的类名为 Ball。

主场景时间轴中写入下面的代码:

var ball = new Ball();
addChild( ball );
ball.x = 100;//设置小球的初始位置
ball.y = 100;
ball.vx = Math.random() * 10;//设置小球的初始速度
ball.vy = Math.random() * 10;

ball.addEventListener(Event.ENTER_FRAME,onMove );//添加帧频事件,让小球动起来。
function onMove( evt ) {
 var obj = evt.target;
 if (obj.x <= 0 || obj.x >= stage.stageWidth) {//检测是否横向跑出舞台。
  obj.vx =  -  obj.vx;
 }
 if (obj.y <= 0 || obj.y >= stage.stageHeight) {//检测是否纵向跑出舞台。
  obj.vy =  -  obj.vy;
 }
 obj.x += obj.vx;
 obj.y += obj.vy;
}

原理:小球在帧频事件中不断的将位置与表示速度的值累加,产生运动的效果,超出边界时,速度值取反,运动方向就反向了。

将一个小球变成多个运动的小球,用for循环将前面的代码括起来即可,为了方便控制,增加一个数组来记下全部的小球,代码如下:

var ballArr = new Array();

for (var i=0; i< 6; i++) {
 var ball = new Ball();//产生新的小球。
 addChild( ball );
 ball.x = 100;
 ball.y = 100;
 ball.vx = Math.random() * 10 +5;
 ball.vy = Math.random() * 10 +5;
 //ball.alpha = 0;

 ball.addEventListener(Event.ENTER_FRAME,onMove );
 
 ballArr.push( ball );//将小球放入到数组中去。
}
function onMove( evt:Event ) {
 var obj = evt.target;
 if (obj.x <= 0 || obj.x >= stage.stageWidth) {
  obj.vx =  -  obj.vx;
 }
 if (obj.y <= 0 || obj.y >= stage.stageHeight) {
  obj.vy =  -  obj.vy;
 }
 obj.x += obj.vx;
 obj.y+=obj.vy;
}

一群小球产生了,现在利用小球的位置来连线,得到运动的线条,在上面的代码下面,加入如下的代码:

var paper:Sprite = new Sprite();//创建一个放置线条的容器
addChild(paper);
var pen:Graphics = paper.graphics;//对容器中的画线类进行引用,引用的作用是让代码更简洁一些,便于理解。

paper.addEventListener(Event.ENTER_FRAME,onDrawLine);

function onDrawLine(evt:Event){
 pen.clear();//清屏
 pen.lineStyle(2,0xff0000);//设置线条类型
 pen.moveTo( ballArr[0].x,ballArr[0].y);//移动到数组中第一个小球的位置
 for(var i=1;i< ballArr.length;i++){//循环连线到数组中最后一个小球
  pen.lineTo( ballArr[i].x,ballArr[i].y);  
 }
 pen.lineTo( ballArr[0].x,ballArr[0].y);//将连线进行到第一个小球
}

完成以上代码以后,就可以得到一个运动的折线,不想看到小球的话,让它们alpha=0隐身起来就行了。

为了一个更特殊的效果,可以在最后加入下面的代码:
paper.scaleX = paper.scaleY = 0.3;
paper.x = 150;
paper.y = 150;

线条与小球的运动同步,但看起来又像是独立的运动,效果如下:

 

打完收工。

0

评论Comments