flash基础教程第十章.ppt

1、,第10讲 应用组件,掌握用户接口组件的使用方法 。 掌握使用用户接口组件制作测试小软件的方法 。 掌握媒体控制组件和用户接口组件配合制作视频播放器的方法 。 掌握媒体控制组件和用户接口组件配合制作路径设置播放器 。,10.1 认识用户接口组件 10.2 认识媒体播放器组件 10.3 课后作业,本章大纲,10.1 认识用户接口组件,10.1.1 知识点讲解,用户接口组件是Flash 8组件中的重要组成部分，多用于网站开发中的表单制作和应用程序开发，例如，信息注册系统、电子购物系统等 。,一、手动创建组件。 （1）利用【窗口】/【组件】菜单命令，打开【组件】面板，展开【User Interfac

2、e】选项，如图10-1所示，一共有22个用户接口组件。 （2）组件的创建方法十分简单，只需将一个组件从【组件】窗口中拖入到舞台中，即可创建成功,如图10-2所示 。,图10-1 用户接口组件,图10-2 部分组件展示,二、手动修改组件参数 修改组件参数的一般方法是：首先单击选中舞台上的组件，然后在【参数】面板中进行参数设置或修改，图10-3所示为按钮组件的参数面板 。,图10-3 按钮的参数面板,三、代码创建组件及修改组件参数 创建组件和修改组件参数的方法除了手动操作外，还可以通过代码来实现 。,10.1.2 范例解析（一）创建“DateChooser”组件练习,一、请同学们在老师的带领下使用

3、手动和代码两种方式创建组件，并按要求完成以下操作 。,1、手动创建并修改组件。 （1）新建一个Flash文档，文档属性保持默认参数。 （2）将“DateChooser”组件拖入到舞台中，测试播放影片，得到如图10-4所示的精美日历效果，并且可以对日期和月份进行选择操作，一个“DateChooser”组件就手动创建成功了。 （3）选中舞台上的“DateChooser”组件，打开【参数】面板，如图10-5所示。,图10-4 创建“DateChooser”组件,图10-5 参数面板,“DateChooser”组件的参数介绍。“dayNames”： 设置一星期中各天的名称。“disabledDays”

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

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

6、义：在运行时创建组件的一个实例。参数：className：一个对象，指示新实例的类。instanceName：一个字符串，指示新实例的实例名称。depth：一个数字，指示新实例的深度。initObject：一个对象，它包含新实例的初始化属性。,（3）测试播放影片，一个“DateChooser”组件就创建成功了，如图10-11所示。,图10-10 组件拖入【库】面板,图10-11 创建“DateChooser”组件,（4）观察发现，此时的“DateChooser”组件的位置和大小、显示都未满足要求，需再输入代码进行参数设置。 （5）保存测试影片，效果如图10-12所示，通过对比可以发现手动设置和

7、代码设置能达到同样的效果 。,图10-12 设置效果,10.1.3 范例解析（二）制作“账务结算系统”,账务结算是日常生活中十分常见的工作，随着账务结算的日益繁杂，出现了账务结算系统。本案例将带领读者使用Flash组件制作一个简单的账务结算系统，其制作思路及效果如图10-13所示 。,图10-13 制作思路及效果,打开制作模板,放入组件,修改组件参数,最终效果2,最终效果,输入代码,1、布置舞台。 （1）打开教学资源中的“素材第10讲账务计算系统制作模板.fla”文件，如图10-14所示。 （2）将“Label”、“TextInput”、“RadioButton”、“CheckBox”、“Bu

8、tton”、“DateField”、“DataGrid”组件拖入到“组件”图层，并调整其位置和大小,得到如图10-15所示的效果。,图10-14 制作模板,图10-15 加入组件,2、设置组件参数。 （1）分别选中舞台上的“Label”组件，在【参数】面板中设置各个“Label”组件的【text】参数，如图10-16所示。 （2）修改“RadioButton”和“Button”组件的【label】参数，得到如图10-17所示的效果 。,图10-16 修改【Label】组件的【text】参数,图10-17 修改“RadioButton”、“Button”组件的【label】参数,（3）在【参数】

9、窗口中修改这些组件的【实例名称】选项，如图10-18所示 。,设置组件【实例名称】的目的是为后续程序调用使用，控制程序可以通过【实例名称】来调用相应组件和修改组件的参数。,mMoney,mYes,mReason,mHandler,mKind,mDate,mAccountant,mSubmit,mDataGrid,图10-18 修改组件【实例名称】,（4）选中舞台上【label】为“是”的“RadioButton”，在【参数】面板中设置其【data】参数为“是”，如图10-19所示。 （5）设置另一个“RadioButton”组件的【data】参数为“否”，如图10-20所示 。,图10-19

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

11、labels】的【值】用来外部显示，而【data】的【值】用来内部数据传输 。,3、写入控制代码。 （1）根据本案例要实现的功能，在“AS”层的第1帧输入代码及注释 。,在教学资源“素材第10讲账务结算系统账务结算系统.txt”中提供了本案例的全部代码。,（2）保存测试影片，本案例制作完成 。,10.1.4 课堂练习制作“脑筋急转弯测试,请同学利用“RadioButton”、“Button”和“Label”组件制作“脑筋急转弯测试”小软件，效果如图10-23所示 。,图10-23 个人性格测试,1、打开教学资源中的“素材第10讲脑筋急转弯制作模板.fla”文件。,2、在“组件”图层的第1帧处拖

