• 空间首页
• 空间管理
• 闪吧新社区
• 站点论坛
• 添加我的日志

我的最新日志

• Action Script2 三维制作方法（制作AS三维正方体与AS特效） 精华版

  2008-6-25

  前些日子（其实几个月了），我一直在专攻三维，现在有所学到，给那些不会的人启启蒙。在这里，我们学习一些数学公式（小朋友也学的会的，其实我只有10岁）和程序语法。制作一些实例。
      好了，废话不多说了，先进行恐怖，艰难的第一步——理论。
      在一个三维空间里，组成一个点需要三个坐标：X、Y、Z。X和Y是大家都知道的横竖轴，要注意它们在这里不是直接投到屏幕上的，而是要参与计算。Z是一个新的坐标，代表点与屏幕的距离。另外还要说明一个基本的变量——DIS，它是英文DISTANCE（距离）的缩写，代表坐在电脑前的我们离电脑的距离。DIS是虚拟的，因为我们不可能把头伸进电脑显示器里。可以简单的理解为物体的缩放比例。还有ZFACTOR，意思是转换量。CENTERX和CENTERY也很重要，因为FLASH坐标与笛卡尔坐标不同，所以需要把一个点的X坐标加上CENTERX，Y坐标加上CNETERY。
      在写出转换公式前，先介绍一下一个必要的词——投影。众所周知，我们要把三维坐标转换成二维坐标，这个过程就叫投影。
      投影的第一步是出去把你的脸洗干净，要看仔细了（只是个玩笑）。要先算出转换量。公式：
      zfactor=dis/z
      中文：Z转换量=距离/Z坐标
      我们假设一下：
      设点的X=3，Y=4，Z=5，我离屏幕有10，那么：
      zfactor=dis/z
      zfactor=10/5
      zfactor=2
      针对于这个点的Z转换量出来了，是2个长度单位。这里要注意Z转换量只是针对这个点的！另外，单位要一置。
      下一步是转换，是最难的一步，因为要让Z消失在X和Y中。但懂了以后会认为和泡方便面一样简单。
      公式：
      X=X*zfactor+centerX
      Y=Y*zfactor+centerY
      中文：
      转换后的X坐标=原来的X坐标*Z转换量+中心X
      转换后的Y坐标=原来的Y坐标*Z转换量+中心Y
      一般FLASH的中心X=FLASH的宽/2，中心Y=FLASH的高/2，如果FLASH动画的高为400，宽为550，那么中心X为275，中心Y为200。
      继续我们的例子：
      X=X*zfactor+centerX
      X=3*2+275
      X=6+275
      X=281
      Y=Y*zfactor+centerY
      Y=4*2+200
      Y=8+200
      Y=208
      祝贺你，投影成功，你应该去买瓶可乐庆祝庆祝了。我们得到了一个X为281，Y为208的点。想一想，如果每个点之间都连上线，2个点是一条线，4个点是一个平面，5个点是一个金字塔，6个点是一个三棱柱，8个点是一个长方体，十几个点是一张床，几百个点是一辆汽车，几千个点就是一架飞机了！但这还为时过早，下面介绍几个实例。
      （1）新建一个元件，命名“Circle”，在它里面画个小球，放在正中央。
      （2）右键点库中的“Circle”，选择“链接”，在“链接”对话框中选择“为ACTIONscrīpt导出”与“为第一帧导出”。
      （3）在场景第一帧上输入AS：
  dis = 800;
  centerX = 275;
  centerY = 200;
  ang = 0;//弧度
  function project(){
  if(this.z<40){
    this._visible=false;//如果点离自己很近，就让它消失
  }else{
    this._visible=true;
    var zfactor=dis/this.z;//计算Z转换量
    this._x=this.x*zfactor+centerX;//投影
    this._y=this.y*zfactor+centerY;//投影
    this._xscale=100*zfactor;//改变大小
    this._zscale=100*zfactor;//改变大小
    this.swapDepths(Math.floor (100000-this.z));//让大的点遮住小的点
  }
  }
  for (var i = 0; i<1250; i++) {
  var nm = "Circle"+i;
  _root.attachMovie("Circle", nm, i);//把球放入场景
  _root[nm].x = Math.cos(ang)*200;//设置球在三维世界中的X
  ang += 0.2;//弧度要改变
  _root[nm].y = 400;//球在三维世界中的Y都是400
  _root[nm].z = (i*50)+1400;//球的Z根据生成先后变化
  var zfactor = dis/_root[nm].z;//计算Z转换量
  _root[nm]._x = _root[nm].x*zfactor+centerX;//投影
  _root[nm]._y = _root[nm].y*zfactor+centerY;//投影
  _root[nm]._xscale = 100*zfactor;//改变大小
  _root[nm]._yscale = 100*zfactor;//改变大小
  _root[nm].swapDepths(Math.floor(100000-_root[nm].z));//让大的点遮住小的点
  }
      自己有性趣就测试一下吧。
      接下来，我们讨论如何让球自己会动。
      把上个实例里第一帧的AS改一下：
  dis = 800;
  centerX = 275;
  centerY = 200;
  ang = 0;
  function project() {
  if (this.z<40) {
    this._visible = false;
  } else {
    this._visible = true;
    var zfactor = dis/this.z;
    this._x = this.x * zfactor + centerX;
    this._y = this.y * zfactor + centerY;
    this._xscale = 100* zfactor;
    this._yscale = 100* zfactor;
    this.swapDepths(Math.floor(100000-this.z));
  }
  }
  for (var i = 0; i<40; i++) {
  var nm = "Circle"+i;
  _root.attachMovie("Circle", nm, i);
  _root[nm].x = Math.cos(ang)*200;
  ang += 0.2;
  _root[nm].z = (i*50)+dis;
  _root[nm].project = project;
  _root[nm].myAngle = i;
  _root[nm].onEnterFrame = function() {
    this.y = 100+Math.cos(this.myAngle/3) * 100;
    this.myAngle -= 0.4;
    this.project();
  };
  }
      其实基本相同，只不过多了onEnterFrame，我不加注释了。
      如果是真正的3D，不应少了改变观测点，我们要认识三个新变量：xoff、yoff、zoff它们指观测者在三维空间内的坐标。
      我们看一个实例，把上个实例的代码改成：
  dis = 800;
  centerX = 275;
  centerY = 200;
  ang = 0;
  xoff = 0;
  yoff = 0;
  zoff = 0;
  function project() {
  if (this.z-zoff<40) {
    this._visible = false;
  } else {
    this._visible = true;
    var zfactor = dis/(this.z-zoff);
    this._x = (this.x-xoff)*zfactor+centerX;
    this._y = (this.y-yoff)*zfactor+centerY;
    this._xscale = 100*zfactor;
    this._yscale = 100*zfactor;
    this.swapDepths(Math.floor(100000-this.z));
  }
  }
  for (var i = 0; i<40; i++) {
  var nm = "Circle"+i;
  _root.attachMovie("Circle", nm, i);
  _root[nm].x = Math.cos(ang)*500;
  ang += 0.2;
  _root[nm].y = 100+Math.cos(i/3)*100;
  _root[nm].z = (i*50)+dis;
  _root[nm].project = project;
  _root[nm].onEnterFrame = project;
  }
      在场景里放一个空按扭，上面写程序：
  on (keyPress "<Up>") {
  yoff-=3;
  }
  on (keyPress "<Down>") {
  yoff+=3;
  }
  on (keyPress "<Left>") {
  xoff-=3;
  }
  on (keyPress "<Right>") {
  xoff+=3;
  }
  on (keyPress "Q") {
  zoff+=3;
  }
  on (keyPress "A") {
  zoff-=3;
  }
      注意不同的地方：
      var zfactor = dis/(this.z-zoff);
      this._x = (this.x-xoff)*zfactor+centerX;
      this._y = (this.y-yoff)*zfactor+centerY;
      这个实例用方向键与Q、A操纵，自己试试看吧！
     最后一个实例是一个正方形，技术飞跃比较大，学习一下新知识：
  ·Array（数组）
      数组可以方便地存贮多个数。
      x=[100,150,10,0,150]代表创造一个叫“X”的数组，组内有100、150、10、0、150五个值。
      trace(x[3])代表输出X的第四个数，为什么不是第三个数呢？因为100的代号是0，150的代号是1，10的代号是2，0的代号才是3。
  ·Draw（画图）
      学会了它，你可以通过ACTIONscrīpt在屏幕上画图。
      clear();代表清除你用AS在屏幕上画的图。
      lineStyle(2, 0xff0000, 100);代表设置画笔的粗细为2，色彩为0xff0000（红），不透明度为100，不透明。
      moveTo(100,120);代表移动画笔到X100，Y120的地方。
      lineTo(430,360);跟在moveTo的后面，代表画一条线，从100，120到430，360。
      好了，把上个实例第一帧代码改成：
  dis = 800;
  centerX = 275;
  centerY = 200;
  ang = 0;
  xoff = 0;
  yoff = 0;
  zoff = 0;
  xObj = [100, 50, 100, 50, 100, 50, 100, 50];
  yObj = [50, 50, 100, 100, 50, 50, 100, 100];
  zObj = [150, 150, 150, 150, 200, 200, 200, 200];
  function project() {
  if (this.z-zoff<40) {
    this._visible = false;
  } else {
    this._visible = true;
    var zfactor = dis/(this.z-zoff);
    this._x = (this.x-xoff)*zfactor+centerX;
    this._y = (this.y-yoff)*zfactor+centerY;
    this.swapDepths(Math.floor(100000-this.z));
  }
  }
  for (var i = 0; i<8; i++) {
  var nm = "Circle"+i;
  _root.attachMovie("Circle", nm, i);
  _root[nm].x = xObj;
  ang += 0.2;
  _root[nm].y = yObj;
  _root[nm].z = zObj;
  _root[nm].project = project;
  _root[nm].onEnterFrame = project;
  }
  onEnterFrame = function () {
  this.clear();
  this.lineStyle(2, 0xff0000, 100);
  _root.moveTo(Circle2._x, Circle2._y);
  _root.lineTo(Circle3._x, Circle3._y);
  _root.moveTo(Circle3._x, Circle3._y);
  _root.lineTo(Circle7._x, Circle7._y);
  _root.moveTo(Circle7._x, Circle7._y);
  _root.lineTo(Circle6._x, Circle6._y);
  _root.moveTo(Circle6._x, Circle6._y);
  _root.lineTo(Circle2._x, Circle2._y);
  _root.moveTo(Circle5._x, Circle5._y);
  _root.lineTo(Circle4._x, Circle4._y);
  _root.moveTo(Circle5._x, Circle5._y);
  _root.lineTo(Circle7._x, Circle7._y);
  _root.moveTo(Circle4._x, Circle4._y);
  _root.lineTo(Circle6._x, Circle6._y);
  _root.moveTo(Circle0._x, Circle0._y);
  _root.lineTo(Circle1._x, Circle1._y);
  _root.moveTo(Circle0._x, Circle0._y);
  _root.lineTo(Circle4._x, Circle4._y);
  _root.moveTo(Circle0._x, Circle0._y);
  _root.lineTo(Circle2._x, Circle2._y);
  _root.moveTo(Circle1._x, Circle1._y);
  _root.lineTo(Circle3._x, Circle3._y);
  _root.moveTo(Circle1._x, Circle1._y);
  _root.lineTo(Circle5._x, Circle5._y);
  };
      测试一下吧！
  我的邮箱有两个，GMAIL的不用了，要发给我邮件用另外一个：
  sleep_walking@163.com

  附件

  3DA5.fla (44 KB)

  2008-6-25 18:46, 下载次数: 0

  3DA4.fla (25 KB)

  2008-6-25 18:46, 下载次数: 0

  3DA3.fla (43.5 KB)

  2008-6-25 18:46, 下载次数: 0

  3DA2.fla (43 KB)

  2008-6-25 18:46, 下载次数: 0

  3DA1.fla (43 KB)

  2008-6-25 18:46, 下载次数: 0

  3DA5.swf (733 Bytes)

  2008-6-25 18:46, 下载次数: 0

  3DA4.swf (660 Bytes)

  2008-6-25 18:46, 下载次数: 0

  3DA3.swf (621 Bytes)

  2008-6-25 18:46, 下载次数: 0

  3DA2.swf (589 Bytes)

  2008-6-25 18:46, 下载次数: 0

  3DA1.swf (595 Bytes)

  2008-6-25 18:46, 下载次数: 0

  查看(367) 评论(0)