超强表现的Flash10 3D
super power by Ralph Hauwert
Posts Tagged ‘3D’
Flash CS4的2.5D（下）
看了上一篇你可能对Flash CS4的3D功能感到不知所措。蛮好的一个功能却有着恼人的缺陷。好像最喜欢的衣服上刮了一道口子，穿也不是，不穿也不是。不过Flash一贯作风是关上了一道小门，却给你留了一扇小窗。为了弥补2.5D勉强的表现，Flash CS4在AS里增加了个小方法，使得我们可以方便的获取元件z坐标并进行重新排序。
唯一的遗憾是，纠正排序只能通过AS编程来实现。米有一个地方可以打个勾就搞定。
先看看这个例子，我在一个MC（container）里放置了四个矩形子MC（a，b，c，d）。
通过旋转父MC container，我做了一个整体沿Y轴旋转的效果。（因为没有摄像机，只能通过操作父级容器来模拟摄像机运动）
观看例子请确保你安装了FlashPlayer10
由于元件的显示是按照层顺序（显示列表顺序）而不是按照z坐标来排序，所以能看到在旋转到某些角度时，元件的排序不是我所期望的。在上一篇的例子里也会看到这种“错误”。（按Flash的逻辑来说，这是正常的，不能称之为“错误”）
这时可能有人会想：“那就用AS做个排序好了～”。没错！但首先我们要获得每个元件正确的z坐标。我先直接trace container的abcd的z坐标，它们没有变化！这是正确的，因为你得到的是它们在container坐标系里的值。以往我们做类似的坐标转换会用到localToGlobal，Flash CS4里新增了local3DToGlobal，但它的作用是将三维坐标换算为在二维坐标的投影。为得到所有元件在全局坐标系里的值，Flash CS4提供了：
1 | getRelativeMatrix3D(relativeTo:DisplayObject):Matrix3D |
传入的参数为参考物体，即你要获得相对于哪个物体的坐标。返回的是一个Matrix3D对象。我将如下代码添加到刚才的例子里：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var obj:Array = new Array(); obj.push({mc:container.a,z:0}); obj.push({mc:container.b,z:0}); obj.push({mc:container.c,z:0}); //obj.push({mc:container.d,z:0}); addEventListener(Event.ENTER_FRAME,loop); function loop(e:Event) { for (var i:uint=0; i<obj.length; i++) { obj[i].z=obj[i].mc.transform.getRelativeMatrix3D(stage).position.z container.removeChild(obj[i].mc) } obj.sortOn('z', Array.DESCENDING | Array.NUMERIC) for (i=0; i<obj.length; i++) { container.addChild(obj[i].mc) } } |
能看到这样的结果：
前面三个小矩形的显示已经正确了，但我还没有将后面的灰色矩形添加到排序数组里。我想先让大家看到一个基本让你满意的结果。我再把后面的灰色矩形也添加到排序数组里，得到这样的结果：
还有错误！这也是“正确”的。即使灰色矩形再大，它也只有一个z坐标，即使它“应该”遮住某个小矩形时，小矩形的z坐标也有可能在它的前面，你可以用你的两只手来比划比划。这种情况下，大块的灰色矩形需要被细分成小块。当然，这不是3D引擎，你要自己手动来细分。我将灰色矩形分成了竖着的四块。现在看起来基本上是我们所想要的了：
如果要做更复杂的运动，灰色矩形可能要做更细的细分。比如分成N x N个小矩形。
虽然这个小例子看起来基本完美了，但设计师们可以想象下，在设计和制作一个Motion Graphic的时候，加入代码和细分大块的元件会是一个比较烦人的工作。Flash CS4还不能让我们酣畅淋漓的发挥。
这两篇小文是我个人以一个动画设计师的视角对Flash CS4的3D功能的一点看法。为获得3D的表现力我们可以用After Effects的视频，也可以用3D引擎如Papervision 3D，现在又多了Flash CS4的3D工具。尽管这个版本的3D功能还不能尽善尽美，我相信人的创造力和想象力是最重要的，有了更新的工具，就会有更大的发挥空间和更好的表现。