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

This paper is the official HTML5 training course for Brother Lian it educational institution, mainly introduces: writing html5--seventh with the syntax of ActionScript, custom 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,

[JavaScript]View PlainCopy

2. function Gameinit (event) {
4. Backlayer = new Lsprite ();
6. AddChild (Backlayer);
10. Btn01 = New Lbutton (New Lbitmap (Newlbitmapdata (imglist["replay_button_up")),new Lbitmap (   New Lbitmapdata (imglist["Replay_button_over")));
12. btn01.x = 76;
14. BTN01.Y = 50;
16. Backlayer.addchild (BTN01);
20. BTN02 = New Lbutton (New Lbitmap (Newlbitmapdata (imglist["quit_button_up")),new Lbitmap (new  Lbitmapdata (imglist["Quit_button_over")));
22. btn02.x = 76;
24. BTN02.Y = 100;
26. Backlayer.addchild (BTN02);
30. Btn01.addeventlistener (Lmouseevent.mouse_down, Onmousedown01);
32. Btn02.addeventlistener (Lmouseevent.mouse_down, ONMOUSEDOWN02);
34. }
36. function Onmousedown01 (event) {
38. Alert ("Btn01 on Click");
40. }
42. function Onmousedown02 (event) {
44. Alert ("btn02 on Click");
46. }

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.

[JavaScript]View PlainCopy

2. function Lbutton (bitmap_up,bitmap_over) {
4. Base (this,lsprite,[]);
6. var = this ;
8. Self.type = "Lbutton";
10. Self.bitmap_up = bitmap_up;
12. Self.addchild (BITMAP_UP);
14. if (bitmap_over = = null) {
16. Bitmap_over = bitmap_up;
18. }else{
20. Self.addchild (Bitmap_over);
22. }
24. Self.bitmap_over = Bitmap_over;
30. Self.bitmap_over.visible = false;
32. Self.bitmap_up.visible = true;
34. LGlobal.buttonList.push (self);
36. }
42. LButton.prototype.buttonModeChange = function () {
44. var = this ;
46. var cood={x:0,y:0};
48. var parent = self.parent;
50. While (parent! = "root") {
52. Cood.x + = Parent.x;
54. Cood.y + = Parent.y;
56. parent = parent.parent;
58. }
60. if (Self.ismouseon (Lglobal.mousemoveevent,cood)) {
62. Self.bitmap_up.visible = false;
64. Self.bitmap_over.visible = true;
66. }else{
68. Self.bitmap_over.visible = false;
70. Self.bitmap_up.visible = true;
72. }
74. }
76. LButton.prototype.die = function () {
78. var = this ;
80. Arguments.callee.  Super.die.call (this);
82. For (var i=0;i<lglobal.buttonlist.length;i++) {
84. if (Lglobal.buttonlist[i].objectindex = = Self.objectindex) {
86. LGlobal.buttonList.splice (i,1);
88. Break ;
90. }
92. }
94. }

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