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