查看: 2898|回复: 3
打印 上一主题 下一主题

Flash 和 3D空间(二)

[复制链接]

9210

主题

1

听众

5万

积分

内部人员

Rank: 7Rank: 7Rank: 7

纳金币
12582
精华
186

活跃会员

跳转到指定楼层
楼主
发表于 2013-5-2 15:48:55 |只看该作者 |倒序浏览
动画制作步骤

1. 第一步,用Flash画出一个你喜欢的物体,任何物体都可以。在这个例子中我画了一个蓝色的小球。当然可以导入你喜欢的图片,不过不要忘记在 Library里创建的物体上点击右键,选择Linkage,然后在Export For Actionscript上打勾。

2. 下一步,详细解说一下代码。当然一开始要设置一些变量,原点和焦距(摄像机)。Focal length(焦距)确定了摄像机(在本例子中为人眼的)的凸透镜的焦距,值越大,那么物体的扭曲就会越小。把它设为400,这是一个在本例子中适中的数值。

var origin = new Object();
origin.x
= stage.stageWidth/2;
origin.y
= stage.stageHeight/2-80;


var focal_length = 400;

3. 创建一个舞台,并且把它的x和y设置为原点,这样在在舞台上创建物体时,就会默认原点在程序窗口的中央了。var scene = new Sprite();
this.addChild(scene);
scene.x
= origin.x;
scene.y
= origin.y;


4. 然后要在舞台上添加一些我们绘制好的小球。在这个例子中我们绘制3个,分别在左中右。把它们的x_3d, y_3d, z_3d,也就是它们的3D空间的x,y,z的值设为相应的数值,我把它们排为一排。每一个都添加一个direction属性,1代表向屏幕方向移动,-1 代表向我们的方向移动。然后设置它们的移动速度,并且添加到舞台上。这时你如果编译的话,你会看到有3个球在舞台上,那么下一步就让小球运动起来。


for (var i = 0; i < 3; i++)
{
    var sphere
= new Sphere();
    sphere.x_3d
= -190+i*160;
    sphere.y_3d
= 80;
    sphere.z_3d
= i*100;
    sphere.direction
= 1;
    sphere.speed
= 6;
    scene.addChild(sphere);
}



5. 下面这个函数,在每一次执行,都会把小球移动到相应的位置,并且对小球进行缩放。当小球的z大于600时,让它向相反的方向移动。当小球的z_3d值变化后,计算小球当前的大小和位置,把小球移动到相应的位置然后对其进行缩放,这样在一连串的函数执行后,就会得到动画效果。代码里scale代表物体应该缩放的比率,因为当物体沿z轴移动的时候,物体的大小以及x和y值都会改变。所以要计算出这个比率,那么我们才能把物体缩放到合适的大小,并且把物体移动到相应的2D空间位置。


function run(e:Event)
{
   
for (var i = 0; i < scene.numChildren; i++)
    {
        scene.getChildAt(i).z_3d
+= scene.getChildAt(i).speed*scene.getChildAt(i).direction;
        
if (scene.getChildAt(i).z_3d > 600)
        {
            scene.getChildAt(i).z_3d
= 600;
            scene.getChildAt(i).direction
= -1;
        }
        
else if (scene.getChildAt(i).z_3d < 0)
        {
            scene.getChildAt(i).z_3d
= 0;
            scene.getChildAt(i).direction
= 1;
        }
        
        var scale
= focal_length/(focal_length+scene.getChildAt(i).z_3d);
        scene.getChildAt(i).x
= scene.getChildAt(i).x_3d*scale;
        scene.getChildAt(i).y
= scene.getChildAt(i).y_3d*scale;

        scene.getChildAt(i).scaleX
= scene.getChildAt(i).scaleY = scale;
    }
}



6. 最后,在舞台上添加一个函数循环响应时间。让第5步写的函数循环执行。编译看一下,现在小球在3D舞台上移动了。


Hooray!你的第一个Flash3D程序完成了。总结一下,其实并没有使用任何高深的技巧,只不过是利用了变化物体的x和y以及小球的缩放来制造3D效果。对你来说太简单?好,那我们继续。



层叠

在Flash中表现3D空间,仅有缩放是不够的,还需要另外一个技巧,层叠。它的基本概念是,离人眼较近的物体会在离人眼较远的物体之上显示。

在上一个例子里面,我们缩放小球,以达到3D效果。可是你会发现,3个小球之间的x距离都很大,那么你也许会想如果3个小球离得很近的话,会出现什么现象呢?


分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏0 支持支持0 反对反对0
回复

使用道具 举报

0

主题

1

听众

2286

积分

中级设计师

Rank: 5Rank: 5

纳金币
0
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

沙发
发表于 2013-8-23 19:21:42 |只看该作者
良好的贡献
回复

使用道具 举报

无效楼层,该帖已经被删除

0

主题

1

听众

2458

积分

中级设计师

Rank: 5Rank: 5

纳金币
0
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

地板
发表于 2014-3-26 20:42:50 |只看该作者
Thanks for sharing !
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

手机版|纳金网 ( 闽ICP备2021016425号-2/3

GMT+8, 2024-11-10 11:20 , Processed in 0.096080 second(s), 31 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部