积少成多Flash(11) - Flex 3.0 动画效果(effect)

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        演示 放大/缩小 的动画效果 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Effect - Zoom (放大/缩小)"> 

        <mx:Script> 
                <![CDATA[ 
                         
                        private function doZoom(e:MouseEvent):void 
                        { 
                                if (zoom.isPlaying) 
                                { 
                                        zoom.reverse(); 
                                } 
                                else 
                                { 
                                        zoom.play([e.target], e.type == MouseEvent.ROLL_OUT ? true : false); 
                                } 
                        }                 
                         
                ]]> 
        </mx:Script> 
                 
        <mx:Zoom id="zoom" originX="24" originY="24"    
                zoomWidthFrom="1" zoomWidthTo="2" zoomHeightFrom="1" zoomHeightTo="2" /> 
         
        <mx:Image source="@Embed('images/logo.png')" 
                x="24" y="24" width="48" height="48"    
                scaleX="1" scaleY="1"    
                rollOver="doZoom(event)" rollOut="doZoom(event)" 
         /> 
         
</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        演示 从上/下/左/右 4 个方向 线性渐变地 对控件做 删除/显示 的动画效果 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Effect - WipeUp, WipeDown, WipeLeft, WipeRight (擦除)"> 
         
        <mx:Script> 
                <![CDATA[ 
                         
                        private function effectEndHandler():void 
                        { 
                                mx.controls.Alert.show("WipeLeft 效果结束"); 
                        }                 
                         
                ]]> 
        </mx:Script> 
         
        <mx:WipeLeft id="wipeLeft" duration="1000" effectEnd="effectEndHandler()" /> 
        <mx:WipeUp id="wipeUp" duration="1000" /> 
         
        <mx:Image source="@Embed('images/logo.png')" 
                x="24" y="24" width="48" height="48"     
                visible="{chk.selected}" hideEffect="{wipeLeft}" showEffect="{wipeUp}" 
         /> 
            
         <mx:ControlBar horizontalAlign="center"> 
                 <mx:CheckBox id="chk" label="显示" selected="true"    
                         textRollOverColor="blue" 
                         textSelectedColor="red" 
                 /> 
         </mx:ControlBar> 
            
</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        演示 旋转 的动画效果 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Effect - Rotate (旋转)"> 
         
        <mx:Script> 
                <![CDATA[ 
                 
                        [Bindable] 
                        private var angle:int = 0; 
                         
                        private function rotateImage():void 
                        { 
                                rotate.end(); 
                                angle +=45; 
                                rotate.play(); 
                        } 
                         
                ]]> 
        </mx:Script> 
         
        <mx:Rotate id="rotate" angleFrom="{angle-45}" angleTo="{angle}" target="{image}" duration="100" /> 
         
        <mx:Image id="image" source="@Embed('images/logo.png')"    
                x="24" y="24" width="48" height="48" 
         /> 
            
         <mx:ControlBar horizontalAlign="center"> 
                 <mx:Button label="旋转 45 度" click="rotateImage();" /> 
         </mx:ControlBar> 
            
</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        演示 调整控件大小 的动画效果 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Effect - Resize (重设大小)"> 
         
        <mx:Script> 
                <![CDATA[ 
                         
                        private function smoothImage(e:Event):void 
                        { 
                                var bmp:Bitmap = e.target.content as Bitmap; 
                                bmp.smoothing = true; 
                        } 
                         
                ]]> 
        </mx:Script> 
         
        <mx:Resize id="resizeUp" target="{image}" widthTo="180" heightTo="180" /> 
        <mx:Resize id="resizeDown" target="{image}" widthTo="48" heightTo="48" /> 
         
        <mx:Image id="image" source="@Embed('images/logo.png')"    
                x="24" y="24" width="48" height="48" 
                creationComplete="smoothImage(event)" 
         /> 
            
         <mx:ControlBar horizontalAlign="center"> 
                 <mx:Button label="放大" click="resizeUp.end(); resizeUp.play();" /> 
                 <mx:Button label="缩小" click="resizeDown.end(); resizeDown.play();" /> 
         </mx:ControlBar> 
                     
