第10讲 应用组件 学习目标 掌握用户接口组件的使用方法 。 掌握使用用户接口组件制作测试小软件的方法 。

Presentation on theme: "第10讲 应用组件 学习目标 掌握用户接口组件的使用方法 。 掌握使用用户接口组件制作测试小软件的方法 。"— Presentation transcript:

1 第10讲 应用组件 学习目标 掌握用户接口组件的使用方法 。 掌握使用用户接口组件制作测试小软件的方法 。
第10讲 应用组件 学习目标 掌握用户接口组件的使用方法 。 掌握使用用户接口组件制作测试小软件的方法 。 掌握媒体控制组件和用户接口组件配合制作视频播放器的方法 。 掌握媒体控制组件和用户接口组件配合制作路径设置播放器 。

2 本章大纲 认识用户接口组件 认识媒体播放器组件 课后作业

3 10.1 认识用户接口组件 用户接口组件是Flash 8组件中的重要组成部分，多用于网站开发中的表单制作和应用程序开发，例如，信息注册系统、电子购物系统等 。 知识点讲解 一、手动创建组件。 （1）利用【窗口】/【组件】菜单命令，打开【组件】面板，展开【User Interface】选项，如图10-1所示，一共有22个用户接口组件。 （2）组件的创建方法十分简单，只需将一个组件从【组件】窗口中拖入到舞台中，即可创建成功,如图10-2所示 。 图 部分组件展示 图10-1 用户接口组件

4 修改组件参数的一般方法是：首先单击选中舞台上的组件，然后在【参数】面板中进行参数设置或修改，图10-3所示为按钮组件的参数面板 。
二、手动修改组件参数 修改组件参数的一般方法是：首先单击选中舞台上的组件，然后在【参数】面板中进行参数设置或修改，图10-3所示为按钮组件的参数面板 。 图10-3 按钮的参数面板 三、代码创建组件及修改组件参数 创建组件和修改组件参数的方法除了手动操作外，还可以通过代码来实现 。

5 10.1.2 范例解析（一）──创建“DateChooser”组件练习
一、请同学们在老师的带领下使用手动和代码两种方式创建组件，并按要求完成以下操作 。 1、手动创建并修改组件。 （1）新建一个Flash文档，文档属性保持默认参数。 （2）将“DateChooser”组件拖入到舞台中，测试播放影片，得到如图10-4所示的精美日历效果，并且可以对日期和月份进行选择操作，一个“DateChooser”组件就手动创建成功了。 （3）选中舞台上的“DateChooser”组件，打开【参数】面板，如图10-5所示。 图10-5 参数面板 图10-4 创建“DateChooser”组件

6 “DateChooser”组件的参数介绍。 “dayNames”： 设置一星期中各天的名称。 “disabledDays”： 指示一星期中禁用的各天，最多具有7个值。 “firstDayOfWeek”： 指示一星期中的哪一天显示在日期选择器的第一列中，此属性更改"日"列的显示顺序。 “monthNames”： 设置在日历的标题行中显示的月份名称。 “showToday”： 指示是否要加亮显示今天的日期。 （4）双击“dayNames”选项，打开如图10-6所示的【值】对话框，将其值修改成如图10-7所示的效果，这时舞台上的“DateChooser”组件显示如图10-8所示 。 图 “DateChooser”组件 图 【值】对话框 图 修改参数

7 createClassObject(mx.controls.DateChooser, “my_dc”, 1) 。
（5）修改后“DateChooser”组件的星期显示变为中文，将其宽高修改为“400px×300px”，效果如图10-9所示。 图10-9 星期信息显示为中文 2、代码创建组件。 （1）从【组件】面板中将“DateChooser”组件拖入【库】面板中，如图10-10所示 。 （2）选中默认“图层1”上的第1帧输入以下代码。 createClassObject(mx.controls.DateChooser, “my_dc”, 1) 。 使用代码创建组件首先需将要创建的组件拖入【库】面板中，再使用代码来创建组件和设置参数。

