2 Replies Latest reply on Dec 9, 2007 11:01 AM by cpsany

    Transition effect

    cpsany
      Hi

      I am trying to change the panel height by calling up a function , but i am not able to give the Transition effect. How can i implement that effect on the below code

      Plz giv me some ideas,
      Thanks
      Sany


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

      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*"
      creationComplete="initComp()" >

      <mx:Metadata>
      [DefaultProperty("subComponents")]
      [Event("minimized")]
      [Event("maximized")]
      [Event("normalized")]
      [Event("resized")]
      </mx:Metadata>

      <mx:states>
      <mx:State name="minimized">
      <mx:SetProperty name="height" value="30"/>
      <mx:SetStyle id="newID" name="icon" target="{minButton}" value="{ico}"/>

      </mx:State>
      <mx:State name="maximized">
      <mx:SetProperty name="height" value="{maxHeight}"/>
      </mx:State>
      <mx:State name="resized">
      <mx:SetProperty name="height" value="{maxHeight- 150}"/>
      </mx:State>

      </mx:states>

      <mx:transitions>
      <mx:Transition fromState="*" toState="*">
      <mx:Resize target="{this}" />
      </mx:Transition>
      </mx:transitions>

      <mx:Script>
      <![CDATA[
      [Embed(source='assets/img/ButtonUp_show.png')]
      private static const ico:Class;
      import mx.controls.Alert;

      // the title property
      private var _title:String;
      public function set title(t:String) : void
      {
      _title = t;
      }
      [Bindable]
      public function get title() : String
      {
      return _title;
      }

      // the subComponents property (default)
      private var _myChildren:Array;
      public function set subComponents(a:Array) : void
      {
      _myChildren = a;
      }
      public function get subComponents() : Array
      {
      return _myChildren;
      }

      private function addSubComponents() : void
      {
      if( _myChildren == null ) return;
      for(var i:int=0; i < _myChildren.length; i++) {
      panel.addChild( _myChildren );
      }
      }

      // the controlComponents property
      private var _myControlChildren:Array;
      public function set controlComponents(a:Array) : void
      {
      _myControlChildren = a;
      }
      public function get controlComponents() : Array
      {
      return _myControlChildren;
      }



      // display minimize button property
      [Bindable]
      public var showMinimize:Boolean = true;

      // display maximize button property
      [Bindable]
      public var showMaximize:Boolean = true;

      private function initComp() : void
      {
      if( !showMinimize ) minButton.width=0;

      }

      // minimizes (or restores) this control
      public function minimize(fireEvent:Boolean=true) : void
      {
      if( currentState == 'minimized' )
      {
      currentState = '';
      if( fireEvent ) dispatchEvent( new Event("normalized") );
      }
      else {
      currentState = 'minimized';
      if( fireEvent ) dispatchEvent( new Event("minimized") );
      }
      }
      private var count:Number = 0;
      // maximizes (or restores) this control
      public function maximize(fireEvent:Boolean=true) : void
      {

      if( currentState == 'maximized' ) {
      currentState = '';
      if( fireEvent ) dispatchEvent( new Event("normalized") );
      }
      else {
      currentState = 'maximized';
      if( fireEvent ) dispatchEvent( new Event("minimized") );
      }
      }
      public function resize(fireEvent:Boolean=true) : void
      {

      if( currentState == 'resized' ) {
      currentState = '';
      if( fireEvent ) dispatchEvent( new Event("normalized") );
      }
      else {
      currentState = 'maximized';
      if( fireEvent ) dispatchEvent( new Event("resized") );
      }
      }

      public function normalize(fireEvent:Boolean=true) : void
      {
      currentState = '';
      if( fireEvent ) dispatchEvent( new Event("normalized") );
      }
      ]]>
      </mx:Script>

      <mx:Panel id="panel" title="{title}"
      layout="absolute"
      left="0" top="0" bottom="0" right="0"
      creationComplete="addSubComponents();">

      </mx:Panel>


      <mx:HBox top="2" right="0" width="26">
      <mx:LinkButton top="4" right="40"
      id="minButton"
      icon="@Embed('assets/img/minimize_icon.gif')"
      visible="{showMinimize}"
      click="minimize()"/>
      </mx:HBox>

      </mx:Canvas>
        • 1. Re: Transition effect
          David_M.. Level 1
          Hi,

          Have you tried to set the property resizeEffect of the panel ?

          Like this:

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%" >

          <mx:VBox width="100%" height="100%">

          <mx:Panel id="panel" title="test" height="300" resizeEffect="Resize" >
          <mx:Button label="click me" click="{panel.height = (panel.height==300?500:300) }" />
          </mx:Panel>

          </mx:VBox>

          </mx:Application>
          • 2. Re: Transition effect
            cpsany Level 1
            wow the resizeEffect="Resize" is working fine even i use th function method, thanks a lot David , i ill back if i got ny problem , please fill thirst,

            Thanks once again David