Skip to main content
GameDev.net gamedev.net
🔒 Locked 🎯 Unreal

[web] AS3: registering multiple mouse events

Started by Atrix256 Nov 19, 2009 at 2:03 PM 3 replies 30.9k views
Original Post
Atrix256
Atrix256
Hey Guys, Source code below but I have some code where there are 3 objects on the screen and i want it to highlight them in orange when you mouse over them, and when you click on one to select it, it highlights it in yellow. to do this, im registering a roll_over, roll_out, and click event but for some reason it seems like all i am getting is the roll_over event. Something strange is that in the code below i only ever seem to get roll_over events but if i only register the click event instead of all 3, i get the click event. It seems like the 3 events are somehow conflicting or something :/ Here's the source, any help is MUCH appreciated, thank you so much!! (: You can also see an example of what im talking about at: http://project1.demofox.org/ActionScript/AR/main.swf click play to get to the screen where this problem is.
package
{
  import flash.display.*;
  import flash.events.*;
  import flash.net.*;
  import flash.ui.*;
  import mx.core.BitmapAsset;
  import flash.text.TextField;
  import flash.media.*;

  public class loadselect extends Sprite
  {
    //a reference to our main object
    private var MainObject:main;
    private var HeaderText:TextField;

    private var SaveGameDescription1:TextField;
    private var SaveGameDescription2:TextField;
    private var SaveGameDescription3:TextField;

    private var SaveGameSprite1:Sprite;
    private var SaveGameSprite2:Sprite;
    private var SaveGameSprite3:Sprite;

    private var ButtonOKShape:Sprite;
    private var ButtonOKText:TextField;
    private var ButtonDeleteShape:Sprite;
    private var ButtonDeleteText:TextField;

    private var SaveGameSelected: int;
    private var SaveGameHover: int;

    //called when an object of this type is created
    public function loadselect(m:main)
    {
      //which save game is selected
      SaveGameSelected = 0;
      SaveGameHover = 0;

      //store a reference to our main object
      MainObject = m;

      //create a window to show saves and the new game option
      var BgShape:Shape
      BgShape = new Shape();
      BgShape.graphics.lineStyle(1);
      BgShape.graphics.beginFill(0x0000FF,1);
      BgShape.graphics.drawRoundRect(100,50,300,275,20);
      addChild(BgShape);

      //draw the options for the 3 save slots - 65 pixels per save slot * 3 = 195 pixels out of 275.  leaves 80 pixels.  take 10 off top
      //and bottom for padding that leaves 60 pixels for header.
      CreateSaveGame1Button();
      CreateSaveGame2Button();
      CreateSaveGame3Button();

      //add the header text
      HeaderText = new TextField();
      HeaderText.textColor = 0xFFFF30;
      HeaderText.text = "Which file would you like to load?";
      HeaderText.autoSize = "left";
      HeaderText.x = 110;
      HeaderText.y = 60;
      addChild(HeaderText);

      //add the OK and delete buttons - greyed out at first
      ButtonDeleteShape = new Sprite();
      ButtonDeleteShape.graphics.lineStyle(1);
      ButtonDeleteShape.graphics.beginFill(0x808080,1);
      ButtonDeleteShape.graphics.drawRoundRect(110,280,135,40,20);
      addChild(ButtonDeleteShape);

      ButtonDeleteText = new TextField();
      ButtonDeleteText.textColor = 0x000000;
      ButtonDeleteText.text = "Delete";
      ButtonDeleteText.autoSize = "left";
      ButtonDeleteText.x = 158;
      ButtonDeleteText.y = 288;
      addChild(ButtonDeleteText); 

      ButtonOKShape = new Sprite();
      ButtonOKShape.graphics.lineStyle(1);
      ButtonOKShape.graphics.beginFill(0x808080,1);
      ButtonOKShape.graphics.drawRoundRect(255,280,135,40,20);
      addChild(ButtonOKShape);

      ButtonOKText = new TextField();
      ButtonOKText.textColor = 0x000000;
      ButtonOKText.text = "OK";
      ButtonOKText.autoSize = "left";
      ButtonOKText.x = 310;
      ButtonOKText.y = 288;
      addChild(ButtonOKText); 
    }

    /////////////////////////////////////////////////////////////////////////////////////////////////////////
    //                                           SAVE GAME SLOT 1
    /////////////////////////////////////////////////////////////////////////////////////////////////////////

    private function CreateSaveGame1Button():void
    {
      var color:uint;

      if(SaveGameSelected == 1)
        color=0xFFFF00;
      else if(SaveGameHover == 1)
        color=0xFF8000;
      else
        color=0x000000;

      //remove the existing UI object which is there
      if(SaveGameSprite1 != null)
        removeChild(SaveGameSprite1);

      if(SaveGameDescription1 != null)
        removeChild(SaveGameDescription1);

      //recreate the UI object
      SaveGameSprite1 = new Sprite(); 
      SaveGameSprite1.graphics.lineStyle(1,color);
      SaveGameSprite1.graphics.beginFill(0x8080FF,1);   
      SaveGameSprite1.graphics.drawRoundRect(110,85,280,60,20);
      addChild(SaveGameSprite1);

      SaveGameDescription1 = new TextField();
      SaveGameDescription1.textColor = color;
      SaveGameDescription1.text = "New Game";
      SaveGameDescription1.autoSize = "left";
      SaveGameDescription1.x = 115;
      SaveGameDescription1.y = 90;

      //add event listeners
      SaveGameSprite1.addEventListener(MouseEvent.CLICK,SaveGame1MouseEvents);
      SaveGameSprite1.addEventListener(MouseEvent.ROLL_OVER,SaveGame1MouseEvents);
      SaveGameSprite1.addEventListener(MouseEvent.ROLL_OUT,SaveGame1MouseEvents);

      addChild(SaveGameDescription1);
    }

    private function SaveGame1MouseEvents(e:MouseEvent):void
    {
      switch(e.type)
      {
        case MouseEvent.ROLL_OVER:
        {
          SaveGameHover = 1;
          CreateSaveGame1Button();
          break;
        }
        case MouseEvent.ROLL_OUT:
        {
          SaveGameHover = 0;
          CreateSaveGame1Button();
          break;
        }
        case MouseEvent.CLICK:
        {
          SaveGameSelected = 1;
          CreateSaveGame1Button();
          break;
        }
      }
    }

    /////////////////////////////////////////////////////////////////////////////////////////////////////////
    //                                           SAVE GAME SLOT 2
    /////////////////////////////////////////////////////////////////////////////////////////////////////////

    private function CreateSaveGame2Button():void
    {
      var color:uint;

      if(SaveGameSelected == 2)
        color=0xFFFF00;
      else if(SaveGameHover == 2)
        color=0xFF8000;
      else
        color=0x000000;

      //remove the existing UI object which is there
      if(SaveGameSprite2 != null)
        removeChild(SaveGameSprite2);

      if(SaveGameDescription2 != null)
        removeChild(SaveGameDescription2);

      //recreate the UI object
      SaveGameSprite2 = new Sprite(); 
      SaveGameSprite2.graphics.lineStyle(1,color);
      SaveGameSprite2.graphics.beginFill(0x8080FF,1);   
      SaveGameSprite2.graphics.drawRoundRect(110,150,280,60,20);
      addChild(SaveGameSprite2);

      SaveGameDescription2 = new TextField();
      SaveGameDescription2.textColor = color;
      SaveGameDescription2.text = "New Game";
      SaveGameDescription2.autoSize = "left";
      SaveGameDescription2.x = 115;
      SaveGameDescription2.y = 155;

      //add event listeners
      SaveGameSprite2.addEventListener(MouseEvent.CLICK,SaveGame2MouseEvents);
      SaveGameSprite2.addEventListener(MouseEvent.ROLL_OVER,SaveGame2MouseEvents);
      SaveGameSprite2.addEventListener(MouseEvent.ROLL_OUT,SaveGame2MouseEvents);

      addChild(SaveGameDescription2);
    }

    private function SaveGame2MouseEvents(e:MouseEvent):void
    {
      switch(e.type)
      {
        case MouseEvent.ROLL_OVER:
        {
          SaveGameHover = 2;
          CreateSaveGame2Button();
          break;
        }
        case MouseEvent.ROLL_OUT:
        {
          SaveGameHover = 0;
          CreateSaveGame2Button();
          break;
        }
        case MouseEvent.CLICK:
        {
          SaveGameSelected = 2;
          CreateSaveGame2Button();
          break;
        }
      }
    }

    /////////////////////////////////////////////////////////////////////////////////////////////////////////
    //                                           SAVE GAME SLOT 3
    /////////////////////////////////////////////////////////////////////////////////////////////////////////

    private function CreateSaveGame3Button():void
    {
      var color:uint;

      if(SaveGameSelected == 3)
        color=0xFFFF00;
      else if(SaveGameHover == 3)
        color=0xFF8000;
      else
        color=0x000000;

      //remove the existing UI object which is there
      if(SaveGameSprite3 != null)
        removeChild(SaveGameSprite3);

      if(SaveGameDescription3 != null)
        removeChild(SaveGameDescription3);

      //recreate the UI object
      SaveGameSprite3 = new Sprite(); 
      SaveGameSprite3.graphics.lineStyle(1,color);
      SaveGameSprite3.graphics.beginFill(0x8080FF,1);   
      SaveGameSprite3.graphics.drawRoundRect(110,215,280,60,20);
      addChild(SaveGameSprite3);

      SaveGameDescription3 = new TextField();
      SaveGameDescription3.textColor = color;
      SaveGameDescription3.text = "New Game";
      SaveGameDescription3.autoSize = "left";
      SaveGameDescription3.x = 115;
      SaveGameDescription3.y = 220;

      //add event listeners
      SaveGameSprite3.addEventListener(MouseEvent.CLICK,SaveGame3MouseEvents);
      SaveGameSprite3.addEventListener(MouseEvent.ROLL_OVER,SaveGame3MouseEvents);
      SaveGameSprite3.addEventListener(MouseEvent.ROLL_OUT,SaveGame3MouseEvents);

      addChild(SaveGameDescription3);
    }

    private function SaveGame3MouseEvents(e:MouseEvent):void
    {
      switch(e.type)
      {
        case MouseEvent.ROLL_OVER:
        {
          SaveGameHover = 3;
          CreateSaveGame3Button();
          break;
        }
        case MouseEvent.ROLL_OUT:
        {
          SaveGameHover = 0;
          CreateSaveGame3Button();
          break;
        }
        case MouseEvent.CLICK:
        {
          SaveGameSelected = 3;
          CreateSaveGame3Button();
          break;
        }
      }
    }

    /////////////////////////////////////////////////////////////////////////////////////////////////////////
    //                                                TICK
    /////////////////////////////////////////////////////////////////////////////////////////////////////////

    //called once every frame
    public function Tick():void
    {
    }
  }
}



