Frustrated Animation Issue - apache-flex

Question

I have spent 2 hours on this simple state to state transition with simply resize and move animation.... I can get the element to move and fade...but there is no resize animation at all. The panel element stay the same width whole time. If I copy the code to a brand new test mxml file, it works, but not in my main application file...I was wondering if someone here can help me out. Thanks a lot.
//This is a custom component inside the main application...Not sure if it relates to my issue.....
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="1000" height="600" xmlns:getcomplist="services.getcomplist.*" xmlns:components="components.*"
currentState="defaultState">
<fx:Script>
<![CDATA[
protected function compList_changeHandler(event:IndexChangeEvent):void
{
currentState="whenClick";
}
]]>
</fx:Script>
<mx:states>
<s:State name="defaultState"/>
<s:State name="whenClick" />
</mx:states>
<mx:transitions>
<s:Transition toState="whenClick">
<s:Parallel target="{animationIsAnnoying}">
<!--<s:Fade duration="1000"/>--> // Fade is working fine...
<s:Resize heightFrom="600" duration="5000" /> //resize is not working
<s:Move xFrom="500" duration="5000" /> //Move is working fine
</s:Parallel>
</s:Transition>
</mx:transitions>
<s:HGroup>
<s:List id="compList"
width="280"
height="500"
change="compList_changeHandler(event)">
</s:List>
<s:Panel id="animationIsAnnoying" height="150" includeIn="whenClick" /> //The panel I want to animated...
<components:compDisplayDetail includeIn="whenClick" id="compDisplay" width="600" height="500" userPic="{userPicResult.lastResult}" dataFromClick ="{compDetailinfoResult.lastResult}" />
</s:HGroup>
</mx:Canvas>

Answer 1

You must have a click event to command the resize component
im using here mx:Resize component
<mx:Resize id="resizeThis" target="{toolBoxContainer}"/>
<mx:VBox id="toolBoxContainer" height="200" width="300" >
<mx:Textid="txt" text="HELLO"/>
</mx:VBox>
<mx:Button id="menuImage"toolTip="Show/Hidden Menu" click="menuClickHandler(event)" toggle="true"/>
<mx:Script>
<![CDATA[
private var toggle:int =1;
private function menuClickHandler(e:MouseEvent):void {
if(toggle == 0 ) {
//MoveThis.end();
resizeThis.widthFrom = 0
resizeThis.widthTo = 46;
resizeThis.play();
}
if(toggle == 1) {
resizeThis.end();
resizeThis.widthFrom = 46
resizeThis.widthTo = 0;
resizeThis.play();
}
if(toggle == 0) toggle = 1;
else toggle = 0;
}
]]>
</mx:Script>
This thing has errors in imports or the likes.. but i assume you got my point..