组件是Flash中的重要部分，它是Flash应用程序开发提供的较为常用的组件。使用组件可以帮助开发者将应用程序的设计过程和编码过程分开。即使完全不了解ActionScript3.0的设计者也可以根据组件提供的接口来改变组件的参数，从而改变组件的相关特性，达到设计的目的。
通过组件中播放器组件的应用，可以快速地进行播放控制程序开发，即使不使用任何绘图工具，也能制作出很好的播放器。
学习目标：
掌握用户接口组件的使用方法
掌握视频控制组件的使用方法
掌握两种组件的配合使用方法
了解使用组件开发的整体思路
8.1用户接口组件
了解应用程序开发的用户对用户接口组件一定不会陌生，大多数的应用程序开发工具都会提供此组件。虽然Flash开发的应用程序不能调用各种系统库函数，适用范围受限。但是使用组件开发的程序，可以在网页上满足用户的各种要求，例如，开发网页上的测试系统、Flash播放器、购物系统等。
8.1.1初始用户接口组件
用户接口组件的应用范围十分广泛，操作也比较简单，被使用的频率也非常高。本节将对其基本知识进行讲解。
1．创建用户接口组件
（1）选择【窗口】→【组件】菜单命令，打开【组件】面板，如图8-1所示。面板分为两部分：用户接口组件部分和视频控制组件部分。
（2）把【组件】面板中的组件拖曳到场景中，即可完成组件的创建。例如将“Button”
组件拖曳到场景中，如图8-2所示。
（3）通过【参数】面板可以设置“Button”的“实例名称”、“label”等属性。这里设置其“实例名称”为“myButton”，“label”为“点我”，如图8-3所示。
其中“实例名称”为代码控制该按钮时所用，“label”是“Button”上所显示的文字。设置完成后，如图8-4所示。
（4）选择时间轴上的第1帧输入以下代码。
测试影片，当单击按钮时，在“输出”窗口中显示“我被点击了”，如图8-5所示。这便是一个最简单的创建组件并为其添加事件响应的效果。
（a）用户接口组间（b）视频控件组件
注意：设置组件的实例名称一定要在【参数】面板中设置，如果在【属性】面板中设置，在代码调用时，会出现错误。
2．使用代码创建组件
这里使用代码实现和前面完全相同的功能。
（1）首先将要使用的组件拖曳到【库】面板中，这里将“Button”组件拖曳到【库】面板中，如图8-6所示。
（2）在第1帧输入以下代码。
测试影片，单击按钮，也会得到图8-5所示的提示信息。
创建组件有两种方法。读者可以根据提供的代码和前面的操作进行对比，看看哪些操作和代码具有相同的功能。
8.1.2典型案例-个人信息注册
在日常工作和娱乐中，在申请各种账号的时候，都需要填写各种信息注册表。FlashCS5提供的组件可方便快捷地完成注册表的制作。设计思路包括设计表格内容、使用组件布局表格、使用程序完成后台控制。设计效果如图8-7所示。
具体操作步骤如下。
1．背景制作
（1）新建一个Flash文档，文档属性使用默认参数。
（2）新建4个图层，并从上至下依次重命名为“代码”层、“组件”层、“文字”层、“框”
层和“背景”层，效果如图8-8所示。
（3）选中“背景”层，选择【文件】→【导入】→【导入到舞台】菜单命令，将素材“第8章\背景1.jpg”文件导入到舞台，设置图片宽、高为“500×400”像素并与舞台居中对齐，此时的舞台效果如图8-9所示。
2．制作背景框
（1）为了作图方便，将“背景”层锁定。
（2）在“框”图层上绘制背景框。选择“【矩形】工具”，在【属性】面板中设置笔触颜色为“白色”，且其【Alpha】值为“50%”，笔触高度为“3”，填充颜色为“白色”，且其【Alpha】
值为“40%”，远角参数为“10”，矩形的参数设置如图8-10所示。
（3）绘制一个宽、高为“255.0×385.0”像素的内圆角矩形并与舞台居中对齐。如图8-11所示。
（4）选中绘制的矩形，按住Ctrl键，拖动刚绘制的矩形，完成复制。然后分别设置两个矩形的位置，如图8-12所示。
3．输入文字
（1）为了操作方便，锁定“框”图层。
（2）在“文字”图层上利用“文字工具”输入“个人信息注册”和“个人信息核对”两段文字。
（3）在【属性】面板中设置文字颜色为“白色”，大小为“12”，字体为“方正综艺简体”，如图8-13所示。
（4）为了设计美观，分别将两段文字放置在相应的位置，如图8-14所示。
4．组件设计
（1）根据日常经验进行分析，确定需要用户填写的信息项有：用户名、密码、重新填写密码、性别、生日、个人爱好等6项。将“Label”组件拖曳到舞台中。然后再复制5个，依次放置到图8-15所示的位置上。
（2）在【参数】面板中，从上到下依次修改“Label”组件的【Text】参数为：“用户名”、“密码”、“重新填写密码”、“性别”、“生日”和“个人爱好”，修改完成后效果如图8-16所示。
（3）通过分析，“用户名”、“密码”、“重新填写密码”、“生日”这4项需使用“TextInput”
组件，“性别”项使用“RadioButton”组件，“个人爱好”项使用“TextArea”组件。
（4）将1个“TextInput”组件拖曳到舞台中，设置其宽、高为“130×22”像素，复制出3个“TextInput”组件，并设置其位置，如图8-17所示。需注意的是：“TextInput”组件应与相应的“Label”组件对齐。
（5）将1个“RadioButton”组件拖曳到舞台中，并设置其宽、高为“50×22”像素，再复制1个，然后分别修改其“Label”属性为“男”、“女”，如图8-18所示。
（6）将一个“TextArea”组件拖曳到舞台中，并设置其宽、高为“130×100”像素，设置其位置，如图8-19所示。
（7）拖入两个“Button”组件，设置其宽、高为“60×22”像素，分别修改其“Label”参数为“提交”、“清空”，然后设置其位置，如图8-20所示。
（8）在“个人信息核对”一侧也需要一个“TextArea”组件来对提交的信息进行显示，所以将1个“TextArea”组件拖曳到舞台中，并设置其宽、高为“180×280”像素，放置其位置，如图8-21所示。
（9）至此组件的布置就完成了，但这样的组件还不能被程序所应用，还需要在【参数】
面板中修改每个组件的“实例名称”。按照从左至右，从上到下的顺序依次修改其“实例名称”
为“mUsername”、“mPassword”、“mPassword2”、“mMan”、“mWoman”、“mBirthday”、“mLove”、“mSubmit”、“mClear”和“mCheck”。各组件实例名称如图8-22所示。
（10）由于当用户输入密码时，“密码”和“重新输入密码”两项需要自动加密显示，所以在【参数】面板中，设置这两个“InputText”组件的“displayAsPassword”参数为“true”，如图8-23所示。
5．写入控制代码
由于本案例的操作为：当用户填写完成之后，单击【提交】按钮即可在“个人信息核对”
窗口中显示用户填写的信息，单击【清空】按钮可以清除用户已经填写的内容。所以选择“代码”层的第1帧输入如下代码及注释。
6．保存测试影片，本案例就制作完成了
通过本案例的制作，应该认识到，组件的设计和功能实现是两个分离的部分，不懂程序的设计人员可以设计出精美的布局，而程序人员可以在设计人员的基础上进行编程，达到事半功倍的效果。
8.2视频组件
许多大型的视频网站现在都采用“.flv”的格式进行视频传输，这种传输方式有许多的优点，比如传输速度快、支持流媒体、视频文件压缩率大等，而“.flv”格式的播放器中最优秀的就是Flash制作的播放器。使用视频组件可以非常快捷地制作出这种播放器。
8.2.1初识视频组件
使用视频组件可以在很短的时间内创建一个简单的flv播放器，下面就来学习一下视频组件的创建方法。
1．创建视频组件
（1）选择【窗口】→【组件】菜单命令，打开【组件】面板，将【Video】下面的“FLVPlayback”组件拖曳到舞台中，如图8-24所示。
（a）选择组件（b）放入舞台
（2）选中舞台中的“FLVPlayback”组件，然后在【参数】面板中，选择【source】选项如图8-25所示。
（3）单击【查看】按钮，打开如图8-26所示的【内容路径】对话框，然后单击“浏览”
按钮打开【文件选择】对话框，选择素材“第8章/视频1.flv”文件。