如何使用Flex Effect

最新推荐文章于 2025-10-15 16:03:02 发布

最新推荐文章于 2025-10-15 16:03:02 发布 · 130 阅读

文章标签：

#Flex #XML

Flex Effects 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用Flex框架实现图片尺寸动态变化的例子。通过定义Resize效果，可以改变图像大小，并设置了开始、暂停、继续、反转及结束等控制按钮来操控效果。此外还提供了效果结束时的回调函数。

<?xml version="1.0"?>
<!-- Simple example to demonstrate the Effect class. -->
<!--
	如何使用Flex Effect
	MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            import mx.controls.Alert;

            // Event handler for the effectEnd event.            
            private function endEffectHandler():void {
                Alert.show("Effect Ended!");
            }

            // Event handler for the reset button.            
            private function resetHandler():void {
                expand.end(); 
                img.width=30; 
                img.height=60; 
                button1.enabled=true;
            }
        ]]>
    </mx:Script>


    <mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200" 
        duration="10000" effectEnd="endEffectHandler();"/>

    <mx:Panel title="Resize Effect Example" width="100%" height="100%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Text width="100%" color="blue" 
            text="Use the Button controls to control the Resize effect."/>

        <mx:Image id="img" width="30" height="60"
            source="@Embed(source='assets/Nokia_6630.png')"/>

        <mx:ControlBar>
            <mx:Button id="button1" label="Start" click="expand.play(); button1.enabled=false;"/>
            <mx:Button label="Pause" click="expand.pause();"/>
            <mx:Button label="Resume" click="expand.resume();"/>
            <mx:Button label="Reverse" click="expand.reverse();"/>
            <mx:Button label="End" click="expand.end();"/>
            <mx:Button label="Reset" click="resetHandler();"/>
        </mx:ControlBar>

    </mx:Panel>
</mx:Application>