<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script>
<![CDATA[
import mx.effects.easing.*; private function filterWiderThan100(propChanges:Array, instanceTarget:Object):Boolean
{
var n:int = propChanges.length; for (var i:int=0; i < n; i++)
{
if (propChanges[i].target == instanceTarget)
{
if (propChanges[i].end["width"] != undefined)
{
return (propChanges[i].end.width > 100);
}
}
} return false;
} private function filterOthers(propChanges:Array, instanceTarget:Object):Boolean
{
return !filterWiderThan100(propChanges, instanceTarget);
} ]]>
</mx:Script> <mx:states> <mx:State name="One">
<mx:SetProperty target="{cd828_panel}" name="x" value="110" />
<mx:SetProperty target="{cd828_panel}" name="y" value="0" />
<mx:SetProperty target="{cd828_panel}" name="width" value="500" />
<mx:SetProperty target="{cd828_panel}" name="height" value="210" />
<mx:SetProperty target="{talby_panel}" name="x" value="0" />
<mx:SetProperty target="{talby_panel}" name="y" value="0" />
<mx:SetProperty target="{talby_panel}" name="width" value="100" />
<mx:SetProperty target="{talby_panel}" name="height" value="100" />
<mx:SetProperty target="{sony_panel}" name="x" value="0" />
<mx:SetProperty target="{sony_panel}" name="y" value="110" />
<mx:SetProperty target="{sony_panel}" name="width" value="100" />
<mx:SetProperty target="{sony_panel}" name="height" value="100" />
</mx:State> <mx:State name="Two">
<mx:SetProperty target="{talby_panel}" name="x" value="110" />
<mx:SetProperty target="{talby_panel}" name="y" value="0" />
<mx:SetProperty target="{talby_panel}" name="width" value="500" />
<mx:SetProperty target="{talby_panel}" name="height" value="210" />
<mx:SetProperty target="{sony_panel}" name="x" value="0" />
<mx:SetProperty target="{sony_panel}" name="y" value="110" />
<mx:SetProperty target="{sony_panel}" name="width" value="100" />
<mx:SetProperty target="{sony_panel}" name="height" value="100" />
</mx:State> </mx:states> <mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Sequence id="t1" targets="{[cd828_panel,talby_panel,sony_panel]}">
<mx:Parallel>
<!-- The first Move/Resize is applied to objects being resized
larger than 100 pixels -->
<mx:Parallel>
<mx:customFilter>
<mx:EffectTargetFilter filterFunction="filterWiderThan100"
filterProperties="['width']" />
</mx:customFilter>
<mx:Move easingFunction="Back.easeIn" />
<mx:Resize easingFunction="Back.easeIn" />
</mx:Parallel>
<!-- The second Move/Resize is applied to all other targets -->
<mx:Parallel>
<mx:customFilter>
<mx:EffectTargetFilter filterFunction="filterOthers"
filterProperties="['width']" />
</mx:customFilter>
<mx:Move />
<mx:Resize />
</mx:Parallel>
</mx:Parallel>
</mx:Sequence>
</mx:Transition>
</mx:transitions> <mx:Canvas id="pm" width="100%" height="100%">
<mx:Panel id="cd828_panel" title="CD 828" x="0" y="0" width="100" height="100"
click="currentState='One'" >
<mx:Image width="100%" horizontalAlign="center" height="100%"
source="../assets/products/CD_828.png" />
</mx:Panel>
<mx:Panel id="talby_panel" title="Talby" x="0" y="110" width="100" height="100"
click="currentState='Two'" >
<mx:Image width="100%" height="100%" horizontalAlign="center"
source="../assets/products/Talby.png" />
</mx:Panel>
<mx:Panel id="sony_panel" title="Sony P900" x="110" y="0" width="500" height="210"
click="currentState=''" >
<mx:Image width="100%" height="100%" horizontalAlign="center"
source="../assets/products/Sony_p900.png" />
</mx:Panel>
</mx:Canvas> </mx:Application>
| 
