Transitions tips and trouble shooting in Flex 3, Take 1

Target all the possible nodes in a Transition top node (either a Parallel or a Sequence node) “targets” property.

Specify toState and fromState for the transition.

Specify filter for the transition.

If you want to have granular control as to how individual child components of a container are animated during a transition, add these components one by one using AddChild tags in a state tag. Read more about the approach (as in Type 2).

Tips to avoid flickering in transitions:

Use absolute layout (Canvas or Panel/Application with “absolute” layout) if you want use “overlapping actions” or “drag” in your animation. In a real world animation, a lot times you need to add new components before existing children are completely removed from the container (AddChild before RemoveChild happens in same container). If you are using relative layout for the container, Flex automatically updates layout as soon as any AddChild/AddRemoveChild takes place, which will cause flickering. For data effects, you can keep Flex from updating by using “UnconstrainItemAction“. For other effects, you either backup to linear fashion animation (don’t addChild until after all existing components are removed) or choose absolute layout.

Deferring removal of individual subcomponents towards later and remove them as a whole. (Applicable to Type 2 tags only). Canvas and Panel/Application with “absolute” layout are “absolute” containers; other containers perform “relative” layout, meaning they will redraw themselves on the update cycles, e.g., you are removing a component from them or resize an adjacent container. This sometimes will cause jumps in the transition. To avoid the jumpy moments, you can hide these individual components at the end of their transition process instead of removing them immediately from the Displaylist and wait until all the other subcomponents have finished transitions, then remove all these components as a whole.

Advertisements

5 Responses to “Transitions tips and trouble shooting in Flex 3, Take 1”

  1. Zach Says:

    I’ve experienced the flickering during overlapping canvas transitions and it drove me crazy trying to figure out what I was doing wrong. Thanks for the information.

  2. arjun Says:

    In my application I am adding resizing panel to the parentApplication on clicking maximize button if user clicks on minimize button iam adding resize panel back to parent from parentApplication
    I am adding resize and move effects for these two maximize and minimize processes its working fine but two issues
    1)these two effects playing only after adding child( resize panel ) back to parent from parentApplication

    but i need the effects to be played in the process of adding child

    my resizable panel work like this

    I have 5 canvases in in vbox in my page
    iam adding resizable panel to each canvas
    once user clicks it takes the size of enitre page and it should play front
    if user clicks minimize button it takes the original position, during this process iam adding child to parentApplication and remove child from parent. i want resize and move effect to be played while adding and removing child

  3. arjun Says:

    please help me ragarding this

    Thanks in advance
    I appreciate your help

  4. Gopi Chalasani Says:

    Arjun,
    I have a similar problem. Did u find any solution. I am trying to add a vbox as child. This vbox in turn has children which should be shown with some wipedown/wipeup effects. Any help is appreciated.

  5. Gopi Chalasani Says:

    Arjun,

    I have a similar problem. Did u find any solution. I am trying to add a vbox as child. This vbox in turn has children which should be shown with some wipedown/wipeup effects. Any help is appreciated.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: