User Guide

Defining a custom effect trigger 247
x="0" y="0" width="100" height="100"
click="currentState='One'" >
<mx:Label fontSize="24" text="One"/>
</mx:Panel>
<mx:Panel id="p2" title="Two"
x="0" y="110" width="100" height="100"
click="currentState='Two'" >
<mx:Label fontSize="24" text="Two"/>
</mx:Panel>
<mx:Panel id="p3" title="Three"
x="110" y="0" width="200" height="210"
click="currentState=''" >
<mx:Label fontSize="24" text="Three"/>
</mx:Panel>
</mx:Canvas>
</mx:Application>
Defining a custom effect trigger
You can create a custom effect trigger to handle situations for which the standard Flex triggers
do not meet your needs. An effect trigger is paired with a corresponding event that invokes
the trigger. For example, a Button control has a
mouseDown event and a mouseDownEffect
trigger. The event initiates the corresponding effect trigger when a user clicks a component.
You use the
mouseDown event to specify the event listener that executes when the user selects
the component. You use the
mouseDownEffect trigger to associate an effect with the trigger.
Suppose that you want to apply an effect that sets the brightness level of a component when a
user action occurs. The following example shows a custom Button control that uses a new
property,
bright, and dispatches two new events, darken and brighten, based on changes to
the
bright property. The control also defines two new effect triggers, darkenEffect and
brightenEffect, which are paired with the darken event and the brighten event.
<?xml version="1.0"?>
<!-- effects\myComponents\MyButton.mxml -->
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Metadata>
<!-- Define the metadata for the events and effect triggers. -->
[Event(name="darken", type="flash.events.Event")]
[Event(name="brighten", type="flash.events.Event")]
[Effect(name="darkenEffect", event="darken")]
[Effect(name="brightenEffect", event="brighten")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import flash.events.Event;