I'm working on something similar to the Angry Birds "rollout" for options, etc., but I'm running into a fairly substantial problem.
The rollout itself is just a toggle button, with several other buttons added to the display list that move when you touch the toggle button. Each of these buttons is a class that extends Sprite and contains individual methods for touch events, begin, end and out. When these buttons get initialized (NOT instantiated), the touch begin listener is added. Something like this:
public function Initialize():void
{
this.addEventListener(TouchEvent.TOUCH_BEGIN, OnTouchBegin, false, int.MAX_VALUE);
}
private function OnTouchBegin(e:TouchEvent):void
{
this.removeEventListener(TouchEvent.TOUCH_BEGIN, OnTouchBegin);
this.addEventListener(TouchEvent.TOUCH_END, OnTouchRelease, false, int.MAX_VALUE);
this.addEventListener(TouchEvent.TOUCH_OUT, OnTouchOut, false, int.MAX_VALUE);
}
private function OnTouchRelease(e:TouchEvent):void
{
this.addEventListener(TouchEvent.TOUCH_BEGIN, OnTouchBegin, false, int.MAX_VALUE);
this.removeEventListener(TouchEvent.TOUCH_END, OnTouchRelease);
this.removeEventListener(TouchEvent.TOUCH_OUT, OnTouchOut);
}
private function OnTouchOut(e:TouchEvent):void
{
this.addEventListener(TouchEvent.TOUCH_BEGIN, OnTouchBegin, false, int.MAX_VALUE);
this.removeEventListener(TouchEvent.TOUCH_END, OnTouchRelease);
this.removeEventListener(TouchEvent.TOUCH_OUT, OnTouchOut);
}
Then, when these buttons get hidden from the screen, a method is called to remove any of the listeners that are currently active on them:
public function Deactivate():void
{
this.removeEventListener(TouchEvent.TOUCH_OUT, OnTouchOut);
this.removeEventListener(TouchEvent.TOUCH_END, OnTouchRelease);
this.removeEventListener(TouchEvent.TOUCH_BEGIN, OnTouchBegin);
}
This is just for the standard button functionality (up/down texture and sound), on top of this, when I make the game, in my rollout class, I have an additional method that will add another event listener for custom logic that should occur when the button is touched (the button itself is created elsewhere).
public function AddRolloutButton(listener:Function):void
{
if (listener != null)
{
_buttons[index].addEventListener(TouchEvent.TOUCH_BEGIN, listener);
}
The buttons in the rollout itself are removed from the display list until they are to be shown. When the rollout is closed, the buttons are deactivated (removed from display list and the 3 button listeners within the button class are removed).
Everything works perfectly fine the very first time I open and close the rollout. After that, the event dispatching system just inexplicably dies. Every single InteractiveObject on the screen, regardless of position or type, becomes unusable. I traced out whether or not the listeners were still there on the rollout toggle button, and it was. I also confirmed that the rollout button itself was the only thing on the display list.
What I've noticed is that if I comment out the listener removal in the deactivate method of the button for the touch begin listener, or pass in null for the listener method in the AddRolloutButton method, everything works just fine. The issue seems to stem from having multiple listeners of the same type on the rollout buttons, and then removing one or all of them.
If anyone has any ideas of just what is going on, that would be very helpful. I was under the impression that adding multiple listeners of the same type to an InteractiveObject was perfectly valid.
UPDATE:
It appears that only TouchEvents get broken by this issue I'm having. I just tried using a mouse click listener on the stage after opening and closing the rollout, and that still works. So, only touch events are getting broken, if that helps at all.
Seems like there is something going wrong in your AddRolloutButton method. Are you sure you are assigning the correct listener function?
In your example the listener:Function argument should be equal to _buttons[index]. OnTouchBegin.
Or, since whatever class that owns the AddRolloutButton method seems to be in control of the buttons, you could potentially scrap the listener argument altogether since you know what method that needs to be triggered.
For example like this:
public function AddRolloutButton():void {
var currentButton:MyButtonClass = _buttons[index] as MyButtonClass;
currentButton.addEventListener(TouchEvent.TOUCH_BEGIN, currentButton.OnTouchBegin);
[...]
}
However, what you could do is to never remove the TouchEvent.TOUCH_BEGIN in the Deactivate function. The touch events will never be triggered when the DisplayObject isn't on the Display List. This means you don't have to worry about adding the listener every time you want to add the button to the Display List again.
If you set the listener to use a weak reference it will not hinder the button from being garbage collected when it's not needed anymore. To make your event listener use a weak reference, set the fifth argument of the addEventListener method to true.
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
public function Initialize():void {
this.addEventListener(TouchEvent.TOUCH_BEGIN, OnTouchBegin, false, int.MAX_VALUE, true);
}
Do you call the Initialize method again at some point after closing the rollout?
From your code it looks as though you remove all of the event listeners in Deactivate and then never add the TouchEvent.TOUCH_BEGIN listener again.
I'm not sure what you're trying to accomplish by removing the event listeners. Since the Button has a reference to the callback, it has a reference to that callback whether the listeners are attached or not. Are you thinking that adding a listener creates a reference from the callback to the button? It doesn't--the reverse is true.
If you really want to have the Button release the callback when it is removed from the display list, then it can't hold that reference after it removes the listeners. Consider using something like Supervising Presenter or a RobotLegs Mediator to manage those dependencies.
I seriously doubt that the entire event system is being borked by what you're doing.
I'd be more inclined to believe that this:
if (listener != null)
{
_buttons[index].addEventListener(TouchEvent.TOUCH_BEGIN, listener);
}
is failing, either because the button that's referenced is not the one that's actually on stage, or because listener is null..
I have seen times where adding and removing events with priorities can cause things to fail, but typically this is with events that aren't propagating on the display list.
One way that you can test this is simply to listen to the main document or the stage for touch events and see if you're getting those events. If the entire event system is borked, you won't get them, but if your listener logic is wrong, you will.
You may also want to check the willTrigger property on the button and event.
Related
I'm working on an interactive map in Actionscript-3 (Adobe Flash CS6).
What I'm trying to do is, with a single button, to show multiple objects (movieclips) with each mouse click.
I'm currently working with this code, but I can't manage to find out how to show multiple movieclips, I can only show ONE:
btn_ally_unit.addEventListener(MouseEvent.CLICK, mostrar_ally_unit2);
function mostrar_ally_unit2(event:MouseEvent):void
{
map_editor.ally_unit.visible = true;
}
How do I extend this to apply to any number of movieclips?
I'm sure by infinite you mean indefinite.
Target the unit clicked by using the target property of the Event class. Looks something like this:
btn_ally_unit.addEventListener(MouseEvent.CLICK, mostrar_ally_unit2);
function mostrar_ally_unit2(event:MouseEvent):void
{
event.target.visible = true;
}
You see? (event:MouseEvent) is saying that this function expects one argument (a MouseEvent) which you are giving the variable name of event. That's a convention but I like to use me as an abbreviation for mouse event. Others just use the letter e. Ok. Now event has a property, target, which is the thing receiving the event. In this case it will be one of your units. Your units have a property of visible which you can toggle off like you have been doing but by using the relative mouse event target, you can use the same line of code for all units.
note
Of course you must add the event listener to each unit. You could make it part of the class or just add it when a new unit is instantiated.
note
Using the event flow in actionscript 3 can be tricky. Seek out a tutorial on this. Here is one link related to event flow from Adobe.
I want do to the next one in flash with ActionScript 3.0:
Global event (if user click in any part of the screen by mouse):
addEventListener (MouseEvent.CLICK, nextc);
function nextc (event:MouseEvent): void
{nextFrame();}
Button event (if user click exact this button):
returnb54.addEventListener(MouseEvent.CLICK, returnb54a);
function returnb54a(event:MouseEvent):void
{prevFrame();}
But on the frame with this a global event and a button nothing happens when clicking the button.
Is there any way to prioritize button event over global?
Thank you.
I created a very simple application to test your question (I'm using the same names as you defined, to be easier to understand).
I have changed 3 points:
1-
this.stage.addEventListener (MouseEvent.CLICK, nextc);
2-
function returnb54a(event:MouseEvent):void
{
event.stopImmediatePropagation();
prevFrame();
}
3-
function nextc(event:MouseEvent): void
{
event.stopImmediatePropagation();
nextFrame();
}
The method: stopImmediatePropagation() prevents processing of any event listeners in the current node and any subsequent nodes in the event flow. This method takes effect immediately, and it affects event listeners in the current node. In contrast, the stopPropagation() method doesn't take effect until all the event listeners in the current node finish processing.
Try to implement these changes and see if will have the desired result.
I'm loading multiple swf files from the main menu which is never unloaded. I've done this with the following code... Only issue is that instead of unloading to the main menu I just see a white screen as if nothing is loaded.
function BackToMenu(i:MouseEvent):void
{
var BaseMovie:MovieClip = parent.parent as MovieClip;
BaseMovie.parent.removeChild(BaseMovie);
}
EDIT: I'll explain from the start I have a MainMenu.swf. The games are loaded from MainMenu.swf when the button relating to the game is clicked. When a game button is clicked on MainMenu.swf the game loads. When the player completes a game they are presented with the exit button which unloads the current game and shows the MainMenu.swf without having to re-load it.
First, you should remove one parent to make sure you are actually removing only the game:
function BackToMenu(i:MouseEvent):void
{
var BaseMovie:MovieClip = parent as MovieClip;
BaseMovie.parent.removeChild(BaseMovie);
}
This should take care of your most pressing problem, and allow you to return to the menu. You have, however, not really unloaded the game, but only removed it from the display list. This often means, that there are still sounds running, active key and/or mouse listeners, etc. - these must all be taken care of!
And, like I said, this will only fix your immediate problem. It is, however, neither a permanent solution, nor a good one: Since the main SWF is responsible for loading the games, it should also be responsible for disposing of them. You should put cleanup code into your game, but it should only be concerned with stopping any running scripts, sounds, etc. - simple rule: anything that is started within the game, should be stopped within the game. But it should not try to access objects further up in the display hierarchy, or try to unload itself.
The much better way to do this is by replacing all the above code, and letting the main SWF take care of removing the game, as well as unloading it from memory. For this, you have to do three things:
Instead of writing actual removeChild calls, etc., let your button dispatch a custom event to notify the main SWF that it should now be removed:
function onBackButtonClicked( event:MouseEvent ):void {
destroyGame(); // this would be the function that stops all the scripts
dispatchEvent( new Event( "FINISH_GAME", true ) );
}
Note that "FINISH_GAME" is now a "bubbling" event, i.e. it travels downward in the display hierarchy. We can now listen for this event in any ancestor display object containing the game.
In your main SWF, add an event listener to the Loader when the game was successfully loaded. This is done in the event listener that is called when the load process completes:
function onLoadComplete( event:Event ):void {
var loader:Loader = event.target.loader;
loader.addEventListener( "FINISH_GAME", onFinishGame, true );
}
Use the corresponding event handler to remove the game clip:
function onFinishGame( event:Event ):void {
var loader:loader = event.currentTarget;
loader.parent.removeChild( loader );
loader.unloadAndStop();
}
A few more things to consider:
The naming conventions in ActionScript advise us to use lower case names for methods and variables, and upper case only for types.
The same naming conventions suggest we use either "on" or "handle" as a prefix for event listeners, along with the name of the event. Thus, it should be onBackToMenu or rather, onBackButtonClicked, etc.
Since I don't know anything about the code you use for loading, I just assumed you have a complete listener, and you don't keep references to the loader. If you use a member variable, you can use that instead of event.target, resp. event.currentTarget.
Two years ago, when I was developing an application for the iPhone, I used the following built-in system method on all of my buttons:
[button setExclusiveTouch:YES];
Essentially, if you had many buttons on screen, this method insured that the application wouldn't be permitted do crazy things when several button events firing at the same time as any new button press would cancel all others.
problematic: ButtonA and ButtonB are available. Each button has a mouse up event which fire a specific animated (tweened) reorganization/layout of the UI. If both button's events are fired at the same time, their events will likely conflict, causing a strange new layout, perhaps a runtime error.
solution: Application buttons cancel any current pending mouse up events when said button enters mouse down.
private function mouseDownEventHandler(evt:MouseEvent):void
{
//if other buttons are currently in a mouse down state ready to fire
//a mouse up event, cancel them all here.
}
It's simple to manually handle this if there are only a few buttons on stage, but managing buttons becomes more and more complicated / bug-prone if there are several / many buttons available.
Is there a convenience method available in AIR specifically for this functionality?
I'm not aware of such thing.
I guess your best bet would be creating your own Button class where you handle mouse down, set a static flag and prevent reaction if that flag has been already set up by other instance of the same class.
In pseudo-code:
class MyButton
{
private static var pressed : Boolean = false;
function mouseDown(evt : MouseEvent)
{
if(!pressed)
{
pressed = true;
// Do your thing
}
}
}
Just remember to set pressed to false on mouse up and you should be good to go.
HTH,
J
I am coding a drag and drop application where I can grab an object and then place it over different object containers. When I am dragging the object (keeping the mouse button pressed) and I leave the stage, I can still control the object with the mouse...this is not what I want.
I would like to lose control of the object when the mouse leaves the stage.
I tried to remove the event listener for MOUSE_DOWN on a MOUSE_LEAVE event but nothing.
I also tried to dispatch a MOUSE_UP event on a MOUSE_LEAVE event but it does not work either...it works only if I manually release the mouse button.
Is there any way to override the MOUSE_DOWN event when the user moves the mouse away from the screen but he is still pressing the mouse button???
Any suggestion???
Thanks in advance
Is the stage actually listening to the MOUSE_LEAVE event? In any case , check this article, it may help:
http://www.kirupa.com/developer/flashcs3/detecting_when_mouse_leaves_movie.htm
Here's a couple tricky traps not to fall into :
One bizarre thing is that in Chrome + Firefox, the MOUSE_LEAVE event isn't dispatched for a WMODE of OPAQUE orTRANSPARENT. It just doesn't fire - mouse down or up.
With WINDOW it works fine. That one took me a long time to find out! grr... http://bugs.adobe.com/jira/browse/FP-892
Second, make sure you're using Event for the parameter type for your Event.MOUSE_LEAVE handler and not MouseEvent. If you try to handle MOUSE_LEAVE with e:MouseEvent you'll get an error that you may never see (unless you're using the debug flash player). It's a very easy mistake to make because you're probably pointing all your other handlers to the same method.
Here's what I do: (just call my main endDrag from mouseLeave(e:Event)
stage.addEventListener(MouseEvent.MOUSE_MOVE, drag);
stage.addEventListener(MouseEvent.MOUSE_UP, endDrag);
stage.addEventListener(Event.DEACTIVATE, endDrag);
stage.addEventListener(Event.MOUSE_LEAVE, mouseLeave);
private function mouseLeave(e:Event):void
{
endDrag(new MouseEvent("MOUSE_LEAVE"));
}
public function endDrag(evt:MouseEvent):void
{
/// handle end drag
}
I believe you are talking about the user leaving the flash content altogether with mouse clicked, and when he/she returns it continues the process right?
I suggest, you track the mouse x & y coordinates. Set a condition which triggers the mouse up event handler when the x or y is equal to the stage width or height respectively.
When you drag an object outside the flash movie, the object will fire a MOUSE_OUT event. You can listen to this event, use a variable to check if the object is being dragged, and, if so, dispatch a MOUSE_UP event.
some_object.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
some_object.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
some_object.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
private function mouseOutHandler(e:MouseEvent):void
{
if (isDragging)
e.target.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_UP));
}
private function mouseDownHandler(e:MouseEvent):void
{
e.target.startDrag();
isDragging = true;
}
private function mouseUpHandler(e:MouseEvent):void
{
e.target.stopDrag();
isDragging = false;
}