Flex 3快速入门: 构建简单的用户界面 添加效果

本文来自：http://www.airia.cn/FLEX_Directory/adding_effects/

添加效果

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

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

Flex 触发器属性是作为层叠样式表 (CSS) 样式被实施的。

若要创建行为, 您定义一个具有唯一 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"
>
    <!-- Define effects -->
    <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">

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

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