[AS3编程教学]Flash组件之单选按钮CheckBox使用

[AS3编程教学]Flash组件之单选按钮CheckBox使用

单选按钮在做表单提交和供访客选择某种互斥的条件时，非常的常用。CheckBox本身的制作并不难，可以很轻易就自己写一个出来。但是我们也要学会使用Flash自带的组件。今天就是用CheckBox做一个年龄范围的选择功能，旨在教大家学会这个组件的使用方法。

完成效果图如下：

首先我们新建一个空白文档，在文档上方写上“年龄选择”几个字，如图所示：

其次我们按下Ctrl+F7,打开组件面板，拖一个CheckBox控件到库里：

新建一个文档类TextCheckBox.as，我们输入以下代码，旨在先动态创建我们需要数量的单选组件在舞台上。

package

{

import flash.display.Sprite;

import fl.controls.CheckBox;

/**

* CheckBox组件测试使用

* @author Tiger

* 2012/3/16 15:05

*/

public class TextCheckBox extends Sprite

{

private var ageList:Array = ["小于18岁", "18岁至28岁", "29岁至39岁", "40岁至50岁",

"50岁至60岁", "60岁以上"];

private var checkList:Array = [];

public function TextCheckBox()

{

createCheckList();

}

private function createCheckList():void

{

var len:int = ageList.length;

for (var i:int = 0; i < len; i++)

{

var mCB:CheckBox = new CheckBox ();

mCB.label = ageList[i];

mCB.x = 210

mCB.y = 80 + i * (mCB.height + 10);

this.addChild(mCB);

checkList[i] = mCB;

}

}

}

}

写完这段函数并将文档类关联到文件属性面板上，发布测试，你便会发现舞台上已经有了几个显示年龄的控件，只是这个时候控件是可以多选的：

一个人的年龄只可能满足上面的某一个条件，不可能同时满足，所以说我们要给这些组件添加选中事件处理，选中某一个时，同时取消别的被选项目，继续晚上创建函数如下：

private function createCheckList():void

{

var len:int = ageList.length;

for (var i:int = 0; i < len; i++)

{

var mCB:CheckBox = new CheckBox ();

mCB.label = ageList[i];

mCB.x = 210

mCB.y = 80 + i * (mCB.height + 10);

mCB.addEventListener(Event.CHANGE, selectCBHandler);

this.addChild(mCB);

checkList[i] = mCB;

}

}

private function selectCBHandler(e:Event):void

{

var mCB:CheckBox = e.target as CheckBox;

var len:int = checkList.length;

for (var i:int = 0; i < len; i++)

{

if (checkList[i] == mCB) continue;

checkList[i].selected = false;

}

}

再次发布测试，此时我们可以实现单选了。

现在的问题是，我们单选了某个年龄，但是没有任何地方显示出来单选的内容提示，同时单选按钮鼠标移上去没有鼠标手出现，而且单选按钮的文字太小，看不大清除...所以我们继续把代码完善到如下所示：

//创建单选按钮

private function createCheckList():void

{

var len:int = ageList.length;

for (var i:int = 0; i < len; i++)

{

var mCB:CheckBox = new CheckBox ();

mCB.label = ageList[i];

mCB.x = 210

mCB.y = 80 + i * (mCB.height + 10);

mCB.setSize(120, 25);

mCB.useHandCursor = true;

mCB.addEventListener(Event.CHANGE, selectCBHandler);

setFormat(mCB);

this.addChild(mCB);

checkList[i] = mCB;

}

}

//设置外观

private function initParms():void

{

mForMat = new TextFormat();

mForMat.align = TextFieldAutoSize.CENTER;

mForMat.font = "微软雅黑";

mForMat.size = 14;

txtInfo = new TextField();

txtInfo.x = 150;

txtInfo.y = 300;

txtInfo.autoSize = TextFieldAutoSize.LEFT;

this.addChild(txtInfo);

}

private function setFormat(cb:CheckBox):void

{

cb.setStyle("textFormat", mForMat);

}

//处理点击事件

private function selectCBHandler(e:Event):void

{

var mCB:CheckBox = e.target as CheckBox;

var len:int = checkList.length;

for (var i:int = 0; i < len; i++)

{

if (checkList[i] == mCB) continue;

checkList[i].selected = false;

}

txtInfo.text = "我的年龄：" + mCB.label;

}

现在发布测试，我们希望的功能全部有了，一个Flash控件做的年龄选择功能就完成了。

建议大家使用FlashDevelop来编码。

文档类一定要记得绑定到默认位置，没有文档类什么反应都木有

库里一定要有组件的资源文件。