flex4 - Flex 4 state transition Move effect in a VGroup -
i trying create nice state transition have 2 containers (in example below have used panels).
when state changes, want fade away upper panel, move lower panel top of screen, , below want fade in new 'lower' panel.
in code below, fades working fine, panel doesn't move top of box, goes it's new position without transition.
also 'reverse' transition doesn't happen @ all. tried set autoreverse true, , tried build opposite transition, both no result, there no transition.
when replace vgroup (in happens) vbox, better result, transition works in 1 way. reverse transition still doesn't work @ all.
<?xml version="1.0" encoding="utf-8"?>
<fx:script> <![cdata[ private function switchmode():void { if (currentstate == "up") currentstate = "down"; else currentstate = "up"; } ]]> </fx:script> <s:states> <s:state name="up" /> <s:state name="down" /> </s:states> <s:transitions> <s:transition fromstate="up" tostate="down"> <s:sequence> <s:fade target="{uppergrid}" /> <s:removeaction target="{uppergrid}" /> <s:move target="{panel1}" /> <s:addaction target="{lowergrid}" /> <s:fade target="{lowergrid}" /> </s:sequence> </s:transition> <s:transition fromstate="down" tostate="up"> <s:sequence> <s:fade target="{lowergrid}" /> <s:removeaction target="{lowergrid}" /> <s:move target="{panel1}" /> <s:addaction target="{uppergrid}" /> <s:fade target="{uppergrid}" /> </s:sequence> </s:transition> </s:transitions> <s:vgroup width="100%" height="100%" top="10" left="10" right="10" bottom="10"> <s:panel id="uppergrid" width="100%" height="100%" includein="up" title="upper panel" /> <s:panel id="panel1" width="100%" title="panel"> <s:button label="switch mode" click="switchmode()" /> </s:panel> <s:panel id="lowergrid" width="100%" height="100%" includein="down" title="lower panel" /> </s:vgroup>
when rid of vgroup or vbox, , use absolute positions, transitions work fine:
<s:panel id="uppergrid" left="10" right="10" top="10" bottom="{panel1.height + 20}" includein="up" title="upper panel" /> <s:panel id="panel1" left="10" right="10" top.up="{uppergrid.height + 20}" top.down="10" title="panel"> <s:button label="switch mode" click="switchmode()" /> </s:panel> <s:panel id="lowergrid" left="10" right="10" top="{panel1.height + 20}" bottom="10" includein="down" title="lower panel" />
should use absolute positioning if want these kind of moving transitions or possible use these transitions in vgroup or vbox combined includein , excludefrom properties? , if so, how correct in example above?
the problem you're using container meant 'layout' it's children. try create own layout know when it's children in effect , not touch them until they're done, or use absolutely positioned layout container (like group) instead.
Comments
Post a Comment