Adding effects
Requirements
User level
All
Required products
- Flex (Download trial)
An effect is a change to a component that occurs over a brief period of time. Examples of effects are fading, resizing, and moving a component. An effect is combined with a trigger, such as a mouse click on a component, a component getting focus, or a component becoming visible, to form a behavior. In MXML, you apply effects as properties of a control or container. Adobe Flex provides a set of built-in effects with default properties.
This article covers:
Behaviors let you add animation, motion, and sound to your application in response to some user or programmatic action. For example, you can use behaviors to cause a dialog box to bounce slightly when it receives focus, or to play a sound when the user enters an invalid value.
Flex trigger properties are implemented as cascading style sheet (CSS) styles. In ActionScript 3 Reference for the Adobe Flash Platform, triggers for a component are listed under the heading Effects. For example, for the entry for a Button component, click the category Effects to view the triggers for a Button.
Creating zoom effects
To create a behavior, you define a specific effect with a unique ID and bind it to the trigger. For example, the following code creates two zoom effects: one for shrinking the component slightly, and one for reverting it to its original size. These effects are assigned, by using their unique IDs, to the mouseDownEffect and mouseUpEffect triggers on the Button component.
Click and hold the Button to view the full effect.
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- AddingEffects.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="170" height="140">
<s:layout>
<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="20" paddingBottom="20"/>
</s:layout>
<fx:Declarations>
<!-- Define effects -->
<mx:Zoom id="zoomIn" duration="500" zoomHeightTo=".9" zoomWidthTo=".9" />
<mx:Zoom id="zoomOut" duration="50" zoomHeightTo="1" zoomWidthTo="1" />
</fx:Declarations>
<s:Panel title="Bouncy Button" width="100%" height="100%">
<s:layout>
<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<!-- Assign effects to target -->
<s:Button
id="bouncyButton" label="Click me!"
mouseDownEffect="{zoomIn}" mouseUpEffect="{zoomOut}"/>
</s:Panel>
</s:Application>
Result
Using effect methods and events
You can call methods on effects to alter how they play back. For example, you can pause an effect by calling its pause() method and resume it by using its resume() method. You can end an effect by calling its end() method.
An effect also dispatches the startEffect and endEffect events when it starts and when it ends. You can listen for these events and respond to changes in the status of your events.
The following example uses the methods and events of the Move effect to create a simple game. The goal of the game is to get the helicopter as close to the dartboard as possible without hitting it. The closer you get, the more points you earn.
Note: The game uses movie clip symbols taken from the library of a SWF file to represent the dartboard, helicopter and explosion animations. Right-click on the example to download the source files, which includes the embedded assets. For more information on how this works, see Embedding Assets.
Example
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="525" height="450">
<fx:Declarations>
<!-- 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();"/>
</fx:Declarations>
<fx: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")]
[Bindable]
public var DartBoard:Class;
[Embed(source="../assets/library.swf", symbol="Helicopter")]
[Bindable]
public var Helicopter:Class;
[Embed(source="../assets/library.swf", symbol="Explosion")]
[Bindable]
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;
}
]]>
</fx:Script>
<s:Panel title="Effects Chopper Game" width="100%" height="100%">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
<s:controlBarContent>
<mx:Spacer width="100%"/>
<s:Button id="startButton" label="Start"
click="flyChopper.play(); startButton.enabled=false;"/>
<s:Button id="pauseButton" label="Pause" click="pauseChopperHandler();"/>
<s:Button id="resumeButton" label="Resume" click="resumeChopperHandler();"/>
<s:Button id="selfDestructButton" label="Self destruct!"
click="flyChopper.resume(); flyChopper.end();"/>
<s:Button label="Play again!" click="playAgainHandler();"/>
<mx:Spacer width="100%"/>
</s:controlBarContent>
<!-- 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 -->
<s:Label
width="100%" color="#ff0000"
text="Pause the helicopter as close as possible to the dartboard without hitting it."
textAlign="center" fontWeight="bold"/>
<s:HGroup>
<s:Label text="Score:" fontSize="18"/>
<s:Label id="score" text="0" fontSize="18"/>
</s:HGroup>
</s:Panel>
</s:Application>
Tip: If an effect is paused when you call its end() method, calling its pause() method will not have an effect when you play the same effect again. To work around this issue, call the resume() method on an effect before calling its end() method. In other words, don't end a paused effect before resuming it first.
Result
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
