6 Replies Latest reply on Feb 16, 2007 5:51 AM by peterent

    Transitions Not Working...

    WestSide Level 1
      Hi,

      I have the following code. For some reason it just does not work, I do not get any errors, my app runs fine, but I do not see the "dissolve" between states.

      <mx:states>
      <mx:State name="detailStateA">
      <mx:AddChild relativeTo="{vs_ContactsA}" position="lastChild">
      <view:ContactProfile x="506" y="40" />
      </mx:AddChild>
      </mx:State>
      <mx:State name="detailStateB">
      <mx:AddChild relativeTo="{vs_FriendsB}" position="lastChild">
      <view:FriendProfile x="506" y="40" />
      </mx:AddChild>
      </mx:State>
      </mx:states>

      <mx:transitions>
      <mx:Transition id="my" fromState="*" toState="detailStateA">
      <mx:Dissolve duration="9000" />
      </mx:Transition>
      </mx:transitions>

      <view:aList id="listId" showDetailA="changeA( event )" showDetailB="contactB( event )" x="188.5" y="40"/>

      Any idea? I have a custom component shown right above that listens for two events like so, they each call a function that actually sets currentState=' to whatever';

      It seems like my transition code never gets executed.

      -Westside
        • 1. Re: Transitions Not Working...
          peterent Level 2
          Try this in your transition.

          <mx:Sequence>
          <mx:Dissolve duration="9000" />
          <mx:AddChildAction />
          </mx:Sequence>

          You may need to give the child an id and then add a target property to the AddChildAction.

          This forces the dissolve to happen and then the child to be added.
          • 2. Re: Transitions Not Working...
            WestSide Level 1
            Hi,

            Thanks for the response.

            I am little confused on how to implement:

            You may need to give the child an id and then add a target property to the AddChildAction.

            I am confused on the relationship between my view states and the "AddChildAction".

            -Westside
            • 3. Re: Transitions Not Working...
              phi2265 Level 1
              heres some of my code, this works...


              <mx:states>
              <mx:State name="gallerySelect">
              <mx:RemoveChild target="{galTl}"/>
              <mx:AddChild relativeTo="{gallery}" position="lastChild">
              <ns1:galSel2 width="100%" height="100%" data="{galTl.selectedItem}" id="galsel2">
              </ns1:galSel2>
              </mx:AddChild>
              <mx:AddChild relativeTo="{canvas1}" position="lastChild">
              <mx:LinkButton id="back" label="Back to Gallery" click="currentState=''" x="33" y="107" color="#000000" themeColor="#FFFFFF" width="98" height="15"/>
              </mx:AddChild>
              </mx:State>
              </mx:states>

              <mx:transitions>
              <mx:Transition id="toGallery" fromState="*" toState="gallerySelect">
              <mx:Sequence target="{gallery}">
              <mx:RemoveChildAction/>
              <mx:Dissolve target="{galsel2}" alphaFrom="0.1" alphaTo="1.0"/>
              <mx:AddChildAction/>
              </mx:Sequence>
              </mx:Transition>
              <mx:Transition id="toDefault" fromState="gallerySelect" toState="*">
              <mx:Sequence target="{gallery}">
              <mx:RemoveChildAction/>
              <mx:Dissolve target="{galTl}" alphaFrom="0.1" alphaTo="1.0"/>
              <mx:AddChildAction/>
              </mx:Sequence>
              </mx:Transition>
              </mx:transitions>

              "gallery" is a panel in which "canvas1" exists, which is replaced by "galsel2" in the state "gallerySelect"

              • 4. Re: Transitions Not Working...
                peterent Level 2
                Your transition is trying to fade out the current state when switching to the detailStateA state. I'm using your first post because it's easier to understand.

                Your state change, say from the base state to detailStateA, involves adding a child. What it appears that you want to do is make the base state fade out, then add the child. So Sequence is necessary to strictly control those steps. Without the Sequence, the state change happens all at once and the dissolve really has no effect.

                My statement was made because I didn't remember if AddChildAction required a target parameter; it does not. The AddChildAction in the transition says when ALL of the AddChild state changes are to take place. Likewise, there is a SetPropertyAction for property changes, although those do specify which properties.

                What I suggest you do is carefully map out what you want to happen, one state at a time. I can't tell you exactly what to do because I'm not sure what you really want to do. Just have patience.

                For a bit of advice, in general, when you want to use states with transitions, simpler is better. Sometimes it is better to have elements invisible and let the states make them visible rather than adding or removing them. That might not work for you in this case, but it is one technique that usually works pretty well.
                • 5. Re: Transitions Not Working...
                  WestSide Level 1
                  Hi,

                  Thanks for the help here.

                  What I want to happen is not have the base state fade or anything, but have the newly added child fade in or wipeRight or some other effect.

                  I have this <mx:Tree> on the left in my screen. When you click an item in the tree, I add a child as shown below. I want this child to fade in or whatever.

                  <mx:AddChild relativeTo="{vs_ContactsA}" position="lastChild">
                  <view:ContactProfile x="506" y="40" />
                  </mx:AddChild>

                  Regarding making things simple, I suppose I could make 2 views invisible by default and then show them by setting visible to true. I am willing to go that route if I can't get this to work.

                  -Westside

                  -Westside
                  • 6. Re: Transitions Not Working...
                    peterent Level 2
                    What you do then is make the new child, ContactProfile, have an alpha="0". Then have the transition be:

                    <mx:Sequence>
                    <mx:AddChildAction />
                    <mx:Dissolve alphaFrom="0" alphaTo="1" target="{contactProfile}" />
                    </mx:Sequence>

                    This will make sure the child is added, but not really visible, then dissolve it in. The Dissolve will change its alpha value from 0 to 1. If you don't put the alpha on the <ContactProfile> tag, you may see the child pop into view, then pop out as the Dissolve resets its alpha to 0.

                    Also, give your <ContactProfile> the id="contactProfile" as that's the target of the Dissolve as I've coded it here.

                    If Dissolve doesn't work, try Fade. You may also need to embed the fonts since any text may not be affected by the alpha change. But do that only if you have to.