</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        演示 淡入/淡出 的动画效果 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Effect - Fade (淡入/淡出)"> 
         
        <mx:Fade id="fadeOut" duration="1000" alphaFrom="1" alphaTo="0" /> 
        <mx:Fade id="fadeIn" duration="1000" alphaFrom="0" alphaTo="1" /> 
         
        <mx:Image source="@Embed('images/logo.png')" 
                x="24" y="24" width="48" height="48"     
                visible="{chk.selected}" hideEffect="{fadeOut}" showEffect="{fadeIn}" 
         /> 
            
         <mx:ControlBar horizontalAlign="center"> 
                 <mx:CheckBox id="chk" label="显示" selected="true"    
                         textRollOverColor="blue" 
                         textSelectedColor="red" 
                 /> 
         </mx:ControlBar> 
            
</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        演示 改变控件位置 的动画效果（移动控件） 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Effect - Move (移动)"> 
         
        <mx:Script> 
                <![CDATA[ 
                         
                        private function moveImage(e:MouseEvent):void 
                        { 
                                var position:Point = new Point(stage.mouseX, stage.mouseY); 
                                var localPosition:Point = canvas.globalToLocal(position); 
                         
                                effectMove.end();         
                                effectMove.xTo = localPosition.x - (image.width / 2) 
                                effectMove.yTo = localPosition.y - (image.height / 2) 
                                effectMove.play(); 
                        } 
                         
                ]]> 
        </mx:Script> 
         
        <mx:Move id="effectMove" target="{image}" /> 
         
        <mx:Canvas id="canvas" width="100%" height="100%" mouseDown="moveImage(event)"> 
         
                <mx:Image id="image" source="@Embed('images/logo.png')" 
                        x="24" y="24" width="48" height="48"    
                 /> 
                    
        </mx:Canvas> 
            
</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        演示 显示/消失（放射性渐变） 的动画效果 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Effect - Iris (遮罩 - 用于消失/显示对象)"> 
         
        <mx:Iris id="irisOut" duration="1000" showTarget="true" /> 
        <mx:Iris id="irisIn" duration="1000" showTarget="false" /> 
         
        <mx:Image source="@Embed('images/logo.png')" 
                x="24" y="24" width="48" height="48"     
                visible="{chk.selected}" hideEffect="{irisOut}" showEffect="{irisIn}" 
         /> 
            
         <mx:ControlBar horizontalAlign="center"> 
                 <mx:CheckBox id="chk" label="显示" selected="true"    
                         textRollOverColor="blue" 
                         textSelectedColor="red" 
                 /> 
         </mx:ControlBar> 
            
</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        演示 模糊 的动画效果 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Effect - Blur (模糊)"> 
         
        <mx:Blur id="blurImage" duration="1000" 
                blurXFrom="0" blurXTo="10" blurYFrom="0" blurYTo="10" 
        /> 
        <mx:Blur id="unblurImage" duration="1000" 
                blurXFrom="10" blurXTo="0" blurYFrom="10" blurYTo="0" 
        /> 
         
        <mx:Image source="@Embed('images/logo.png')" 
                x="24" y="24" width="48" height="48" 
                rollOverEffect="{blurImage}" rollOutEffect="{unblurImage}" 
         /> 

</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        演示 对控件做alpha修改 的动画效果 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Effect - Dissolve (溶解, 变换 alpha 的效果)"> 
         
        <mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1" alphaTo="0" /> 
        <mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0" alphaTo="1" /> 
         
        <mx:Image source="@Embed('images/logo.png')" 
                x="24" y="24" width="48" height="48"     
                visible="{chk.selected}" hideEffect="{dissolveOut}" showEffect="{dissolveIn}" 
         /> 
            
         <mx:ControlBar horizontalAlign="center"> 
                 <mx:CheckBox id="chk" label="显示" selected="true"    
                         textRollOverColor="blue" 
                         textSelectedColor="red" 
                 /> 
         </mx:ControlBar> 
            
</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        演示 对控件做周边发光 的动画效果 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Effect - Glow (发光)"> 
         
        <mx:Glow id="glowImage" duration="1000" 
                alphaFrom="1" alphaTo="0.3" 
                blurXFrom="0" blurXTo="50" blurYFrom="0" blurYTo="50" 
                color="0x22aa55" 
        /> 
        <mx:Glow id="unglowImage" duration="1000" 
                alphaFrom="0.3" alphaTo="1" 
                blurXFrom="50" blurXTo="0" blurYFrom="50" blurYTo="0" 
                color="0x3388dd" 
        /> 
         
        <mx:Image source="@Embed('images/logo.png')" 
                x="24" y="24" width="48" height="48" 
                rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}" 
         /> 
            
