110
Chapter 4: Building a Flex User Interface Visually
To add an effect to an MXML component:
1.
Select the component in Design view by clicking it on the page or on the tag selector at the
bottom of the Document window.
2.
Define a trigger for the effect by selecting a CSS property name for the trigger in the Attributes
panel of the Tag inspector (Window > Tag Inspector).
For example, to define a mouse-over trigger, select the
mouseOverEffect
property.
3.
Associate an effect with the trigger.
In the field next to the property name for the trigger, select an effect from the pop-up menu.
For example, for a Label component you could select WipeRight as the effect for the
showEffect
property. In a browser, the Label’s text will become visible as if it were being
“wiped” from left to right.
4.
If you select showEffect, hideEffect, moveEffect, or resizeEffect, and you specified an ID for the
component, a dialog box appears asking if you’d like help setting a trigger for this effect.
If you want the current component to trigger the effect, click No. If you want another
component to trigger the effect, click Yes. A dialog box appears to help you write and insert the
ActionScript function for triggering the effect from the other component. For more
information, see
“Triggering effects from other components” on page 110
.
Related topics
•
“About Flex effects” on page 109
•
“Customizing a standard Flex effect” on page 112
•
“Modifying a custom effect” on page 113
Triggering effects from other components
An effect can be triggered from another component. For example, a Label component can have a
WipeLeft effect that is triggered when the user clicks on a Button component.
Flex Builder can help you set up these interactive triggers for the following effect properties:
showEffect, hideEffect, moveEffect, and resizeEffect.
Summary of Contents for Flex Builder
Page 1: ...Using Flex Builder...
Page 116: ...116 Chapter 4 Building a Flex User Interface Visually...
Page 144: ...144 Chapter 6 Working with Data...
Page 154: ...154 Appendix A Basic Flex Concepts...