Event isn't removed from Listener in AS3 - actionscript-3

I'm developing a drag'n'clone feature for my flash app (AS3 and Flash CS5). The clones are created perfectly, but when I try to drag the clone recently created, the app creates a new clone (and allow me to drag it).
I want to remove this behaviour: clone only should be drag and dropped, not cloned. My code is:
public class Car extends MovieClip
{
// imports...
public function Car()
{
addListeners();
}
private function addListeners():void
{
this.addEventListener(MouseEvent.MOUSE_DOWN,clone);
}
private function clone(e:MouseEvent):void
{
// Clone the object
var newcar = new e.target.constructor;
newcar.graphics.copyFrom(this.graphics);
newcar.x = this.x;
newcar.y = this.y;
this.parent.addChild(newcar);
newcar.addEventListener(MouseEvent.MOUSE_MOVE,dragCar);
newcar.addEventListener(MouseEvent.MOUSE_UP,dropCar);
}
private function dragCar(e:MouseEvent):void
{
e.target.startDrag();
}
private function dropCar(e:MouseEvent):void
{
e.target.stopDrag();
// This line doesn't remove the event, and I don't know why
e.currentTarget.removeEventListener(MouseEvent.MOUSE_DOWN,clone);
e.target.removeEventListener(MouseEvent.MOUSE_MOVE, dragCar);
e.target.removeEventListener(MouseEvent.MOUSE_UP,dropCar);
}
}
I hope someone can help me. Thanks!

Here as you are creating a new instance of Car in the clone function, the constructor of that new Car object is called which in turn calls addListeners() and the clone has a MOUSE_DOWN event listener that again clones the clone. That is why you have the problem you describe.
To avoid this you need to add the following line in you clone function (this does not work see below edit)
newcar.removeEventListener(MouseEvent.MOUSE_DOWN,clone);
this removes the clone event listener from the cloned (new) Car instance and avoids cloning again.
Also to start drag you should do it in MOUSE_DOWN instead of MOUSE_MOVE.
Update
OK I see, MOUSE_DOWN is not called Again for the clone, so you need to use MOUSE_MOVE. Thus in this case I would remove the MOUSE_MOVE listener in the listener's body so that it is only called once.
Update
This seems to remove the event listener.
newcar.removeEventListener(MouseEvent.MOUSE_DOWN, newcar.clone);
You have to refer to the newcar instance's clone method newcar.clone to remove the event listener.
Working Code
The following code is working just fine
package{
import flash.display.MovieClip;
import flash.events.*;
public class Car extends MovieClip
{
public function Car()
{
addListeners();
}
private function addListeners():void
{
this.addEventListener(MouseEvent.MOUSE_DOWN,clone);
}
private function clone(e:MouseEvent):void
{
// Clone the object
var newcar = new e.target.constructor;
newcar.graphics.copyFrom(this.graphics);
newcar.x = this.x;
newcar.y = this.y;
this.parent.addChild(newcar);
// remove the clone listener
newcar.removeEventListener(MouseEvent.MOUSE_DOWN, newcar.clone);
// add dragging listeners
newcar.addEventListener(MouseEvent.MOUSE_MOVE, dragCar);
newcar.addEventListener(MouseEvent.MOUSE_UP, dropCar);
// this is used for dragging the clone
newcar.addEventListener(MouseEvent.MOUSE_DOWN, dragCar);
}
private function dragCar(e:MouseEvent):void
{
// if a MOUSE_MOVE event listener is registered remove it
if(e.target.hasEventListener(MouseEvent.MOUSE_MOVE))
e.target.removeEventListener(MouseEvent.MOUSE_MOVE, dragCar);
e.target.startDrag();
}
private function dropCar(e:MouseEvent):void
{
e.target.stopDrag();
// do not remove the listener if you want the clone to be dragable
// e.target.removeEventListener(MouseEvent.MOUSE_UP,dropCar);
}
}
}
Keep clone dragable
For this in the above code I have added a MOUSE_DOWN event listener for dragging the clone
newcar.addEventListener(MouseEvent.MOUSE_DOWN, dragCar);
And commented out the e.target.removeEventListener(MouseEvent.MOUSE_UP,dropCar); in dropCar
Also added a Check before removing MOUSE_MOVE listener as to whether it is there or not, as this function will be called later by MOUSE_DOWN also.

Related

MOUSE_DOWN and MOUSE_UP not dispatching for custom Sprite

