项目九　组件的应用

项目引入

组件是带有参数的电影剪辑，这些参数可以用于修改组件的外观和行为。每个组件都有预定义的参数，并且它们可以被设置。每个组件还有一组属于自己的方法、属性和事件，它们被称为应用程序编程接口。使用组件，可以使程序设计与软件界面设计分离，以提高代码的可复用性。通过组件，用户可以方便而快速地构建功能强大且具有一致外观和行为的ActionScript应用程序。

任务一　了　解　组　件

组件就是带有参数的影片剪辑，用户可以修改这个剪辑的外观及参数，通过组件的应用可以快速构建出一些应用控件，例如，比较常见的用户界面控件单选按钮【RadioButton】、复选框【CheckBox】等。在Flash中，使用组件非常方便，只需将这些组件从【组件】面板拖到应用程序文档中即可，而不用自己创建这些自定义按钮、组合框和列表。

在Flash中应用组件后，可以通过ActionScript 3.0修改组件的行为或实现新的行为，每个组件都有唯一的一组ActionScript方法、属性和事件，它们构成了该组件的应用程序编程接口(Application Programming Interface，API)。API允许用户在应用程序运行时创建并操作组件。另外，使用API的用户还可以创建自定义的组件。

1. 组件的类型

Flash CS5内置了两种类型的组件，分别为用户界面(User Interface)组件和Video组件，这两类组件被放置在【组件】面板中，如果需要在文档中使用组件，只需将其中的组件从【组件】面板拖曳到舞台中即可，如图9-1所示。

(1) 用户界面组件：用于设置用户的界面，并通过界面使用户与应用程序进行交互操作。该类组件如Button(按钮)组件、RadioButton(单选按钮)组件等类似于网页中的表单元素。

(2) Video组件：主要用于对播放器中的播放状态和播放进度等属性进行交互操作。

2. 使用组件

在Flash CS5中，可以通过【组件】面板添加组件，按照类别进行管理，以便于用户查找。在舞台中添加组件后，就会自动存放到【库】面板中，以后使用组件就可以像使用影片剪辑一样，从【库】面板重复调用，这样从【组件】面板中添加一次组件后，此组件就可以在动画中多次使用，从而节省动画的文件大小。

对于【库】面板中已有调用的组件，还可以通过ActionScript动作脚本实现在舞台中的调用。例如，在【库】面板中有一个Button组件，但是在场景中没有此组件，这时就可以通过ActionScript动作脚本将Button组件添加到场景中。

此时可以选择场景的第1帧，然后在【动作】面板中添加如图9-2所示的脚本。

添加脚本后，可以看到在场景中没有任何组件，然后按【Ctrl+Enter】键，在测试影片窗口中就可以看到创建的Button组件，如图9-3所示。

从上面可以看出，使用ActionScript动作脚本添加组件的方法要比手动将组件放置到舞台中更加灵活，而且在程序控制上更加方便。

3. 设置组件参数

在舞台中添加组件后，可以通过【属性】面板中的“组件参数”选项对其进行参数的相关设置，如图9-4所示。各参数说明如下。

(1) 属性：在这一列中显示了选择组件的各个属性名称。

(2) 值：在这一列中显示了选择组件的各个属性参数值，通过改变这些参数值可以对组件的外观进行调整。

任务二　使用UI组件制作邮件表单

知识准备

1. TextInput组件

TextInput组件为单行文本框。在舞台中添加TextInput组件后，可以通过【属性】面板中“组件参数”选项设置TextInput组件的相关参数，如图9-5所示。各参数说明如下。

(1) displayAsPassword：用于设置TextInput组件输入框内输入文本信息是否要以密码的形式显示。勾选此项，则输入框以密码方式显示，默认为非勾选状态。

(2) editable：用于设置TextInput组件是否为可编辑状态，默认为勾选状态，表示TextInput组件为可编辑状态。

(3) enabled：用于获取或设置一个值，指示组件能否接受用户输入字符。

(4) maxChars：用于设置用户可以在文本字段中输入的最大字符数。

(5) restrict：用于设置文本字段从用户处接受的字符串。

(6) text：用于设置TextInput组件中显示的文本内容。

(7) visible：用于设置组件是否显示，默认为显示。

