×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载随时随地聆听大师开讲/课堂酷素材!视频教程打包下手绘教程
咔咔摄影抠图教程路径专辑photoshop cs3视频教程 
查看: 2374|回复: 11

玩转Flash AS 3D 第壹季

[复制链接]

该用户从未签到

发表于 2012-9-3 12:36:04 | 显示全部楼层 |阅读模式
本帖最后由 柳含烟 于 2012-9-3 12:41 编辑










众说周知,flash是一个二维的动画软件,是无法完成一些真正的3d效果,但是如果要用它来做一些3d效果也不是不可能,一般来说有以下三种方法.
第一种方法,借助其它的3d软件,象swift 3d,Ulead Cool 3d,TrueSpace等一些相对容易上手的软件,用它们来完成后再导入到flash中,效果是不错,但是导入的大都是位图系列,所以生成的文件都比较大,再有一个特点就是没有flash所特有的互动性,作为flash 并没有多少工作可做,它只不过是播放的工具而已.
第二种方法,理论上可以,实际上是行不通的,就是利用flash 的画图工具做成逐帧动画,当然简单的还凑合,复杂的就根本不行.
第三种方法,就是我今天所要说的as 3d ,用数学方法算出3d来,也就是利用数学公式和一些透视的知识模仿出3d效果来,也称之为假3d,是一种视觉上的错觉.不过我个人认为在电视上出现的3d应该都是假3d,只不过那些专业的3d软件做出来的更逼真,更能欺骗你的眼睛罢了.
       现在言归正传,我们首先认识一下坐标问题,因为要模仿三维效果,必须首先了解坐标方面的知识,,因为3d效果都是三维坐标,而flash中是二维坐标,我们应该先把三维坐标转换二维数学坐标,再把二维坐标转换为flash中的坐标,如图:



为此我们先画一个透视图,B点是观察者的眼睛,物体位于三维空间的A点,它的坐标是(x,y,z),将该点的坐标转换为二维坐标,实际上就是点A在平面(电视屏幕)上的投影点C的坐标,其中CF的长就是该点的X坐标值,CE是该点的Y的坐标值,假设观察点到屏幕的距离BO=d,然后根据三角形相似原理,对应边成比例可以得到d/(d+z)=x1/x,d/(d+z)=y1/y,其中(x1,y1)就是转换后的坐标,假设d/(d+z)=ratio,所以x1=x*ratio,y1=y*ratio.





这样如果不好看懂的话,我们再换个角度来看,假设从上往下看和从右往左看,画个顶视图和右视图,这时候顶视图只能看到X轴和Z轴,Y轴只是一个点,右视图只能看到Y轴和Z轴,X而轴只是一个点,如图:
  







   接下来就很简单了,二维数学坐标和flash之间的坐标转换,只需把中心移动到左上角就好了,那么A点最终的坐标:
      _x=width/2+x1,
_y=height/2-y1,
其中width和height分别是场景的宽和高.
现在坐标的问题解决了,只是第一 步,要想让物体符合空间透视,还需要对其它参数做调整,比如近大远小,景深之类的,但是flash毕竟不是专门的3d软件,所以我们只能尽可能的模仿了,通过调整物体的比例大小,透明度和物体所处的层次可以达到比较逼真的效果,其中比例问题的原理和坐标相同,所以也可以根据上面的公式得出,即:
_xscale=_yscale=100*ratio(z越大,ratio就越小,离屏幕就越远,物体就越小)
透明度也是一样,
_alpha=100*ratio;
至于层次的问题现在大都用的是经验值
swapDepths(10000-z)或者swapDepths(-z).

导入三个小图标,也可以是图片,如果你画的好话,还可以画三个小人,这样效果更好,做成影片剪辑,拖入主场景中,分别命名为mcA,mcB,mcC,然后在主场景的第一帧加入以下代码:
mcA.x = -300;
mcA.y = 0;
mcA.z = 0;
mcA.dir = 1;//运动的方向
mcB.x = -50;
mcB.y = 0;
mcB.z = 250;
mcB.dir = 1;
mcC.x = 200;
mcC.y = 0;
mcC.z = 500;
mcC.dir = 1;//以上为三个图标的三维坐标值
d = 300;
speed = 20;
mcMove = function () {
    this.z += speed*this.dir;
    if (this.z>500) {
           this.z = 500;
           this.dir = -1;
    } else if (this.z<0) {
           this.z = 0;
           this.dir = 1;
    }
    var ratio = d/(d+this.z);
    this._x = 250+this.x*ratio;
    this._y = 150-this.y*ratio;//将三维坐标转化为二维坐标
    this._xscale = this._yscale=100*ratio;
    this.swapDepths(-this.z);//调整比例大小,透明度和层次让它符合透视原理
};
mcA.onEnterFrame = mcMove;
mcB.onEnterFrame = mcMove;
mcC.onEnterFrame = mcMove;



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x

该用户从未签到

发表于 2012-9-4 11:44:30 | 显示全部楼层
非常感谢!
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 20:22:59 | 显示全部楼层
顶顶多好
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 20:58:04 | 显示全部楼层
难得一见的好帖
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 20:58:57 | 显示全部楼层
不错不错
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 21:03:06 | 显示全部楼层
好帖子要收藏
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 20:53:09 | 显示全部楼层
果断收藏了
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 21:15:12 | 显示全部楼层
顶顶多好
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 21:08:49 | 显示全部楼层
真心顶。。。。
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 21:14:09 | 显示全部楼层
难得一见的好帖
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 21:25:19 | 显示全部楼层
不错不错
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2018-9-24 21:55:33 | 显示全部楼层
教程网我挺你
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [免费注册]

本版积分规则