12、入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所示 。,图10-24 放置组件,图10-25 修改组件的【lab

13、el】参数,图10-26 添加“Label”组件,7、在“组件”图层的第1帧上输入代码。 8、在“组件”图层的第2帧上输入代码。 9、保存测试影片，一个脑筋急转弯的测试小软件制作完成。,10.2 认识媒体播放器组件,FLV格式视频为目前在网络上流行的网络视频播放格式，其具有传输速度快、文件压缩比例大等优点。,10.2.1 知识点讲解,一、创建视频播放器。 （1）执行【窗口】/【组件】菜单命令，打开【组件】面板,目前常用的媒体接口组件放置在【FLV Playback Player8】和【FLV Playback Custom UI】两个选项中，如图10-27所示。 （2）将“FLVPlaybac

14、k”组件拖入到舞台上，如图10-28所示，即可创建一个视频播放器。,图10-27 媒体接口组件,图10-28 放入舞台,（3）选中舞台中的“FLVPlayback”组件，打开【参数】面板，单击【contentPath】选项，如图10-29所示 。,图10-29 参数设置,（4）单击按钮打开【内容路径】对话框，在输入框中输入“flv”视频文件的路径或单击 按钮打开【文件选择】对话框，选择本地计算机上的“flv”视频文件。 （5）播放测试影片即可播放制定的视频文件 。,二、更换播放器皮肤 （1）选中舞台中的“FLVPlayback”组件，打开【参数】面板，单击【skin】选项，如图10-30所示。

15、,图10-30,（2）单击按钮打开【选择外观】对话框，【参数】面板如图10-31所示，即可进行皮肤选择。,图10-31 选择皮肤,10.2.2 范例解析（一）创建播放器练习,请同学们在老师的带领下学习创建和修改播放器组件的方法，并按要求完成以下操作。,1、创建播放器。 （1）新建一个Flash文档，文档属性保持默认参数。 （2）将“FLVPlayback”组件拖入到舞台上。 （3）选中舞台上的“FLVPlayback”组件，利用【参数】面板将教学资源中的“素材第10讲创建媒体接口组件残垣断壁.flv”文件添加到播放器中 。,（4）至此播放器制作完成，测试影片，效果如图10-32所示。,图10-

16、32 播放视频,2、改变播放器皮肤。 （1）观看之后发现播放器的大小和播放器皮肤都需要进一步调整。在【参数】面板中设置播放器宽高为“550px400px”，并相对舞台居中对齐使其刚好覆盖整个舞台。 （2）在【参数】对话框的【skin】选项中设置不同的皮肤。 （3）设置完成后再次测试播放影片，一个具有控制按钮的播放器效果就制作完成了，效果如图10-33所示 。,图10-33 添加皮肤,10.2.3 范例解析（二）制作“视频点播系统”,在本案例将使用媒体播放组件和用户接口组件结合的方式，制作一个集海报宣传、电影播放为一体的视频点播系统，其制作思路及效果如图10-34所示 。,1、复制文件。 （1）

17、新建一个Flash文档，设置文档【尺寸】为“550px420px”，【背景颜色】为“黑色”，其他属性保持默认参数 。,图10-34 制作思路及效果图,（2）按Ctrl+S快捷键保存文档到指定目录下，将教学资源中的“素材第10讲视频点播系统”文件夹下的“电影”和“电影海报”两个文件夹复制粘贴到与影片源文件相同的目录下。 2、布置舞台。 （1）将“FLVPlayback”组件拖入舞台，在【参数】面板中设置其宽高为“550px310px”，位置坐标x、y都为“0”，并设置“FLVPlayback”组件的【skin】参数为“ClearOverAll.swf”，如图10-35所示。 （20设置舞台中的“

18、FLVPlayback”组件的【实例名称】为“mFLVPlayback”。 （30将“Loader”组件拖入舞台，在【参数】面板中设置其宽高为“550px100px”，位置坐标x、y分别为“0”、“315”，如图10-36所示 。,图10-35 拖入“FLVPlayback”组件,图10-36 拖入“Accordion”组件,（4）按住Ctrl键拖动鼠标，复制出3个“Loader”组件，并设置其位置，最终效果如图10-37所示 。,图10-37 复制“Loader”组件,（5）从左至右依次选中舞台上的“Loader”组件，在【参数】面板中设置其【实例名称】为“mLoader1”、“mLoade

19、r2”、“mLoader3”、“mLoader4”，如图10-38所示 。,mLoader1,mLoader2,mLoader3,mLoader4,图10-38 设置“Loader”组件的【实例名称】,（3）输入控制代码。 （1）根据本案例要实现的功能，在“图层1”的第1帧输入代码。,在教学资源“素材第10讲视频点播系统视频点播系统.txt”中提供了本案例的全部代码。,（2）保存测试影片，一个视频点播系统制作完成 。,10.2.4 课堂练习制作“路径设置播放器 ”,请同学们利用“FLVPlayback”、“TextInput”、“Button”3种组件制作一个可以进行路径设置的视频播放器，效果如图10-39所示 。,1、新建一个Flash文档，设置