</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        播放一段音频 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Effect - SoundEffect (音效)"> 
         
        <mx:SoundEffect id="soundEffect" source="@Embed('assets/bomb.mp3')" /> 
         
        <mx:Image source="@Embed('images/logo.png')" 
                x="24" y="24" width="48" height="48"     
                    mouseDownEffect="{soundEffect}" 
         /> 
         
</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        对各种 effect 做并行展示 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="Effect - Parallel (效果并行), AddItemAction, RemoveItemAction"> 
         
        <mx:Script> 
                <![CDATA[ 
                 
                        import mx.collections.ArrayCollection; 
                         
                        [Bindable] 
                        private var dp:ArrayCollection = new ArrayCollection(["webabcd", "webabcd", "webabcd"]) 
                         
                        private function addItem():void 
                        { 
                                dp.addItemAt("webabcd", dp.length); 
                        } 
                         
                        private function removeItem():void 
                        { 
                                dp.removeItemAt(dp.length - 1); 
                        } 
                         
                ]]> 
        </mx:Script> 
         
        <mx:Parallel id="parallel"> 
                <mx:AddItemAction filter="addItem" startDelay="500" /> 
                <mx:RemoveItemAction filter="removeItem" startDelay="500" /> 
                <mx:Blur startDelay="500" duration="1000" blurXFrom="0" blurXTo="10" blurYFrom="0" blurYTo="10" filter="addItem" /> 
        </mx:Parallel> 
         
        <mx:Label text="顺便说明 AddItemAction, RemoveItemAction"    x="10" y="10"/> 
         
        <mx:List id="list" dataProvider="{dp}" fontSize="16"    y="36" x="10" height="178" width="360" 
                itemsChangeEffect="{parallel}"/> 
            
         <mx:ControlBar horizontalAlign="center"> 
                 <mx:Button label="增加一项" click="addItem();" /> 
                 <mx:Button label="删除一项" click="removeItem();" /> 
         </mx:ControlBar> 
            
</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        对各种 effect 做串行展示 
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" width="400" height="300" 
        title="Effect - Sequence (效果串行), AnimateProperty, Pause"> 
         
        <mx:Label text="顺便说明 AnimateProperty, Pause"/> 
         
        <mx:Sequence id="sequence"> 
                 <mx:AnimateProperty property="scaleX" fromValue="1" toValue="3" duration="300" /> 
                 <mx:Pause duration="2000"/> 
                <mx:AnimateProperty property="scaleX" fromValue="3" toValue="1" duration="1000" />     
        </mx:Sequence> 
         
        <mx:Image source="@Embed('images/logo.png')" 
                width="48" height="48" 
                scaleX="1" scaleY="1" 
                mouseDownEffect="{sequence}" 
         /> 
            
</mx:Panel>

<?xml version="1.0" encoding="utf-8"?> 

<!-- 
        演示 TweenEffect （此类是大部分 effect 的基类）    
--> 

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" 
        title="TweenEffect 的介绍（它是部分 effect 的基类）"> 
         
        <mx:Script> 
                <![CDATA[ 
                 
                        import mx.events.TweenEvent; 
                         
                        private function tweenStartHandler(e:TweenEvent):void 
                        { 
                                txtMsg.text += "补间效果开始\r"; 
                        } 
                         
                        private function tweenEndHandler(e:TweenEvent):void 
                        { 
                                txtMsg.text += "补间效果结束\r"; 
                                lblUpdate.text = "宽度: " + image.width; 
                        } 
                         
                        private function tweenUpdateHandler(e:TweenEvent):void 
                        { 
                                lblUpdate.text = "宽度: " + image.width; 
                        } 
                         
                ]]> 
        </mx:Script> 
         
        <mx:Resize id="resizeUp" target="{image}" widthTo="180" heightTo="180" duration="5000" 
                tweenStart="tweenStartHandler(event)" 
                tweenEnd="tweenEndHandler(event)" 
                tweenUpdate="tweenUpdateHandler(event)" 
        /> 
        <mx:Resize id="resizeDown" target="{image}" widthTo="48" heightTo="48" /> 
         
        <mx:Image id="image" source="@Embed('images/logo.png')"    
                x="24" y="24" width="48" height="48" 
         /> 
        <mx:Text x="264" y="36" width="106" height="178" id="txtMsg"/> 
        <mx:Label x="264" y="10" id="lblUpdate"/> 
            
        <mx:ControlBar horizontalAlign="center"> 
                <mx:Button label="放大" click="resizeUp.end(); resizeUp.play();" /> 
                <mx:Button label="缩小" click="resizeDown.end(); resizeDown.play();" /> 
        </mx:ControlBar> 

</mx:Panel>