checkbox components复选框通常用在表单中,用于在一个问题不只有一个答案而需要多选时进行使用。在我们的程序中有两种使用复选框的方式。就是主动和被动 方式。在本教程中我们将它分类为主动和被动方式分别介绍,主动方式是指在程序中选择或不选择某个复杂框就会影响到与此相关连的程序功能的实现。而被动方式 是指我们可以很安全的取消已选的复选框,直到你按下提交按钮为止。

  我们先看一下主动复杂框的使用:

  1. 打开一个新的FLASH文档,将checkbox components和label componets拖至场景中。如下:

  2. 使用属性面板给label componets命名为myLabel。

  3. 同样为checkbox components命名为myCheckbox。同时将label的内容设为“This is an important option”。

  4. 注意复选框组件的默认大小会载掉我们文本的内容。解决它的办法是使用自由缩放工具将其变宽至合适的宽度为止。

  5. 同样道理,将label组件也使用自由缩放工具将其放宽至你要显示的文字都能显示出为止。

  6. 新建一层取名为:ACTION。然后我们将在第一帧上输入代码如下:

// 创建事件侦听器。
myCheckboxListener = new Object();
// click单击事件
myCheckboxListener.click = function ()
{
if ( myCheckbox.selected )
{
myLabel.text = "您已经选择了此复选框!";
}
else
{
myLabel.text = "您还未选择此复选框!";
}
}

// 将事件注册到侦听器。
myCheckbox.addEventListener("click", myCheckboxListener);

// 清除标签内容。
myLabel.text = "";

  7. 现在可以测试你的影片看看发生了什么。

  虽然你已经会在程序中使用主动的复选框方式,但可能你大多数时候要使用提交按钮来提交复选框的变量。下面我们来看一下如何使用被动复选框:

  1. 新建一个文件。使用如下图所示的布局:

  2. 创建两个新层从上到下依次命名为:action,form element,backgroundfill。

  3. 拖动textArea组件至场景中命名为statusMessage。并设置text的内容为Please fill out the form below and hit submit。并确保换行选项设为true。

  4. 在textArea组件的下方用静态文本输入文本内容:I am... (check all that apply).

  5. 在背景层上创建一个矩形框并添上浅兰色。

  6. 拖动四个checkbox组件至于其上,如上图布局所示。

  7. 使用属性面板为四个复选框命名分别为checkboxAmazing,checkboxLovable,checkboxIntelligent and checkboxOutToLunch。如checkboxAmazing属性面板如下:

   

  8. 拖动一个按钮组至于下方。并且命名为submitButton。并且将标签改为“submit”。

  9. 在这个例子中你可以担心当我们选中复选框并提交后做什么。我们姑且现在要做的就是改变文本域中的内容。

  10. 开始时,首先设置一个指向时间轴的参考以说时form处于激活状态。在本例中是简单的指向_root。如果本影片被其它影片载入后做为子影片,那么它仍会 保持正确的指向。然而如果你使用绝对路径的方式(如myForm=_root),则在载入到其它影片时这种影片将被打断,除非你在影片中设置了 _lockroot=true。以我的经验很少有使用绝对路径的。

// 创建一个指向时间轴的form引用
myForm = this;

  11. 你必须想一个办法将四个复选框组件绑在一起,因为他们都指向一个问题。

  在本例中你只要简单的为每个复选框组件增加一个文本形式的属性group。并将其设为相同的字符串变量。这将使你在稍后的过程中很容查看它们的状态,而不用很费事通过实例名去查看。

//为所有的复选框增加一个属性名为group
GROUP_NAME_STR="firstQuestion";
checkboxAmazing.group = GROUP_NAME_STR;
checkboxLovable.group = GROUP_NAME_STR;
checkboxIntelligent.group = GROUP_NAME_STR;
checkboxOutToLunch.group = GROUP_NAME_STR;

  12. 因为你要在当按下提交按钮时处理这些复选框,所以你仍要设置侦听器来侦听按钮的动作,如前几例我们所示的那样,先写下它的结构如下:

submitButtonListener = new Object(); 
submitButtonListener.click = function ()
{
// 将要处理的事情
}
submitButton.addEventListener("click",submitButtonListener);

  13. 编辑submitButtonListener的侦听事件放入到我们上边空出的区域。

//侦听click事件submitButtonListener.click = function ()
{
//当用户点击提交按钮时先要显示的内容。
INITIAL_MESSAGE_STR = "You are";
var msg = INITIAL_MESSAGE_STR;

// 用于连接的字符
AND_STR = " and";

//在form中搜索复选框
for (var i in myForm)
{
var currentFormItem = myForm [ i ];
//设置当前复选框的变量
if (currentFormItem.group == GROUP_NAME_STR )
{
//检测是否被选中
var isChecked = currentFormItem.selected;

if ( isChecked )
{
//加入当前要显示的内容
msg += currentFormItem.label + AND_STR;
}
}
}

//检查文本域中的内容是否与初始内容相同如果相同说明没有被选过,提示相关信息
if ( msg == INITIAL_MESSAGE_STR )
{
msg += " not one to click checkboxes, it appears!";
}
else
{
//移除多余的“and”
var numLettersToRemove = AND_STR.length;
var msgLength = msg.length;
msg = msg.substring ( 0, msgLength - numLettersToRemove );

// don't forget the trusty full-stop.
msg += ".";
}

// change the text in the TextArea component at the top
// to the message we just created
statusMessage.text = msg;
}