第16课Flash组件的使用(14).ppt

FlashMX2004提供了一些简单的交互元件来简化交互式动画的制作，如单选项（RadioButton）、复选框（CheckBox）、下拉列表框（ComboBox）、按钮（Button）、滚动窗格（ScrollPane）、列表框（List）等，这些交互元件组合起来就形成Flash组件。在Flash界面中选择窗口开发面板组件菜单命令，打开“组件”面板（默认情况下，“组件”面板是已经展开的），即可看到它自带的所有组件，如图15-1所示。,第十五课Flash组件的使用,图15-1,按【Ctrl+F7】键也可打开或隐藏“组件”面板。,在Flash组件中，最常用的是UIComponents组件，因此本课主要对UIComponents组件进行介绍。每个Flash组件都有自己的属性和方法，按住鼠标左键将这些组件拖放到舞台中，再选中组件即可在“属性”面板中看到其属性和参数。可以通过动作命令来设置它们，下面介绍最常用的几个组件。,复选框,创建复选框设置复选框属性,在一系列选择项目中，利用复选框可以同时选取多个项目，利用UI组件中的CheckBox可以创建多个复选框，并为其设置相应的参数。,创建复选框,创建复选框的具体操作如下：（1）新建一个文件，利用文本工具在舞台中创建一个静态文本框，并输入“在此选择你喜爱的食物”。该文本在这里只起到指示标签的作用。（2）展开“组件”面板下的UIComponents选项，选择CheckBox，按住鼠标左键拖动它到舞台上，如图15-2所示，或者双击CheckBox也可在舞台上创建一个复选框。（3）用同样的方法再创建4个复选框，并用“对齐”面板使其水平对齐，如图15-3所示。,图15-2,图15-3,设置复选框属性,复选框创建完成后所有复选框都是相同的，并没有完全符合用户的要求，还需要对其属性进行设置才能成为真正有意义的复选框。选中拖放到舞台中的复选框，展开“属性”面板，单击其右上角的“参数”选项卡，其中就显示了复选框的参数列表框，如图15-4所示。,图15-4,在该面板中各参数的含义如下：,label：确定复选框旁边的显示内容。默认值是“CheckBox”。labelPlacement：确定复选框上标签文本的方向。其中包括4个选项“left”、“right”、“top”和“bottom”，默认值是“right”。selected：确定复选框的初始状态为选中（true）或取消选中（false）。被选中的复选框中会显示一个勾。,如在label右边的文本框中输入“西瓜”，在labelPlacement中保持默认值“right”，在selected中选择“false”，复选框的状态如图15-5所示。用相同的方法设置其他4个复选框的属性，如图15-6所示。,图15-5,图15-6,单选项,创建单选项设置单选项属性,利用UI组件中的RadioButton可以创建多个单选项，并为其设置相应的参数。,创建单选项,创建单选项的具体操作与复选框类似，只需在“组件”面板下的UIComponents类中选择RadioButton，按住鼠标左键拖动它到舞台上即可。如图15-7所示就是将几个单选项拖放到舞台中的效果。,图15-7,设置单选项属性,和复选框一样，要使拖放到舞台中的单选项变得有意义，必须在“属性”面板的“参数”选项卡中设置其参数，选中单选项，“属性”面板如图15-8所示。,图15-8,在该面板中各参数的含义如下：,data：它是一个文本字符串数组，为label参数中的各项目指定相关联的值，它没有默认值。groupName：指定该单选项所属的单选项组，该参数相同的单选项属于一组，而且在一组单选项中只能选择一个单选项。label：设置按钮上的文本值，默认值是“RadioButton”（单选项）。labelPlacement：确定单选项旁边标签文本的方向。其中包括4个选项“left”、“right”、“top”或“bottom”，默认值为“right”。,选中第一个单选项，在Label右边的文本框中输入“文则天”，在GroupName文本框中输入“皇帝”，在selected中选择“false”，在LabelPlacement中保持默认值“right”，单选项的状态如图15-9所示。用相同的方法设置其他3个单选项的属性，如图15-10所示。,selected：确定单选项的初始状态为被选中（true）或取消选中（false），默认值为“false”。被选中的单选按钮中会显示一个圆点。一个组内只有一个单选项可以被选中。如果一组内有多个单选项被设置为“true”，则会选中最后实例化的单选项。,图15-10,图15-9,下拉列表框,创建下拉列表框设置下拉列表框属性,Flash组件中的下拉列表框与对话框中的下拉列表框类似，单击右边的下拉按钮即可弹出相应的下拉列表，以供选择需要的选项。,创建下拉列表框,创建下拉列表框的具体操作与复选框类似，只需在“组件”面板下的UIComponents类中选择ComboBox，按住鼠标左键拖动它到舞台上即可。如图15-11所示就是将下拉列表框ComboBox拖放到舞台中的效果。,图15-11,设置下拉列表框属性,选中下拉列表框，“属性”面板中的“参数”选项卡如图15-12所示。,图15-12,在该面板中各参数的含义如下：,data：将一个数据值与ComboBox组件中的每个项目相关联。editable：决定用户是否可以在下拉列表框中输入文本。如果可以输入则选择“true”，如果只能选择不能输入则选择“false”，默认值为“false”。labels：用一个文本值数组填充ComboBox组件，它决定下拉菜单的显示内容。单击该项右边的图标，将打开如图15-13所示的“值”对话框，单击左上角的按钮，可以为下拉列表添加一个选项。如这里删除文本框中的defaultvalue，然后输入“北京”，如图15-14所示。再次单击按钮，用相同的方法添加下拉列表中的其他选项，如图15-15所示。,图15-13,图15-14,图15-15,rowCount：确定在不使用滚动条时最多可以显示的项目数。默认值为5。,选中拖放到舞台中的下拉列表框，在“属性”面板中进行如图15-16所示的设置。按【Ctrl+Enter】键测试动画，下拉列表框的显示如图15-17所示。,图15-16,图15-17,列表框,创建列表框设置列表框属性,Flash组件列表框的作用是让用户在已有的选项列表中选择需要的选项。列表框与下拉列表框类似，其属性设置也大致相同。,创建列表框,打开“组件”面板下的UIComponents类，在其中选择List，按住鼠标左键拖动它到舞台上即可。如图15-18所示就是将列表框List拖放到舞台中的效果。,图15-18,设置列表框属性,选中列表框，“属性”面板中的“参数”选项卡如图15-19所示。,图15-19,在该面板中各参数的含义如下：,data：填充列表数据的值数组。它是一个文本字符串数组，为label参数中的各项目指定相关联的值，其内容应与labels完全相同。labels：该选项的作用与下拉列表框的labels选项类似，单击右边的图标也将打开“值”对话框，其设置方法与下拉列表框类似。multipleSelection：用于确定是否可以选择多个选项。如果可以选择多个选项，则选择“true”，如果不能选择多个选项，则选择“false”。默认值为“false”。rowHeight：用于确定每个选项的高度，以像素为单位，默认值是20。,选中拖放到舞台中的列表框，在“属性”面板中进行如图15-20所示的设置。按【Ctrl+Enter】键测试动画，下拉列表框的显示如图15-21所示。,图15-20,图15-21,滚动条,创建滚动条设置滚动条属性,如果在某个大小固定的文本框中无法将所有内容显示完全，可以使用滚动条来显示这些内容。滚动条是动态文本框与输入文本框的组合，在动态文本框和输入文本框中添加水平和竖直滚动条，可以通过拖动滚动条来显示更多的内容。,创建滚动条,打开“组件”面板下的UIComponents类，在其中选择ScrollPane，按住鼠标左键拖动它到舞台上即可。如图15-22所示就是将滚动窗格ScrollPane拖放到舞台中的效果。,图15-22,设置滚动窗格属性,选中列表框，“属性”面板中的“参数”选项卡如图15-23所示。,图15-23,在该面板中各参数的含义如下：,contentPath：确定要加载到滚动条中的内容所在的位置。hLineScrollSize：确定每次按下滚动条两边的箭头按钮时水平滚动条移动多少个单位，默认值为5。hPageScrollSize：指明每次按下轨道时水平滚动条移动多少个单位，默认值为20。hScrollPolicy：确定是否显示水平滚动条。该值可以为“on”（显示）、“off”（不显示）或“auto”（自动），默认值为“auto”。scrollDrag：它是一个布尔值，用于确定是否允许用户在滚动条中滚动内容，如果允许，选择“true”选项，如果不允许选择“false”选项，默认值为“false”。vLineScrollSize：指明每次按下滚动条两边的箭头按钮时垂直滚动条移动多少个单位，默认值为5。,选中拖放到舞台中的滚动窗格，在“属性”面板中进行如图15-24所示的参数设置。按【Ctrl+Enter】键测试动画，滚动窗格的显示如图15-25所示。,图15-24,图15-25,vPageScrollSize：指明每次按下轨道时垂直滚动条移动多少个单位，默认值为20。vScrollPolicy：确定是否显示垂直滚动条。该值可以为“on”（显示）、“off”（不显示）或“auto”（自动），默认值为“auto”。,按钮,创建按钮设置按钮属性,按钮是Flash组件中比较简单的一个组件，利用它可执行所有的鼠标和键盘交互事件。,创建按钮,打开“组件”面板下的UIComponents类，在其中选择Button，按住鼠标左键拖动它到舞台上即可。如图15-26所示就是将按钮Button拖放到一个已包含下拉列表框的舞台中的效果。,图15-26,设置按钮属性,选中按钮，“属性”面板中的“参数”选项卡如图15-27所示。,图15-27,在该面板中各参数的含义如下：,icon：为按钮添加自定义图标，在其后的文本框中可以输入图标所在的位置，没有默认值。,label：它决定按钮上的显示内容，默认值是“Button”。labelPlacement：确定按钮上的标签文本相对于图标的方向。其中包括4个选项“left”、“right”、“top”和“bottom”，默认值是“right”。selected：如果Toggle的值是“true”，则该参数指定是按下（true）还是释放（false）按钮，默认值为“false”。toggle：确定是否将按钮转变为切换开关。如果想让按钮的行为就像一个普通按钮，一按下去马上弹起，则选择“false”选项；如果想让按钮在按下后保持按下状态，直到再次按下时才返回到弹起状态，则选择“true”，默认值为“false”。,为了理解按钮的作用，下面通过一个小实例来练习，其具体操作如下:（1）选中拖放到舞台中的按钮，如图15-26所示。在“属性”面板中进行如图15-28所示的参数设置。,图15-28,（2）在下拉列表框和按钮之间创建一个动态文本框，并在“属性”面板进行如图15-29所示的设置。再选中下拉列表框，并在“属性”面板中将其命名为“combobox”。,图15-29,（3）选中“提交”按钮，在“动作”面板中输入如下语句：on(click)_root.jg.text=你的学历是+_bobox.getValue()+。;/单击“提交”按钮，则在文本框“jg”中输出文字“你的学历是（源于组件的取值）。”,图15-30,（4）按【Ctrl+Enter】键测试动画，在学历的下拉列表框中选择某一选项，再单击“提交”按钮，即可在动态文本框中显示相应结论，如选择“小学”，则在动态文本框中显示“你的学历是小学”，如图15-30所示。,上机实战,创建背景及文本添加组件添加Actions语句,在本课上机实战中将练习制作一张用户调查表，最终效果如图15-31所示。在第一张表中填上调查的内容后单击“提交”按钮即可自动生成调查结果，再单击“返回”按钮即可自动回到第一张表中。本练习主要用到Flash中几种常用的组件，如下拉列表框、复选框、单选项、列表框、按钮等。其中的难点是为“提交”按钮添加响应按钮的语句。通过本课的练习，将使读者进一步巩固Flash组件的使用方法。对于没有练习到的Flash组件，读者可以结合课堂讲解和帮助文件自行练习。,图15-31,创建背景及文本,（1）新建一个文件，将背景色设为粉红色，背景大小设为450450像素，将图层1命名为“背景”，导入图片“花.jpg”，调整其大小，使其刚好能覆盖场景。（2）将图片“花”转换为图形元件，然后在“属性”面板中将其Alpha值设为15%，如图15-32所示。然后在第2帧按【F5】键沿用帧。,图15-32,其具体操作如下:,（3）新建一个图层，并命名为“文字”，选择文本工具，在“属性”面板中将文字属性设为“楷体、38、红色、加粗”，在舞台上方输入文字“用户调查表”，然后复制一份，将其颜色改为黄色，并移动到红色文字的左上方一点，形成立体文字。（4）在字符外单击一下，在“属性”面板中将文字属性设为“黑体、18、黑色”，在舞台上输入如图15-33所示的文字。,图15-33,（5）分别在“您的姓名”和“您的年龄”后面绘制两个适当大小的无边框白色矩形，然后在“您的姓名：”右侧绘制一个文本框，其大小应与矩形相同，在“属性”面板中将其设为“输入文本”，并命名为“name”，如图15-34所示。其中文本颜色为黑色。,图15-34,（6）将“您的姓名：”后面的输入文本框复制一份到“您的年龄：”后面，然后在“属性”面板中将其重新命名为“age”。（7）在“您的建议：”下方拖绘出一个文本框，在“属性”面板中将其设为“输入文本”，命名为“advice”，并选中“多行”，如图15-35所示。,图15-35,添加组件,其具体操作如下:（1）新建一个图层，并命名为“组件”，选择窗口开发面板组件菜单命令，打开“组件”面板。,（2）选择组件RadioButton，按住鼠标左键将其拖动两次到“性别：”后面，拖动5次到“对新产品的评价：”下面，拖动3次到“新产品与原产品的比较：”下面。选择组件ComboBox，按住鼠标左键将其拖动到“文化程度：”后面，拖动组件ScrollPane到“您的建议：”下面，调整其大小与文本框相同，拖动组件CheckBox到舞台的左下角，拖动组件Button到舞台的下方，最后用“对齐”面板将其对齐，如图15-36所示。,图15-36,（3）用选择工具选择“性别：”后面的第一个单选项，在“属性”面板中将其显示文字设为“女”，组名设为radioGroup，如图15-37所示。（4）用同样的方法设置“性别：”后面的第二个单选项，只是将其显示文字设为“男”即可。,图15-37,（5）选中“对新产品的评价：”下方的第一个单选项，在“属性”面板中将其显示文字设为“很好”，组名设为pingjia，如图15-38所示。（6）用同样的方法设置其他4个单选项，只是依次将其显示文字设为“较好”、“一般”、“较差”、“很差”。,图15-38,（7）选中“新产品与原产品的比较：”下方的第一个单选项，在“属性”面板中将其显示文字设为“比以前好”，组名设为bijiao。用同样的方法设置另外两个单选项，只是依次将其显示文字设为“与以前差不多”、“比以前差”。（8）选中“文化程度：”后的下拉列表框，在“属性”面板的“组件”下拉列表框中将其命名为“wen”，在“labels”后面单击图标，打开“值”对话框，在其中单击按钮增加8个值，并按如图15-39所示输入相应的值。,图15-39,（9）用相同的方法设置data，其余参数设置如图15-40所示。,图15-40,（10）选中“您的建议”下的滚动条，在“属性”面板中进行如图15-41所示的设置。,图15-41,（11）选中舞台左下方的复选框，在“属性”面板中将其命名为“lian”，其他参数设置如图15-42所示。,图15-42,（12）选中舞台下方的按钮，在“属性”面板中将其命名为“onclick”，将“labels”设为“提交”。至此第一个页面制作完成，效果如图15-43所示。,图15-43,（13）新建一个图层，并命名为“结果”，在第2帧插入关键帧，将第1帧中的“用户调查表”文本复制过来，并将其改为“调查结果”，然后在“调查结果”下面拖绘一个动态文本框，在“属性”面板中进行如图15-44所示的设置。（14）在文本框下方创建一个按钮组件，并在“属性”面板中将其命名为“onclick1”，将“labels”设为“返回”。至此第二个页面制作完成。,图15-44,添加Actions语句,其具体操作如下:（1）选中“结果