2. RadioButton组件

RadioButton组件为单选按钮组件，可以让用户从一组单选按钮选项中选择一个选项。在舞台中添加RadioButton组件后，可以通过【属性】面板中“组件参数”选项设置RadioButton组件的相关参数，如图9-6所示。各参数说明如下。

(1) enabled：用于获取或设置一个值，指示组件能否接受用户输入字符。

(2) groupName：单选按钮的组名称，一组单选按钮有一个统一的名称。

(3) label：用于设置单选按钮上的文本内容。

(4) labelPlacement：用于确定单选按钮上文本的方向。该参数可以是left、right、top或bottom这4个值之一，其默认值为right。

(5) selected：用于设置单选按钮的初始值为被选中或取消选中。被选中的单选按钮中会显示一个圆点，同一组单选按钮内只有一个可以被选中。

(6) value：用于设置单选按钮后传递的数据值。

(7) visible：用于设置是否显示组件，默认为显示。

3. ComboBox组件

ComboBox组件为下拉菜单形式的组件，用户可以在弹出的下拉菜单中选择其中一项。在舞台中添加ComboBox组件后，可以通过【属性】面板中的“组件参数”选项设置ComboBox组件的相关参数，如图9-7所示。各参数说明如下。

(1) dataProvider：用于设置下拉菜单中显示的内容及传送的数据。

(2) editable：用于设置下拉菜单中显示的内容是否为可编辑状态。

(3) enabled：用于获取或设置一个值，指示组件能否接受用户输入字符。

(4) prompt：用于设置对ComboBox组件开始显示时的初始内容。

(5) restrict：用于设置用户在文本字段中输入的字符。

(6) rowCount：用于设置下拉菜单中可显示的最大行数。

(7) visible：用于设置是否显示组件，默认为显示。

4. TextArea组件

TextArea组件为多行文本框的组件。如果需要使用单行文本框，可以使用TextInput组件。在舞台中添加TextArea组件后，可以通过【属性】面板中的“组件参数”选项设置TextArea组件的相关参数，如图9-8所示。各参数说明如下。

(1) condenseWhite：用于设置是否从包含html文本的TextArea组件中删除额外空白。

(2) editable：用于设置TextArea组件是否为可编辑状态，默认为勾选状态。

(3) enabled：用于获取或设置一个值，指示组件能否接受用户输入字符。

(4) horizontalScrollPolicy：用于设置水平方向的滚动条，包含auto、on 和off 3个参数值。auto用于设置自动出现水平方向的滚动条；on用于设置始终出现水平方向的滚动条；off用于设置没有水平方向的滚动条。

(5) htmlText：用于设置文本框中输入的文本内容，可以输入html文本。

(6) maxChars：用于设置用户在文本字段中输入的最大字符数。

(7) restrict：用于设置用户在文本字段从用户处接受的字符串。

(8) text：用于设置TextArea组件中的文本内容。

(9) verticalScrollPolicy：用于设置垂直方向的滚动条，包含auto、on 和off 3个参数值。auto用于设置自动出现垂直方向的滚动条；on用于设置始终出现垂直方向的滚动条；off用于设置没有垂直方向的滚动条。

(10) visible：用于设置是否显示组件，默认为显示。

(11) wordWrap：用于设置文本是否自动换行，默认为勾选状态，表示可以自动换行。

任务实施

任务目标：使用用户界面组件制作邮件表单界面。

具体操作步骤如下。

(1) 启动Flash CS5程序，按【Ctrl+O】键打开文件“素材.fla”，如图9-9所示。

(2) 新建图层“title”，打开【组件】面板，将若干Label组件拖动到舞台，设置字体为“宋体”、字号为“13点”、颜色为“黑色”，再分别输入“收件人：”、“标题：”、“地址：”、“@”、“正文：”，并调整好位置，如图9-10所示。

(3) 新建图层“component”，打开【组件】面板，将TextInput组件拖动到“收件人：”文字的右侧，将【属性】面板的“组件参数”选项下的maxChars设置为“20”，实例名称设置为“name”，并使用任意变形工具将其拉长，如图9-11所示。

