0 Replies Latest reply on Feb 10, 2011 1:08 PM by thenewmexican62

    Problem with Transitions and custom components

    thenewmexican62 Level 1

      Browser: FireFox 3.6.13
      Flash Runtime: 10.1
      OS: OSX Snow Leopard
      Flex Builder/ActionScript 3

       


      I have a custom MXML component MyTestTestPanel.  I have defined states and transitions as shown below.
      I have a button that is pushed which changes the current view state of the MyTestPanel instance.
      On first push of the button, the MyTestPanel instance is correctly added to the the HBox container,
      However the resize doesn't happen smoothly,  the resize happens instantly.
      On subsequent pushes of the button, the Panel smoothly transitions during the resize.

      The interesting thing here is. If I remove the declaration of the HBox from the MyTestPanel definition.

      Everything works as expected.

       

      Huh ??
      Can someone point out what I'm doing wrong here ?
      Thanks.

       


      <?xml version="1.0" encoding="utf-8"?>
      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="dev.medigrids.*"  creationPolicy="all" creationComplete="initUsing(event)" borderThickness="1" borderStyle="solid" cornerRadius="7" borderColor="#160606" backgroundAlpha="0.1" backgroundColor="#23B3AB">
         
          <mx:Script>
         
              <![CDATA[
             
         
                  private function initUsing(event:Event):void {
                     
                  }
                 
             
             
                 
              ]]>
          </mx:Script>
         
          <mx:HBox x="5" y="5" width="500">
              <mx:Button label="1"/>
          </mx:HBox>
          -->
      </mx:Panel>

       

      //: End of MyTestPanel

       


      <!-- Define the transition to animate the change of view state. -->
          <mx:transitions>
             <mx:Transition>
                      <mx:Sequence target="{myHBox}">
                      <mx:Resize duration="500" easingFunction="{Linear.easeIn}"/>
                   
                  </mx:Sequence>
              </mx:Transition>
          </mx:transitions>

       

           <mx:states>
              <mx:State name="assigningProxies">
            
                  <mx:AddChild relativeTo="{myHBox}"
                      position="lastChild">
                
                        
         
                         <mgdev:MyTestPanel id="proxyAssignmentWS" height="400" width="625" x="5" y="5" layout="absolute"/>
                            
                                
                     
                  </mx:AddChild>  
                 
                 
                 
                  <mx:SetProperty target="{proxyAssignmentBtn}"
                      name="label" value="Close Proxy"/>           
                
                
              </mx:State>
             
               <mx:State name="doneAssigningProxies">
                   
                   <mx:RemoveChild target="{proxyAssignmentWS}"/>
                 
                          
                  <mx:SetProperty target="{proxyAssignmentBtn}"
                      name="label" value="Proxy Assignment"/>           
                 
                
              </mx:State>
             
             
             
             
             
             
          </mx:states>

       

          <mx:VBox id="mainVBox" >
              <mx:HBox id="myHBox" borderColor="white" borderStyle="solid" borderThickness="1">
                  <mx:Panel id="editorPanel" title="EDITOR" width="400" height="400">
                     
                  </mx:Panel>
                 
              </mx:HBox>
              <mx:Button label="Proxy Assignment" id="proxyAssignmentBtn" click="proxyAssignmentViewHandler(event)">
                 
              </mx:Button>
          </mx:VBox>