Flash中利用组件完成选择题的设计

我们来利用Label 组件（文本组件）、RadioButton组件（单选按钮组件）、CheckBox组件（多选框组件）、Button组件（按钮组件）以及TextInput 组件（文本框组件）来完成第一节中的选择题的设计，先来分析下各组件的分布情况，如图：
下面我们按组件的类型来加以介绍：
1Label 组件（文本组件）
课件中，用到了5个Label组件，我们来完成第一个，具体方法如下：
1、新建一个AS3.0文件，打开窗口→组件，选User Interface文件夹下的Label组件，直接拖入到舞台上，放在最上端。

2、在选中这个组件的状态下，到属性面板中修改组件参数的text值为“1、酗酒对哪个脏器影响最大( )(单选)”，然后在该参数输入框以外的任意位置点击鼠标，我们会发现，组件的标签变了，但却不能完全显示，如何全部显示呢？
3、再次选中这个组件，用工具栏上的变形工具拖大，使文字能完全显示即可。

4、至此，一个完整的Label组件就好了，你能依照这个步骤完成另外的四个吗？试试吧。

最后再调整下各自的位置，效果如图所示：
5、点文件→保存，确定保存路径，命名为“选择题设计”。

拓展：Label 组件有什么特点？
Label 组件显示单行文本，通常用于标识网页上的其它某些元素或活动。

下图是其组件参数：
各参数具体意义如下：
1、autoSize :指示如何调整标签大小和对齐标签，有四个选项：
①left：调整标签右边和底边的大小以适合文本，不会调整左边和上边的大小。

②center：调整标签左边和右边的大小以适合文本。

标签的水平中心锚定在它原始的水平中心位置。

③right：调整标签左边和底边的大小以适合文本。

不会调整上边和右边的大小。

④none：不调整标签大小或对齐标签来适合文本。

2、condenseWhite :指示是否应从包含HTML 文本的Label 组件中删除额外空白，如空格和换行符。

3、enabled :指示组件能否接受用户输入。

选中为接受，取消选中为不接受。

4、htmlText :获取或设置由Label 组件显示的文本，包括表示该文本样式的HTML 标签。

5、selectable :指示文本是否可选。

选中为可选，取消选中为不可选。

6、text :获取或设置由Label 组件显示的纯文本。

7、visible :指示当前组件实例是否可见，选中则可见，取消选中则不可见。

8、wordWrap :指示文本字段是否支持自动换行。

选中则自动换行，取消选中则不自动换行。

这里要注意组件的大小，如果太小则无法实现换行。

2RadioButton组件（单选按钮组件）
在课件中，我们用到了八个RadioButton组件，我们还是来完成一个示范：
1、打开上节的文件“选择题设计”；
2、打开窗口→组件，选User Interface文件夹下的RadioButton组件，直接拖入一个到舞台上，放在第1题的下方，作为该题的第一个选项。

3、在选中这个组件的状态下，到属性面板中修改组件参数的label值为“A.肺”，然后在该参数输入框以外的任意位置点击鼠标，我们会发现，组件的标签变了
4、至此，一个完整的RadioButton组件就好了，你能依照这个步骤完成另外的七个吗？试试吧。

最后再调整下各自的位置，效果如图所示：
5、千万别忘记保存啊。

拓展：RadioButton组件有什么特点？
使用RadioButton 组件可以强制用户只能选择一组选项中的一项。

该组件必须用于至少有
两个RadioButton 实例的组中。

在任意给定时刻，都只能有一个组成员被选中。

选择组中的一个单选按钮将取消选择该组中当前选中的单选按钮。

可以设置groupName 参数来指示单选按钮属于哪个组。

下图是其组件参数：
各参数具体意义如下：
1、enabled :指示组件能否接受用户输入。

选中为接受，取消选中为不接受。

2、groupName :单选按钮实例或组的组名。

3、label :获取或设置组件的文本标签。

4、labelPlacement :标签相对于指定图标的位置，有四个选项：
①right：文本标签位于图标的右侧
②left：文本标签位于图标的左侧
③bottom：文本标签位于图标的底部
④top：文本标签位于图标的顶部
5、selected :指示单选按钮当前处于选中状态(true) 还是取消选中状态(false)。

6、value :与单选按钮关联的用户定义值。

7、visible :指示当前组件实例是否可见，选中则可见，取消选中则不可见。

