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"/>

第一个效果是让目标绕着y轴旋转360度（注意是围绕按钮的中心旋转）。第二个效果就是让按钮的z值减少30像素，看起来就像是
按钮变大了一样 (也就是按钮凸出来的感觉)，然后又把z的位置变回去（注意repeatBehavior的值）

使用像素混淆着色特效

FP10支持像素混淆着色。Pixel Bender Tookit是Adobe实验室的一项技术。它允许你创建小的程序来在像素级别操作图像，它允许
多个输入的图像，并按你的要求来操作像素。这个过程就是在遍历每个像素时，都调用你的小程序来计算最终要显示的像素的值。
我们这里不讨论如何使用Pixel Bender Tookit，而是讨论如何在Flex里使用这项技术。

Flash对像素混淆的支持使得创建Flash 对象的自定义过滤器（filter，就是那样阴影效果）成为可能。Flash过滤器是更改对象如何显示在界面上
的一项强大的技术，比如给对象增加一个阴影，或者给按钮增加一圈光晕效果。
在Flex 4里有2种可以试用像素混淆着色功能的效果：AnimateFilter和AnimateTransitionShader.

使用AnimateFilter

AnimateFilter不只能用于像素混淆着色，也可以给任何的过滤器增加动画效果。比如可以一个组件周围的光晕增加动画效果。

<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>

使用 AnimateTransitionShader

另外一种在FLex里使用像素混淆着色的方法是使用AnimateTransitionShader的子类。目前只有Wipe和Crossfade 2种效果。
AnimateTransitionShade和它的子类的设计思路是给状态前后的目标对象拍个快照。然后构造一个ShaderFilter，把2个图片
分别作为输入和混淆器，然后在ShaderFilter上运行动画来在2张图片之间进行切换。

因为这些特效都是执行一些很固定的任务，定时合并2个输入的图像。特别的，AnimateTransitionShader使用的着色器必须有3个输入图像。第二和第三个图像叫做from和to，并且必须有个叫做progress的浮点类型的属性，特效会用这个值来计算动画到了哪里。之所以要有第一个图像，是因为Flash 需要对第一个图像进行过滤。在这个情形里，我们从位图图像里就可以得到着色器的输出，所以我们传第一个图像只是为了满足Flash Player的要求。

默认情况下，目标对象必须是一个UIComponent或者GraphicElement的子类。因为这个特效会在这些对象上拍一个位图的快照。
不过如果你想在别的类型的对象（这些对象上没有拍快照的函数）间进行混淆特效也可以，那就是提供自己自定义的BitmapData对象。

就想它的名字那样，AnimateTransitionShader特别适合用在过渡的情形中。

Wipe和Crossfade特效很容易使用，因为它们内部已经提供了需要的着色器。你只需要制定目标对象就行了，当然，用Wipe特效的时候还有方向需要设置。

上面的例子是很直白的，所以就不再解释了。

From http://linmingren2003.blog.163.com/blog/static/5675100320101062546773/