I have created a custom Sprite object which is not dispatching the MouseEvent.MOUSE_DOWN or MouseEvent.MOUSE_UP events. It is properly dispatching MouseEvent.MOUSE_MOVE events.
All event listeners are verified to be registered.
I apologize if this is a common or excessively simple question, but I have spent the last hour Googling and reading StackOverflow for questions or answers that fit my situation and simply have not found one. As far as I know, Sprite is an InteractiveObject and therefore should be dispatching all three of these events rather than only the MouseEvent.MOUSE_MOVE events.
Class Declaration:
import flash.display.*;
import flash.events.*;
import flash.geom.*;
public class CustomSprite extends Sprite {
Object Initialization in main.as
var circle:CustomSprite = new CustomSprite();
circle.graphics.lineStyle(3,0x00FF00);
circle.graphics.beginFill(0x0000FF,.5);
circle.graphics.drawCircle(0,0,50);
circle.graphics.endFill();
circle.x = 100;
circle.y = 100;
Event Listener Registration in Constructor:
addEventListener(MouseEvent.MOUSE_DOWN,mouseDownListener);
if (hasEventListener(MouseEvent.MOUSE_DOWN)) trace("MOUSE_DOWN listener exists");
addEventListener(MouseEvent.MOUSE_UP,mouseUpListener);
if (hasEventListener(MouseEvent.MOUSE_UP)) trace("MOUSE_UP listener exists");
addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveListener);
if (hasEventListener(MouseEvent.MOUSE_MOVE)) trace("MOUSE_MOVE listener exists");
Event Listener Registration Output:
MOUSE_DOWN listener exists
MOUSE_UP listener exists
MOUSE_MOVE listener exists
Listener Functions as Part of CustomSprite Class:
private function mouseDownListener(e:MouseEvent):void {
trace("mouseDownListener");
}
private function mouseUpListener(e:MouseEvent):void {
trace("mouseUpListener");
}
private function mouseMoveListener(e:MouseEvent):void {
trace("mouseMoveListener");
}
Output after hovering over object and clicking several times:
mouseMoveListener
mouseMoveListener
mouseMoveListener
mouseMoveListener
Thanks in advance for any help you can offer - it is greatly appreciated!
What is looks like from the source you have provided is that you aren't adding the event listeners to the circle itself. This snippet I tested worked, provided I don't have your CustomSprite, but just the Sprite.
var circle:CustomSprite = new CustomSprite();
circle.graphics.lineStyle(3,0x00FF00);
circle.graphics.beginFill(0x0000FF,.5);
circle.graphics.drawCircle(0,0,50);
circle.graphics.endFill();
circle.x = 100;
circle.y = 100;
circle.addEventListener(MouseEvent.MOUSE_DOWN, function(event:MouseEvent):void{
trace("mouseDown");
});
circle.addEventListener(MouseEvent.MOUSE_UP, function(event:MouseEvent):void{
trace("mouseUp");
});
circle.addEventListener(MouseEvent.MOUSE_MOVE, function(event:MouseEvent):void{
trace("mouseMove");
});

AS3 event capturing not working

I know the different between event capturing and bubbling and how stopPropagation work.
So why capturing not worked in my simple test? There is no stopPropagation in the code.
import flash.display.Sprite;
import flash.events.MouseEvent;
public class CapturingNotWork extends Sprite {
public function CapturingNotWork() {
var rect:Sprite = new Sprite();
rect.graphics.beginFill(0x000000);
rect.graphics.drawRect(0, 0, 100, 100);
rect.graphics.endFill();
// CAPTURING NOT WORKED
rect.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown, true);
// BUT THE BUBBLING WORKED
// rect.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
stage.addChild(rect);
}
function mouseDown(e:MouseEvent): void {
trace("It's worked");
}
}
The event starts with the topmost parent (stage) and works down the display object hierarchy until reaching the original target.
When the useCapture parameter is set to true, the listener processes the event only during the capture phase and not in the target or bubbling phase. Your event never reaches the target (rect) as you can see on this image:

How to automatically delete Event Listener from an object in AS3

I am working on small flash game. The game contains 20 levels and main menu. The transition between levels is made by deleting every object on the frame and also all event listeners. Then the code adds objects from the next level...
Catching and the removing event listeners is done by this code:
override public function addEventListener(type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=false):void
{
super.addEventListener(type, listener, useCapture, priority, useWeakReference);
arrListeners.push({type:type, listener:listener});
}
private function clearEvents():void
{
for(var i:Number = 1; i<arrListeners.length; i++){
if(this.hasEventListener(arrListeners[i].type))
{
this.removeEventListener(arrListeners[i].type, arrListeners[i].listener);
}
}
arrListeners = []
}
This code overrides internal addEventListeners and makes every Listener to be added in an array. Second function checks if the EventListeners is still there(not prevoiusly removed) and the just remove every Listener from the array.
This code works fine for EventListeners that are assigned to the stage. However, when an EventListener is assigned directly to an Object then it's not added to the array, so it doesn't get removed automatically later.
I know that when you remove the object, also you remove the Event Listeners assigned to it. But when I add that object again the Listeners run twice. You can freely move through levels, so you can go back and forth. And when you go back I recieve problems. System is overused and is woring slower, because the amount of Event Listeners that are running is doubled.
So, can you modify this code or give me an advice how can I catch EventListeners that are assigned to Object and eventually remove them.
Code:
package
{
Public Class Main extends MovieClip
{
Public function Main()
{
Intro();
}
Private function Intro():void
{
//Constructor contains a lot of addChild and a EventListeners. So I will upload what I think i important for this problem.
Play_btn.addEventListener(MouseEvent.CLICK, clicked);
function clicked (e:MouseEvent):void
{
clearEvents();
clearChild(); // function that removes all children on stage
FirstLevel();
}
}
Private function FirstLevel():void
{
//Also adding children and EventListeners, that affect the gameplay
Next_level_btn.addEventListener(MouseEvent.CLICK, clicked1);
function clicked1 (e:MouseEvent):void
{
clearEvents();
clearChild();
SecondLevel();
}
Main_Menu_btn.addEventListener(MouseEvent.CLICK, clicked1);
function clicked1 (e:MouseEvent):void
{
clearEvents();
clearChild();
Intro();
}
}
And so on for the next 20 levels.
Thanks in advice.
Arrays indices start from 0, clearEvents should be :
private function clearEvents():void
{
for(var i:int= 0; i<arrListeners.length; i++){
if(this.hasEventListener(arrListeners[i].type))
{
this.removeEventListener(arrListeners[i].type, arrListeners[i].listener);
}
}
arrListeners = []
}
Not sure if that will fix your problem though. If you have event listeners that are created when you add new objects you should remove those listeners when the object is destroyed/removed.
Removing an object (removeChild(object)) does NOT automatically remove it's event listeners. You would need to do that yourself. Something like this could work:
in your class constructor:
super.addEventListener(Event.ADDED_TO_STAGE,addedToStage,false,0,true); //only if you want the listeners added back again the next time this object is added to the stage eg. addChild(this)
super.addEventListener(Event.REMOVED_FROM_STAGE,removedFromStage,false,0,true);
The handlers:
//this runs whenever the object is added to the display list
//if you don't want the listeners re-added, remove this function.
private function addedToStage(e:Event):void {
for(var i:int=0; i<arrListeners.length; i++){
super.addEventListener(arrListeners[i].type, arrListeners[i].listener, arrListeners[i].useCapture, arrListeners[i].priority, arrListeners[i].useWeakReference);
}
}
//this runs whenever the object is removed from the display list
private function removedFromStage(e:Event):void {
for(var i:int=0; i<arrListeners.length; i++){
super.removedEventListener(arrListeners[i].type, arrListeners[i].listener, arrListeners[i].useCapture);
}
//OR if you want the listeners gone forever, use your clearEvents() method instead of the for loop above
}
This would make your listeners stop listening when the item is removed from the display list, and re-add them when added. You'd have to modify your array to include the other listener information like capture phase and weakReference. If you don't want them added again, just call your clearEvents() in the removedFromStage handler and take out the addedToStage listener/handler altogether.
This is assuming that the code you posted (and my additions) is the base-class of all the object you want it applied to.

Click event outside MovieClip in AS3

Is there any way to detect if the user click outside a MovieClip?
For instance, I need to detect it to close a previously opened menu (like Menu bar style: File, Edition, Tools, Help, etc).
How can I detect this kind of event? Thanks!
Add a listener to stage and check if stage is the target of the event.
Example of code here:
http://wonderfl.net/c/eFao
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
public class FlashTest extends Sprite
{
private var _menu : Sprite;
public function FlashTest()
{
_menu = new Sprite();
_menu.x = 100;
_menu.y = 100;
_menu.alpha = 0.5;
with(_menu.graphics)
{
beginFill(0xFF0000, 1);
drawRect(0, 0, 300, 300);
endFill();
}
addChild(_menu);
_menu.addEventListener(MouseEvent.CLICK, onClickHandler);
stage.addEventListener(MouseEvent.CLICK, onClickHandler);
}
private function onClickHandler(event : MouseEvent) : void
{
switch(event.target)
{
case _menu:
_menu.alpha = 0.5;
break;
case stage:
_menu.alpha = 1;
break;
}
}
}
}
You can add a listener to the click event of the root element:
MovieClip(root).addEventListener(MouseEvent.CLICK, clickObject);
then in the function clickObject, you can check to see what you are clicking.
function clickObject(e:Event):void
{
var hoverArray:Array = MovieClip(root).getObjectsUnderPoint(new Point(stage.mouseX, stage.mouseY));
var hoverOverObject:* = hoverArray[hoverArray.length - 1];
}
hoverOverObject references the element that you are clicking on. Often this will be the shape within the movie clip, so you'll need to look at it's parent then compare it to your movie clip. If the click wasn't on the drop down movie clip, trigger the close.
var container:MovieClip = new MovieClip();
var mc:MovieClip = new MovieClip();
with(mc.graphics){
beginFill(0xff0000,1);
drawCircle(0,0,30);
endFill();
}
mc.name = "my_mc";
container.addChild(mc);
addChild(container);
stage.addEventListener(MouseEvent.CLICK, action);
function action (e:MouseEvent):void
{
if(e.target.name != "my_mc"){
if(container.numChildren != 0)
{
container.removeChild(container.getChildByName("my_mc"));
}
}
}
Use capture phase:
button.addEventListener(MouseEvent.CLICK, button_mouseClickHandler);
button.stage.addEventListener(MouseEvent.CLICK, stage_mouseClickHandler, true);
//...
private function button_mouseClickHandler(event:MouseEvent):void
{
trace("Button CLICK");
}
private function stage_mouseClickHandler(event:MouseEvent):void
{
if (event.target == button)
return;
trace("Button CLICK_OUTSIDE");
}
Note that using stopPropagation() is good for one object, but failed for several. This approach works good for me.
Use a stage and a sprite (menu) click listener with the sprite listener executing first and apply the stopPropagation() method to the click handler of the sprite. Like this:
menu.addEventListener(MouseEvent.CLICK, handleMenuClick);
stage.addEventListener(MouseEvent.CLICK, handleStageClick);
private function handleMenuClick(e:MouseEvent):void{
// stop the event from propagating up to the stage
// so handleStageClick is never executed.
e.stopPropagation();
// note that stopPropagation() still allows the event
// to propagate to all children so if there are children
// within the menu overlay that need to respond to click
// events that still works.
}
private function handleStageClick(e:MouseEvent):void{
// put hide or destroy code here
}
The idea is that a mouse click anywhere creates a single MouseEvent.CLICK event that bubbles from the stage, down through all children to the target, then back up through the parents of the target to the stage. Here we interrupt this cycle when the target is the menu overlay by not allowing the event to propagate back up to the parent stage, ensuring that the handleStageClick() method is never invoked. The nice thing about this approach is that it is completely general. The stage can have many children underneath the overlay and the overlay can have its own children that can respond to clicks and it all works.

MouseUpEvent stops working while Dragging MovieClip

There is a mouseUpEvent listener attached to the stage in the main class, while dragging the movieClip the mouseUpEvent doesnot trigger the handler and the movieClip gets sticks to the mouse. While the item is being dragged and the mouse is moved away from the movieClip i.e somewhere not on the item but on the stage the mouseUp is detected.
Edit: Here is the scenario I am using a static (Singleton) class as a movieClip as a "DragManager". Whenever a movieClip has to be dragged it is passed to the DragManager and is added as a child, when a mouseUp from stage is detected another static function of dragManager is called to stop the drag and put the movieClip on the appropriate layer. Here is the static function in the DragManager which is called on MouseDown from variouslayers.
public static function startDragMethod(item:Item):void
{
instance.addChild(item); //This is the instance of the DragManager
var boundArea:Rectangle = new Rectangle(0,0,610,760);
item.startDrag(false,boundArea);
}
In the constructor of the main class I add the eventHandler for the MouseUpEvent
this.addEventListener(MouseEvent.MOUSE_UP,stageMouseUpHandler);
The MouseUpHandler in the main class
private function stageMouseUpHandler(event:MouseEvent):void
{
DragManager.itemMouseUpHandler(event);
}
If there is something wrong with technique please guide me, my goal is to implement drag drop between various layers and with as less coupling as possible.
Well there are many ways to get the task done. Put some condition at your static listener function or when the object is dragged.
like
public static function startDragMethod(item:Item):void
{
instance.addChild(item); //This is the instance of the DragManager
var boundArea:Rectangle = new Rectangle(0,0,610,760);
item.startDrag(false,boundArea);
check = true;
}
private function stageMouseUpHandler(event:MouseEvent):void
{
if(check==true)
{
DragManager.itemMouseUpHandler(event);
check = false;
}
}