apply animation to UI component via actionscript in flex issue - apache-flex

Question

Here is my entire application. Pretty easy stuff.
I have two panels that have a click event on them. However, both call the same function for some reason. When I have only one panel visible the animation works correctly. However if I add another to the stage on the click event both panels animate at the same time.
I just dont get what I'm doing wrong. My function is looking for only the current target but apparently I must not be doing that correctly because it's animating both panels and not just the panel the I clicked. My expected result is to animate only the clicked panel.
Any help would be really appreciated.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"
minHeight="600"
applicationComplete="application1_applicationCompleteHandler(event)"
left="20">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<!--<s:Sequence id="EffectsHide">-->
<!--<s:Rotate id="rotatein" target="{panel1}" angleBy="90"/>-->
<mx:Parallel id="EffectsHide">
<s:Rotate3D angleYFrom="0" angleYTo="360" duration="1000" />
<s:Resize id="shrink" duration="1000" heightBy="-170" />
<s:Move3D id="MoveIn" yBy="{_applicationHeighth-30}" duration="1000"/>
</mx:Parallel>
<!-- </s:Sequence>-->
<s:Sequence id="EffectsShow">
<s:Rotate id="rotateOut" target="{panel1}" angleBy="-90"/>
<s:Move id="MoveOUt" target="{panel1}" xBy="-30"/>
<s:Resize id="grow" target="{panel1}" duration="2000" widthBy="{_applicationWidth}" heightBy="{_applicationHeighth}"/>
</s:Sequence>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.effects.Effect;
import mx.effects.Parallel;
import mx.events.FlexEvent;
private var myParallel:Parallel = new Parallel();
private var myParallelReverse:Parallel = new Parallel();
[Bindable]
public var _applicationWidth:Number = new Number();
[Bindable]
public var _applicationHeighth:Number = new Number();
[Bindable]
public var Maximized :Boolean = true;
public var minimized :Boolean = false;
public function rotateTarget(event:Event):void{
//define the rotate effect
/*
var myRotated3d:Rotate3D= new Rotate3D(event.currentTarget);
myRotated3d.angleYFrom = 0;
myRotated3d.angleYTo=360;
myRotated3d.duration=1000;
*/
if(Maximized == true)
{
//EffectsHide.target(_target);
//EffectsHide.stop();
//EffectsHide.play();
//var myRotated3d:Rotate3D= new Rotate3D(event.currentTarget);
//myRotated3d.angleYFrom = 0;
//myRotated3d.angleYTo=360;
//myRotated3d.duration=1000
var myResize:Resize = new Resize(event.currentTarget);
myResize.heightBy = -160;
myResize.duration = 500;
var myMove3D:Move= new Move(event.currentTarget);
myMove3D.yTo=_applicationHeighth-30;
myMove3D.duration=500;
//myParallel.addChild(myRotated3d);
myParallel.addChild(myResize);
myParallel.addChild(myMove3D);
//this.invalidateDisplayList();
//this.validateNow();
//this.panel1.validateProperties();
minimized= true;
Maximized = false;
myParallel.stop();
myParallel.play();
trace('tried to run')
}
else if (Maximized == false){
trace(numElements)
//trace(getElementIndex(panel1));
//var myRotated3drever:Rotate3D= new Rotate3D(event.currentTarget);
//myRotated3drever.angleYFrom = 0;
//myRotated3drever.angleYTo=-360;
//myRotated3drever.duration=1000;
var myResizerever:Resize = new Resize(event.currentTarget);
myResizerever.heightTo= 200;
myResizerever.duration =500;
var myMove3Drever:Move = new Move(event.currentTarget);
myMove3Drever.yTo=(0);
myMove3Drever.duration=500;
myParallelReverse.addChild(myMove3Drever);
myParallelReverse.addChild(myResizerever);
//myParallelReverse.addChild(myRotated3drever);
myParallelReverse.play();
Maximized = true;
}
}
protected function application1_applicationCompleteHandler(event:FlexEvent):void
{
_applicationWidth = stage.width;
_applicationHeighth = stage.height;
}
protected function _butt_clickHandler(event:MouseEvent):void
{
trace(panel1.x);
trace(panel1.y);
trace(panel1.height);
}
]]>
</fx:Script>
enter code here
<mx:Canvas>
<mx:Panel id="panel1" title="Label1" x="400" y="0" width="200" height="200" click="rotateTarget(event)"/>
<mx:Panel id="panel2" title="Label2" x="0" y="0" width="200" height="200" click="rotateTarget(event)"/>
</mx:Canvas>
<!--<s:Panel id="panel2" y="240" title="Label2" width="200" height="200" click="rotateTarget(event)"/>
-->
<!--</s:VGroup>-->
<s:Button x="250" id="_butt" click="_butt_clickHandler(event)"/>
<s:Button x="250" y="20" id="_butt2" click="rotateTarget(event)"/>
</s:Application>

Answer 1

My two best guess without the full code (the bit with the panels):
You should be using event.target rather than event.currentTarget.
You bound the 'EffectsHide' (all IDs should be lowercase by the way) parallel directly to 'panel1' so whenever it gets plays that is the component it is going to target.
*I see now that you keep adding new animation effects created in the rotatetarget function to the parallel 'myParallel'. You do not however remove them at any given point so it just keeps on playing all the effects you ever added to it each time it get's played. You should just add them once on application setup and then just play them.