Flex 2 Developer's Guide > Building User Interfaces for Flex Applications > Using Flex Visual Components > Using behaviors

Using behaviors

A behavior is a combination of a trigger paired with an effect. A trigger is an action similar to an event, such as a mouse click on a component, a component getting focus, or a component becoming visible. An effect is a visible or audible change to the component that occurs over a period of time, measured in milliseconds. Examples of effects are fading, resizing, or moving a component. You can define multiple effects for a single trigger.

Flex trigger properties are implemented as CSS styles. In Adobe Flex 2 Language Reference, Triggers are listed under the heading "Effects." Flex effects are classes, such as the mx.effects.Fade class.

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.

Because effect triggers are implemented as CSS styles, you can set the trigger properties as tag attributes in MXML, in <mx:Style> tags, or in ActionScript by using the setStyle function.

To create the behavior, you define a specific effect with a unique ID and bind it to the trigger. For example, the following code creates a fade effect named myFade and uses an MXML attribute to bind the effect to the creationCompleteEffect trigger of an Image control:

<?xml version="1.0"?>
<!-- components\CompIntroBehaviors.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="110" 
    height="100" 
    backgroundImage="">

    <mx:Fade id="myFade" duration="5000"/>
    <mx:Image 
        creationCompleteEffect="{myFade}"
        source="@Embed(source='assets/flexlogo.jpg')"/>
</mx:Application>

In this example, the Image control fades in over 5000 milliseconds. The following images show the fade in over the course of time:

For detailed information on using behaviors, see Using Behaviors.

Flex 2.01