8 （3）测试播放影片，一个“DateChooser”组件就创建成功了，如图10-11所示。
用法： createClassObject(className, instanceName, depth, initObject) 意义： 在运行时创建组件的一个实例。 参数： className：一个对象，指示新实例的类。 instanceName：一个字符串，指示新实例的实例名称。 depth：一个数字，指示新实例的深度。 initObject：一个对象，它包含新实例的初始化属性。 （3）测试播放影片，一个“DateChooser”组件就创建成功了，如图10-11所示。 图 创建“DateChooser”组件 图 组件拖入【库】面板

9 （4）观察发现，此时的“DateChooser”组件的位置和大小、显示都未满足要求，需再输入代码进行参数设置。
（5）保存测试影片，效果如图10-12所示，通过对比可以发现手动设置和代码设置能达到同样的效果 。 图 设置效果

10 范例解析（二）──制作“账务结算系统” 账务结算是日常生活中十分常见的工作，随着账务结算的日益繁杂，出现了账务结算系统。本案例将带领读者使用Flash组件制作一个简单的账务结算系统，其制作思路及效果如图10-13所示 。 修改组件参数 打开制作模板 放入组件 最终效果2 最终效果 输入代码 图 制作思路及效果

11 （1）打开教学资源中的“素材\第10讲\账务计算系统\制作模板.fla”文件，如图10-14所示。
1、布置舞台。 （1）打开教学资源中的“素材\第10讲\账务计算系统\制作模板.fla”文件，如图10-14所示。 （2）将“Label”、“TextInput”、“RadioButton”、“CheckBox”、“Button”、“DateField”、“DataGrid”组件拖入到“组件”图层，并调整其位置和大小,得到如图10-15所示的效果。 图 制作模板 图 加入组件

12 （1）分别选中舞台上的“Label”组件，在【参数】面板中设置各个“Label”组件的【text】参数，如图10-16所示。
2、设置组件参数。 （1）分别选中舞台上的“Label”组件，在【参数】面板中设置各个“Label”组件的【text】参数，如图10-16所示。 （2）修改“RadioButton”和“Button”组件的【label】参数，得到如图10-17所示的效果 。 图 修改【Label】组件的【text】参数 图 修改“RadioButton”、“Button”组件的【label】参数

13 （3）在【参数】窗口中修改这些组件的【实例名称】选项，如图10-18所示 。
设置组件【实例名称】的目的是为后续程序调用使用，控制程序可以通过【实例名称】来调用相应组件和修改组件的参数。 mKind mMoney mDate mYes mAccountant mHandler mReason mSubmit mDataGrid 图 修改组件【实例名称】

14 （4）选中舞台上【label】为“是”的“RadioButton”，在【参数】面板中设置其【data】参数为“是”，如图10-19所示。

15 （7）选中【labels】选项，单击按钮打开【值】对话框，设置各参数，如图10-22所示，设置完毕单击确定按钮关闭【值】对话框 。
（6）选中舞台上的“ComboBox”组件，在【参数】面板中选中【data】项，单击按钮打开【值】对话框，输入值，如图10-21所示，设置完毕单击按钮关闭【值】对话框。 （7）选中【labels】选项，单击按钮打开【值】对话框，设置各参数，如图10-22所示，设置完毕单击确定按钮关闭【值】对话框 。 图 设置【labels】的【值】 图 设置【data】的【值】 “ComboBox”组件的【data】和【labels】两个参数是一对相互配合的参数，其中【data】的【值】和【labels】的【值】一一对应。只是【labels】的【值】用来外部显示，而【data】的【值】用来内部数据传输 。

16 3、写入控制代码。 （1）根据本案例要实现的功能，在“AS”层的第1帧输入代码及注释 。 在教学资源“素材\第10讲\账务结算系统\账务结算系统.txt”中提供了本案例的全部代码。 （2）保存测试影片，本案例制作完成 。

