一个线条移动的效果

      Flash游戏教程 2007-7-17 12:41

早上看电视,看到有一个背景效果很不错,就写了段代码来练习了一下,效果如下:

库中画一绿色线条(尽量画长些压住全部屏幕),将线条转换为元件后,从库中打开将线条偏移开注册点一些位置(旋转时才会产生圆的效果),再给元件加上ID标识 line 。

初稿中,圆形位置固定不变,代码如下:

var ang:Number = 0;
onEnterFrame = function () {
 var i = getNextHighestDepth();
 if (ang < 360) {
  _root.createEmptyMovieClip("mc" + i,i);
  var mc = _root["mc" + i];
  trace(mc);
  mc.attachMovie("line","line",1);
  mc._rotation = ang;
  mc._x = 100;
  mc._y = 100;
  ang += 5;
  mc.onEnterFrame = function() {
   this._alpha -= 2;
   if (this._alpha <= 0) {
    removeMovieClip(this);
   }
  };
 } else {
  ang = 0;
 }
};

这段代码中 i 的取值没有加以控制,而且是直接路径,所以用起来会有点麻烦。

第二稿,将空MC全部生成到一个MC中去,这样,母MC动的时候,里面的子MC也会跟着动,效果就出来了,代码如下:

_root.createEmptyMovieClip("big_mc",0);
big_mc._x = 60;
big_mc._y = 60;

var ang:Number = 0;
var i:Number = 0;

var xSpeed = 4;
var ySpeed = 3;
big_mc.onEnterFrame = function () {
 if( this._x + xSpeed > Stage.width - 60 ||this._x + xSpeed < 60){
  xSpeed *= -1;
 }
 if( this._y + ySpeed > Stage.height -60 ||this._y + ySpeed <60){
  ySpeed *= -1;
 }
 this._x += xSpeed;
 this._y += ySpeed;
 
 if (++i > 100) {
  i = 0;
 }

 if (ang < 360) {
  big_mc.attachMovie("line","line"+i, i);
  var mc = big_mc["line" + i];
  trace(mc);
  mc._rotation = ang;
  mc._x = 0;
  mc._y = 0;
  ang += 5;
  mc.onEnterFrame = function() {
   this._alpha -= 1.7;
   if (this._alpha <= 0) {
    this.removeMovieClip(this);
   }
  };
 } else {
  ang = 0;
 }
};

第三稿,用画线的方法来实现这个效果,不再需要提前制作元件了,直接将下面的代码拷到场景中运行即可。

_root.createEmptyMovieClip("big_mc",0);
big_mc._x = 60;
big_mc._y = 60;

var ang:Number = 0;
var i:Number = 0;

var xSpeed = 4;
var ySpeed = 3;
big_mc.onEnterFrame = function () {
 if( this._x + xSpeed > Stage.width - 60 ||this._x + xSpeed < 60){
  xSpeed *= -1;
 }
 if( this._y + ySpeed > Stage.height -60 ||this._y + ySpeed <60){
  ySpeed *= -1;
 }
 this._x += xSpeed;
 this._y += ySpeed;
 
 ++i > 500 ? 0 : i;
 if (ang < 360) {
  big_mc.createEmptyMovieClip("mc" + i,i);
  var mc = big_mc["mc" + i];
  mc.lineStyle(1.5,0x66ff99);
  mc.moveTo( -800,-50);
  mc.lineTo( 800,-50);
  trace(mc);
  //mc.attachMovie("line","line",1);
  mc._rotation = ang;
  mc._x = 0;
  mc._y = 0;
  ang += 5;
  mc.onEnterFrame = function() {
   this._alpha -= 1.7;
   if (this._alpha <= 0) {
    removeMovieClip(this);
   }
  };
 } else {
  ang = 0;
 }
};

因为子MC的坐标系会随着_rotation的变化而变化,所以线条只需要在固定位置画出即可,坐标系旋转后,线条会被同时旋转到相应的位置。

提示:把直线拉成曲线,效果又会有些不同。

点此下载 download

标签集:TAGS:flash 线条效果
回复Comments() 点击Count()

回复Comments

{commentauthor}
{commentauthor}
{commenttime}
{commentnum}
{commentcontent}
作者:
{commentrecontent}


注册5D通行证,立刻拥有自己的博客Join 5D!发表留言

用户Name:  密码Password: 匿名Guest
内容Comment: 
加粗 下划线 文本颜色 居中 插入链接 建立Google搜索链接 插入图片 引用文本
 
汗 喜欢 骄傲的笑 哭 酷! 愤怒 黑线 什么? 猥琐 偷笑 无语 晕 吃惊 诱惑
smile frown redface biggrin wink rolleyes mad eek 禁止笑脸转换 No smiley
zoom inzoom out
验证Verify: checkcode 换一个change the code