[Edited by - Atrix256 on November 19, 2009 2:27:51 PM]
Atrix256
Atrix256
bump... anyone have any idea? :/
UnknownJoe796
UnknownJoe796
I don't know about MouseEvent.ROLL_OUT, but I would suggest just doing a simple bounds test using the bounding rectangle.

if(buttonName.getBounds().containsPoint(new Point(stage.mouseX,stage.mouseY))){	//mouse is over the button}else{	//mouse is not over the button}


This eliminates the need for ROLL_OVER and ROLL_OUT, and all you need now is the CLICK event.
esrix
esrix
Hey, I might have your solution. This mostly seems to work from what I can tell, but I didn't know exactly what you were going for on the MouseEvent.CLICK function. Right now, it flashes yellow when it's clicked. If you want it to stay yellow afterwards just use the removeEventListener function.

I hope you don't mind, but I sort of rewrote a significant portion of your code to make it easier to modify in the future. Right now, all sprite creation is done through one main create createSaveButton function that takes an ID as a parameter. All the save buttons are made the same way, but they are positioned differently depending on the ID passed in. This means if you want to change it later you'll only have to change one function instead of three separate ones.

Also, I prefer to use MouseEvent.MOUSE_OVER/MouseEvent.MOUSE_OUT instead of MouseEvent.ROLL_OVER/MouseEvent.ROLL_OUT. I've had much better results with the former instead of the latter.

Hope this helps :)

