Introducing Behaviors and Transitions

Behaviors and transitions enable you to add animation and sound to objects in your Flex application.

Using Behaviors on Components

Behaviors are prebuilt animations and sounds that can be applied directly to components, including user-defined components. Transitions are simply effects that are applied to application states used within an application. Some examples of effects that can be applied to components or application states include the following:

  • Fading in/fading out

  • Dissolving in/dissolving out

  • Moving or resizing a component

  • Rotating a component

  • Zooming

  • Wiping left/right/up/down

  • Using other visual effects such as glow and iris

  • Using sound effects

Content is, of course, the most important part of the FlexGrocer application, and at first glance it may seem that adding animation is not necessary. However, animation can greatly enhance the user experience. In the current FlexGrocer application you have built to this point, many of the transitions between components and application states are not optimal and appear jerky and sudden. Animation in the FlexGrocer application will serve many useful purposes, including these:

  • Drawing the users' attention to items changing on the screen and giving visual cues about where their attention should be focused

  • Enhancing the user experience using movement and animation

  • Using effects to suggest to the user which elements of an application are interactive

When you click a grocery category in the FlexGrocer application, the appropriate component just appears. In this lesson, you will use a prebuilt fade-in effect to smooth out the display of the custom component and to draw the end users' attention to the right place.

When applied to components, behaviors have two parts:

  • Trigger An action such as a user clicking a button, a component coming into focus, or a component becoming visible

  • Effect A visible or audible change to the component that occurs over a period of time

Components have triggers, but they do not do anything until you associate them with an action. The trigger is not an event. A button has both a mouseDownEventEffect TRigger and a regular mouseDown event. The trigger itself is what causes the event to fire, whereas events specify a specific custom event handler that fires when the event occurs. When you use a mouseDownEventEffect trigger, you do not specify an event handler; you specify the behavior that you want to occur. It is possible to specify multiple effects when a trigger is fired. For example, when a user presses the mouse button, you could have a window resize and fade out. The triggers you can use with behaviors include the following:

  • focusInEffect

  • focusOutEffect

  • hideEffect

  • mouseDownEffect

  • mouseUpEffect

  • rolloutEffect

  • rolloverEffect

  • showEffect

To apply an effect to a component, you set the trigger name property equal to the name of the Effect class. You can declare only one effect when you define the trigger inline in the component, and you cannot customize the effect in any way. Here is an example of applying an effect to a List control when it is first displayed:

<mx:List  showEffect="Fade"/> 

If you want to customize the event, you can define a reusable tag and specify the available property, in this case duration, which instructs Flex to perform the effect over a duration of milliseconds, as follows:

<mx:Dissolve  duration="2000"/> 

You can then apply the customized effect to the targets by using data binding, as follows:

<mx:Button  mouseDownEffect="{myDissolve}"/> 

You can apply multiple effects (with the same trigger) to a component by using the <mx:Parallel> and the <mx:Sequence> tags. The <mx:Parallel> tag specifies that the effects will occur all at the same time, whereas the <mx:Sequentce> tag specifies that the events will occur in order. It is possible to nest <mx:Parallel> and <mx:Sequence> tags within one another to generate more complex animations. You will use these tags to build complex effects later in this lesson.

Using Transitions on View States

Transitions enable you to apply effects to view states, which then enable you to vary the content and appearance of a component in response to a user interaction. Transitions are great for creating much smoother changes between states. Transitions are different from behaviors; they apply to application states, whereas behaviors apply to components. You can apply one or more effects to one or more components in a view state, and you are not limited to the same effects when expanding or collapsing a state. The following properties are available in the Transition class:

  • fromState A string that specifies the view state you are changing from when you apply the transition.

  • toState A string that specifies the view state you are in when you apply the transition.

  • Effect The Effect object you want to play when you apply the transition. You can use an <mx:Parallel> tag or an <mx:Sequence> tag to define multiple effects.

To use transitions, you must surround one or more <mx:Transition> tags with an <mx:transitions> tag block, in lowercase. The reason for the case difference is that the <mx:transitions> tag represents a property of the Application, which can then contain one or more Transition objects.

<mx:transitions> <mx:Transition     fromState="state2" toState="state3">      <mx:Dissolve duration="800"/> </mx:Transition> <mx:Transition     fromState="*" toState="*"> [...] </mx:Transition> <mx:Transition     fromState="state1"    toState="state2"> [...] </mx:Transition> </mx:transitions> 

By using the <mx:transitions> tag, you can have multiple <mx:Transition> tags applied.

If you define multiple effects within a specific Transition object, you must use the <mx:Parallel> or <mx:Sequence> tags. You can use the targets property of the <mx:Parallel> or <mx:Sequence> tags to apply these effects to multiple components within a state. Parallel effects trigger at the same time, whereas sequence effects trigger in order. You can be more specific about which components you want the effect to apply to by using the targets property, as shown here:

<mx:transitions> <mx:Transition     fromState="state1    toState="state2">    <mx:Sequence targets="{[VBox1, VBox2, VBox3]}">      <mx:Move targets="{[VBox1, VBOX2]}"        duration="400" />      <mx:Dissolve duration="800"/>    </mx:Sequence> </mx:Transition> <mx:Transition     fromState="state2"    toState="state3">    [...] </mx:Transition> <mx:Transition     fromState="*"    toState="*">    <mx:Parallel targets="{[VBox1, VBox2, VBox3]}">       <mx:Iris duration="400" />       <mx:Move duration="400" />    </mx:Parallel> </mx:Transition> </mx:transitions> 

After you have set up the transition, you can trigger it by setting the currentState property in a click event. When a view state is triggered, Flex searches for and runs the Transition object that matches the current and destination view state. If more than one transition matches, Flex will use the first transition defined in the <mx:Transitions> tag.

Adobe Flex 2.Training from the Source
Adobe Flex 2: Training from the Source
ISBN: 032142316X
EAN: 2147483647
Year: 2006
Pages: 225 © 2008-2017.
If you may any questions please contact us: