1、第9章 用户界面组件,9.1 组件概述 9.2 使用组件 9.3 常用组件 9.4 自定义组件 9.5 应用实例 9.6 习题与实验指导,主目录,9.1 组件概述,Flash CS3包含4种类型的组件：用户界面组件、媒体组件、数据组 件和管理器组件。（1）用户可以使用用户界面组件与应用程序进行交互操作。例如 Button，CheckBox和TextInput组件都是用户界面组件，即UI组件。（2）利用媒体组件，用户可以将媒体流入到应用程序中。例如 MediaPlayback组件就是一个媒体组件。（3）利用数据组件可以加载和处理数据源的信息。例如 WebServiceConnector和XMLC
2、onnector组件都是数据组件。（4）管理器是不可见的组件，使用这些组件，可以在应用程序中管 理诸如焦点或深度之类的功能。例如FocusManager，DepthManager， PopUpManager和StyleManager等。,本章目录,9.2 使用组件,9.2.1 添加组件和删除组件,1 安装组件首次启动Flash CS3时，系统中就已安 装厂一组Macromedia组件，可以在如图右 所示的“组件”面板上查看它们。还可根据需 要安装另外一些组件，每个组件实现一种或 者多种功能，而不用每次都去开发。由于 Flash开发者不断地开发出新的组件，实现 多种增加的功能，因此现在网上已经有
3、大量 的组件可以下载。下载的文件一般为mxp打 包文件，下载后启动“Adobe ExtensionManager”管理器，通过该管理器，即可安 装好扩展的组件。,组件面板,Adobe Extension Manage管理器,2 添加组件 初级Flash用户可以使用“组件”面板将组件添加到Flash文档中，接着使用“参数”面 板或“组件检查器”面板指定组件的基本参数，然后使用事件侦听器来控 制该组件。 中级Flash用户可以使用“组件”面板将组件添加到Flash文档中，然后使用“参数”面 板、动作脚本方法或两者的组合来指定组件的参数。它们可以使用事件 侦听器来处理组件事件。 高级Flash程序员
4、可以将“组件”面板和动作脚本结合在一起使用，以便添加并指定组 件属性，或者选择在运行时，完全使用动作脚本来实现组件实例。 （1）使用“组件”面板添加组件（2）使用动作脚本添加组件,3删除组件若要从Flash文档中删除组件的实例，不仅需要从舞台上将之删除，并且需要从库中删除编译剪辑的图标，步骤如下：（1）在“库”面板中，选择编译过的剪辑 (SWC) 元件。 （2）单击“库”面板底部的“删除”按钮，或从“库”选项菜单中选择“删除”。 （3）在“删除”对话框中，单击“删除”以确认删除操作。,9.2.2 组件事件,1. 使用组件事件侦听器事件由组件进行广播，作为侦听器注册到事件广播器（组件实例） 的任
5、何对象都会收到该事件的通知。给侦听器分配一个处理事件的函 数。用户可以向一个组件实例注册多个侦听器。也可以向多个组件实例 注册一个侦听器。要使用事件侦听器模型，首先要创建一个侦听器对象，该对象所带 的属性应为事件的名称。给该属性分配一个回调函数。通过调用组件实 例的 addEventListener() 方法，可以注册事件的“侦听器”。要注册事件 侦听器，请执行以下操作： （1）将 Button 组件从“组件”面板拖到当前文档的“库”面板中。 （2）打开“动作”面板，在主时间轴中选择第 1 帧，然后输入以下代 码创建一个 Button 实例：,import fl.controls.Button
6、;var aButton:Button = new Button();addChild(aButton);aButton.label = “Click me“;aButton.toggle = true; aButton.move (100, 100); （3）现在，添加以下 ActionScript 来创建一个事件侦听器和一个事件处理函数： aButton.addEventListener(MouseEvent.CLICK, clickHandler);function clickHandler(event:MouseEvent):void trace(“事件类型“ + event.type
7、); （4）选择“控制”“测试影片”。 单击按钮时，Flash 会在“输出”面板中显示消息“事件类型：click”。事件对象的目标属性是对广播事件的实例的引用。此代码在文本输入字段 显示目标属性的值。,2. 其他事件语法除了使用侦听器对象外，还可以将函数用作侦听器。如果侦听器不 属于对象，它就是函数。（1）将一个 Button 组件从“组件”面板拖到舞台上，并在“参数”面板 为该组件输入以下值： 输入实例名称 aButton。 为label 参数输入Show。（2）打开“动作”面板，在主时间轴中选择第 1 帧，然后输入以下 ActionScript 代码：aButton.addEventLis
8、tener(MouseEvent.CLICK, clickHandler);function clickHandler(event:MouseEvent):void trace(“事件类型: “ + event.type); （3）选择“控制”“测试影片”。 单击按钮时，Flash会在“输出”面板 中显示消息“事件类型：click”。,本章目录,9.3 常用组件,9.3.1 Button组件,Button组件是一个可调整大小的矩形用户界面按钮。可以给按钮添加 一个自定义图标，或将按钮的行为从按下改为切换。在单击切换按钮后， 它将保持按下状态，直到再次单击时才会返回到弹起状态。可以在应用程序中启
9、用或者禁用按钮。在禁用状态下，按钮不接收鼠 标或键盘输入。如果单击或者切换到某个按钮，处于启用状态的就会接收 焦点。当一个Button实例具有焦点时，可以使用Shift+Tab组合键、空格 键、Tab键来控制它。,1. 使用Button组件按钮是任何表单或Web应用程序的一个基础部分。当需要让用户启动 一个事件时，都可以使用按钮。例如，大多数表单都有“提交”按钮，也可 以给演示文稿添加“前一个”和“后一个”按钮。要给按钮添加一个图标，需要选择或创建一个影片剪辑或图形元件作 为图标。元件应注册在(0，0)，从而获得适当的布局。在“库”面板中选择 图标元件，从“选项”菜单中打开“链接”对话框，并输
10、入一个链接标识符。 该值是为属性检查器或“组件检查器”面板中的图标参数输入的值。也可以 为Button.icon动作脚本属性输入此值。,2. Button参数以下是可以在“参数”面板中或在“组件检查器”面板中为每个Button组件实例 设置的创作参数,如下图所示。 emphasized：指示当按钮处于弹起状态时，Button 组件周围是否有边框。 label：设置按钮上文本的值，默认值是Lable。 labelPlacement：确定按钮上的标签文本相对于图标的方向，该参数可以是 left，right，top或bottom 4个值之一，默认值是right。 selected：如果切换参数的值是
11、true，则该参数指定是“按下”（true）还是“释 放”（false）按钮，默认值为false。 toggle：将按钮转变为切换开关。如果值为true，则按钮在按下后保持按下 状态，直到再次按下时才返回到弹起状态。如果值为false，则按钮的行为就像 一个普通按钮，默认值为false。,9.3.2 CheckBox组件,复选项是任何表单或Web应用程序中的一个基础部分。每当需要收集一组非相互排斥的true或false值时，都可以使用复选项。每个CheckBox实例都可以通过“参数”面板或者“组件检查器”面板对其进行相应参数的设置，如下图所示。CheckBox中各个参数的含义如下。 label
12、：显示复选项的文本标签。默认情况下，标签出现在复选项的右侧。对此属性的设置将会覆盖在剪辑参数面板中指定的标签参数。 labelPlacement：确定复选框上的标签文本方向。该参数可以是left，right，top或bottom 4个值之一，默认值是right。 selected：将复选框的初始值设置为选中（true）或取消选中（false），默认值是false。,9.3.3 ComboBox组件,使用ComboBox组件可以设计出下拉列表。组合框可以是静态的，也可以是可 编辑的。使用静态组合框，可以从中做出一项选择。使用可编辑的组合框，用户可 以在其顶部的文本字段中直接输入文本，或者从组合框
13、中选择一项。如果组合框超 出文档底部，它将会向上打开，而不是向下。组合框由Button、Textlnput和List三 个子组件组成。ComboBox组件主要有以下4个参数项，如下图所示。 dataProvder：将一个数据值与ComboBox组件中的每个项目相关联。该数 据参数是一个数组。 editable：确定ComboBox组件是可编辑的(true)还是只读(false)。默认值为 false。 propmt：获取或设置对 ComboBox 组件的提示。 rowCount：设置在不使用滚动条的情况下一次最多可以显示的项目数。默 认值是5。,9.3.4 Label组件,Label 组件显示
14、单行文本，通常用于标识网页上的其它某些元素或活动。可 以指定标签采用 HTML 格式，以利用其文本格式的标签。还可以控制标签的对 齐方式和大小。Label 组件没有边框、不能具有焦点，并且不广播任何事件。 Label组件主要有以下几个参数项，如下图所示。 autoSize：获取或设置一个字符串，指示如何调整标签大小和对齐标签以 适合其 text 属性的值。 condenseWhite：获取或设置一个值，该值指示是否应从包含 HTML文本 的 Label 组件中删除额外空白，如空格和换行符。 htmlText：获取或设置由 Label 组件显示的文本，包括表示该文本样式的 HTML 标签。 se
15、lectable：获取或设置一个值，指示文本是否可选。 text：:获取或设置由 Label 组件显示的纯文本。 wordWrap：获取或设置一个值，指示文本字段是否支持自动换行。,9.3.5 List组件,List组件是一个可以滚动的单选或多选列表框。列表也可以显示图形，其中包含其他组件。用户在单击标签或数据参数字段时，将会出现“值”对话框，用户可以使用该对话框来添加显示在List中的项目。每个List实例都可以通过“参数”面板或者“组件检查器”面板对其进行相应的参数设置，如下图所示。（1）data：填充列表数据的值数组。默认值为 （空数组）。没有相应的运行时属性。（2）Labels：填充列
16、表的标签值的文本值数组。默认值为 （空数组）。没有相应的运行时属性。（3）MultipleSelection：一个布尔值，它指明是（true）否（false）可以选择多个值，默认值为false。（4）RowHeight：说明列表中每行的高度，以像素为单位，默认值是20。设置字体不会更改行的高度。,9.3.6 RadioButton组件,单选按钮是任何表单或Web应用程序中的一个基础部分。如果需要让用户 从一组选项中做出一个选择，可以使用单选按钮。RadioButton组件的参数如下 图所示，主要包含以下几个： groupName：是单选按钮的组名称。默认值为RadioButtonGroup。
17、1abel：设置按钮上的文本值，默认值是1abel。 1abelPlacement：确定按钮上标签文本的方向。该参数可以是下列4个 值之一：1eft、right、top或bottom，默认值是right。 selected：将单选按钮的初始值设置为被选中(true)或取消选中(false)。 被选中的单选按钮中会显示一个圆点。一个组内只有一个单选按钮可以有被选 中的值true。如果组内有多个单选按钮被设置为true，则会选中最后实例化的单 选按钮。默认值为false。 value：是与单选按钮相关的值。没有默认值。,9.3.7 ScrollPane组件,ScrollPane组件在一个可滚动区域
18、中显示影片剪辑、JPEG文件和SWF文 件。通过滚动窗格，可限制这些媒体类型所占用屏幕区域的大小。滚动窗格可以 显示从本地磁盘或Intemet加载的内容。该面板中各参数如图9-10所示，含义如 下： contentPath：指明要加载到滚动窗格中的内容。该值可以是本地SWF或JPEG文件的相对路 径，或Internet上的文件的相对或绝对路径。它也可以是设置为“为动作脚本导出”的库中的影片剪辑元件 的链接标识符。 hLineScrollSize：指明每次按下箭头按钮时水平滚动条移动多少个单位，默认值为5。 hPageScrollSize：指明每次按下滚动条滑动的滑动槽时，水平滚动条移动多少个单
19、位，默认值 为20。 hScrollPolicy：显示水平滚动条。该值可以设置为“on”，“off”或“auto”，默认值为“auto”。 scrollDrag：是一个布尔值，它允许（true）或不允许（false）用户在滚动窗格中滚动内容，默 认值为false。 vLineScrollSize：指明每次按下箭头按钮时垂直滚动条移动多少个单位，默认值为5。 vPageScrollSize：指明每次按下滚动条滑动的滑动槽时，垂直滚动条移动多少个单位，默认值 为20。 vScrollPolicy：显示垂直滚动条。该值可以设置为“on”，“off”或“auto”，默认值为“auto”。,9.3.8
20、TextArea组件,TextArea 组件可以用来显示文本，如果 editable 属性为 true，也可以用它来 编辑和接收文本输入。在需要多行文本字段的任何地方都可使用 TextArea 组 件。例如，可以在表单中使用 TextArea 组件作为注释字段。可以设置侦听器来 检查当用户切换到该字段外时，该字段是否为空。该侦听器可以显示一条错误消 息，指明必须在该字段中输入注释。TextArea 组件主要有以下几个参数项，如下 图所示。 condenseWhite：获取或设置一个布尔值，该值指示是否从包含 HTML 文本的TextArea 组件中删除额外空白。 editable：获取或设置一
21、个布尔值，指示用户能否编辑组件中的文本。 horizontalScrollBar：获取对水平滚动条的引用。 htmlText：获取或设置文本字段所含字符串的 HTML 表示形式。 maxChars：获取或设置用户可以在文本字段中输入的最大字符数。 restrict：获取或设置文本字段从用户处接受的字符串。 text：获取或设置字符串，其中包含当前 TextInput 组件中的文本。 verticalScrollBar：获取对垂直滚动条的引用。 wordWrap：获取或设置一个布尔值，指示文本是否在行末换行。,本章目录,9.4 自定义组件,9.4.1 使用样式,1. 了解样式设置如果以多种方式设
22、置组件样式，则 Flash 会根据样式的优先级顺序 使用它遇到的第一种样式。Flash 按如下顺序查找样式，直到找到一个 值： Flash 查找组件实例上的样式属性。 如果样式是继承样式的一种，Flash 将彻底检查父层次结构来查 找继承的值。 Flash 查找组件上的样式。 Flash 查找 StyleManager 上的全局设置。 如果尚未定义该属性，则属性值为 undefined。,2. 在组件实例上设置和获取样式任何 UI 组件实例都可以直接调用 setStyle() 和 getStyle() 方法来设置 或检索样式。为组件实例设置样式和值：instanceName.setStyle(
23、“styleName“, value);检索组件实例的样式：var a_style:Object = new Object();a_style = instanceName.getStyle(“styleName“);,【例9-1】创建2个Button组件Button A和Button B，并设置Button B的样 式，使得这两个组件在鼠标按下的状态显示不同的外观。（1）新建一个 Flash 文件 (ActionScript 3.0)，并保存为“设置组件样式.fla”。 （2） 将两个 Button 拖到舞台上（一次拖动一个），并分别为它们指定实例 名称 aBtn 和 bBtn。在“属性”检
24、查器的“参数”选项卡中，将它们的标签分别指定为Button A 和 Button B。 （3）将以下代码添加到时间轴第 1 帧的“动作“面板上：bBtn.emphasized = true;aBtn.emphasized = true;bBtn.addEventListener(MouseEvent.CLICK, Btn_handler);function Btn_handler(evt:MouseEvent):void bBtn.setStyle(“emphasizedSkin“, “Button_selectedDownSkin“);（4）选择“控制“测试影片“。 （5）单击其中一个按钮，
25、查看每个按钮上 emphasizedSkin 样式的效果。,3. 为组件所有的实例设置样式可以使用 StyleManager 类的静态 setComponentStyle() 方法为组件 类的所有实例设置样式。【例9-2】舞台上所有的Button组件的实例的标签设置为带下划线的 文本标签。（1）打开“设置组件样式.fla”，并将以下代码添加到时间轴第 1 帧的 “动作“面板上。import fl.managers.StyleManager;import fl.controls.Button;var tf:TextFormat = new TextFormat();tf.underline =
26、true;StyleManager.setComponentStyle(Button, “textFormat“, tf);（2） 向场景中添加若干Button组件，选择“控制“测试影片“。,4. 为所有组件设置样式可以使用 StyleManager 类的静态 setStyle() 方法为所有组件设置样 式。 【例9-3】对舞台上所有的组件设置带下划线的文本标签。（1）新建一个 Flash 文件 (ActionScript 3.0)。（2）将一个 List 组件拖到舞台上，然后为其指定实例名称 aList；将一个Button 组件拖到舞台上，然后为其指定实例名称 aButton。 （3）将以下
27、代码添加到时间轴第 1 帧的“动作“面板上。import fl.managers.StyleManager;var tf:TextFormat = new TextFormat();tf.underline = true;StyleManager.setStyle(“textFormat“, tf);aList.addItem(label:“TV set“, data:35000);aList.addItem(label:“Home theater“, data:27000);aList.addItem(label:“Audio“, data:17000);aList.allowMultipl
28、eSelection = true;（4）选择“控制“测试影片“。,9.4.2 设置组件外观,1. 组件外观概述表示各种状态的组件的图标统称为组件的“外观”。 可以通过在 Flash 中编辑组件的外观更改任意或所有状 态下的组件外观，就像其它 Flash 元件一样。可以用两 种方法访问组件的外观。, 最简单的方法是将组件拖到舞台上并双击 它。这将打开一个组件外观调色板，Button组件的 外观调色板如右图所示。 还可以从“库”面板单独访问组件的外观。将 组件拖到舞台时，可以将其与其资源文件夹及其包 含的任何其它组件一同复制到库。例如，如果将Button组件拖到舞台，在“库”面板中找到以下项 目
29、，如右图所示。,Button组件的外观调色板,Button组件库面板,2. 为所有实例创建外观编辑组件的外观时，默认情况下，可以更改文档中组件所有实例 的外观。如果要为相同组件创建不同的外观，必须重制要更改的外观 并为它们指定不同的名称，编辑这些外观，然后设置适当的样式以应 用这些外观。3. 为部分实例创建外观为组件的部分实例创建外观：（1）在“库”面板中组件的“Assets”文件夹中选择外观。 （2）重制外观并为其赋予唯一的类名称。 （3）编辑外观，为其指定所需的外观。 （4）调用组件实例的 setStyle( ) 方法，为外观样式赋予新外观。,本章目录,9.5 应用实例,本例将使用Flas
30、h CS3制作一个用于网络的“网站用户注 册”系统，如下图所示为该系统的最终效果。,“网站用户注册”第1帧 “网站用户注册”第2帧 “网站用户注册”第3帧,为了让填表人能及时看到自己提交的信息、资料，本例在填写完成相 关栏目并单击“提交”按钮后将出现一张反馈表，显示用户填写的信息。同 时，对于其中的栏目进行了必须填写的约束。,本例的制作思路如下：（1）该系统由三帧组成，第1帧是用户协议界面，主要应用了 TextArea组件和Button组件；第2帧运用了TextArea、RadioButton、 ComBox、ChectBox和Button组件、TextInput组件，用于用户注册信 息的填写
31、；第3帧运用了Button组件和动态文本，用于显示填写的信息。（2）制作问卷界面时，先绘制一个边框，添加必要的静态文本，再 分别添加CheckBox组件、RadioButton组件，然后添加提交其他意见、 家长资料的输入文本框。每个组件都需要设置准确的属性参数。最后， 制作一个按钮元件作为提交按钮。（3）显示填写信息的第2帧界面很简单，但其代码编写是本例的难 点。编写代码时，先判断是否输入了姓名，如果没有就不能继续执行程 序，然后再分别判断填写人的性别、所填写的选项，依次将执行程序所 获取的值存入strOstr5变量，最后在outtext输入文本框中输出。,本章目录,9.6 习题与实验指导,实验1 制作“爱情小测试”动画 实验2 制作动态菜单,按照教材的“习题与实验指导”部分的要求，完成作业和实验。,本章目录,