3CheckBox组件（多选框组件）
在课件中，我们还用到了八个CheckBox组件，我们还是来完成一个示范：
1、继续打开上节的文件“选择题设计”；
2、打开窗口→组件，选User Interface文件夹下的CheckBox组件，直接拖入一个到舞台上，放在第3题的下方，作为该题的第一个选项。

3、在选中这个组件的状态下，到属性面板中修改组件参数的label值为“A.尽量不与患病动物接触”，然后在该参数输入框以外的任意位置点击鼠标，我们会发现，组件的标签变了。

如果不能完整再次选中这个组件，用工具栏上的变形工具拖大，使文字能完全显示即可。

4、至此，一个完整的CheckBox组件就好了，你能依照这个步骤完成另外的七个吗？试试吧。

最后再调整下各自的位置，效果如图所示：
5、千万别忘记保存啊。

拓展：CheckBox组件有什么特点？
CheckBox 组件是一个可以选中或取消选中的方框。

当它被选中后，框中会出现一个复选标记。

我们还可以为CheckBox 添加一个文本标签，并可以将它放在CheckBox 的左侧、右侧、上面或下面。

下图是其组件参数：
各参数具体意义如下：
1、enabled :指示组件能否接受用户输入。

选中为接受，取消选中为不接受。

2、label :获取或设置组件的文本标签。

3、labelPlacement :标签相对于指定图标的位置。

4、selected :指示切换按钮是否已切换至打开或关闭位置。

5、visible :指示当前组件实例是否可见，选中则可见，取消则不可见。

4Button组件（按钮组件）
前面应该把题目准备好了，还得需要一个按钮，这个按钮也可以利用组件，当然也可以从公用库中调用按钮，但公用库中的按钮标签修改相对来说不如按钮组件容易些，下面我
们来看如何使用这个button组件：
1、继续打开上节的文件“选择题设计”；
2、打开窗口→组件，选User Interface文件夹下的button组件，直接拖入一个到舞台上，放在舞台底部的中央位置。

3、在选中这个组件的状态下，到属性面板中修改组件参数的label值为“提交”，然后在该参数输入框以外的任意位置点击鼠标，我们会发现，组件的标签变了。

4、至此，按钮组件完成，最后别忘记保存文件。

拓展：Button组件有什么特点？
Button 组件（按钮组件）是一个可调整大小的矩形按钮，我们可以通过鼠标或空格键按下该按钮以在应用程序中启动操作。

下图是其组件参数：
各参数具体意义如下：
1、emphasized :指示当按钮处于弹起状态时，Button 组件周围是否绘有边框。

选中会有边框，取消选中在没有边框。

2、enabled :指示组件能否接受用户输入。

选中为接受，取消选中为不接受。

3、label :获取或设置组件的文本标签。

4、labelPlacement :标签相对于指定图标的位置。

5、selected :指示切换按钮是否已切换至打开或关闭位置。

6、toggle :指示按钮能否进行切换，true值指示按钮可以进行切换；false指示按钮不能进行切换。

7、visible :指示当前组件实例是否可见，选中则可见，取消则不可见。

5TextInput 组件
通过前面四节的制作，课件的界面基本完成了，但为了显示成绩，还得一个文本框，在此，我们继续使用一个新组件——TextInput 组件，下面让我们来继续操作：
1、继续打开上节的文件“选择题设计”；
2、打开窗口→组件，选User Interface文件夹下的TextInput组件，直接拖入一个到舞台上，放在舞台下方“分数”的右边。

3、至此，课件界面所需要的元件已经齐全，完整效果如图所示：
4、保存文件。

拓展：TextInput组件有什么特点？
TextInput 组件是单行文本组件，下图是其组件参数：
各参数具体意义如下：
1、displayAsPassword :指示当前创建的TextInput 组件实例用于包含密码还是文本。

选中为密码，取消选中为文本。

2、editable :指示用户能否编辑组件中的文本。

如果editable 属性为true，也可以用它来编辑和接收文本输入。

3、enabled :指示组件能否接受用户输入。

选中为接受，取消选中为不接受。

4、maxChars :获取或设置用户可以在文本字段中输入的最大字符数。

5、restrict :获取或设置文本字段从用户处接受的字符串。

6、text :获取或设置字符串，其中包含当前TextInput 组件中的文本。

7、visible :指示当前组件实例是否可见，选中则可见，取消选中则不可见。