17 课堂练习──制作“脑筋急转弯测试 请同学利用“RadioButton”、“Button”和“Label”组件制作“脑筋急转弯测试”小软件，效果如图10-23所示 。 图 个人性格测试 1、打开教学资源中的“素材\第10讲\脑筋急转弯\制作模板.fla”文件。

18 2、在“组件”图层的第1帧处拖入3个“RadioButton”和1个“Button”组件，如图10-24所示。
3、在【参数】面板中分别设置舞台上的“RadioButton”组件和“Button”组件的【label】参数，如图10-25所示。 4、分别设置“月季花”组件的【data】为“1”，“玫瑰花”组件的【data】为“2”，“塑料花”组件的【data】为“3”。 5、在【参数】面板中设置“看答案”按钮的【实例名称】为“seeResult”。 6、在“组件”图层的第2帧处将【Label】组件拖入舞台，并设置其【实例名称】为“result”，如图10-26所示 。 图 修改组件的【label】参数 图 放置组件 图 添加“Label”组件

19 7、在“组件”图层的第1帧上输入代码。 8、在“组件”图层的第2帧上输入代码。 9、保存测试影片，一个脑筋急转弯的测试小软件制作完成。

20 认识媒体播放器组件 FLV格式视频为目前在网络上流行的网络视频播放格式，其具有传输速度快、文件压缩比例大等优点。 知识点讲解 一、创建视频播放器。 （1）执行【窗口】/【组件】菜单命令，打开【组件】面板,目前常用的媒体接口组件放置在【FLV Playback –Player8】和【FLV Playback Custom UI】两个选项中，如图10-27所示。 （2）将“FLVPlayback”组件拖入到舞台上，如图10-28所示，即可创建一个视频播放器。 图 放入舞台 图 媒体接口组件

21 （3）选中舞台中的“FLVPlayback”组件，打开【参数】面板，单击【contentPath】选项，如图10-29所示 。
图 参数设置 （4）单击按钮打开【内容路径】对话框，在输入框中输入“flv”视频文件的路径或单击 按钮打开【文件选择】对话框，选择本地计算机上的“flv”视频文件。 （5）播放测试影片即可播放制定的视频文件 。

22 （1）选中舞台中的“FLVPlayback”组件，打开【参数】面板，单击【skin】选项，如图10-30所示。
二、更换播放器皮肤 （1）选中舞台中的“FLVPlayback”组件，打开【参数】面板，单击【skin】选项，如图10-30所示。 图10-30 （2）单击按钮打开【选择外观】对话框，【参数】面板如图10-31所示，即可进行皮肤选择。 图 选择皮肤

23 10.2.2 范例解析（一）——创建播放器练习 请同学们在老师的带领下学习创建和修改播放器组件的方法，并按要求完成以下操作。
范例解析（一）——创建播放器练习 请同学们在老师的带领下学习创建和修改播放器组件的方法，并按要求完成以下操作。 1、创建播放器。 （1）新建一个Flash文档，文档属性保持默认参数。 （2）将“FLVPlayback”组件拖入到舞台上。 （3）选中舞台上的“FLVPlayback”组件，利用【参数】面板将教学资源中的“素材\第10讲\创建媒体接口组件\残垣断壁.flv”文件添加到播放器中 。

24 （4）至此播放器制作完成，测试影片，效果如图10-32所示。
图 播放视频 2、改变播放器皮肤。 （1）观看之后发现播放器的大小和播放器皮肤都需要进一步调整。在【参数】面板中设置播放器宽高为“550px×400px”，并相对舞台居中对齐使其刚好覆盖整个舞台。 （2）在【参数】对话框的【skin】选项中设置不同的皮肤。 （3）设置完成后再次测试播放影片，一个具有控制按钮的播放器效果就制作完成了，效果如图10-33所示 。 图 添加皮肤

