In MXML, you use a trigger name as a property of a component's MXML tag to configure an effect for the component. For example, to configure a Button control to use the WipeLeft effect when the user clicks the control, you use the mouseDownEffect trigger property in an <mx:Button> tag, as the following example shows:

<?xml version="1.0"?>
<!-- behaviors\ButtonWL.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Define effect. -->
    <mx:WipeLeft id="myWL" duration="1000"/>

    <!-- Assign effect to targets. -->
    <mx:Button id="myButton" label="Click Me" mouseDownEffect="{myWL}"/>
    <mx:Button id="myOtherButton" label="Click Me" mouseDownEffect="{myWL}"/>

</mx:Application>
The executing SWF file for the previous example is shown below:

In the next example, you create two Resize effects for a Button control. One Resize effect expands the size of the button by 10 pixels when the user clicks down on the button, and the second resizes it back to its original size when the user releases the mouse button. The duration of each effect is 200 ms.

<?xml version="1.0"?>
<!-- behaviors\ButtonResize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <mx:Resize id="myResizeUp" 
        widthBy="50" heightBy="50" 
        duration="200"
    />
    
    <mx:Resize id="myResizeDown" 
        widthBy="-50" heightBy="-50" 
        duration="200"
    />
    
    <mx:Button id="myButton" 
        label="Click Me"
        mouseDownEffect="{myResizeUp}" 
        mouseUpEffect="{myResizeDown}"
    />
    
</mx:Application>
The executing SWF file for the previous example is shown below:

Applying behaviors in MXML using data binding

You can use data binding in MXML to set properties of an effect. For example, the following example lets the user set the zoomHeightTo and zoomWidthTo properties of the Zoom effect using a TextInput control. The zoomHeightTo and zoomWidthTo properties specify a number that represents the scale at which to complete the zoom, as a value between 0.0 and 1.0. The default value is 1.0, which is the object's normal size.

<?xml version="1.0"?>
<!-- behaviors\DatabindingEffects.mxml  -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <mx:Zoom id="mZoom" 
        zoomHeightTo="{Number(zoomHeightInput.text)}" 
        zoomWidthTo="{Number(zoomWidthInput.text)}"
    />
        
    <mx:Form>
        <mx:FormItem label="Zoom Height:">
            <mx:TextInput id="zoomHeightInput" text="1.0" width="30"/>          
        </mx:FormItem>
        <mx:FormItem label="Zoom Width:">
            <mx:TextInput id="zoomWidthInput" text="1.0" width="30"/>
        </mx:FormItem>
    </mx:Form>

    <mx:Button label="Mouse Over Me" rollOverEffect="{mZoom}"/>

</mx:Application>
The executing SWF file for the previous example is shown below:

By default, the text property of the TextInput controls is set to 1.0. The user can edit the TextInput controls to specify a different zoom value.

Applying behaviors in MXML using styles

All MXML properties corresponding to effect triggers are implemented as CSS styles. Therefore, you can also apply an effect using the <mx:Style> tag. For example, to set the mouseDownEffect property for all TextArea controls in an application, you can use a CSS type selector, as the following example shows:

<?xml version="1.0"?>
<!-- behaviors\MxmlTypeSel.mxml-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        TextArea { mouseDownEffect: slowWipe; }
    </mx:Style>

    <mx:WipeLeft id="slowWipe" duration="5000"/>

    <mx:TextArea id="myTA" 
        text="This TextArea slowly wipes in."
    />

    <mx:TextArea id="myTA2" 
        text="This TextArea control has no effect." 
        mouseDownEffect="none"
    />

</mx:Application>
The executing SWF file for the previous example is shown below:

Setting the mouseDownEffect property in a component tag overrides any settings that you make in an <mx:Style> tag. If you want to remove the associated effect defined in a type selector, you can explicitly set the value of any trigger to none, as the following example shows:

<mx:TextArea id="myTA" mouseDownEffect="none"/>

You can also use a class selector to apply effects, as the following example shows:

<?xml version="1.0"?>
<!-- behaviors\ButtonWLClassSel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <!-- Define a class selector for a TextArea control -->
    <mx:Style>
        .textAreaStyle { mouseDownEffect: WipeLeft; } 
    </mx:Style>

    <mx:WipeLeft id="slowWipe" duration="5000"/>
    <mx:TextArea id="myTA" 
        styleName="textAreaStyle" 
        text="This TextArea control quickly wipes in."
    />

</mx:Application>
The executing SWF file for the previous example is shown below:

Using setStyle() and getStyle() with behaviors defined in MXML

Trigger properties are implemented as styles; therefore, you can use the setStyle() and getStyle() methods to manipulate triggers and their associated effects. The setStyle() method has the following signature:

setStyle("trigger_name", effect) 

trigger_name 

String indicating the name of the trigger property; for example, mouseDownEffect or focusInEffect.

effect 

The effect associated with the trigger. The data type of effect is an Effect object, or an object of a subclass of the Effect class.

The getStyle() method has the following signature:

getStyle("trigger_name"):return_type 

trigger_name 

String indicating the name of the trigger property.

return_type 

An Effect object, or an object of a subclass of the Effect class.

The following scenarios show how to use getStyle() with behaviors defined in MXML:

When you use MXML tag properties or the <mx:Style> tag to apply effects to a target, getStyle() returns an Effect object. The type of the object depends on the type of the effect that you specified, as the following example shows:

<?xml version="1.0"?>
<!-- behaviors\ButtonWLGetStyleMXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script>
        <![CDATA[
            private function displayStyle():void {
                var s:String = String(myB.getStyle('mouseDownEffect').duration)
                myTA.text = "mouseDownEffect duration: " + s;
            }
            
            private function changeStyle(n:Number):void {
                myB.getStyle('mouseDownEffect').duration = n;
            }
        ]]>
    </mx:Script>
    
    <!-- Set the behavior in MXML. -->
    <mx:WipeLeft id="slowWipe" duration="5000"/>
    <mx:Button id="myB" label="Click Me" mouseDownEffect="{slowWipe}"/>

    <mx:TextArea id="myTA" width="200"/>
    
    <!-- Call getStyle() to return an object of type WipeLeft. -->
    <mx:HBox>
        <mx:Button label="Get Style" click="displayStyle();"/>
        <mx:Button label="Change Style" click="changeStyle(1000);"/>
        <mx:Button label="Reset" click="changeStyle(5000);"/>
    </mx:HBox>

</mx:Application>
The executing SWF file for the previous example is shown below:

For more information on working with styles, see Using Styles and Themes.