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