onReleaseOutside in AS3 using DisplayObject.stage.addEventListener

I am working a few basic wrapper classes for my AS3 library. I am essetially using the Decorator pattern to wrap display objects with, for example, draggable resizing functionality. As I was creating my ResizableSprite class, I came to a point where the onReleaseOutside event of old would have really come in handy.

Needless to say, onReleaseOutside is no longer an event in AS3. Simple enough to get around, right? Can’t we just set a MouseListener to check for MouseUp event? The answer, depending on your Actionscript background is both yes and no. In AS2 the Mouse object was global, meaning that any line of code in the application (no matter what frame, object, class, etc… it was written in) that referenced the Mouse object all talked to the same object. Things have changed in AS3; each Display Object (SimpleButton, Sprite, MovieClip, TextField… basically anything drawn on the stage) has its own internal Mouse object, that only reacts when the mouse is over that object. So, in the case of onReleaseOutside, clicking on the object will trigger an event, moving off that object will trigger an event, but releasing the mouse off of the object will be ignored and won’t fire an event.

The new event model in AS3 allows for capturing/bubbling of events, which is nice if you are setting listeners in your Document class to handle events that other object send to the stage, but, in the case of these wrapper classes i am working on, I dont want to have to set listeners outside of the class to handle the mouse being released outside of the desired clip, that would not lend itself to clean instantiation. The first thing i tried was to call the (previous global reference in AS2) stage object from within my class and assign listeners to it from within the ResizableSprite class. Since the stage is not global in AS3 (and only be accessed directly from within your document class),

stage.addEventListener(MouseEvent.MOUSE_UP, _handleMouseUp);

throws and error. However, there is a way to accomplish what I wanted to do. Each DisplayObject contains a reference to the stage of the swf in its DisplayObject.stage property. Here is a code snippet from ResizableSprite.as (see line 45)

public function ResizableSprite(targetSprite:Sprite, resizeHandle:Sprite, minWidth:Number = NaN, maxWidth:Number = NaN, minHeight:Number = NaN, maxHeight:Number = NaN)
{
	_targ = targetSprite;
	_handle = resizeHandle;
	_minHeight = minHeight; 
	_maxHeight = maxHeight;
	_minWidth = minWidth;
	_maxWidth = maxWidth;
	
	_handle.addEventListener(MouseEvent.MOUSE_DOWN, _handleMouseDown);
}

private function _handleMouseDown(evt:Object)
{
	_handle.startDrag();
	
	_timer = new Timer(10);
	_timer.addEventListener("timer", _handleTimer)
	_timer.start();
	
	_targ.stage.addEventListener(MouseEvent.MOUSE_UP, _handleMouseUp);
}

now, the MouseEvent.MOUSE_UP listener is getting assigned when the user clicks on the desired object, and will trigger when mouse is released. yay!

One Response to 'onReleaseOutside in AS3 using DisplayObject.stage.addEventListener'

  1. Bipin says:

    get the code of this tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *

*