package{  import flash.display.*;  import flash.events.*;  import flash.net.*;  import flash.ui.*;  import mx.core.BitmapAsset;  import flash.text.TextField;  import flash.media.*;  public class loadselect extends Sprite  {    //a reference to our main object    private var MainObject:main;    private var HeaderText:TextField;    private var SaveGameDescription1:TextField;    private var SaveGameDescription2:TextField;    private var SaveGameDescription3:TextField;    private var SaveGameSprite1:Sprite;    private var SaveGameSprite2:Sprite;    private var SaveGameSprite3:Sprite;    private var ButtonOKShape:Sprite;    private var ButtonOKText:TextField;    private var ButtonDeleteShape:Sprite;    private var ButtonDeleteText:TextField;	    private var SaveGameSelected: int;    private var SaveGameHover: int;    //called when an object of this type is created    public function loadselect(m:main)    {      //which save game is selected      SaveGameSelected = 0;      SaveGameHover = 0;      //store a reference to our main object      MainObject = m;      //create a window to show saves and the new game option      var BgShape:Shape      BgShape = new Shape();      BgShape.graphics.lineStyle(1);      BgShape.graphics.beginFill(0x0000FF,1);      BgShape.graphics.drawRoundRect(100,50,300,275,20);      addChild(BgShape);      //draw the options for the 3 save slots - 65 pixels per save slot * 3 = 195 pixels out of 275.  leaves 80 pixels.  take 10 off top      //and bottom for padding that leaves 60 pixels for header.      //CreateSaveGame1Button();      //CreateSaveGame2Button();      //CreateSaveGame3Button();	  createSaveButton( 1 );	  createSaveButton( 2 );	  createSaveButton( 3 );      //add the header text      HeaderText = new TextField();      HeaderText.textColor = 0xFFFF30;      HeaderText.text = "Which file would you like to load?";      HeaderText.autoSize = "left";      HeaderText.x = 110;      HeaderText.y = 60;      addChild(HeaderText);      //add the OK and delete buttons - greyed out at first      ButtonDeleteShape = new Sprite();      ButtonDeleteShape.graphics.lineStyle(1);      ButtonDeleteShape.graphics.beginFill(0x808080,1);      ButtonDeleteShape.graphics.drawRoundRect(110,280,135,40,20);      addChild(ButtonDeleteShape);      ButtonDeleteText = new TextField();      ButtonDeleteText.textColor = 0x000000;      ButtonDeleteText.text = "Delete";      ButtonDeleteText.autoSize = "left";      ButtonDeleteText.x = 158;      ButtonDeleteText.y = 288;      addChild(ButtonDeleteText);       ButtonOKShape = new Sprite();      ButtonOKShape.graphics.lineStyle(1);      ButtonOKShape.graphics.beginFill(0x808080,1);      ButtonOKShape.graphics.drawRoundRect(255,280,135,40,20);      addChild(ButtonOKShape);      ButtonOKText = new TextField();      ButtonOKText.textColor = 0x000000;      ButtonOKText.text = "OK";      ButtonOKText.autoSize = "left";      ButtonOKText.x = 310;      ButtonOKText.y = 288;      addChild(ButtonOKText);     }		/////////////////////////////////////////////////////////////////////////////////////////////////////////	// CREATES A SAVE BUTTON	// Depending on the ID passed it, it will tweak the save button's positioning.	/////////////////////////////////////////////////////////////////////////////////////////////////////////		private function createSaveButton( id:int ):void {	  var color:uint;      if(SaveGameSelected == 1)        color=0xFFFF00;      else if(SaveGameHover == 1)        color=0xFF8000;      else        color=0x000000;			  var saveGameSprite:Sprite;	  var saveGameDesc:TextField;	  	  if ( id == 1 ) {	    saveGameSprite = SaveGameSprite1;		saveGameDesc = SaveGameDescription1;	  }	  else if ( id == 2 ){	    saveGameSprite = SaveGameSprite2;		saveGameDesc = SaveGameDescription2;	  }	  else if ( id == 3 ){	    saveGameSprite = SaveGameSprite3;		saveGameDesc = SaveGameDescription3;	  }		      //remove the existing UI object which is there      if (saveGameSprite == null) {		saveGameSprite = new Sprite();		saveGameSprite.x = 110;		saveGameDesc = new TextField();		saveGameDesc.x = 5;        saveGameDesc.y = 5;		saveGameDesc.selectable = false;	    saveGameDesc.mouseEnabled = false;		saveGameDesc.autoSize = "left";		saveGameSprite.addChild( saveGameDesc );				if ( id == 1 ) {	      SaveGameSprite1 = saveGameSprite;		  SaveGameDescription1 = saveGameDesc;		  saveGameSprite.y = 85;	    }	    else if ( id == 2 ){	      SaveGameSprite2 = saveGameSprite;		  SaveGameDescription2 = saveGameDesc;		  saveGameSprite.y = 150;	    }	    else if ( id == 3 ){	      SaveGameSprite3 = saveGameSprite;		  SaveGameDescription3 = saveGameDesc;		  saveGameSprite.y = 215;	    }				//add event listeners		saveGameSprite.addEventListener(MouseEvent.CLICK,SaveGameMouseEvents);        saveGameSprite.addEventListener(MouseEvent.MOUSE_OVER,SaveGameMouseEvents);        saveGameSprite.addEventListener(MouseEvent.MOUSE_OUT,SaveGameMouseEvents);	  }	  	  saveGameSprite.graphics.clear();      saveGameSprite.graphics.lineStyle(1,color);      saveGameSprite.graphics.beginFill(0x8080FF,1);         saveGameSprite.graphics.drawRoundRect( 0, 0, 280, 60, 20);      addChild(saveGameSprite);      //saveGameDesc = new TextField();      saveGameDesc.textColor = color;      saveGameDesc.text = "New Game";      	  //saveGameSprite.addChild( saveGameDesc );	}		/////////////////////////////////////////////////////////////////////////////////////////////////////////    //                                           MOUSE EVENT FUNCTION    /////////////////////////////////////////////////////////////////////////////////////////////////////////		private function SaveGameMouseEvents( e:MouseEvent ):void	{	  var id:uint = 0;	  SaveGameSelected = 0;	  SaveGameHover = 0;	  	  // First, check which object called the mouse event.	  // We can do this with e.currentTarget	  switch(e.currentTarget) {		  case SaveGameSprite1:		    id = 1;			break;		  case SaveGameSprite2:		    id = 2;		    break;		  case SaveGameSprite3:		    id = 3;		    break;		  default:			return;	  }	  	  // Then, check the event type.      switch(e.type)      {        case MouseEvent.MOUSE_OVER:        {          SaveGameHover = 1;          break;        }        case MouseEvent.MOUSE_OUT:        {          SaveGameHover = 0;          break;        }        case MouseEvent.CLICK:        {          SaveGameSelected = 1;          break;        }      }	  	  // Now lets redraw the save button	  createSaveButton(id);    }	    /////////////////////////////////////////////////////////////////////////////////////////////////////////    //                                                TICK    /////////////////////////////////////////////////////////////////////////////////////////////////////////    //called once every frame    public function Tick():void    {    }  }}
Atrix256
Atrix256
Heya Esrix, very cool i will check it out!

Thank you so much man, and thanks for the re-org. I'm a c++ game programmer but a noob in actionscript. Its nice to see the "right way" to do things in AS.

Thank you very much (:

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.