25 范例解析（二）──制作“视频点播系统” 在本案例将使用媒体播放组件和用户接口组件结合的方式，制作一个集海报宣传、电影播放为一体的视频点播系统，其制作思路及效果如图10-34所示 。 图 制作思路及效果图 1、复制文件。 （1）新建一个Flash文档，设置文档【尺寸】为“550px×420px”，【背景颜色】为“黑色”，其他属性保持默认参数 。

26 （20设置舞台中的“FLVPlayback”组件的【实例名称】为“mFLVPlayback”。
（2）按Ctrl+S 快捷键保存文档到指定目录下，将教学资源中的“素材\第10讲\视频点播系统”文件夹下的“电影”和“电影海报”两个文件夹复制粘贴到与影片源文件相同的目录下。 2、布置舞台。 （1）将“FLVPlayback”组件拖入舞台，在【参数】面板中设置其宽高为“550px×310px”，位置坐标x、y都为“0”，并设置“FLVPlayback”组件的【skin】参数为“ClearOverAll.swf”，如图10-35所示。 （20设置舞台中的“FLVPlayback”组件的【实例名称】为“mFLVPlayback”。 （30将“Loader”组件拖入舞台，在【参数】面板中设置其宽高为“550px×100px”，位置坐标x、y分别为“0”、“315”，如图10-36所示 。 图 拖入“FLVPlayback”组件 图 拖入“Accordion”组件

27 （4）按住Ctrl键拖动鼠标，复制出3个“Loader”组件，并设置其位置，最终效果如图10-37所示 。
（5）从左至右依次选中舞台上的“Loader”组件，在【参数】面板中设置其【实例名称】为“mLoader1”、“mLoader2”、“mLoader3”、“mLoader4”，如图10-38所示 。 图 设置“Loader”组件的【实例名称】 mLoader3 mLoader2 mLoader4 mLoader1

28 （3）输入控制代码。 （1）根据本案例要实现的功能，在“图层1”的第1帧输入代码。 在教学资源“素材\第10讲\视频点播系统\视频点播系统.txt”中提供了本案例的全部代码。 （2）保存测试影片，一个视频点播系统制作完成 。

29 课堂练习──制作“路径设置播放器 ” 请同学们利用“FLVPlayback”、“TextInput”、“Button”3种组件制作一个可以进行路径设置的视频播放器，效果如图10-39所示 。 图 效果 1、新建一个Flash文档，设置文档【尺寸】为“730px×400px”， 【背景颜色】为“黑色”，其他属性保持默认参数 。

30 2、拖入“FLVPlayback”、“TextInput”、“Button”组件到舞台，设置其宽高和位置，得到如图10-40所示的效果。
图 放置组件 3、在参数面板中修改“Button”组件的【label】参数为“播放”，如图10-41所示 。 图 修改“Button”的【label】参数

31 2、分别设置舞台上组件的【实例名称】，如图10-42所示 。
my_FLVPlayback my_textInput my_Button 图 设置实例名称 5、选中舞台上的“Button”，按F9快捷键打开【动作】面板输入代码。 6、保存测试影片，一个可以由用户自己设置播放文件路径的播放器制作完成。

32 课后作业 一、操作题 1、利用“textInput”、“ComboBox”、“Button”组件制作一个简易计算器，如图10-43所示 。 图 简易计算器

33 二、制作一个信息提交表单，单击【提交信息】按钮，填写的信息将显示在右侧的栏目里，如图10-44所示 。
图 信息提交表单

34 二、思考题 1、组件可以方便在哪些方面进行开发？ 2、专门用来加载图片资源的用户接口组件是什么？ 3、可用来存储数据信息的用户接口组件是什么？ 4、请根据本讲所学，讲述手动创建和修改组件、代码创建和修改组件各自的优势和劣势。