Write html5--seventh in the syntax of ActionScript and customize the button

Seventh, custom button


This time, get a simple, custom button.
In fact, with the previously defined Lsprite,lbitmap class, the definition of the button is very convenient.
Here is the code to add the button,

functionGameinit (event) {Backlayer=NewLsprite ();        AddChild (Backlayer); Btn01=NewLbutton (NewLbitmap (NewLbitmapdata (imglist["replay_button_up")),NewLbitmap (NewLbitmapdata (imglist["Replay_button_over"]))); btn01.x= 76; Btn01.y= 50;        Backlayer.addchild (BTN01); Btn02=NewLbutton (NewLbitmap (NewLbitmapdata (imglist["quit_button_up")),NewLbitmap (NewLbitmapdata (imglist["Quit_button_over"]))); btn02.x= 76; Btn02.y= 100;        Backlayer.addchild (BTN02);    Btn01.addeventlistener (Lmouseevent.mouse_down, Onmousedown01); Btn02.addeventlistener (Lmouseevent.mouse_down, onmousedown02);}functionOnmousedown01 (Event) {alert ("Btn01 On Click");}functionOnmousedown02 (Event) {alert ("Btn02 On Click");}

Principle: Establish a Lbutton class that inherits from Lsprite, set two pictures for the button, then listen to the mouse position, when the mouse moves to the button, the Change button state, is a simple button.


Here, I use MouseMove to listen to the mouse position, add a buttonlist array to the Lglobal class, when the button is created, the button is added to the buttonlist, and then when the mouse is moved, You can determine whether the mouse is on the button from the Buttonlist array, and then remove the button from the Buttonlist array when the button is deleted.


Some modifications:
1, modify the Lsprite class, add Die method, each lsprite when be removechild, call their own Die method, die method Put some is removed is necessary to deal with the event, such as the button, to remove from the buttonlist.
2, add Objectindex to each constructor to differentiate each object.
3, modify the Addchild method, add displayobject.parent = Self, is to assign the parent object to each object.


Ready to start creating the button class Lbutton.

functionLbutton (bitmap_up,bitmap_over) {Base ( This, lsprite,[]); varSelf = This; Self.type= "Lbutton"; Self.bitmap_up=bitmap_up;    Self.addchild (BITMAP_UP); if(Bitmap_over = =NULL) {Bitmap_over=bitmap_up; }Else{self.addchild (bitmap_over); } self.bitmap_over=Bitmap_over; Self.bitmap_over.visible=false; Self.bitmap_up.visible=true; LGlobal.buttonList.push (self);} LButton.prototype.buttonModeChange=function (){    varSelf = This; varcood={x:0,y:0}; varParent =self.parent;  while(Parent! = "Root") {cood.x+=Parent.x; Cood.y+=Parent.y; Parent=parent.parent; }    if(Self.ismouseon (Lglobal.mousemoveevent,cood)) {self.bitmap_up.visible=false; Self.bitmap_over.visible=true; }Else{self.bitmap_over.visible=false; Self.bitmap_up.visible=true; }}lbutton.prototype.die=function (){    varSelf = This; Arguments.callee.super.die.call ( This);  for(vari=0;i<lglobal.buttonlist.length;i++){        if(Lglobal.buttonlist[i].objectindex = =Self.objectindex) {LGlobal.buttonList.splice (i,1);  Break; }    }}

Look at the results, you can't see the effect. Download the browser that supports HTML5

Http://fsanguo.comoj.com/html5/jstoas06/index.html

Write html5--seventh in the syntax of ActionScript and customize the button