Flex 4里的特效 2 - 高级图形特效
3D：在第三个维度上应用特效
当Flex小组忙于Flex4， 忙于思考组件架构，皮肤和名字空间的问题时。Flash小组发布了Flash Player 10. FP10有好多很酷的特性，
其中之一是3D功能，有了3D功能，我们不仅可以x轴和y轴定位和定向 显示对象，还可以在z轴这么作。
FP10 不支持完全的3D引擎。比如，没有Z缓冲区。这意味着你在渲染复杂的3D模型时可能遇到重叠的对象。幸好FP支持正确的3D定位和方向。这样我们就可以创建一些酷毙的特效。比如翻页和Fisheye（现在的手机上几乎都是这个东东）Flex team利用了FP的这些新功能。 Flex4 包含了一些新的特效来让你在3D上操作对象。我们前面提到的变换特效都有对应的3D版本：
下面的例子演示如何操作UI元素的3D属性。
<s:Rotate3D id="rotator" angleYFrom="0" angleYTo="360" autoCenterTransform="true" effectEnd="effectEndHandler(event)" target="{button0}"/><s:Move3D id="mover" duration="200" zBy="-30" repeatCount="2" repeatBehavior="{RepeatBehavior.REVERSE}" autoCenterTransform="true" effectEnd="effectEndHandler(event)" target="{button1}"/><s:Button id="button0" label="rotate me" width="100" height="100" mouseOver="rotator.play()"/><s:Button id="button1" label="move me" width="100" height="100" mouseOver="mover.play()" x="150"/><fx:Declarations> <s:GlowFilter id="glow" blurX="20" blurY="20" /> <s:AnimateFilter id="glower" target="{button}" bitmapFilter="{glow}" duration="600" repeatCount="0" repeatBehavior="{RepeatBehavior.REVERSE}"> <s:SimpleMotionPath property="alpha" valueFrom="0" valueTo="1"/> </s:AnimateFilter> </fx:Declarations> <s:Button id="button" x="100" y="100" mouseOver="if (!animating) { glower.play(); animating = true}" mouseOut="if (animating) { glower.end(); animating = false}"/><?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="500" height="298" creationComplete="creationComplete()"> <fx:Script> [Embed(source="images/GoldenGate.jpg")] [Bindable] private var GoldenGate:Class; private var goldenGateBD:BitmapData;//保存了GoldenGate的数据 [Embed(source="images/Harbor.jpg")] [Bindable] private var Harbor:Class; private var harborBD:BitmapData;//保存了Harbor的数据 private function creationComplete():void { goldenGateBD = (new GoldenGate()).bitmapData; harborBD = (new Harbor()).bitmapData; } private var newImageSource:Class; private function clickHandler():void { var bd0:BitmapData; var bd1:BitmapData; if (img.source == GoldenGate) { newImageSource = Harbor; bd0 = goldenGateBD; bd1 = harborBD; } else { newImageSource = GoldenGate; bd0 = harborBD; bd1 = goldenGateBD; }// crossfadeFilter.shader.data.frontImage.input = bd0; crossfadeFilter.shader.data.backImage.input = bd1; crossfader.play(); } private function effectEndHandler():void {//特效结束后把图片的源换成新的图片源 img.source = newImageSource; } </fx:Script> <fx:Declarations><!--这是用Pixel Bender Tookit制作的外部过滤器，这个过滤器对2个图片进行合并--> <s:ShaderFilter id="crossfadeFilter" shader="@Embed(source='shaders/crossfade.pbj')"/><!-- intensity的值越靠近1，说明最终的图片越接近第二个图片 看起来的效果就是从第一张图片过渡到第二张图片--> <s:AnimateFilter id="crossfader" target="{img}" bitmapFilter="{crossfadeFilter}" effectEnd="effectEndHandler()"> <s:SimpleMotionPath property="intensity" valueFrom="0" valueTo="1"/> </s:AnimateFilter> </fx:Declarations> <mx:Image id="img" source="{GoldenGate}" click="clickHandler()"/></s:Application>