我们来利用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、书写代码这样我们就完成了所有的准备工作,那么我们需要用代码完成哪些任务呢?主要有以下几个方面:⑴点提交按钮,系统应该给出判断。