用仿ActionScript的语法来编写html5――第七篇，自定义按钮

第七篇，自定义按钮

这次弄个简单点的，自定义按钮。

其实，有了前面所定义的Lsprite,LBITmap等类，定义按钮就很方便了。

下面是添加按钮的代码，

www.2cto.COM

function gameinit(event){  

    backLayer = new LSPRite();  

    addChild(backLayer);  

    BTn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));  

    btn01.x = 76;  

    btn01.y = 50;  

    backLayer.addChild(btn01);  

    btn02 = new LButton(new LBitmap(new LBitmapData(imglist["quit_button_up"])),new LBitmap(new LBitmapData(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);  

}  

function onmousedown01(event){  

    alert("btn01 on click");  

}  

function onmousedown02(event){  

    alert("btn02 on click");  

}  

原理：建立一个继承自LSprite的LButton类，给按钮设定两个图片，然后侦听鼠标位置，当鼠标移动到按钮上的时候，变换按钮状态，就是一个简单的按钮。

这里，我用MouSEMove来侦听鼠标位置，给LGlobal类添加一个buttonList数组，当创建按钮的时候，把按钮加入到buttonList，然后当移动鼠标的时候，就可以从buttonList数组判断鼠标是否在按钮上，然后当按钮被删除后，将按钮从buttonList数组中删除。

一些修改：

1，修改LSprite类，添加die方法，每个LSprite当被removeChild的时候，调用自己的die方法，die方法里放一些被移除是必需处理的事件，比如这次的按钮，要从buttonList中删除。

2，给每个构造器添加objectindex，用来区分每个对象。

3，修改addChild方法，添加DisplayObject.parent = self，就是给每个自对象指定父级对象。

准备完毕，开始创建按钮类LButton。

function LButton(bitmap_up,bitmap_over){  

    base(this,LSprite,[]);  

    VAR self = 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 (){  

    var self = this;  

    var cood={ x:0,y:0} ;  

    var parent = 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 (){  

    var self = this;  

    arguments.callee.super.die.call(this);  

    for(var i=0; iLGlobal.buttonList.length; i++){  

        if(LGlobal.buttonList[i].objectindex == self.objectindex){  

            LGlobal.buttonList.splice(i,1);  

            break;  

        }  

    }  

}  

看一下成果吧,看不到效果的请下载支持html5的浏览器

http://fsanguo.comoj.com/htML5/jstoas06/index.html

摘自 lufy小屋

第七篇，自定义按钮

这次弄个简单点的，自定义按钮。

其实，有了前面所定义的LSprite,LBitmap等类，定义按钮就很方便了。

下面是添加按钮的代码，

www.2cto.com

function gameInit(event){  

    backLayer = new LSprite();  

    addChild(backLayer);  

    btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));  

    btn01.x = 76;  

    btn01.y = 50;  

    backLayer.addChild(btn01);  

    btn02 = new LButton(new LBitmap(new LBitmapData(imglist["quit_button_up"])),new LBitmap(new LBitmapData(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);  

}  

function onmousedown01(event){  

    alert("btn01 on click");  

}  

function onmousedown02(event){  

    alert("btn02 on click");  

}  

原理：建立一个继承自LSprite的LButton类，给按钮设定两个图片，然后侦听鼠标位置，当鼠标移动到按钮上的时候，变换按钮状态，就是一个简单的按钮。

这里，我用mousemove来侦听鼠标位置，给LGlobal类添加一个buttonList数组，当创建按钮的时候，把按钮加入到buttonList，然后当移动鼠标的时候，就可以从buttonList数组判断鼠标是否在按钮上，然后当按钮被删除后，将按钮从buttonList数组中删除。

一些修改：

1，修改LSprite类，添加die方法，每个LSprite当被removeChild的时候，调用自己的die方法，die方法里放一些被移除是必需处理的事件，比如这次的按钮，要从buttonList中删除。

2，给每个构造器添加objectindex，用来区分每个对象。

3，修改addChild方法，添加DisplayObject.parent = self，就是给每个自对象指定父级对象。

准备完毕，开始创建按钮类LButton。

function LButton(bitmap_up,bitmap_over){  

    base(this,LSprite,[]);  

    var self = 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 (){  

    var self = this;  

    var cood={ x:0,y:0} ;  

    var parent = 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 (){  

    var self = this;  

    arguments.callee.super.die.call(this);  

    for(var i=0; iLGlobal.buttonList.length; i++){  

        if(LGlobal.buttonList[i].objectindex == self.objectindex){  

            LGlobal.buttonList.splice(i,1);  

            break;  

        }  

    }  

}  

看一下成果吧,看不到效果的请下载支持html5的浏览器

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

摘自 lufy小屋

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！