3 Replies Latest reply on Oct 21, 2010 6:13 PM by Shongrunden

    States - Transition from named state to named state - Flex 4

    thx1138 Level 1

      I have an item render in a Spark List component that has 2 states. In the default state the item renderer is 150 px high. In the expanded state the item renderer is 350 px high.

       

      When I go from the default state to the expanded state the transition is not shown the first time. After I have expanded the row then the transition shows from both to and from normal to expanded states.

       

      Is there something I'm doing wrong? Do I need to setup another transition?

        • 1. Re: States - Transition from named state to named state - Flex 4
          Shongrunden Adobe Employee

          Do you happen to have allowMultipleSelection set to true?  If so it might be related to this bug: http://bugs.adobe.com/jira/browse/SDK-27711

          1 person found this helpful
          • 2. Re: States - Transition from named state to named state - Flex 4
            thx1138 Level 1

            That didn't seem to make a difference but I'm using Flex SDK 4.5 (17887). In the Transition I changed the fromState from "normal" to "*" and then it did work but slightly sluggishly. But I'm sure that's my code. I think it's creating the components in the selected state as it's running the transition.

             

            here's my code if you want to see my poor programming skills:

             

            <controls:List id="list"
                        bottom="27" left="0" right="0" top="54"
                        dataProvider="{dataProvider}" width="100%"
                        allowMultipleSelection="false"
                        itemRenderer="com.site.renderers.MyItemRenderer"
                        requireSelection="true" useVirtualLayout="false">
                    <controls:layout>
                        <s:VerticalLayout horizontalAlign="justify" gap="0"/>
                    </controls:layout>
            </controls:List>

             

            controls:List extends spark:List but scrolls the selected row into view.

             

             

            crappily coded transitions:

             

                <s:transitions>
                    <s:Transition autoReverse="true" fromState="*" toState="selected" effect="{toExpand}">
                    </s:Transition>
                    <s:Transition autoReverse="true" fromState="selected" toState="normal" effect="{toCollapsed}">
                    </s:Transition>
                </s:transitions>

             


                        <s:Sequence id="toExpand">
                            <s:Resize target="{this}"/>
                            <s:SetAction value="true" property="visible" target="{tileList}"/>
                            <s:Fade alphaFrom="0" alphaTo="1" duration="300" target="{tileList}"/>
                        </s:Sequence>

             

                        <s:Sequence id="toCollapsed">
                            <s:Fade alphaFrom="1" alphaTo="0" duration="300" target="{tileList}"/>
                            <s:Resize target="{this}"/>
                            <s:SetAction value="false"
                                         property="visible" target="{tileList}"/>
                        </s:Sequence>

             

            The transition starts with the row in the normal state at 50px height then expands to 250 px high in the expanded state. Once the row is expanded the components that are included in the selected state are faded in. However there is still some stutter going on the first time.

            • 3. Re: States - Transition from named state to named state - Flex 4
              Shongrunden Adobe Employee

              It might be because of having alphaFrom/alphaTo defined on your effects.  Try removing that and specifying the alpha values via states.

               

              See this post for an example: http://forums.adobe.com/message/2793282#2793282