CS4开发的布料模拟
 |
David Lenaerts重写了他以前的布料模拟类。用一点点物理知识和Verlet算法，加上Flash CS4的新绘图方式，就有了这个很漂亮的布料模拟效果。作者也分享了源代码。 |
Posts Tagged ‘flash cs4’
Flash CS4的3D工具
Flash CS4的3D工具很容易上手。在工具栏里有两个处理3D变形的工具：3D旋转和3D位移。
这两个工具都可以切换全局坐标模式和个体坐标模式，上图为个体坐标模式。
另外，也可以通过属性面板和变形面板来调整3D变形的参数。其中值得注意的是灭点（消失点）和相机范围角度（不是焦距）的设置。这两个参数对整个场景内的所有元件，以及嵌套的元件都产生影响。也就是说，一个场景的灭点和相机范围角是唯一的。灭点的默认位置是Stage的正中间。
如果一个元件（MovieClip）已经被施加了3D变形，那么进入修改此元件内的内容时，无法预览场景中的其他元素。一般情况下，我们的MC使用的个体坐标系和主场景的坐标系是不同的（把mc的中心点点放到场景的[0,0]点可保证两者坐标系统一），但MC内部的灭点坐标还是和主场景一样的，这样有可能你在MC内看到的透视和在主场景上看这个MC的透视会不一样。这两点需要多加注意，否则会给你制造点小麻烦。
刚刚知道Flash CS4有3D功能时，我第一个念头是，以后做翻书和折纸的动画省事儿了。下面就是个折纸动画的小例子。观看前请确保你安装了FlashPlayer10
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功能还不能尽善尽美，我相信人的创造力和想象力是最重要的，有了更新的工具，就会有更大的发挥空间和更好的表现。
Flash CS4的2.5D (上)
这个标题略显苛刻，但确实说的事实。Flash CS4无法将z坐标和层深进行转换，只要是在“上一层”的物件，无论z坐标多么的大，也会遮挡住“下一层”所有的东西。在做时间线动画时，你会因此碰到很多的麻烦。让用惯After effects的盆友来尝试Flash CS4的3D功能，他脸上一定露出便秘一样的表情。
但是话又说回来，Flash和After effects完全是两条道上的，flashplayer是实时渲染，如果不借助显卡来处理3D运算，只CPU是吃不消的。Flash会不会加入真3D？很不好说，也没准很快就会。
总之，Flash CS4的3D（2.5D）功能是很值得肯定的，为动画设计提供了更多的可能，为编程带来了很大的便利并且提高了很大的效率。
以后我会对Flash CS4的3D功能做一个简单介绍。这里有个小例子可以先看看，如果你装了FlashPlayer10的话。
有朋友提到了CS4的硬件加速支持。官方的说法是GPU会提升视频播放和分层图形(layered graphics)的表现。这会给2D图形效果带来不小的辅助，也会间接提升“3D”的表现，可惜还不是真正的3D运算硬件支持。另外，新的渲染模式也不是像大家想像的一样。
Flash10新绘图API简介
senocular.com的一篇文章，我拣重点简单的翻译并归纳下，有兴趣的屯学请看原文详细。
Flash的Drawing API在第十个版本终于得到了极大的增强。主要更新是：
1.使用专用的图形填充数据类IGraphicsData
2. 新的填充类型Shader，调用Pixle Bender的字节码图像数据以及处理方法。设置lineShaderStyle，可用于线条填充。FP10还补了一个lineBitmapStyle,我觉得9就应该有的，为啥拖到10呢？
3.drawPath，新的，整合型的绘制复杂多边形的方法。FP10中的多边形多了一个“绕向”（姑且这么翻译…）的概念，也就是多边形是顺时针方向（正向）还是逆时针方向（反向）绘制的。FP10中的填充方式分成为两种：奇偶填充和非零填充（姑且姑且这么翻译）。奇偶填充是各种drawing API最基本的填充方式，即绘制叠加的部分不会被填充。用新的非零填充方式，只有绘制的绕向相反时，叠加的部分才不会被填充。这有什么意义呢…想想3D咯
4.drawTriangles，可以看作drawPath的三角形专用版，为什么三角形这么精贵呢，再想想3D咯，更何况drawTriangles还支持UV坐标
以上为一个概括型的介绍，详细的讲解和实例请看原文
Flash10新应用：保存图片到本地
我们已经知道Flash10即将支持本地文件的读写。马上就有人做出了应用的例子：把flash绘制的图案保存为本地图片。现在也可以做到，但Flash10更简单。不再需要后台的辅助。
BitmapData -> JpegEncoder -> ByteArray -> FileReference.save() !