Databases
StackOverflow2013
Postsdbo
POFlex 4 state transition Move effect in a VGroup
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFlex 4 state transition Move effect in a VGroup
    primarykey
    data
    text
    <p>I am trying to create a nice state transition where I have 2 containers (in the example below I have used panels).</p> <p>When the state changes, I want to fade away the upper panel, then move the lower panel to the top of the screen, and below that I want to fade in a new 'lower' panel.</p> <p>In the code below, the fades are working fine, but the panel doesn't move to the top of the box, it just goes to it's new position without a transition.</p> <p>Also the 'reverse' transition doesn't happen at all. I tried to set autoReverse to true, and I also tried to build an opposite transition, both no result, there was no transition.</p> <p>When I replace the VGroup (in which it all happens) for VBox, I get a slightly better result, the transition works in one way. The reverse transition still doesn't work at all.</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; </code></pre> <p></p> <pre><code>&lt;fx:Script&gt; &lt;![CDATA[ private function switchMode():void { if (currentState == "up") currentState = "down"; else currentState = "up"; } ]]&gt; &lt;/fx:Script&gt; &lt;s:states&gt; &lt;s:State name="up" /&gt; &lt;s:State name="down" /&gt; &lt;/s:states&gt; &lt;s:transitions&gt; &lt;s:Transition fromState="up" toState="down"&gt; &lt;s:Sequence&gt; &lt;s:Fade target="{upperGrid}" /&gt; &lt;s:RemoveAction target="{upperGrid}" /&gt; &lt;s:Move target="{panel1}" /&gt; &lt;s:AddAction target="{lowerGrid}" /&gt; &lt;s:Fade target="{lowerGrid}" /&gt; &lt;/s:Sequence&gt; &lt;/s:Transition&gt; &lt;s:Transition fromState="down" toState="up"&gt; &lt;s:Sequence&gt; &lt;s:Fade target="{lowerGrid}" /&gt; &lt;s:RemoveAction target="{lowerGrid}" /&gt; &lt;s:Move target="{panel1}" /&gt; &lt;s:AddAction target="{upperGrid}" /&gt; &lt;s:Fade target="{upperGrid}" /&gt; &lt;/s:Sequence&gt; &lt;/s:Transition&gt; &lt;/s:transitions&gt; &lt;s:VGroup width="100%" height="100%" top="10" left="10" right="10" bottom="10"&gt; &lt;s:Panel id="upperGrid" width="100%" height="100%" includeIn="up" title="upper panel" /&gt; &lt;s:Panel id="panel1" width="100%" title="Panel"&gt; &lt;s:Button label="Switch mode" click="switchMode()" /&gt; &lt;/s:Panel&gt; &lt;s:Panel id="lowerGrid" width="100%" height="100%" includeIn="down" title="lower panel" /&gt; &lt;/s:VGroup&gt; </code></pre> <p></p> <p>When I get rid of the VGroup or VBox, and use absolute positions, the transitions work fine:</p> <pre><code>&lt;s:Panel id="upperGrid" left="10" right="10" top="10" bottom="{panel1.height + 20}" includeIn="up" title="upper panel" /&gt; &lt;s:Panel id="panel1" left="10" right="10" top.up="{upperGrid.height + 20}" top.down="10" title="Panel"&gt; &lt;s:Button label="Switch mode" click="switchMode()" /&gt; &lt;/s:Panel&gt; &lt;s:Panel id="lowerGrid" left="10" right="10" top="{panel1.height + 20}" bottom="10" includeIn="down" title="lower panel" /&gt; </code></pre> <p>Should you always use absolute positioning if you want these kind of moving transitions or is it possible to use these transitions in a VGroup or VBox combined with includeIn and excludeFrom properties? And if so, how could I correct that in the example above?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBocaxica
    1. USBocaxica
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POFlex 4 state transition Move effect in a VGroup
      1. USbabyphenix
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload