1 Reply Latest reply on Aug 25, 2007 5:26 AM by peterent

    transition for custom component

    vtxr1300 Level 1
      I'm trying to create a transition for a component but I can't get it to work. I can change the state from the container mxml application but when the state changes it doesn't run the transition. Any idea why? Thanks.

      <?xml version="1.0" encoding="utf-8"?>

      <mx:transitions xmlns:mx=" http://www.adobe.com/2006/mxml">
      <mx:Transition fromState="*" toState="*">
      <mx:Parallel target="{lstRelatedTopics}">
      <mx:WipeDown duration="2000"/>
      <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="250"/>
      </mx:Parallel>
      </mx:Transition>
      </mx:transitions>

      <mx:Script>
      <![CDATA[
      import mx.effects.Dissolve;
      import mx.effects.WipeDown;
      ]]>
      </mx:Script>

      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="270" height="118">
      <mx:states>
      <mx:State name="OpenList">
      <mx:SetProperty target="{lstRelatedTopics}" name="height" value="100"/>
      <mx:SetProperty target="{lstRelatedTopics}" name="alpha" value="1.0"/>
      </mx:State>
      </mx:states>
      <mx:List x="0" y="17" width="100%" height="0" id="lstRelatedTopics" alpha=".0"></mx:List>
      <mx:Label x="0" y="0" text="Related Videos"/>

      </mx:Canvas>
        • 1. Re: transition for custom component
          peterent Level 2
          Without running your code I can't be 100% sure, so here's my guess. The base state has your List with height="0" and the OpenList state has the List with height="100". There isn't anything in your transition which affects the change of height - the WipeDown nor the Dissolve will do that. Substitute Resize for WipeDown.

          Also, I feel that using the Dissolve + changing the alpha property are too redundant. Set the alpha property of the List in the base state to 0 and set the alpha to 1 in the OpenList state. Let the Dissolve do the rest.

          I think you can write your transition as simply as:

          <mx:Parallel target="{isRelatedTopics}">
          <mx:Resize />
          <mx:Dissolve />
          </mx:Parallel>

          The effects should be able to read the before and after property values to determine the size and alpha values, respectively.