Behaviors and transitions enable you to add animation and sound to objects in your Flex application. Using Behaviors on ComponentsBehaviors 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:
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:
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:
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:
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 StatesTransitions 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:
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. |