Flex 3快速入门（9）: 构建简单的用户界面 添加效果
?
添加效果
效果是在较短时间上发生的对组件的更改。效果的例子有: 淡化组件、调整组件大小和移动组件。一种效果与一个触发器相结合才能形成一个行为, 如组件上的鼠标单击、组件获得焦点或组件变成可见的。 在 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>
结果
?
若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
?
?
?
?
使用效果方法和事件
您可以调用效果上的方法来改变它们播放的方式。 例如, 可以通过调用效果的 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
??????????????? // in paused state before it ends or calling
??????????????? // pause() on it later will not work.
??????????????? flyChopper.resume();
???????????????
??????????????? // End the effect
??????????????? flyChopper.end();
???????????????
??????????????? // Reset assets to their original states.
??????????????? helicopter.visible = true;
??????????????? explosion.visible = false;
??????????????? startButton.enabled = pauseButton.enabled =
??????????????????? resumeButton.enabled = selfDestructButton.enabled = true;
??????????? }???????????
??????????? private function pauseChopperHandler():void
??????????? {
??????????????? // Pause the Move effect on the helicopter.
?????????????????? flyChopper.pause();
??????????????????
?????????????????? // Calculate player's score based on the inverse of the
?????????????????? // distance between the helicopter and the dart board.
?????????????????? score.text = String(Math.round(1/(helicopter.x - dartBoard.x)*10000));
??????????????????
?????????????????? pauseButton.enabled = false;
?????????????????? resumeButton.enabled = true;
??????????? }???????????
??????????? private function resumeChopperHandler():void
??????????? {
??????????????? flyChopper.resume();
??????????????? resumeButton.enabled = false; pauseButton.enabled = true;
??????????? }??????? ]]>
??? </mx:Script>
???
??? <!-- Create a Move effect with a random duration between .5 and 1.5 seconds -->
??? <mx:Move
??????? id="flyChopper" target="{helicopter}"
??????? xBy="-290" easingFunction="mx.effects.easing.Quadratic.easeIn"??????? duration="{Math.round(Math.random()*1500+500)}"
??????? effectEnd="endEffectHandler();"
??? />???
??? <mx:Panel
??????? title="Effects Chopper Game" width="100%" height="100%"
??????? paddingTop="10" paddingLeft="10" paddingRight="10"
??????? paddingBottom="10" horizontalAlign="right"??? >
??????? <!-- The game canvas -->
??????? <mx:Canvas width="100%" height="100%">??????????? <mx:Image
??????????????? id="dartBoard" width="100" height="150.2"
??????????????? source="{DartBoard}" x="10" y="20"??????????? />
??????????? <!-- Hide the explosion animation initially. -->
??????????? <mx:Image
??????????????? id="explosion" source="{Explosion}"
??????????????? y="50" x="0" added="explosion.visible = false;"??????????? />???????????
??????????? <mx:Image
??????????????? id="helicopter" width="80" height="48.5"
??????????????? source="{Helicopter}" right="0" y="67"??????????? />
??????? </mx:Canvas>
??????? <!-- Instructions -->
??????? <mx:Text
??????????? width="100%" color="#ff0000"
??????????? text="Pause the helicopter as close as possible to the dartboard without hitting it."
??????????? textAlign="center" fontWeight="bold"??????? />
???????????
??????? <mx:HBox>
??????????? <mx:Label text="Score:" fontSize="18"/>
??????????? <mx:Label id="score" text="0" fontSize="18"/>???????
??????? </mx:HBox>????
??????? <mx:ControlBar horizontalAlign="right">
??????????? <mx:Button
??????????????? id="startButton" label="Start"
??????????????? click="flyChopper.play(); startButton.enabled=false;"??????????? />
??????????? <mx:Button id="pauseButton" label="Pause" click="pauseChopperHandler();"/>
??????????? <mx:Button id="resumeButton" label="Resume" click="resumeChopperHandler();"/>
??????????? <mx:Button
??????????????? id="selfDestructButton" label="Self destruct!"
??????????????? click="flyChopper.resume(); flyChopper.end();"??????????? />
??????????? <mx:Button label="Play again!" click="playAgainHandler();"/>??????? </mx:ControlBar>
??????
??? </mx:Panel>???
</mx:Application>
提示: 如果调用某个效果的 end() 方法时, 该效果被暂停, 则当您再次显示相同的效果时, 调用其 pause() 方法将不会有效果。 若要解决此问题, 请在调用其 end() 方法之前调用效果上的 resume() 方法。换句话说, 在首先继续暂停的效果之前, 不要结束它。
结果
?
若要查看全部源代码, 请右键单击 Flex 应用程序并从上下文菜单中选择“查看源代码”。
