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

原创 2011年09月21日 18:41:44
第七篇,自定义按钮


这次弄个简单点的,自定义按钮。
其实,有了前面所定义的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


flex---->ActionScript 3.0基本语法

测试输出: trace(123); trace("abc");  变量与常量: var a:int, b:int, c:int; a = b = c = 6; trace(a, b, c); ...
  • ncepustrong
  • ncepustrong
  • 2012-08-27 20:19:20
  • 1224

用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画

上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示。 这次用Sprite来动态显示图片。 依然遵循上一篇对显示对象的处理的思路,添加LSprit...
  • lufy_Legend
  • lufy_Legend
  • 2011-09-08 16:25:15
  • 10147

用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件

第九篇,仿URLLoader读取文件 先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEv...
  • lufy_Legend
  • lufy_Legend
  • 2011-09-26 21:39:43
  • 5048

仿天猫html5

  • 2015年11月30日 11:06
  • 3.7MB
  • 下载

使用HTML5编写的移动端仿淘宝页面

  • 2017年10月16日 17:39
  • 1MB
  • 下载

ActionScript 3.0 语法

1.        在Flash Builder 4 中的角本文件声明:                       //角本内容         ]]>2.        常量和变量在ActionS...
  • icewizardry
  • icewizardry
  • 2013-12-11 16:13:16
  • 1216

用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果

第八篇,图片处理+粒子效果用仿ActionScript的语法来编写html5系列开发到现在,应该可以做出一些东西了,下面先来研究下图片的各种效果预览各种效果看下图效果和代码看这里,看不到效果的请下载支...
  • lufy_Legend
  • lufy_Legend
  • 2011-09-21 18:45:07
  • 6856

用仿ActionScript的语法来编写html5——第五篇,Graphics绘图

用仿ActionScript的语法来编写html5——第五篇,Graphics绘图 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.cs...
  • lufy_Legend
  • lufy_Legend
  • 2011-09-15 12:44:51
  • 7288

用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg

第四篇,继承与简单的rpg 用仿ActionScript的语法来编写html5——第一篇,显示一张图片 http://blog.csdn.net/lufy_legend/article/d...
  • lufy_Legend
  • lufy_Legend
  • 2011-09-13 17:36:49
  • 5096

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件

用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件终篇,LegendForHtml5Programming1.0开源库件此贴为...
  • lufy_Legend
  • lufy_Legend
  • 2011-10-05 11:21:40
  • 13531
收藏助手
不良信息举报
您举报文章:用仿ActionScript的语法来编写html5——第七篇,自定义按钮
举报原因:
原因补充:

(最多只允许输入30个字)