transition effect if chage from function

[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[i] );
}
}

// 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>