Flex 快速入门: 构建简单的用户界面--添加效果(1)

作者：佚名来源：互联网整理日期：2008-4-10

添加效果
效果是在较短时间上发生的对组件的更改。效果的例子有: 淡化组件、调整组件大小和移动组件。一种效果与一个触发器相结合才能形成一个行为, 如组件上的鼠标单击、组件获得焦点或组件变成可见的。在 MXML 中, 您将效果应用为控件或容器的属性。 Adobe® Flex™ 提供具有默认属性的一组内置效果。

作为对某些用户或编程操作的响应, 行为使您可以将动画、动作和声音添加到应用程序中。例如, 您可使用行为在获得焦点时弹出对话框, 或是在用户输入无效的值时发出声音。

Flex 触发器属性是作为层叠样式表 (CSS) 样式被实施的。在 Adobe Flex 2 语言参考中, 触发器被列出在标题“效果”的下面。

若要创建行为, 您定义一个具有唯一 ID 的特定效果并将它绑定到触发器。例如, 下面的代码创建两个缩放效果: 一个用于轻微缩小组件, 一个用于将组件还原至其原始大小。这些效果通过使用它们的唯一 ID 被分配到“按钮”组件上的 mouseDownEffect 和 mouseUpEffect 触发器上。

注意如何将 Panel 容器的 autoLayout 属性设置为 "false"。这样是为了阻止在按钮改变大小时面板改变大小。

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

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" width="170" height="140"
>
    
    <mx:Zoom id="shrink" duration="100" zoomHeightTo=".9" zoomWidthTo=".9" />

    <mx:Zoom id="revert" duration="50" zoomHeightTo="1" zoomWidthTo="1" />

    <mx:Panel
        title="Bouncy Button" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" autoLayout="false"
     left="41" top="24" right="42">

        
        <mx:Button
            id="bouncyButton" label="Click me!"
            mouseDownEffect="{shrink}" mouseUpEffect="{revert}"
        />

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

使用效果方法和事件您可以调用效果上的方法来改变它们播放的方式。例如, 可以通过调用效果的 pause() 方法来暂停效果, 并通过使用其 resume() 方法来继续该效果。可以通过调用效果的 end() 方法来结束该效果。

当效果开始和效果结束时, 它也会发出 startEffect 和 endEffect 事件。您可以监听这些事件并响应您的事件状态中的更改。

下面的示例使用“移动”效果的方法和事件来创建一个简单的游戏。该游戏的目标是使直升飞机尽可能接近靶而又不撞到它。靠得越近, 赢得的点数越多。

该游戏使用取自 SWF 文件库的电影剪辑符号来表示靶、直升飞机和爆炸动画。有关这如何工作的详细信息, 请参阅嵌入资源。

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

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" width="525" height="450"
     viewSourceURL="src/EffectsChopperGame/index.html"
>
    <mx:Script>

        <![CDATA[
            // Easing equations have to be explicitly imported.
            import mx.effects.easing.Quadratic;

            // Embed movie clip symbols from the library of a Flash SWF.

            [Embed(source="assets/library.swf", symbol="DartBoard")]

            public var DartBoard:Class;

            [Embed(source="assets/library.swf", symbol="Helicopter")]

            public var Helicopter:Class;

            [Embed(source="assets/library.swf", symbol="Explosion")]

            public var Explosion:Class;

            // Event handler for the effectEnd event.
            private function endEffectHandler():void
            {

                helicopter.visible = false;
                explosion.visible = true;
                score.text = "0";
                pauseButton.enabled = resumeButton.enabled =
                    selfDestructButton.enabled = false;
            }

            // Event handler for the "Play Again!" button.
            private function playAgainHandler():void
            {

                // Call resume() to make sure effect is not

[1] [2]

【相关文章】