In the older flash, or during the AS2 era, there's a onReleaseOutside that allows you to click on a button and release it outside. However, in AS3, one could easily find MouseEvents like MOUSE_DOWN, MOUSE_UP, CLICK, etc... but there isn't a RELEASE_OUTSIDE action, so how do work around it?
Time for some source files - SimpleMouseReleaseOutside.mxml<?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" creationComplete="creationCompleteEvent(event)"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; //Upon creation complete, setup the button event of the button //and setup the check box protected function creationCompleteEvent(event:FlexEvent):void { btn1.buttonMode = true; btn1.label = "Select Me Please"; btn1.addEventListener(MouseEvent.MOUSE_DOWN, btnMouseDownEvent); chk1.buttonMode = true; chk1.label = "Click me to enable 'ReleaseOutside' on the btn."; chk1.selected = false; } //Upon performing a MOUSE DOWN action on the button, add the //listeners for MOUSE UP and if the checkbox is selected, we //will be adding a MOUSE UP listener for the stage (This //will perform like a ReleaseOutside event in as2. private function btnMouseDownEvent(event:Event):void { btn1.label = "I'm selected"; btn1.addEventListener( MouseEvent.MOUSE_UP, btnMouseUpEvent); if(chk1.selected) { stage.addEventListener( MouseEvent.MOUSE_UP, btnMouseUpEvent); } } //Upon performing a MOUSE UP action on the button or anywhere //in the file, we will be removing the listeners for the button //away. private function btnMouseUpEvent(event:Event):void { btn1.label = "Select Me Please"; btn1.removeEventListener( MouseEvent.MOUSE_UP, btnMouseUpEvent); if(chk1.selected) { stage.removeEventListener( MouseEvent.MOUSE_UP, btnMouseUpEvent); } } ]]> </fx:Script> <s:VGroup width="100%" height="100%" horizontalAlign="center"> <s:Spacer height="100%"/> <s:Button id="btn1" width="200"/> <s:Spacer height="100%"/> <s:CheckBox id="chk1"/> <s:Spacer height="100%"/> </s:VGroup> </s:Application>* Click here for the demo shown in this post.
^ Click here for the source files for the demo.
Very helpful! Thank you CS-san!
ReplyDelete