快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

从球形绳的制作学习简朴三维

本教程来自于《Flash MX 2004 游戏开发》(加拿大,Glen Rhodes,电子工业出版社)。

预备:以下三个实例的元件相同,只是代码不同,元件在库中,40×40像素的球体,链接名为:sphere

代码处的解释部分用红色字体表示

A.静态的三维绳制作

效果如下:

« Full Screen »

过程:

预备好元件,在主场景中第1帧输入代码:

d =800;
centerX = 275;
centerY = 200;

ang = 0;

for (var i = 0; i<1250; i++) {
 var nm = "sphere"+i;
 _root.attachMovie("sphere", nm, i);
    //我们首先定义了一个名为ang的变量,初始化为0,我们将在余弦波的循环体内使用该变量。

    接下来我们创建了1250个小球的MC,实例名分别为:sphere0,sphere1,sphere2,...等等。我们将这些MC添加到_root上,然后将它们深度级别定义为i,小球的深度稍后将会根据它们的Z值进行修改,以正确地反映它们的层次。
接下来:
 _root[nm].x = Math.cos(ang)*200;
 ang += 0.2;
 _root[nm].y = 400;
   这就是我们创建余弦波的方式。每个小球的X位置设置为Math.cos(ang)*200,这就意味着X将是介于-200和200之间的某个数值,前后循环变化。同样对每个成功创建的小球的ang加上0.2。
     注重变量x和y就是x和y,而不是_x和_y。记住这是三维空间内的虚拟位置,而不是屏幕坐标。

接下来:
 _root[nm].z = (i*50)+1400;
  var zfactor=d/_root[nm].z;
  //第一个小球将在(Z轴上)1400,第二个是1450。。。。,接下来我们计算小球的屏幕位置:
 _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));
 
}
//为什么使用swapDepths:这能使得较远的对象看起来在较近的对象之后。我们让具有较高Z值的小于有较低的深度。

假如我们禁用swapDepths函数,就会得到如下:
(看上去,远处的小球反而叠在近的小球的上面)


« Full Screen »

B.移动的球形绳

效果:

« Full Screen »



预备同A,

第1帧代码:

d = 1000;
centerX = 275;
centerY = 200;


ang = 0;


function project() {
 if (this.z<40) {
  this._visible = false;
 }
我们在这里执行了一个重要的检测。假如对象的Z值小于40,我们就认为它实际上是在用户的后方,因此我们根本就不必绘制它。想像小球向我们靠近,毕竟是在哪一点上让我们注重 到小球的通过,而后到达我们的后侧而无法看到的呢?在我们的示例中,好像40是较好的Z值。不要用“if(this.z<40)”,因为当某个小球的Z值达到0时,它是那么无限地接近观察者,看起来好像无穷大。在Z值为40的位置,小球看上去相称大且距离相称近,因此可以认为这就是小球通过我们的点。
接下来:

else {
  this._visible = true;
  var zfactor = d/this.z;
等价于:this.z>0时我们让小球可见(小球不在我们的后方)
  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 = "sphere"+i;
 _root.attachMovie("sphere", nm, i);
 _root[nm].x = Math.cos(ang)*200;
 ang += 0.2;
 _root[nm].y = 400;
 _root[nm].z = (i*50)+d;


 _root[nm].project = project;   //将project函数添加到小球MC内名为project的方式之下。接下来,只要通过调用sphere.project()方式,即可以让小球改变自身位置、缩放比例和图层。
 
 _root[nm].onEnterFrame = function() {
  
  this.y-=3;
 
  this.project();
 };
}
//这就是我们将对象改变为动态的地方,首先将每个小球的y值(不是_y值)减1,然后调用每个小球的project方式,以促使屏幕更新。

把代码最后的:this.y-=3,改成this.x-=3;this.z-=3;试一下。

C.移动视点

到此为止,我们已经讨论了移动对象本身,现在让我们看一下怎样才能移动整个视图以使得用户的透视图看起来在运动,并且对象保持固定,而不是用户保持固定而对象在移动.

元件:一个40*40的球形,链接名:sphere

在主场景第一帧代码如下:


//xoff,yoff,zoff用来确定我们观察者所处的位置.
xoff=0;
yoff=0;
zoff=0;
d=1000;
centerX=275;
centerY=200;
ang=0;
function project()
{
if((this.z-zoff)<40)
{
this._visible=false;
}
else
{
this._visible=true;
var zfactor=d/(this.z-zoff);
this._x=(this.x-xoff)*zfactor+centerX;//在上一个效果中公式中少了一个xoff,因为现在的球位置都是相对于观察者的.
this._y=(this.y-yoff)*zfactor+centerY;

this._xscale=100*zfactor;
this._yscale=100*zfactor;

this.swapDepths(Math.floor(100000-(this.z-zoff)));//让近的球摆在上面.
}
}
//接下来用于生成小球....
for(var i=0;i<40;i++)
{
var nm="sphere"+i;
_root.attachMovie("sphere",nm,i);

_root[nm].x=Math.cos(ang)*200;
ang+=0.2;
_root[nm].y=100+Math.cos(i/3)*100;

_root[nm].z=(i*50)+d;
_root[nm].project=project;

_root[nm].onEnterFrame=project;
}
//建一个侦听器,侦听鼠标的活动.
mouseListener=new Object();
mouseListener.onMouseWheel=function(diff)
{
zoff+=(diff*50)
}
mouseListener.onMouseMove=function()
{
xoff=_xmouse-centerX;
yoff=_ymouse-centerY;
}
Mouse.addListener(mouseListener);



返回类别: Flash教程
上一教程: Flash MX的坐标系统简介
下一教程: FLASH条件和循环语句

您可以阅读与"从球形绳的制作学习简朴三维"相关的教程:
· 百叶窗效果动画,Flash无AS的制作方式
· 简朴的人物透视效果的制作
· 流行手法??水纹banner的制作
· 浅谈动画背景的制作
· 动态MC按钮的制作教程
    微笑服务 优质保证 索取样品