AS3 Drag & Drop (Missing equivalent of onReleaseOutside -> stopDrag)
16 10 2008
Here’s a little AS3 draggable Joystick that bounces back into position with Tweener
Something so basic in AS2 can lead you on a merry little dance in AS3 and I thought I ‘d share some code, there are loads of basic AS3 D&D examples online like this of how to set up dragging on a movieclip but by applying startDrag on MOUSE_UP and stopDrag on MOUSE_DOWN to the same clip, you’ll fall over when your MOUSE_UP event doesnt occur over that clip (e.g. off stage or the equivalent of the deprecated AS2 onReleaseOutside)
The only explanation I could find online of where onReleaseOutside is implemented in AS3 was in the Flex 2 migration doc and is cryptic to say the least. Given the target audience for this info little better explanation wouldn’t go amiss dudes 
So anyway the obvious thing to do is add the listener for MOUSE_UP to the stage and not the object so I did that but the following line:
[code lang="actionscript"]
stage.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);
[/code]
Threw the folowing error:
TypeError: Error #1009: Cannot access a property or method of a null object reference
When I moved this into the document class it was fine; this was only occuring when it was in a movieclip added to stage. Turns out this is related to the display list, the sequencing of the call to addChild() and the availability of the stage object.
Here’s my constructor that was causing the issue
[code lang="actionscript"]
public function Joystick(){
init();
}
[/code]
Once I change it to the code below the problem went away and my call to stage.addListener was valid i.e my problem had been that the stage object had not yet been defined (#1009). This is because my call in the parent (document class) to addChild(joystick) added the joystick to the display list but the constructor for the Joystick instance fired before that so it did not know what stage was a refererence to at that moment.
[code lang="actionscript"]
public function Joystick(){
if (stage) {
init();
}
else addEventListener(Event.ADDED_TO_STAGE, init);
}
[/code]
Heres my commented init function from the document class init function which explains matters better:
I have added an FLA, FlashDevelop Project and associated files for This Example so fill your boots and link me if it’s useful
Good stuff.
One additional problem occurs if you release the mouse button outside the stage (i.e. outside of the browser window in your example).
Fortunately, Stage’s mouseLeave event comes to the rescue:
stage.addEventListener(Event.MOUSE_LEAVE, simulateRelease);function simulateRelease(event:Event):void {
//stopDrag here
}
Also, the stage deactivate event can be useful here, which is dispatched when the Flash Player loses focus.
p.s. and yes, stage is only available to objects in the display list.
One thing I often do is make a static var in my document class that points to the stage,
e.g.
public static var stageRef:Stage = stage;(or – better – make it read-only)
private static var _stageRef:Stage = stage;public static function get stageRef():Stage{
return _stageRef;
}
then anything can access it remotely using:
import Application;Application.stageRef.//do something with the stage
This looks interesting for detecting the releaseOutside state …
but what about the releaseInside?
I haven’t thoroughly dissected the code but so far I can’t see how this code can differentiate the releaseOutside and the releaseInside so one could assign different functions for each state …
is it possible to detect the releaseInside?
Hi Rob.
One thing I have had trouble finding any decent info on is how to drag an object along a path…i have a cylinder on a 60 degree angle and in the cylinder is a metal rod also on a 60 degree angle…i want to let the user drag the metal rod out of the cylinder at a 60 degree angle….can’t figure out how to do it…any suggestions would be gr8!
Thanks.