当前页面位置: » 丰搜网 » 文档中心 » 详细内容
商业flash实例制作--信息表单
在本实例中，将使用组件来创建一个包含两个页面的简单表单。该表单的内容是参加博彩来赢得一辆免费的 stiletto 电动汽车。表单1表单用于收集信息，第2页表单用于显示结果。本实例将按照下面三个步骤来完成这个表单：（本例的源文件请点击这里下载） 1.在影片中添加组件.
2.配置影片中的组件.
3.在影片中添加动作脚本使组件正常工作.
为了使用户能够顺利入门，这里已经提供了这个影片的背景、相关文本字段和图形。只需要再添加并配置组件和动作脚本以使之成为一个交互式表单即可。
创建窗体
为了方便大家的制作，首先打开我们提供的table.fla这个flash源文件,可以在这个文件的基础上进行下面的工作,影片打开后的界面如图11所示:
图1 表单原始界面
添加组件
首先需要向影片中添加组件，并把它们放置在舞台上。按照计划需要向第一个表单中添加一个复选框、一个组合框和一个普通按钮,还要在第二个表单中添加一个普通按钮。
要向影片中添加组件，方法很简单,可以把相应的组件从“组件”面板中拖到舞台上，或者在“组件”面板中双击要添加的组件,组件会自动放置在舞台的中心。当向影片中添加组件后，影片的“库”面板中也会显示该组件。
给影片添加组件,一个好的习惯就是为组件单独建立一层,这样便于对组件的编辑和修改. 所以在影片中新创建一个图层并命名为 ui,表单中的所有组件将放在这个层中。
在时间轴的 ui 层中单击第 6 帧,选择“插入/空白关键帧”菜单命令,添加空白关键帧,目的是作为两个表单之间的分界线,前6帧用于第1个表单,第6帧以后用于第2个表单.
添加复选框：
在 ui 层中选择第 1 帧,把“checkbox”组件从“组件”面板拖到舞台中,把它放在询问用户是否想进入博彩那一段文本的下面.如图2所示：
图2 添加checkbox”组件
新添加的“checkbox”组件会出现在“库”面板的“flash ui components”文件夹中,如图3所示：
图3 组件添加到flash ui components中
添加组合框：
使用“combobox”组件创建一个简单的下拉菜单，其中包含用户可以选择的项目。也可以使用“combobox”构建更为复杂的下拉菜单，这个菜单可以自动滚动到以用户输入到文本字段中的字母开头的菜单项。
把“combobox”组件从“组件”面板拖到舞台中。把它放在“选择用户喜欢的颜色:”文本下,如图4所示：
图4 添加combobox组件
“combobox”组件也会出现在“库”面板的“flash ui components”文件夹中,如上图13-22所示。
添加普通按钮
使用“pushbutton”组件创建两个普通按钮,一个按钮放在第1个表单中，用来提交表单中的信息。另一个按钮放在第2个表单中，用来返回到第1个表单，并把以前提交的值填回第1个表单中。
把“pushbutton”组件从“组件”面板拖到舞台中,把它放在窗体的右下角，使它和“姓名:”及“电子邮件:”文本字段保持在同一水平线上,如图5所示：
图5 添加pushbutton组件
“pushbutton”组件也会出现在“库”面板的“flash ui components”文件夹中, 如上图5所示。
然后选中第6帧,同样将一个“pushbutton”组件放到表单的右小角,使它和”如果用户想再次参加比赛，请单击“返回”以返回到表单1”文本字段保持在同一水平线上,如图6所示:
图6 添加pushbutton组件
到此为止,影片中的所有组件就添加完成了,接下来需要对所添加的组件进行配置.
配置组件
组件添加到影片中后,还不能正常的工作,需要对其进行配置，用正确的信息设置组件以便用户选择。
可以使用“属性”面板或“组件参数”面板的“参数”选项卡来设置组件的参数。
高级用户也可以使用每个组件的 api 方法和属性来设置组件的参数、大小、外观和其它属性,每个组件元素可用的方法和属性列在组件名下面的动作脚本字典里。
接下来就对表单中的每个组件进行配置.
配置复选框:
1.在 ui 层中选择第 1 帧，然后选择舞台中的“checkbox”组件,它的所有参数会显示在“属性”面板中,如图7所示:
图7 “checkbox”组件“属性”面板
2.在“实例名称”文本框中输入 sweepstakes_box,作为此组件的action控制名。
3.在“label”(标签)文本框中键入文本“妙极了!”,做为此复选框的标签,播放效果如图13-27所示:
图8 复选框组件添加标签
4.在“initial value”(初始值)参数弹出式菜单中，选择“true”。这指定“checkbox”组件的初始状态是选中 (true) 还是没有选中 (false)。
5.在“lable placement”(标签定位)参数弹出式菜单中，保留默认值为右对齐。标签将显示在复选框的右边。
6.不需要更改 change handler 参数的默认值
change handler 参数是用户希望在选择某个项目时执行的函数,此函数必须和组件实例定义在同一个时间轴里,此参数是可选的。只有在希望用户访问组件时应产生一个动作的情况下，才需要指定这个参数。
完成上述操作后，“属性”面板应该是如图9所示的样子：
图9 配置完成后的“checkbox”组件“属性”面板
配置组合框:
1.在舞台中选择“combobox”组件,它的相关参数会显示在“属性”面板中,如图10所示:
图10 “combobox”组件“属性”面板
2.在“实例名称”文本框中键入color_box ,作为此组件的action控制名。
3.确保将“editable”(可编辑)参数设为 false,这样可以防止用户键入自已的文本。
4.labels (标签)参数显示用户可以选择的一个值列表,单击“labels”字段，然后单击放大镜按钮 打开“值”弹出式窗口,单击加号 (+) 按钮可以向列表中输入一个新的值,如图11所示:
图11 “值”弹出式窗口
5.单击 default value 字段，然后键入“珍珠白”作为第 1 个值。
6.单击加号 (+) 按钮输入下一个值,单击 default value 字段，然后键入“宝石蓝”作为下一个值。
7.用相同的方式，把“翡翠绿”也添加到列表中。如果想继续向列表中添加项目,可以重复此布添加更多的项目.
完成上述操作后，“值”弹出式窗口应该如图12所示:
图12 添加项目后的“值”弹出式窗口
8.单击“确定”按钮关闭“值”弹出式窗口。
9.data(数据) 参数是可选的,用来指定与列表框中的项目（标签）相关联的值,在本实例中不需要设置此项。
10.row count (行数)参数指定窗口中显示多少行,由于有三个选项，所以把值改为3即可。
11.无需输入 change handler 参数的名称。
完成上述操作后，“属性”面板应该如图13所示:
图13 配置完成后的“combobox”组件“属性”面板
配置普通按钮:
1.在图层ui的第 1 帧中选择“pushbutton”组件,组件的相关参数显示在“属性”面板中,如图14所示:
图14 “pushbutton”组件“属性”面板
2.在“属性”面板“实例名称”文本框中，键入 submit_btn, 作为此组件的action控制名。
3.在“属性”面板“label”(标签)文本框中，键入文本“提交”,此文本会显示在按钮上。
4.键入 onclick 作为“click handler”的名称,后面将编写动作脚本来定义“click handler”应该执行的操作。
完成上述操作后，“属性”面板应该如图15所示:
图16 配置完成后的“pushbutton”组件“属性”面板
5.在图层ui的第 6 帧中选择“pushbutton”组件,可以按照第1帧中类似的方法设置其属性.。
6.在“属性”面板“实例名称”文本框中，键入 return_btn, 作为此组件的action控制名。
7.在“属性”面板“label”(标签)文本框中，键入“返回”作为按钮上显示的提示文字。
8.键入 onclick 作为“click handler”的名称。
到此为止,表单中的所有组件就配置完成了,不过现在表单还不能正常工作,需要编写action动作脚本来收集表单信息并进行处理.
编写动作脚本来收集数据
一些动作脚本会用在整个影片中，而另一些只和特定的帧相关。下表可以帮助用户理解实例名称。
| 实例名称 | 说明 |
| color_box | 表单1上的“color”组合框 |
| sweepstakes_box | 表单1上的“sweepstakes”复选框 |
| submit_btn | 表单1上的“submit”普通按钮 |
| name | 表单1上的名称输入文本框 |
| email | 表单1上的电子邮件地址输入文本框 |
| return_btn | 表单2中的“return”普通按钮 |
| name_result | 表单2中显示用户名的动态文本框 |
| email_result | 表单2中显示用户电子邮件地址的动态文本框 |
| color_result | 表单2中显示用户颜色选择的动态文本框 |
| sweepstakes_text | 表单2中根据用户是否选择参加搏彩来显示不同文本的动态文本框 |
为整个影片编写动作脚本:
组件动作脚本放置在关键帧中,“click handler”参数指定当“pushbutton”组件被激活时进行的操作,默认值是 onclick，这意味着当用户单击某个普通按钮时，它会被激活。首先要为 onclick 创建一个函数,这是一个分支函数，它首先判断被按下的是“提交”按钮还是“返回”按钮，然后据此执行动作。
1．创建一个新的层，并命名为 all actions。这将用于在整个影片中运行的动作脚本。
2．如果“动作”面板没有打开，选择“窗口/动作”菜单命令。
3．按下 control+shift+e 键 (windows) 或 command+shift+e 键 (macintosh)，或单击右上角的控制图标（一个上面有复选标记的三角形）并从弹出菜单中选择“专家
模式”，切换到专家
模式。
4．首先，输入普通按钮的回调函数。这是个条件语句，根据单击的按钮进行分支。如果单击的是“提交”按钮，它将分支到 getresults 函数并进入表单2，如果单击的是“返回”按钮，它将进入表单1。
在“动作”面板中输入下面的代码。
//单击鼠标回调
function onclick(btn) {
if (btn == submit_btn) {
getresults();
gotoandstop("pg2");
} else if (btn == return_btn) {
gotoandstop("pg1");
}
}
注意：虽然不建议这样做，但如果用户不想编写动作脚本，可以从本实例中复制这段文本并粘贴到“动作”面板。
5．现在编写 getresults 函数。该函数可以从搏彩复选框和颜色组合框中获取结果。它以标签的形式从组合框中得到结果，因而可以显示结果。
//从pg 1中得到返回值
function getresults() {
sweepstakes_result = sweepstakes_box.getvalue();
color_result = color_box.getselecteditem().label;
selecteditem = color_box.getselectedindex();
}
6．现在编写 initvalues 函数。这将用用户以前选择的值初始化表单1中的值。当用户单击“返回”按钮时，它会运行。
// 初始化pg 1
function initvalues() {
sweepstakes_box.setvalue(sweepstakes_result);
if (!started) {
color_box.setselectedindex(0);
started = true;
} else {
color_box.setselectedindex(selecteditem);
}
}
7.最后，在动作脚本的开头添加对 initvalues 函数的调用。完成上述操作后，动作脚本应该是下面的样子：
initvalues();
// push button callback
function onclick(btn) {
if (btn == submit_btn) {
getresults();
gotoandstop("pg2");
} else if (btn == return_btn) {
gotoandstop("pg1");
}
}
// initialize the values on pg 1 with the values the user has previously selected
function initvalues() {
sweepstakes_box.setvalue(sweepstakes_result);
if (!started) {
color_box.setselectedindex(0);
started = true;
} else {
color_box.setselectedindex(selecteditem);
}
}
// get results from pg 1
function getresults() {
sweepstakes_result = sweepstakes_box.getvalue();
color_result = color_box.getselecteditem().label;
selecteditem = color_box.getselectedindex();
}
用户已经完成了要在整个影片中运行的脚本。但是，仍然需要为表单1和表单2中的帧添加脚本。
为每一个关键帧添加动作脚本:
只有当用户选择特定的帧时，才需要执行某些动作脚本。要使动作脚本工作，需要给每个关键帧命名。
1.创建一个新层，并命名为 frame actions。选择第 1 帧，然后选择“插入/空白关键帧”菜单命令来插入一个空白关键帧。使用属性检查器将关键帧命名为 pg1。用同样的方式，在第 6 帧中插入一个关键帧，并命名为 pg2。
2.在 frame actions 层的第 1 帧中选择关键帧，并编写下面的动作脚本以在第 1 帧 (pg1) 停止影片。
stop();
3.（可选）如果想在用户选择了复选框时显示某一文本，而在用户未选择时显示其它文本，可以编写一条带有文本的条件语句，将其插入表单2的 sweepstakes_text 动态文本字段。在 frame actions 层中选择名为 pg2 的关键帧，并在“动作”面板中写入以下内容：
// sweepstakes text
if (sweepstakes_result==true) {
sweepstakes_text = "you have been entered in the stiletto fantasy sweepstakes. winners are announced at the end of each month.";
} else {
sweepstakes_text = "you have not been entered in the stiletto fantasy sweepstakes.";
}
注意：不要剪切此动作脚本并将其粘贴到“动作”面板。它不会正确运行，因为在第 1 行和第 2 行的文本之间有分行符。
测试影片
完成上面的所有工作后,还需要对影片进行测试,以检查影片是否工作正常.
1.选择“控制/测试影片”菜单命令,影片即可在 flash player 中运行。
2.通过在表单中选择和不选择复选框来确定表单是否工作。
3.从组合列表框中选择一种颜色，以确定是否出现第2个表单。
4.完成测试后，在播放器中选择“文件/关闭菜单”命令来关闭影片。
5.如果发现有任何错误，请使用箭头工具来选择组件，然后在属性检查器中进行纠正,如果需要，重新测试影片。
