Accessibility

Flex Quick Starts: Building a simple user interface

Table of contents

Adding effects

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.

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 Adobe Flex 3 Language Reference, triggers are listed under the heading "Effects."

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.

Notice how the autoLayout property of the Panel container is set to "false". This is to stop the panel from changing size when the button does.

Example

<?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>

Result

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

To view the full source, right-click the Flex application and select View Source from the context menu.

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.

info iconThe 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"?>

<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")]
            [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;
            }

        ]]>
    </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>

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

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

To view the full source, right-click the Flex application and select View Source from the context menu.

For more information

About the author

Aral Balkan acts and sings, leads development teams, designs user experiences, architects rich Internet applications, and runs OSFlash.org, the London Macromedia User Group, and his company, Ariaware. He loves talking design patterns and writing for books and magazines. He also authored Arp, the open-source RIA framework for the Flash platform. Aral is generally quite opinionated, animated, and passionate. He loves to smile, and can even chew gum and walk at the same time.

Next Steps

Overview
What is an RIA?
What is Flex?
Technology overviews
Development
Architecture
Components
Designer/developer workflow
Flex and Ajax
Flex and ColdFusion
Flex and Java
Flex and .NET
Flex and PHP
Testing, security, & deployment
UI design
Related Developer Centers
Adobe AIR
BlazeDS
Force.com Toolkit for Adobe AIR and Flex
ILOG Elixir for Adobe AIR and Flex
ActionScript
Flash
Related Resources
Flex support center
Flex bug base
Flex documentation
Adobe Labs
Article archive