Applying effects to Flex components
109
Applying effects to Flex components
You can add effects to components. For example, you can cause a TextInput component to
bounce slightly when it receives focus, or a Label component to fade in when the user passes the
mouse over it. This section describes how to add these kinds of effects.
This section covers the following topics:
•
“About Flex effects” on page 109
•
“Adding an effect to a component” on page 109
•
“Customizing a standard Flex effect” on page 112
•
“Modifying a custom effect” on page 113
About Flex effects
An effect is a visible or audible change to the component occurring over a period of time,
measured in milliseconds. Examples of effects are fading, resizing, or moving a component.
Effects are paired with triggers. A trigger is an action such as a mouse click, a component getting
focus, or a component becoming visible. Flex uses CSS to define triggers that you reference as a
property in an MXML tag or in an ActionScript function. The CSS property names of triggers
use the following convention:
trigger
Effect
where
trigger
is the trigger name. For example, the show trigger occurs when a component
becomes visible; the CSS property name for the show trigger is showEffect. The hide trigger
occurs when a component becomes invisible; its CSS property name is hideEffect.
Triggers are not ActionScript events. For example, a Button has both a mouseDownEffect trigger
and a mouseDown event. The trigger initiates a Flex effect. The event calls an ActionScript
function or object method.
Related topics
•
“Using Behaviors” in Developing Flex Applications Help
•
“Customizing a standard Flex effect” on page 112
•
“Modifying a custom effect” on page 113
Adding an effect to a component
You can use Flex Builder to visually add an effect to an MXML component.
Note:
Though you cannot visually add an effect to an ActionScript component, you can use Code
view to write the code that adds the effect. For more information, see “Applying an effect in
ActionScript” in Developing Flex Applications Help.
Summary of Contents for FLEX BUILDER-USING 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...
