现在的位置: 首页 > 综合 > 正文

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

2011年09月24日 ⁄ 综合 ⁄ 共 7687字 ⁄ 字号 评论关闭
[索引页]
[源码下载]

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

作者:webabcd

介绍
演示 Flex 3.0 中的各种动画效果(effect)的应用 

  • Zoom - 放大/缩小
  • Wipe - 从上/下/左/右 4 个方向 线性渐变地 对控件做 删除/显示
  • Rotate - 旋转
  • Resize - 调整控件大小
  • Fade - 淡入/淡出
  • Move - 改变控件位置
  • Iris - 显示/消失(放射性渐变)
  • Blur - 模糊
  • Dissolve - 对控件做alpha修改
  • Glow - 对控件做周边发光
  • SoundEffect - 播放一段音频
  • Parallel - 对各种 effect 做并行展示
  • Sequence - 对各种 effect 做串行展示
  • TweenEffect - 此类是大部分 effect 的基类

在线DEMO
http://www.cnblogs.com/webabcd/archive/2009/11/09/1598980.html

1、Zoom.mxml

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

2、Wipe.mxml

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

3、Rotate.mxml

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

4、Resize.mxml

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

5、Fade.mxml

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

6、Move.mxml

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

7、Iris.mxml

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

8、Blur.mxml

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

9、Dissolve.mxml

<?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 的效果)">
    

抱歉!评论已关闭.