(4) 将【组件】面板中的RadioButton组件拖动到刚刚建立的收件人姓名输入框右侧，将【属性】面板的“组件参数”选项下的label设置为“先生”，实例名称设置为“male”，使用同样的方式再拖动一个RadioButton组件到右侧，将其label属性设置为“女士”，实例名称设置为“female”，如图9-12所示。

(5) 将【组件】面板中的TextInput组件拖曳到“标题：”和“地址：”右侧，实例名称分别设置为“title和“email”，并使用任意变形工具将其拉长，如图9-13所示。

(6) 将【组件】面板中的ComboBox组件拖动到“@”右侧，在【属性】面板的“组件参数”选项单击dataProvider参数栏右侧的按钮，在弹出的【值】面板中单击按钮，创建一个新标签，在“值”参数栏中输入“163.com”，再使用同样的方式输入其他邮箱域名，将其实例名称设置为“domain”，如图9-14所示。

(7) 将【组件】面板中的TextArea组件拖曳到“正文：”下方，将其实例名称设置为“text”，并使用任意变形工具将其拉长，如图9-15所示。

(8) 将【组件】面板中的Button组件拖动到多行文本框下方空白区域，将【属性】面板的“组件参数”选项下的label属性设置为“提交”，实例名称设置为“submit”，再使用同样的方式添加【重置】按钮，其实例名称设置为“reset”，如图9-16所示。

(9) 选择【重置】按钮，按【F9】键打开【动作】面板，输入如图9-17所示代码，在运行动画时单击【重置】按钮将会清空所填的内容。

(10) 【提交】按钮的功能需要使用ActionScript脚本语言与网页编程语言及数据库相结合的知识，这里暂不做介绍。

(11) 按【Ctrl+S】键保存文档，然后按【Ctrl+Enter】键对动画进行测试。

任务三　使用FLVPlayback组件制作视频播放器

知识准备

1. FLVPlayback组件

通过FLVPlayback组件，用户可以轻松地在Flash CS5中创建视频播放器，以便播放通过HTTP渐进式下载的视频文件，或者播放Adobe的Macromedia Flash Media Server或Flash Video StreamingServer(FVSS)的流视频文件。

随着Adobe Flash Player9.0.115.0的发布，Flash Player中的视频内容播放功能得到了显著改进，包括对FLVPlayback组件的更新。这些更新利用用户的系统视频硬件来提供更好的视频播放性能。对FLVPlayback组件的更新还提高了视频文件在全屏模式下的保真度。

此外，Adobe Flash Player9.0.115.0增加了对采用业界标准H.264编码的高清MPEG-4视频格式的支持，从而改善了FLVPlayback组件的功能。这些格式包括MP4、M4A、MOV、MP4V、3GP和3G2。易于使用的FLVPlayback组件具有以下特性和优点。

(1) 可方便快捷地拖动到Flash应用程序中。

(2) 支持全屏大小。

(3) 提供预先设计的视频播放器的外观集合，用户可以选择合适的外观应用给视频播放器。

(4) 允许用户为视频播放器外观设置颜色和Alpha值。

(5) 允许高级用户创建自己的视频播放器外观。

(6) 在创建过程中提供实时预览的功能。

(7) 提供布局属性，以便在调整视频播放器大小时使视频文件保持居中。

(8) 允许在下载足够的渐进式下载视频文件时开始播放。

(9) 提供可用于将视频与文本、图形和动画同步的提示点。

(10) 保持合理大小的SWF文件。

2. 设置FLVPlayback组件属性

对添加到舞台中的FLVPlayback组件，可以通过【属性】面板中的“组件参数”选项设置相关参数，如图9-18所示。

各参数说明如下。

(1) align：用于设置载入FLV视频相对于舞台X或Y轴方向的位置。

(2) autoPlay：用于设置载入FLV视频文件后是开始播放还是停止播放。如果勾选此选项，则该组件在加载FLV视频文件后立即播放；如果不勾选此选项，则该组件加载FLV视频文件第1帧后暂停。

(3) cuePoints：用于设置载入FLV视频文件的提示点。提示点允许用户同步包含Flash动画、图形或文本的FLV视频文件中的特定点。

(4) isLive：用于设置视频是否为实时视频流。

(5) preview：用于设置载入的FLV视频文件实时预览。