6代码书写
通过前面5节的介绍，我们已经具备了课件的基本元素，如果此时测试文件，会发现多选题中的多选框都可以画上√，但单选题中的八个选项中却只能选中其中的一个，而我们要的应该是每题一个，这是第一个问题，第二个问题就是还没有做出判断，提交按钮还没起作用，为什么呢？因为我们还没有利用代码来实现交互的效果。

这节课就来解决这些问题。

1、如何把单选组件分为两个组呢？
通过测试，我们会发现八个单选组件只能选中一个，如何解决这个问题呢？这就要用到一个组件参数——groupName，将第一题的四个单选组件的groupName修改为t1，第二题的四个单选组件的groupName修改为t2，这样就把它们分为了两组，再次测试就会发现每题只能选一个了。

2、给需要控制的组件起实例名
通过前面的学习，我们知道，要控制元件，就必须先给元件起个实例名，组件实际就是带参数的影片剪辑，所以，要控制它也得起个实例名。

⑴在本课件中，我们需要判断答案是否正确，所以八个选项都必须得起实例名，我们从上往下依次起实例名为“da11”、“da12”、“da13”、“da14”、“da21”、“da22”、“da23”、“da24”、“da31”、“da32”、“da33”、“da34”、“da41”、“da42”、“da43”、“da44”。

⑵按钮“提交”起实例名为“tiJiao”。

⑶分数右边的那个TextInput 组件，起实例名为“fenShu”，用来显示成绩。

3、书写代码
这样我们就完成了所有的准备工作，那么我们需要用代码完成哪些任务呢？主要有以下几个方面：
⑴点提交按钮，系统应该给出判断。

⑵要想正确给出分数，需要判断每个题目的对错，然后给出相应的分数。

⑶要把成绩显示在成绩框中。

下面来写代码，先新建一层，命名为“AS”，然后输入以下代码：
import flash.events.MouseEvent;
tiJiao.addEventListener(MouseEvent.CLICK,queDing);
function queDing(e:MouseEvent):void
{
//变量i用于累计做对的题目的数目，以便于统计成绩
var i:int = 0;
if (da12.selected)
{
i++;
}
if (da24.selected)
{
i++;
}
if (da31.selected && da32.selected && da33.selected && ! da34.selected)
{
i++;
}
if (da41.selected && da42.selected && ! da43.selected && da44.selected)
{
i++;
}
fenShu.text = String(i * 25);
}
最后测试文件，验证效果。

说明：
【拓展】细心的读者可能会发现两个问题：一个就是系统只给了分数，对于结果没有明确的对错标记，这个好像有些不足；二是分数后面的那个组件可以手动输入文字，这个好像也不够完美，能不能解决这两个问题呢？
答案当然是肯定的，第一个问题实现的方法有多种，比如用文本框来显示，或者用一个影片剪辑来制作一个对错标记来显示，相对来说，制作一个影片剪辑更形象些，下面我们就来制作一个影片剪辑，具体步骤如下：
1、打开文件“选择题设计”，点插入→新建元件，在名称中输入“对错标记”，如图所示，然后点确定。

2、在元件编辑窗口中，打开代码窗口，输入stop()，然后再连续插入两个空白关键帧，在第二帧中画一个“√”，在第三帧画一个“×”，然后相对于舞台全居中，如图所示，这样元件完成了。

3、回到场景中，在每个题目的后面拖入一个元件，分别取实例名为“dc1”、“dc2”、“dc3”、“dc4”。

4、修改代码如下：
import flash.events.MouseEvent;
tiJiao.addEventListener(MouseEvent.CLICK,queDing);
function queDing(e:MouseEvent):void
{
//变量i用于累计做对的题目的数目，以便于统计成绩
var i:int = 0;
if (da12.selected)
{
i++;
dc1.gotoAndStop(2);
}
else
{
dc1.gotoAndStop(3);
}
if (da24.selected)
{
i++;
dc2.gotoAndStop(2);
}
else
{
dc2.gotoAndStop(3);
}
if (da31.selected && da32.selected && da33.selected && ! da34.selected)
{
i++;
dc3.gotoAndStop(2);
}
else
{
dc3.gotoAndStop(3);
}
if (da41.selected && da42.selected && ! da43.selected && da44.selected)
{
i++;
dc4.gotoAndStop(2);
}
else
{
dc4.gotoAndStop(3);
}
fenShu.text = String(i * 25);
}
5、再次测试文件，可以发现系统给出对错标记了。

对于第二个问题就更容易解决了，只要选择显示分数的那个TextInput 组件的第二个组件参数的√去掉就不能手动输入文字了。