8 Replies Latest reply on Oct 24, 2006 7:58 AM by cosmits

    how to sequence different panels to apear

    cosmits
      Hi all
      was wondering if anyone knows how to create a sequence of pannels
      apearing one after the other ?
      all i could find about sequences reffer to a sequense of effects applied to the same panel or other obj...
      there must be a way to do it

      cheers
      yariv
        • 2. Re: how to sequence different panels to apear
          dishmael Level 1
          Can you explain a little bit more about what you're trying to do?
          • 3. how to sequence different panels to apear
            cosmits Level 1
            hi thank you for your reply
            i'll try and make it simple
            say - a website
            three "pages" - three view states, with three buttons at the top to switch between the pages....
            on the stage - 1st page 2 panels
            2nd page - 3 panels - the same two change their siz, location & content, plus the third is apearing
            3rd page - one of the panels grow to take the whole of the stage, the other two are disapearing.
            the switch between the 3 suppose to happen smoothly
            and with a sequence. not a simultanious parallel effect, but one panel after the other, changing location, resizing, apearing & disapearing, and changing their content.
            if i could grasp this, i pretty much get a firm navigation knolage i can apply almost on any website or web application
            that is why it is so critical for me.
            all the examples i saw were reffering to a sequence of effects applied to the same object, when i tried experimenting (total improvisation) i got to a point where they are changing size & position one after the other, but not from their last coordinates.
            here is the code i used:

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
            <mx:states>
            <mx:State name="s1">
            <mx:SetProperty target="{p3}" name="y" value="307"/>
            <mx:SetProperty target="{p3}" name="height" value="155"/>
            <mx:SetProperty target="{p2}" name="width" value="101"/>
            <mx:SetProperty target="{p2}" name="x" value="443"/>
            <mx:SetProperty target="{p2}" name="height" value="240"/>
            <mx:SetProperty target="{p1}" name="width" value="399"/>
            <mx:SetProperty target="{p1}" name="height" value="240"/>
            </mx:State>
            <mx:State name="s2">
            <mx:SetProperty target="{p1}" name="width" value="514"/>
            <mx:SetProperty target="{p1}" name="height" value="119"/>
            <mx:SetProperty target="{p3}" name="width" value="256"/>
            <mx:SetProperty target="{p3}" name="height" value="235"/>
            <mx:SetProperty target="{p3}" name="x" value="294"/>
            <mx:SetProperty target="{p2}" name="x" value="36"/>
            <mx:SetProperty target="{p2}" name="y" value="186"/>
            <mx:SetProperty target="{p2}" name="height" value="235"/>
            <mx:SetProperty target="{p3}" name="y" value="186"/>
            </mx:State>
            </mx:states>

            <mx:transitions>
            <mx:Transition id="t1" fromState="*" toState="s1">
            <mx:Sequence targets="{[p1,p2,p3]}">
            <mx:Resize target="{p1}" duration="200"/>
            <mx:Resize target="{p2}" duration="200"/>
            <mx:Resize target="{p3}" duration="200"/>
            </mx:Sequence>
            </mx:Transition>
            <mx:Transition id="t2" fromState="*" toState="s2">
            <mx:Sequence targets="{[p1,p2,p3]}">
            <mx:Resize target="{p1}" duration="200"/>
            <mx:Resize target="{p2}" duration="200"/>
            <mx:Resize target="{p3}" duration="200"/>
            </mx:Sequence>
            </mx:Transition>
            <mx:Transition id="t3" fromState="*" toState="s3">
            <mx:Sequence targets="{[p1,p2,p3]}">
            <mx:Resize target="{p1}" duration="200"/>
            <mx:Resize target="{p2}" duration="200"/>
            <mx:Resize target="{p3}" duration="200"/>
            </mx:Sequence>
            </mx:Transition>
            </mx:transitions>

            <mx:LinkButton x="36" y="29" label="Base" click="this.currentState=''"/>
            <mx:LinkButton x="122" y="29" label="state 1" click="this.currentState='s1'"/>
            <mx:LinkButton x="220" y="29" label="state 2" click="this.currentState='s2'"/>

            <mx:Panel x="36" y="59" width="250" height="200" layout="absolute" id="p1"/>
            <mx:Panel x="294" y="59" width="250" height="200" layout="absolute" id="p2"/>
            <mx:Panel x="36" y="272" width="508" height="76" layout="absolute" id="p3"/>

            </mx:Application>

            • 4. Re: how to sequence different panels to apear
              cosmits Level 1
              ok ok ok
              i've improved my code
              now it works as long as the three panels are on the stage all along the three view states.
              now all i need help with is apearing and disapearing of new panels
              that is all.
              anyone ?

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
              <mx:states>
              <mx:State name="s1">
              <mx:SetProperty target="{p3}" name="y" value="307"/>
              <mx:SetProperty target="{p3}" name="height" value="155"/>
              <mx:SetProperty target="{p2}" name="width" value="101"/>
              <mx:SetProperty target="{p2}" name="x" value="443"/>
              <mx:SetProperty target="{p2}" name="height" value="240"/>
              <mx:SetProperty target="{p1}" name="width" value="399"/>
              <mx:SetProperty target="{p1}" name="height" value="240"/>
              </mx:State>
              <mx:State name="s2">
              <mx:SetProperty target="{p1}" name="width" value="514"/>
              <mx:SetProperty target="{p1}" name="height" value="119"/>
              <mx:SetProperty target="{p3}" name="width" value="256"/>
              <mx:SetProperty target="{p3}" name="height" value="235"/>
              <mx:SetProperty target="{p3}" name="x" value="294"/>
              <mx:SetProperty target="{p2}" name="x" value="36"/>
              <mx:SetProperty target="{p2}" name="y" value="186"/>
              <mx:SetProperty target="{p2}" name="height" value="235"/>
              <mx:SetProperty target="{p3}" name="y" value="186"/>
              </mx:State>
              </mx:states>

              <mx:transitions>
              <mx:Transition id="t1" fromState="*" toState="*">
              <mx:Sequence targets="{[p1,p2,p3]}">
              <mx:Parallel>
              <mx:Move target="{p1}" duration="200"/>
              <mx:Resize target="{p1}" duration="200"/>
              </mx:Parallel>
              <mx:Parallel>
              <mx:Move target="{p2}" duration="200"/>
              <mx:Resize target="{p2}" duration="200"/>
              </mx:Parallel>
              <mx:Parallel>
              <mx:Move target="{p3}" duration="200"/>
              <mx:Resize target="{p3}" duration="200"/>
              </mx:Parallel>
              </mx:Sequence>
              </mx:Transition>

              </mx:transitions>

              <mx:LinkButton x="36" y="29" label="Base" click="this.currentState=''"/>
              <mx:LinkButton x="122" y="29" label="state 1" click="this.currentState='s1'"/>
              <mx:LinkButton x="220" y="29" label="state 2" click="this.currentState='s2'"/>

              <mx:Panel x="36" y="59" width="250" height="200" layout="absolute" id="p1"/>
              <mx:Panel x="294" y="59" width="250" height="200" layout="absolute" id="p2"/>
              <mx:Panel x="36" y="272" width="508" height="76" layout="absolute" id="p3"/>

              </mx:Application>





              cheers :)
              Yariv
              • 5. Re: how to sequence different panels to apear
                cosmits Level 1
                by new panels i mean them to apear and disapear as a part of the sequence that rearrange the other panels, i mean, i can of course add another panel to one of the states and specify a 'showEffect' and a 'hideEffect' to smoothen his apearing and disapearing, but i need it to be a part of the sequence, so it would be coordinated with the rest of the panels....
                am i describing my problam clearly ?

                thank you for your time
                Yariv
                • 6. how to sequence different panels to apear
                  dishmael Level 1
                  If you want to remove a panel you can use this in your sequence:

                  <mx:RemoveChild target="{target}" />

                  You can also set properties to hide panels:

                  // Hide
                  <mx:SetProperty target="{target}" name="visible" value="false"/>

                  // Show
                  <mx:SetProperty target="{target}" name="visible" value="true"/>
                  • 7. how to sequence different panels to apear
                    dishmael Level 1
                    Also, you can create transitions for each state:

                    // Button 1
                    <mx:Transition id="t1" fromState="*" toState="s1">

                    // Button 2
                    <mx:Transition id="t2" fromState="s1" toState="s2">

                    // Button 3
                    <mx:Transition id="t3" fromState="s2" toState="*">
                    • 8. Re: how to sequence different panels to apear
                      cosmits Level 1
                      thanks david
                      i'll give it a go and update you
                      thanks again

                      Yariv
                      :)