(6) scaleMode：用于设置载入的FLV视频文件加载后如何调整其大小。

(7) skin：用于设置FLVPlayback组件的外观，双击此参数的右侧，可以打开【选择外观】对话框，从该对话框中可以选择组件的外观，如图9-19所示。默认为最初选择的设计外观，但在以后将成为上次选择的外观。

(8) skinAutoHide：用于设置鼠标在FLV视频文件下方控制器区域时是否隐藏外观。如果勾选此选项，则当鼠标不在FLV视频文件下方控制器区域时隐藏外观。如果不勾选此项，则不隐藏。

(9) skinBackgroundAlpha：用于设置FLVPlayback组件外观背景的Alpha透明度。

(10) skinBackgroundColor：用于设置FLVPlayback组件外观背景的颜色。

(11) source：用于指定加载FLV视频文件的URL，或者指定描述播放一个或多个FLV视频文件的XML文件。FLV视频文件的URL可以是本地计算机上的路径、HTTP路径或实时消息传输协议(RTMP)路径。单击此选项右侧的按钮，可以打开【内容路径】面板，如图9-20所示；单击按钮，可以弹出【浏览源文件】对话框，从中可以选择所需要播放的FLV视频文件，如图9-21所示。

(12) volume：用于表示相对于最大音量的百分比。

任务实施

任务目标：使用FLVPlayback组件制作视频播放器。

具体操作步骤如下。

(1) 启动Flash CS5程序，按【Ctrl+N】键新建一个Flash文档，设置背景颜色为“黑色”。

(2) 打开【组件】面板，将FLVPlayback组件拖动到舞台中，如图9-22所示。

(3) 选中舞台中的FLVPlayback组件，在【属性】面板“组件参数”选项中取消autoPlay复选框的勾选状态，在source参数栏右侧单击按钮，在弹出的【内容路径】面板中单击按钮，在弹出的【浏览源文件】对话框中选择“视频1.flv”文件，如图9-23所示。

注意：“视频1.flv”是外部载入的FLV视频文件，读者在制作此动画时必须将此文件粘贴到与制作文件相同的目录下。

(4) 选择加载视频文件后，设置舞台为与视频显示同等大小，即“512×288”像素，并在【属性】面板中将FLVPlayback组件的X、Y坐标值全部设置为“0.00”，如图9-24所示，让FLVPlayback组件与舞台大小位置完全吻合。

注意：要设置舞台与视频显示同等大小，舞台宽度与Flash内视频文件的宽度相同，舞台高度为加载到Flash内视频文件高度加上播放控制栏的高度。这个例子由于选择的播放器外观中播放控制栏在播放窗口以内，因此没有计算此高度。

(5) 按【Ctrl+S】键保存文档，然后按【Ctrl+Enter】键对动画进行测试。在测试窗口中可以通过下方的控制栏观看外部的“视频1.flv”在动画窗口中的播放，同时通过控制栏还可以控制视频的暂停/停止、前进、后退及音量等，如图9-25所示。

(6) 在使用FLVPlayback组件播放FLV视频文件时，会自动将FLVPlayback组件的skin文件放置在动画文件所在的同级目录下，如在制作本例时就会将SkinOverAllNoVolNoCaptionNoFull.swf文件放置在与生成动画的同级目录下，所以在打包发布包含有FLVPlayback组件的动画文件时需要将其skin文件一起发布。

深入解析

组件可以将应用程序的设计过程和编码过程分开，其目的是让开发人员重复使用和共享代码，以及封装的复杂功能。通过使用组件，开发人员可以创建设计人员在应用程序中能够使用到的功能，使开发人员无须编写ActionScript就能够使用和自定义这些功能，而且还可以通过更改组件的参数来自定义组件的大小、位置和行为，从而进一步简化开发人员的操作，这大大提高了工作效率。

Flash CS5包括ActionScript 2.0组件及ActionScript 3.0组件。用户不能混合使用这两组组件，如何选择使用哪种组件取决于用户创建的是基于ActionScript 2.0的文档还是基于ActionScript 3.0的文档。如果创建的是基于ActionScript 2.0的文档，则使用ActionScript 2.0组件；如果创建的是基于ActionScript 3.0的文档，则使用ActionScript 3.0组件。