MENU - Flex Example: simple slide out menu using effects

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
3. <mx:Script>
4. <![CDATA[
5.  
6. [Bindable]
7. private var bPanelStartX:Number = 0;
8. private var bPanelEndX:Number = 0;
9.  
10. //set position values for back panel
11. private function init():void
12. {
13. bPanelStartX = frontPanel.x - 25;
14. bPanelEndX = frontPanel.x - 100;
15. }
16.  
17. public function movePanel():void
18. {
19. //set target of move transition
20. panelMover.target = backPanel;
21. //determine direction of panel based on position
22. if (backPanel.x == bPanelStartX) {
23. panelMover.xFrom = bPanelStartX;
24. panelMover.xTo = bPanelEndX;
25. } else {
26. panelMover.xFrom = bPanelEndX;
27. panelMover.xTo = bPanelStartX;
28. }
29. //play transition
30. panelMover.play();
31. }
32.  
33. ]]>
34. </mx:Script>
35.  
36. <mx:Canvas id="backPanel" width="250" height="250" x="{bPanelStartX}" verticalCenter="0" backgroundColor="#FFFF00" backgroundAlpha="1.0">
37. <mx:Button click="movePanel()" x="0" verticalCenter="0" width="25"/>
38. </mx:Canvas>
39.  
40. <mx:Canvas id="frontPanel" width="250" height="250" horizontalCenter="0" verticalCenter="0" backgroundColor="#FF0000" backgroundAlpha="1.0">
41. </mx:Canvas>
42.  
43. <mx:Move id="panelMover" />
44. </mx:Application>