I have a button that starts the game, it initializes the game when you click it
startButton.addEventListener(MouseEvent.CLICK, onStartButtonClick);
I also have a firing thing, it's supposed to shoot AFTER you start the game by clicking the start button and THEN shoot when you click.
stage.addEventListener(MouseEvent.CLICK, fire);
However, it fires right when I click the start button. How can I fix this?
This is my code.
public function Game()
{
startButton.addEventListener(MouseEvent.CLICK, onStartButtonClick);
}
function onStartButtonClick(event: MouseEvent): void
{
addEventListener(Event.ENTER_FRAME, loop);
stage.addEventListener(MouseEvent.CLICK, fire);
function fire(m: Event)
{
//shoot bullet
}
}
It's caused by event bubbling.
Just modify your onStartButtonClick function to:
function onStartButtonClick(event: MouseEvent): void
{
event.stopPropagation();
addEventListener(Event.ENTER_FRAME, loop);
stage.addEventListener(MouseEvent.CLICK, fire);
For more information about event bubbling CHECK HERE
Related
I have some code that adds a "back" button to the stage that has its own code, and clicking it removes the button and brings users back to a title screen. However, when the "back" button is reintroduced to the stage, none of its listeners work.
public class BACK extends SimpleButton {
public function BACK() {
// constructor code
trace('back button on stage');
addEventListener(Event.ADDED_TO_STAGE, startUp);
}
function startUp(ev:Event): void{
addEventListener(MouseEvent.CLICK, gotoTitle);
addEventListener(Event.REMOVED_FROM_STAGE, backBtnCleanUp);
}
function gotoTitle(ev:MouseEvent): void{
trace('gototitle called');
MovieClip(root).gotoTitle();
}
function backBtnCleanUp(ev:Event): void{
trace('back button cleanup called');
removeEventListener(Event.ADDED_TO_STAGE, startUp);
removeEventListener(MouseEvent.CLICK, gotoTitle);
removeEventListener(Event.REMOVED_FROM_STAGE, backBtnCleanUp);
}
}
the trace function executes when it is first added to the stage, but not when it is added again after being removed. This is the code (from Main) that both adds and removes it.
function gotoHelp(): void{ // transitions to the help screen
cleanTitle();
addChild(helpBG);
addChild(backBtn);
backBtn.x = 550;
backBtn.y = 200;
}
function gotoTitle(): void{ //goes to the title screen
trace('going to title');
removeChild(backBtn);
removeChild(helpBG);
titleStartUp();
}
You should create a new instance of your BACK button every time you need to show it, or remove this line from backBtnCleanUp function : ( not tested )
removeEventListener(Event.ADDED_TO_STAGE, startUp);
Basically i'm trying to create two buttons. They both call actions while the user has their cursor held on them (rather than onClick or anything like that).
The first one plays the timeline, which works great.
The second one I need it to play the timeline in reverse while the user is holding down the button, how do I do that? Code below:
import flash.events.MouseEvent;
// Play timeline forwards on click //
function onButtonClick( event:MouseEvent ):void
{
play();
}
RotateRight.addEventListener(MouseEvent.MOUSE_DOWN, onButtonClick);
// Stop timeline forwards on release //
function onButtonClick2( event:MouseEvent ):void
{
stop();
}
RotateRight.addEventListener(MouseEvent.MOUSE_UP, onButtonClick2);
// Play timeline in reverse on click //
function onButtonClick3( event:MouseEvent ):void
{
// PLAY IN REVERSE?
}
RotateLeft.addEventListener(MouseEvent.MOUSE_DOWN, onButtonClick3);
// Stop timeline in reverse on release //
function onButtonClick4( event:MouseEvent ):void
{
stop();
}
RotateLeft.addEventListener(MouseEvent.MOUSE_UP, onButtonClick4);
Any help is most appreciated :)
You should add an ENTER_FRAME event on MOUSE_DOWN:
RotateLeft.addEventListener(MouseEvent.MOUSE_DOWN, onButtonClick3);
function onButtonClick3( event:MouseEvent ):void
{
stop();
stage.addEventListener(Event.ENTER_FRAME, reverse);
}
function reverse(e:Event):void {
//currently, this is reversing the main timeline. Can also do it to a specific movieclip with something like myMovieClip.gotoAndStop(myMovieClip.currentFrame-1) instead.
gotoAndStop(currentFrame - 1);
}
RotateLeft.addEventListener(MouseEvent.MOUSE_UP, onButtonClick4);
// Stop timeline in reverse on release //
function onButtonClick4( event:MouseEvent ):void
{
stage.removeEventListener(Event.ENTER_FRAME, reverse);
//You don't need stop() here, but you can change it to play() if you want to resume playback when the mouse is released.
}
I have a problem similar like this question but i'm not able to get understand this answer code, Can any one explain this code.
private function attachListeners():void
{
this.addEventListener(MouseEvent.MOUSE_DOWN, selfMouseDownHandler, false,0,true);
this.addEventListener(MoveEvent.MOVE, selfMoveHandler, false,0,true);
}
private function selfMoveHandler(event:MoveEvent):void
{
redrawConnectedLinks();
}
private function selfMouseDownHandler(event:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler, false,0,true);
stage.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler, false,0,true);
}
private function stageMouseUpHandler(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler, false);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler, false);
}
private function stageMouseMoveHandler(event:MouseEvent):void
{
dispatchEvent(new MoveEvent(MoveEvent.MOVE));
}
Please suggest me how to use this in flex application.
This code is tracking mouse movement by Flash's MouseEvent.MOUSE_UP, MouseEvent.MOUSE_MOVE and MouseEvent.MOUSE_DOWN.
Along with those events, the code is using a custom Event: MoveEvent.MOVE.
Any time, a MoveEvent.MOVE is being dispatched, the app would redraw the connectors. So, a listener to MoveEvent.MOVE is being added once and for all at the beginning.
Also, to track a drag, this code waits for MOUSE_DOWN and then keep on dispatching MoveEvent.MOVE for each MouseEvent.MOUSE_MOVE until a MOUSE_UP event occurs.
Now, let me associate the above explanation to the lines of code:
private function attachListeners():void
{
/*Wait for mouse down event to initiate mouse move and mouse up tracking*/
this.addEventListener(MouseEvent.MOUSE_DOWN, selfMouseDownHandler, false,0,true);
/*Always track MoveEvent.MOVE and start redrawing connectors whenever it's dispatched*/
this.addEventListener(MoveEvent.MOVE, selfMoveHandler, false,0,true);
}
private function selfMoveHandler(event:MoveEvent):void
{
/*Redraw connectors when the custom event MoveEvent.MOVE is received*/
redrawConnectedLinks();
}
private function selfMouseDownHandler(event:MouseEvent):void
{
/*Wait for mouse up event on receiving a mouse down*/
stage.addEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler, false,0,true);
/*Track mouse movement once mouse is down*/
stage.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler, false,0,true);
}
private function stageMouseUpHandler(event:MouseEvent):void
{
/*Once mouse up happens stop tracking mouse up... */
stage.removeEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler, false);
/*Don't track mouse movement once mouse button gets released*/
stage.removeEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler, false);
}
private function stageMouseMoveHandler(event:MouseEvent):void
{
/*dispatch MoveEvent.MOVE when mouse is moved.
If you read the above setup again, this should get dispatched on mouse moves
happening after a mouse down and before a mouse up
*/
dispatchEvent(new MoveEvent(MoveEvent.MOVE));
}
HTH.
Explanation of custom events as asked in the comment by OP
Custom events are useful to add custom message passing semantics. e.g. in this case, mouse drag is a detected by a series of mouse events, and once those events happen a custom event is dispatched to notify the connectors should be redrawn. Similarly, you might have a refresh button and clicking on it might dispatch the same event to force redraw.
Does anyone know how to move a movie clip by clicking a button on the stage. I can get it to move in increments, but I want it to move constantly. Currently I have this:
down.addEventListener(MouseEvent.MOUSE_DOWN, arrowDown);
function arrowDown(event:MouseEvent):void
{
bottomArrow.y += 1;
}
First, you should listen for KeyboardEvents instead of MouseEvent. Then I think you should listen for those events being dispatched by the stage.
Here is an example using the Event.ENTER_FRAME event. If you'd like to control better the speed of you sprite moves you might want to user a timer instead.
This example works when the down arrow is pressed but you can change Keyboard.DOWN with any key you want.
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
function onKeyDown(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.DOWN)
{
stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
}
function onKeyUp(event:KeyboardEvent):void
{
if (event.keyCode == Keyboard.DOWN)
{
stage.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}
}
function onEnterFrame(event:Event):void
{
bottomArrow.y += 1;
}
I've made this game with event listener (coordinates) on mouse position when a click occurs (to move the character).
I've another event listener for drag and drop (to combine items) that works pretty well.
function stageDown (event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.CLICK, coordinates);
MovieClip(getChildByName(event.target.name).toString()).startDrag();
MovieClip(getChildByName(event.target.name).toString()).addEventListener(MouseEvent.MOUSE_UP,stageUp);
...stuff..
}
function stageUp(event:MouseEvent):void
{
stopDrag();
...stuff...
stage.addEventListener(MouseEvent.CLICK, coordinates);
}
In the function stageDown I remove the event listener for the movement(coordinates), than I add it again at the end of the function stageUp (when you release the mouse button and the drag is complete)
But is not working, when I release the drag the character start moving, can't understand why
I don't fully understand the why (something to do with how Click events are tracked I suppose) but it is the 'normal' behavior.
Here is how I've handled this in the past. Basically you can add a higher priority click listener to the object you are dragging and cancel the event there: (see code comments)
//Assuming you have something like this in your code/////////
stage.addEventListener(MouseEvent.CLICK, coordinates);
function coordinates(event:MouseEvent):void {
trace("STAGE CLICK"); //whatever you do here
} ///////////////////////////////////////////////////////////
//add your mouse down listener to your object
someObject.addEventListener(MouseEvent.MOUSE_DOWN, stageDown);
//ALSO add a click listener to your object, and add it with higher priority than your stage mouse click listener
someObject.addEventListener(MouseEvent.CLICK, itemClick, false, 999);
function itemClick(event:MouseEvent):void {
//stop the event from reaching the lower priority stage mouse click handler
event.stopImmediatePropagation();
trace("Item CLICK");
}
function stageDown (event:MouseEvent):void
{
Sprite(event.currentTarget).startDrag();
//listen for the mouse up on the stage as sometimes when dragging very fast there is slight delay and the object may not be under the mouse
stage.addEventListener(MouseEvent.MOUSE_UP,stageUp, true);
//if you don't care about mouse up on stage, then you can just forget the mouse up listener and handler altogether and just stop drag on the itemClick function.
}
function stageUp(event:MouseEvent):void
{
//remove the stage mouse up listener
stage.removeEventListener(MouseEvent.MOUSE_UP,stageUp, true);
trace("UP");
stopDrag();
}