1 Reply Latest reply on Sep 2, 2009 9:45 AM by Gregory Lafrance

    Understanding tweens, transitions, effects, triggers

    Marlene Level 1

      I have been doing a lot of reading and I suddenly find myself really confused. Can someone provide a relatively simple explanation of the differences between tweens, transitions and effects as they apply to flex.

        • 1. Re: Understanding tweens, transitions, effects, triggers
          Gregory Lafrance Level 6

          If this post answered your question or helped, please mark it as such.

           

          Details are below, but in summary:

           

          - effects are UI changes executing based on some trigger

          - one or more effects can be used to define a "transition", which is a change specifically between view states

          - transitions are just a way to organize effects for view states, you can use effects apart from transitions

          - most Flex effects using tweens to manage changing properties during effect execution

          - you can create new effects using tween classes

          - behaviors are just another way to speak about effects or transitions, you don't create behaviors, you just talk about them as a concept

          ------------------------------------------------------------------------------------------ --

          An effect is a visible or audible change to the target component that occurs over a period of time, measured in milliseconds. For example, you can use an efect to cause a dialog box to bounce slightly when it receives focus, or to slowly fade in when it becomes visible.

           

          So an effect is something the user "perceives" when a part of the UI "changes".

          ------------------------------------------------------------------------------------------ --

          Effects are executed using a "trigger" that specifies what UI change executes the effect. Examples are:

           

          addedEffect (execute the effect when a component is added to the display list)

          removedEffect (execute the effect when a component is removed from the display list)

          creationCompleteEffect (execute the effect when the application or component is done being created)

          focusInEffect (execute the effect when the component receives focus)

          focusOutEffect (execute the effect when the component loses focus)

          hideEffect (execute the effect when the component's "visible" property changes to "false".

          showEffect (execute the effect when  the component's "visible" property changes to "true".

          mouseDownEffect (execute the effect when the mouse button is clicked on a component.

          mouseUpEffect (execute the effect when the mouse button is released on a component.

          moveEffect (execute the effect when the component is moved.

          resizeEffect (execute the effect when the component is resized.

          rollOverEffect (execute the effect when the mouse pointer is moved over a component.

          rollOutEffect (execute the effect when the mouse pointer is moved away from a component.

          ------------------------------------------------------------------------------------------ --

          Behaviors are just another way about speaking of effects. You don't create a behavior, you just talk about it as a concept, so the UI "behaves" a certain way (one or more effects execute) when something in the UI changes (trigger).

          ------------------------------------------------------------------------------------------ --

          Transitions are something you create in Flex, using effects, that define how the UI changes when it moves between one or more view states. So when you think transitions, think view states.

          ------------------------------------------------------------------------------------------ --

          Most standard effects Flex provides use "tweening" to automatically manage the values of properties that change as the effect executes, "between" the start and end property values.

           

          You can create your own tween effects, so if you are using tweens, you are often basically creating a new type of effect.

          ------------------------------------------------------------------------------------------ --