10 应用组件

（4）至此播放器制作完成，测试影片，效果如图10-32所示。
图10-32 播放视频
2、改变播放器皮肤。 （1）观看之后发现播放器的大小和播放器皮肤都需要进一步调整 。在【参数】面板中设置播放器宽高为“550px×400px”，并相 对舞台居中对齐使其刚好覆盖整个舞台。 （2）在【参数】对话框的【skin】选项中设置不同的皮肤。 （3）设置完成后再次测试播放影片，一个具有控制按钮的播放器 效果就制作完成了，效果如图10-33所示 。
mMoney mYes
mKind mDate
mAccountant
mHandler mReason mSubmit
mDataGrid
பைடு நூலகம்
图10-18 修改组件【实例名称】
（4）选中舞台上【label】为“是”的“RadioButton”，在【参数 】面板中设置其【data】参数为“是”，如图10-19所示。 （5）设置另一个“RadioButton”组件的【data】参数为“否”，如 图10-20所示 。
图10-5 参数面板 图10-4 创建“DateChooser”组件
“DateChooser”组件的参数介绍。 “dayNames”： 设置一星期中各天的名称。 “disabledDays”： 指示一星期中禁用的各天，最多 具有7个值。 “firstDayOfWeek”： 指示一星期中的哪一天显示在 日期选择器的第一列中，此属性更改"日"列的显示顺 序。 “monthNames”： 设置在日历的标题行中显示的月 份名称。 “showToday”： 指示是否要加亮显示今天的日期。 （4）双击“dayNames”选项，打开如图10-6所示的【值】对话框， 将其值修改成如图10-7所示的效果，这时舞台上的“DateChooser” 组件显示如图10-8所示 。
（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所示 。
图10-21 设置【data】的【值】
图10-22 设置【labels】的【值】
“ComboBox”组件的【data】和【labels】两个参数是一 对相互配合的参数，其中【data】的【值】和【labels】的 【值】一一对应。只是【labels】的【值】用来外部显示， 而【data】的【值】用来内部数据传输 。
图10-19 设置【data】参数一
图10-20 设置【data】参数二
（6）选中舞台上的“ComboBox”组件，在【参数】面板中选中【 data】项，单击按钮打开【值】对话框，输入值，如图10-21所 示，设置完毕单击按钮关闭【值】对话框。 （7）选中【labels】选项，单击按钮打开【值】对话框，设置各参 数，如图10-22所示，设置完毕单击确定按钮关闭【值】对话框 。
图10-11 创建“DateChooser”组件 图10-10 组件拖入【库】面板
（4）观察发现，此时的“DateChooser”组件的位置和大小、显示都 未满足要求，需再输入代码进行参数设置。 （5）保存测试影片，效果如图10-12所示，通过对比可以发现手动设 置和代码设置能达到同样的效果 。
图10-12 设置效果
用法： createClassObject(className, instanceName, depth, initObject) 意义： 在运行时创建组件的一个实例。 参数： className：一个对象，指示新实例的类。 instanceName：一个字符串，指示新实例的实例名称。 depth：一个数字，指示新实例的深度。 initObject：一个对象，它包含新实例的初始化属性。 （3）测试播放影片，一个“DateChooser”组件就创建成功了，如图 10-11所示。
3、写入控制代码。 （1）根据本案例要实现的功能，在“AS”层的第1帧输入代码 及注释 。
在教学资源“素材\第10讲\账务结算系统\账务结算系 统.txt”中提供了本案例的全部代码。
（2）保存测试影片，本案例制作完成 。
10.1.4 课堂练习──制作“脑筋急转弯测试
请同学利用“RadioButton”、“Button”和“Label”组件制作 “脑筋急转弯测试”小软件，效果如图10-23所示 。
第10讲
应用组件
学习目标
掌握用户接口组件的使用方法 。
掌握使用用户接口组件制作测试小软件的方法 。
掌握媒体控制组件和用户接口组件配合制作视频播放器的方法 。
掌握媒体控制组件和用户接口组件配合制作路径设置播放器 。
本章大纲
• 10.1 • 10.2 • 10.3
认识用户接口组件 认识媒体播放器组件 课后作业
请同学们在老师的带领下学习创建和修改播放器组件的方法，并 按要求完成以下操作。
1、创建播放器。 （1）新建一个Flash文档，文档属性保持默认参数。 （2）将“FLVPlayback”组件拖入到舞台上。 （3）选中舞台上的“FLVPlayback”组件，利用【参数】面板将教学 资源中的“素材\第10讲\创建媒体接口组件\残垣断壁.flv”文件添 加到播放器中 。
图10-24 放置组件
图10-25 修改组件的【label】参数
图10-26 添加“Label”组件
7、在“组件”图层的第1帧上输入代码。
8、在“组件”图层的第2帧上输入代码。
9、保存测试影片，一个脑筋急转弯的测试小软件制作完成。
10.2
认识媒体播放器组件
FLV格式视频为目前在网络上流行的网络视频播放格式，其具有 传输速度快、文件压缩比例大等优点。
图10-27 媒体接口组件
图10-28 放入舞台
（3）选中舞台中的“FLVPlayback”组件，打开【参数】面板， 单击【contentPath】选项，如图10-29所示 。
图10-29 参数设置
（4）单击按钮打开【内容路径】对话框，在输入框中输入“flv” 视频文件的路径或单击 按钮打开【文件选择】对话框，选择 本地计算机上的“flv”视频文件。 （5）播放测试影片即可播放制定的视频文件 。
图10-16 修改【Label】组件的【text】参数
图10-17 修改“RadioButton”、“Button”组件的【label】参数
（3）在【参数】窗口中修改这些组件的【实例名称】选项，如图1018所示 。 设置组件【实例名称】的目的是为后续程序调用使用，控 制程序可以通过【实例名称】来调用相应组件和修改组件 的参数。
10.1 认识用户接口组件
用户接口组件是Flash 8组件中的重要组成部分，多用于网站开 发中的表单制作和应用程序开发，例如，信息注册系统、电子购物系 统等 。
10.1.1 知识点讲解
一、手动创建组件。 （1）利用【窗口】/【组件】菜单命令，打开【组件】面板，展 开【User Interface】选项，如图10-1所示，一共有22个用 户接口组件。 （2）组件的创建方法十分简单，只需将一个组件从【组件】窗 口中拖入到舞台中，即可创建成功,如图10-2所示 。
二、更换播放器皮肤 （1）选中舞台中的“FLVPlayback”组件，打开【参数】面板， 单击【skin】选项，如图10-30所示。
图10-30
（2）单击按钮打开【选择外观】对话框，【参数】面板如图1031所示，即可进行皮肤选择。
图10-31 选择皮肤
10.2.2
范例解析（一）——创建播放器练习
图10-14 制作模板
图10-15 加入组件
2、设置组件参数。 （1）分别选中舞台上的“Label”组件，在【参数】面板中设置各个 “Label”组件的【text】参数，如图10-16所示。 （2）修改“RadioButton”和“Button”组件的【label】参数，得到 如图10-17所示的效果 。
图10-6 【值】对话框
图10-7 修改参数
图10-8 “DateChooser”组件
（5）修改后“DateChooser”组件的星期显示变为中文，将其宽 高修改为“400px×300px”，效果如图10-9所示。
图10-9 星期信息显示为中文
2、代码创建组件。 （1）从【组件】面板中将“DateChooser”组件拖入【库】面 板中，如图10-10所示 。 使用代码创建组件首先需将要创建的组件拖入【库】面板 中，再使用代码来创建组件和设置参数。 （2）选中默认“图层1”上的第1帧输入以下代码。 createClassObject(mx.controls.DateChooser, “my_dc”, 1)
10.1.2 习
范例解析（一）──创建“DateChooser”组件练
一、请同学们在老师的带领下使用手动和代码两种方式创建组件， 并按要求完成以下操作 。
1、手动创建并修改组件。 （1）新建一个Flash文档，文档属性保持默认参数。 （2）将“DateChooser”组件拖入到舞台中，测试播放影片，得 到如图10-4所示的精美日历效果，并且可以对日期和月份进行选 择操作，一个“DateChooser”组件就手动创建成功了。 （3）选中舞台上的“DateChooser”组件，打开【参数】面板， 如图10-5所示。
图10-23 个人性格测试