正文 

当前位置： 首页 > java > java教程

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

lewo的博客      2022-02-06     508

关键词：

第七篇，自定义按钮


这次弄个简单点的，自定义按钮。
其实，有了前面所定义的LSprite,LBitmap等类，定义按钮就很方便了。
下面是添加按钮的代码，

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;i<LGlobal.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


















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

第七篇，自定义按钮这次弄个简单点的，自定义按钮。其实，有了前面所定义的LSprite,LBitmap等类，定义按钮就很方便了。下面是添加按钮的代码，functiongameInit(event){backLayer=newLSprite();addChild(backLayer);btn01=newLButton(newLBitmap(newLBitmapDat... 查看详情

用仿actionscript的语法来编写html5——第九篇，仿urlloader读取文件

第九篇，仿URLLoader读取文件先看看最后的代码functionreadFile(){urlloader=newLURLLoader();urlloader.addEventListener(LEvent.COMPLETE,readFileOk);urlloader.load("../file/test.txt","text");}functionreadFileOk(){mytxt.text 查看详情

用仿actionscript的语法来编写html5——第六篇，textfield与输入框

一，对比1,html5中首先看看在html5的canvas中的文字显示varcanvas=document.getElementById("myCanvas");varcontext=canvas.getContext("2d");context.font="40ptCalibri";context.fillStyle="#0000ff";context.fillText("文字测试!",50,1 查看详情

用仿actionscript的语法来编写html5——第一篇，显示一张图片

第一篇，显示一张图片一，代码对比as代码：publicvarloader:Loader;publicfunctionloadimg():void{loader=newLoader();loader.contentLoaderInfo.addEventListener(Event.COMPLETE,complete);loader.load(newURLRequest("10594855.png") 查看详情

用仿actionscript的语法来编写html5——第二篇，利用sprite来实现动画

上一篇，我已经模仿as，加入了LBitmap和LBitmapData类，并且用它们实现了静态图片的显示。这次用Sprite来动态显示图片。依然遵循上一篇对显示对象的处理的思路，添加LSprite类，并追加show方法，如下：functionLSprite(){varself=this;self.ty... 查看详情

用仿actionscript的语法来编写html5——终篇，legendforhtml5programming1.0开源库件

...Html5Programming1.0库件是什么?它是一个javascript库，它模仿了ActionScript的语法，用于html5的开发，目前实现的功能相对较少，还不能称之为引擎，希望将来可以作为html5的开源引擎，为html5开发者提供服务。二，LegendForHtml5Programming1.0... 查看详情

是否有一个 Actionscript 库可用于使用类似 xpath 的语法来定位显示列表中的 Flex 组件？

】是否有一个Actionscript库可用于使用类似xpath的语法来定位显示列表中的Flex组件？【英文标题】：IsthereanActionscriptlibrarythatcanbeusedtotargetFlexcomponentsinthedisplaylistusinganxpath-likesyntax?【发布时间】：2011-04-0603:06:40【问题描述】：我觉... 查看详情

HTML5 中的实时 SQL 语法高亮显示 [关闭]

】HTML5中的实时SQL语法高亮显示[关闭]【英文标题】：Real-timeSQLsyntaxhighlightinginHTML5[closed]【发布时间】：2013-01-2622:51:36【问题描述】：我想使用&lt;textarea&gt;标记或用JavaScript编写的替代标记，在我编写SQL语句时突出显示它们... 查看详情

语法错误 - rightparen - ActionScript 3 - 使用数组

】语法错误-rightparen-ActionScript3-使用数组【英文标题】：Syntaxerror-rightparen-ActionScript3-usinganarray【发布时间】：2017-10-1708:03:24【问题描述】：我正在创建一个自定义的Adob​​eConnect窗格，在AS3中进行简单的拖放操作-目前可以在Adob... 查看详情

actionscript3编写javascript注入的基本框架(代码片段)

查看详情

在用 Actionscript 和 MXML 编写的 Flex 程序中调试内存泄漏的最佳方法是啥？

】在用Actionscript和MXML编写的Flex程序中调试内存泄漏的最佳方法是啥？【英文标题】：WhatisthebestwaytoDEBUGmemoryleaksinaFlexprogramwritteninActionscriptandMXML?在用Actionscript和MXML编写的Flex程序中调试内存泄漏的最佳方法是什么？【发布时间】... 查看详情

编写语法荧光笔

】编写语法荧光笔【英文标题】：Writingasyntaxhighlighter【发布时间】：2010-10-2300:07:45【问题描述】：我希望为我正在考虑从事的暑期项目编写自己的语法荧光笔，但我不知道如何编写自己的语法荧光笔。我知道那里有很多实现，... 查看详情

在没有网桥的情况下在javascript和actionscript库之间共享代码

我参与编写Flex/ActionScript库，将来我将参与用JavaScript编写相同的库。而不是用每种语言编写一个库并且必须单独维护它，我想知道是否有可能：1）用一种语言编写代码并将代码共享到另一种语言中，例如用JavaScript编写代码并在A... 查看详情

从 ActionScript 数组中删除所有元素的最佳方法？

】从ActionScript数组中删除所有元素的最佳方法？【英文标题】：BestwaytoremoveallelementsfromanActionScriptArray?【发布时间】：2010-12-0112:43:09【问题描述】：我正在用Flex/ActionScript编写一个应用程序，并且有许多Array类型的类成员变量来存... 查看详情

actionscript3基本开关...案例语法(代码片段)

查看详情

html5如何用

...、包括css3.0html5.0js等、、html5.0较之前的版本修改了一些语法规则、、、你可以通过阅读书籍或者查询一些网站来看这些语法变动。。我常用的一个是http://www.w3school.com.cn/html5/正常的用html语言来编写代码就可以了<!doctypehtml>&l... 查看详情

子数涵数·flash——初识actionscript

一、什么是AS（ActionScript）ActionScript，简称AS，中译为“动作脚本语言”。用于在Flash上实现一些光用Flash无法实现的功能。在Flash界面下的动作面板中编写AS。二、时间轴控制命令初识AS，首先让我们来认识一下AS中的时间轴... 查看详情

actionscript3caurinatween语法(代码片段)

查看详情