Home » ActionScript 2.0, ActionScript 3.0, AIR, Flash CS4, Flash CS5, Flex

ReleaseOutside Event in AS3 | on releaseOutside problem Actionscript

2 March 2009 2 Comments
Share on Facebook

In Flash CS3 + AS3 there is no On ReleaseOutside Event, so there is a hack or trick to simulate the ReleaseOutside in AS3.

In flex2 and as3 onReleaseOutside is no longer available and has to be  simulated. Lets look how to do that trick.

This tutorial we are going to create a draggable object and going to simulate the ReleaseOutside Event on it. One more thing what we going cover is how to access Stage class in Class type programming.

Before covering the topic ReleaseOutside Event in AS3 let us have a look at accessing Stage variables in Class type programming.

Error:


TypeError: Error #1009: Cannot access a property or method of a null object reference.

This is the error thrown when we try to use Stage class in Class type programming.

Solution:


We can use the stage variables after the event “Event.ADDED_TO_STAGE”.

addEventListener(Event.ADDED_TO_STAGE, init );

Now its accessible from the Event handler. Here init is the event handler for the event “Event.ADDED_TO_STAGE”.

Difficulty:


Basic – Intermediate.

Flash Version:


Flash 9 + Actionscript 3.0

Code in Main Document( Main.fla ):

import com.DragManager.*;
var _drag:Dragger = new Dragger();
addChild(_drag)

Explanation:

importing the Class files and making them available in the code.
Creating an Object to the Class Dragger and adding it to the DisplayList using addChild().

Dragger Class ( Dragger.as ):

/*
 *Author Saravanan
 *URL: www.designscripting.com
 */
package com.DragManager{
 import flash.display.Sprite;
 import flash.events.*;
 import flash.geom.Rectangle;

public class Dragger extends Sprite
 {
  private var _redMC:Sprite;

/*
  * Constructor: Adding Event ADDED_TO_STAGE to access Stage Class
  */
  public function Dragger() {
  addEventListener(Event.ADDED_TO_STAGE, init );
  }
  /*
  * init: Creating and adding an object in displayList
  */
  private function init(eve:Event):void {
  _redMC = new Sprite();
  _redMC.graphics.beginFill(0xFF0000, 1);
  _redMC.graphics.drawRect(0,0,100,100);
  _redMC.graphics.endFill();
  _redMC.x = 145;
  _redMC.y = 345;
  addChild(_redMC);
  _redMC.addEventListener(MouseEvent.MOUSE_DOWN, downSlider);
  }
  /*
  * Adding and listening the Mouseup Event for Stage to
  * emulate ReleaseOutside Event.
  */
  private function downSlider(evt:MouseEvent) {
  _redMC.startDrag(false, new Rectangle(145.0,345,250,0));
  stage.addEventListener(MouseEvent.MOUSE_UP, upSlider);
  }
  /*
  * Removing the Mouseup Event for Stage to emulate ReleaseOutside Event /
  * As we need not to listen once the dragging is stopped.
  */
  private function upSlider(evt:MouseEvent) {
  _redMC.stopDrag();
  stage.removeEventListener(MouseEvent.MOUSE_UP, upSlider);
  }
 }
}

Explanation:

import flash.display.Sprite;
 import flash.events.*;
 import flash.geom.Rectangle;

importing the Class files and making them available in the code.

addEventListener(Event.ADDED_TO_STAGE, init );

As we discussed at the begining of this tutorial before accessing the stage variables we are listening to the Event “Event.ADDED_TO_STAGE” in the constructor;

_redMC = new Sprite();
 _redMC.graphics.beginFill(0xFF0000, 1);
 _redMC.graphics.drawRect(0,0,100,100);
 _redMC.graphics.endFill();
 _redMC.x = 145;
 _redMC.y = 345;
 addChild(_redMC);

We are creating a Sprite Object ( _redMC ) and drawing a rectangle in it ad finally adding it to the display list.

Here comes the trick in downSlider and upSlider Event handlers. We are registering and listening to MouseUp Event on Stage while MouseDown Event handler for Slider.
Thus Event we move away from the Slider we are listening for the MouseUp Event from Stage.
After the drag complete or stop we are removing the Stage Listener as it needs no more.

This is not robust coding because we are hardcoding the values in the class itself. I did this code having simplicity in mind.

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


2 Comments »

  • metju said:

    nice but not working when event.mouse_leave occur and then you get back with to stage

  • manharan said:

    NICE TUTORIAL FOR EVERY BODY

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.