计算机基础与实训教材系列

1. 计算机基础与实训教材系列 《中文版Flash CS3动画制作实训教程》

2. 第9章 交互组件应用

3. 学 习 目 标 • 本章主要介绍了Flash CS3中交互组件的相关知识，包括组件的作用、类常用UI组件、添加组件以及设置组件属性等内容。对于本章所学的常用UI组件，应结合本章的实例重点掌握，并学会利用这些组件制作类似的交互式动画效果。

4. 本 章 重 点 • 组件的概念和作用 • 常用组件 • 组件的添加和属性设置 • 组件检查器的使用

5. 9.1　组件概述 • 组件是FlashCS3中重要的组成部分，在FlashCS3的交互应用中，组件通常与ActionScript脚本配合使用，通过对组件参数进行设置，并将组件所获取的信息传递给相应的ActionScript脚本，然后通过脚本执行相应的操作，从而实现最基本的交互功能。

6. 9.1.1 组件的作用 • 在FlashCS3中，组件的主要作用是为制作者提供大部分的交互功能，若要使动画具备某种特定的交互功能，除了为动画中的帧、按钮或影片剪辑添加ActionScript脚本这种方法外，还可利用Flash CS3中提供的各种组件来实现。并利用不同类型的组件制作出简单的用户界面控件，也可以制作出包含多项功能的交互页面；同时用户还可根据需要，对组件的参数进行自定义设置，从而修改组件的外观和交互行为。

7. 组件可以让制作者无需自行构建复杂的用户界面元素，将精力浪费在类似元件的创建上，而只需通过选择相应的组件，并为其添加适当的ActionScript脚本，即可轻松地实现所需的交互功能。在Flash CS3中，用户可根据需要，为动画添加相应的组件，并通过ActionScript脚本使其实现特定的交互效果。学好ActionScript脚本和组件的基本应用，是制作Flash交互动画的必要前提。

8. 9.1.2 Flash CS3中组件的类型 • 在Flash CS3中，组件的类型包括UserIntreface组件(即UI组件)和Video组件两种，如图9-1所示。 • 具体功能及含义如下： 图9-1 Flash CS3组件

9. User Interface(UI) 组件 图9-2 UI组件 • User Interface组件用于设置用户界面，并通过界面使用户与应用程序进行交互操作，在Flash中的大多数交互操作，都通过该组件实现。在User Interface组件中，主要包括Button、CheckBox、ComboBox、Loader、ScrolIPane和TextArea等，如图9-2所示。

10. 2. Video组件 图9-3 Video组件 • Video组件用户设置多媒体组件，并通过这些组件与各种多媒体制作与播放软件等进行交互操作。在Video组件中，主要包括FLVPlayback(通过它可轻松将视频播放器包括在Flash应用程序中)、FLVPlaybackCaptioning、BackButton、PlayButton、SeekBar、PlavPauseButton以及VolumeBar、FullScreenButton等交互组件，如图9-3所示。

11. 9.1.3 打开组件 图9-4 打开组件 • 在Flash CS3中，选择【窗口】|【组件】菜单命令或按【Ctrl+F7】键可以打开或隐藏“组件”面板。用户可以方便地自定义组件的外观和行为来满足自己的设计需求，如图9-4所示。

12. 9.2 组件基本应用 • 在Flash CS3中，组件的基本应用主要包括添加组件以及设置组件属性等两个方面，在完成这两步操作之后，只需为组件添加相应的Action脚本即可实现基本的交互功能。下面就对Flash CS3中常用的组件、添加组件并设置组件属性、以及利用组件检查器检查组件参数的方法进行详细讲解。

13. 9.2.1 Flash常用组件 • 在Flash CS3的组件类型中，Video组件通常只在涉及到视频交互控制时才会应用，而除此之外的大部分交互操作都通过UI组件来实现，因而在制作交互动画方面，UI组件是应用最广，也是最常用的组件类型之一。

14. 在Flash CS3的UI组件中，常用组件包括 • 按钮组件(Button) • 复选框组件(CheckBox) • 下拉列表框组件(ComboBox) • 列表框组件(List) • 单选项组件(RadioButton) • 滚动条组件(Scro11Pane) • 文本显示组件(TextArea) • 文本输入组件(Textlnupt)

15. 1．Button • Button组件是Flash组件中最简单的一个组件，利用Button组件可执行所有的鼠标和键盘交互事件。打开“组件”面板，选择Button组件，按住鼠标左键不放将其拖动到场景中即可完成按钮的创建，如图9-5所示。 图9-5 按钮组件参数

16. Button组件各参数的具体功能及含义如下：emphasized：用于指定当按钮处于弹起状态时，Button组件周围是否显示边框。若值为tme表示当按钮处于弹起状态时，在Button组件四周显示边框；若值为。false则表示不显示边框。其默认值为false。labelPlacement：用于确定按钮上的标签文本相对于图标的方向，包括left、right、top和bottom这4个选项。其默认值为right。label：用于设置Button组件的名称。其默认值为Label。Button组件各参数的具体功能及含义如下：emphasized：用于指定当按钮处于弹起状态时，Button组件周围是否显示边框。若值为tme表示当按钮处于弹起状态时，在Button组件四周显示边框；若值为。false则表示不显示边框。其默认值为false。labelPlacement：用于确定按钮上的标签文本相对于图标的方向，包括left、right、top和bottom这4个选项。其默认值为right。label：用于设置Button组件的名称。其默认值为Label。

17. selected：用于根据toggle的值设置Button组件是被按下还是被释放，若toggle的值为true则表示按下，值为false表示释放。其默认值为false，toggle：用于确定是否将Button组件转变为切换开关。若要让Button组件按下后马上弹起，则选择false选项；若要让Button组件在按下后保持按下状态，直到再次按下时才返回到弹起状态，则选择true。其默认值为false。selected：用于根据toggle的值设置Button组件是被按下还是被释放，若toggle的值为true则表示按下，值为false表示释放。其默认值为false，toggle：用于确定是否将Button组件转变为切换开关。若要让Button组件按下后马上弹起，则选择false选项；若要让Button组件在按下后保持按下状态，直到再次按下时才返回到弹起状态，则选择true。其默认值为false。

18. 2．CheckBox组件 • CheckBox组件主要用于设置一系列可选择的项目，并可同时选取多个项目，以此对指定对象的多个数值进行获取或设置，如图9-6所示。 图9-6 CheckBox组件及checkBox组件参数

19. CheckBox组件各参数的具体功能及含义如下：label：用于设置CheckBox组件显示的内容。其默认值为Label。selected：用于确定CheckBox组件的初始状态为选中(true)或取消选中(false)。其默认值为false。lablePlacement：用于确定CheckBox组件上标签文本的方向，包括left、right、top和bottom这4个选项。其默认值为fight。CheckBox组件各参数的具体功能及含义如下：label：用于设置CheckBox组件显示的内容。其默认值为Label。selected：用于确定CheckBox组件的初始状态为选中(true)或取消选中(false)。其默认值为false。lablePlacement：用于确定CheckBox组件上标签文本的方向，包括left、right、top和bottom这4个选项。其默认值为fight。

20. 3．ComboBox组件 • ComboBox组件的作用与对话框中的下拉列表框类似，通过单击ComboBox组件中的下拉按钮，可打开下拉列表并显示相应的选项，通过选择选项获取所需的数值，如图9-7所示。 • 图9-7 ComboBox组件及ComboBox组件参数

21. ComboBox组件各参数的具体功能及含义如下：dataProvider：用于设置相应的数据，并将其与ComboBox组件中的项目相关联。prompt：用于设置ComboBox组件的项目名称。editable：用于确定是否允许用户在下拉列表框中输入文本。若允许输入选择true；若不允许输入则选择false，默认值为false。rowCount：用于确定不使用滚动条时，下拉列表中最多可以显示的项目数量，默认为5。ComboBox组件各参数的具体功能及含义如下：dataProvider：用于设置相应的数据，并将其与ComboBox组件中的项目相关联。prompt：用于设置ComboBox组件的项目名称。editable：用于确定是否允许用户在下拉列表框中输入文本。若允许输入选择true；若不允许输入则选择false，默认值为false。rowCount：用于确定不使用滚动条时，下拉列表中最多可以显示的项目数量，默认为5。

22. 4．List组件 • List组件主要用于创建一个可滚动的单选或多选列表框，并通过选择列表框中显示的图形或其他组件获取所需的数值，如图9-8所示。 图9-8 List组件参数

23. List组件各参数的具体功能及含义如下：allowMultipleSelection：用于指定List组件是否可同时选择多个选项。如果值为true，则可以通过按住【Shift】键来选择多个选项。其默认值为false。horizontalLineScrollSize：用于设置当单击列表框中水平滚动箭头时，要在水平方向上滚动的内容量，该值以像素为单位。其默认值为4。List组件各参数的具体功能及含义如下：allowMultipleSelection：用于指定List组件是否可同时选择多个选项。如果值为true，则可以通过按住【Shift】键来选择多个选项。其默认值为false。horizontalLineScrollSize：用于设置当单击列表框中水平滚动箭头时，要在水平方向上滚动的内容量，该值以像素为单位。其默认值为4。

24. horizontaIScrollPolicy：用于设置List组件中的水平滚动条是否始终打开。包括on、off和auto这3个选项。其默认值为auto。verticalPageScrollSize：用于设置按滚动条轨道时，垂直滚动条上滚动滑块要移动的像素数。当值为0时，该属性检索组件的可用宽度。其默认值为0。dataProvider：用于设置相应的数据，并将其与L,ist组件中的选项相关联。horizontaIScrollPolicy：用于设置List组件中的水平滚动条是否始终打开。包括on、off和auto这3个选项。其默认值为auto。verticalPageScrollSize：用于设置按滚动条轨道时，垂直滚动条上滚动滑块要移动的像素数。当值为0时，该属性检索组件的可用宽度。其默认值为0。dataProvider：用于设置相应的数据，并将其与L,ist组件中的选项相关联。

25. horizontalPageScrollSize：用于设置按滚动条轨道时，水平滚动条上滚动滑块要移动的像素数。当值为0时，该属性检索组件的可用宽度。其默认值为0。verticalLineScrollSize：用于设置当单击列表框中垂直滚动箭头时，要在垂直方向上滚动的内容量，该值以像素为单位。其默认值为4。verticalScrollPolicy：用于设置List组件中的垂直滚动条是否始终打开。包括on、off和auto这3个选项。其默认值为auto。horizontalPageScrollSize：用于设置按滚动条轨道时，水平滚动条上滚动滑块要移动的像素数。当值为0时，该属性检索组件的可用宽度。其默认值为0。verticalLineScrollSize：用于设置当单击列表框中垂直滚动箭头时，要在垂直方向上滚动的内容量，该值以像素为单位。其默认值为4。verticalScrollPolicy：用于设置List组件中的垂直滚动条是否始终打开。包括on、off和auto这3个选项。其默认值为auto。

26. 5．RadioButton组件 • RadioButton组件主要用于设置一系列可选择项目，并通过选择其中的某一个项目获取所需的数值，如图9-9所示。 图9-9 RadioButton组件参数

27. RadioButton组件各参数的具体功能及含义如下：group Name：用于指定RadioButton组件所属的项目组，项目组由与该参数相同的所有RadioButton组件组成，在同一项目组中只能选择一个RadioButton组件，并返回该组件的值。label：用于设置RadioButton的文本内容。其默认值是Label。lablePlacement：确定RadioButton组件上标签文本的方向，包括left、right、top和bottom这4个选项。其默认值为right。

28. selected：用于确定RadioButton组件的初始状态为选中(true)或取消选中(false)。其默认值为false。value：用于设置RadioButton的对应值。其默认值是null。selected：用于确定RadioButton组件的初始状态为选中(true)或取消选中(false)。其默认值为false。value：用于设置RadioButton的对应值。其默认值是null。

29. 6．ScrollPane • 滚动条组件ScrollPane用于在某个大小固定的文本框中无法将所有内容显示完全时使用。滚动条是动态文本框与输入文本框的组合，在动态文本框和输入文本框中添加水平和竖直滚动条，可以通过拖动滚动条来显示更多的内容，如图9-10所示。 图9-10 ScrollPane组件

30. ScrollPane组件各参数的具体功能及含义如下：scrollDrag：可确定是否允许用户在滚动条中滚动内容，如果允许选择“Ixue”选项，如果不允许选择“false”选项，默认值为“false”。SOUlCe：获取或设置以下内容：绝对或相对URL(该URL标识要加载的SWF或图像文件的位置)、库中影片剪辑的类名称、对显示对象的引用或者与组件位于同一层上的影片剪辑的实例名称。ScrollPane组件各参数的具体功能及含义如下：scrollDrag：可确定是否允许用户在滚动条中滚动内容，如果允许选择“Ixue”选项，如果不允许选择“false”选项，默认值为“false”。SOUlCe：获取或设置以下内容：绝对或相对URL(该URL标识要加载的SWF或图像文件的位置)、库中影片剪辑的类名称、对显示对象的引用或者与组件位于同一层上的影片剪辑的实例名称。

31. 7．TextArea组件. • TextArea组件主要用于显示或获取动画中所需的文本。在交互动画中需要显示或获取多行文本字段的任何地方，都可使用TextArea组件来实现，如图9-11所示。 图9-11 TextArea组件参数

32. TextArea组件各参数的具体功能及含义如下：condenseWhite：用于设置是否从包含HTML文本的TextArea组件中删除多余的空白。在Flash CS3中，空格和换行符都属于组件中的多余空白。当值为tme时表示删除多余的空白；值为false表示不删除多余空白。其默认值为falseeditable：用于设置允许用户编辑TextArea组件中的文本。值为true表示用户可以编辑TextArea组件所包含的文本；值为false则表示不能进行编辑。其默认值为true。

33. horizontalScrollPolicy：用于设置TextArea组件中的水平滚动条是否始终打开。包括on、off和auto这3个选项。其默认值为auto。maxChars：用于设置用户可以在TextArea组件中输入的最大字符数。text：用于获取或设置TextArea组件中的字符串，其中也包含当前TextInput组件中的文本。此属性包含无格式文本，不包含HTML标签。若要检索格式为HTML的文本，应使用htmlText属性。horizontalScrollPolicy：用于设置TextArea组件中的水平滚动条是否始终打开。包括on、off和auto这3个选项。其默认值为auto。maxChars：用于设置用户可以在TextArea组件中输入的最大字符数。text：用于获取或设置TextArea组件中的字符串，其中也包含当前TextInput组件中的文本。此属性包含无格式文本，不包含HTML标签。若要检索格式为HTML的文本，应使用htmlText属性。

34. verticalScrollPolicy：用于设置TextArea组件中的垂直滚动条是否始终打开。包括on、off和auto这3个选项。其默认值为auto。htmlText：用于设置或获取TextArea组件中文本字段所含字符串的HTML表示形式。其默认值为空。restrict：用于设置TextArea组件可从用户处接受的字符串。如果此属性的值为null，则TextArea组件会接受所有字符。如果此属性值设置为空字符串(…’)，则TextInput组件不接受任何字符。其默认值为null。

35. wordWrap：用于设置文本是否在行末换行。若值为true，表示文本在行末换行：若值为false则表示文本不换行。其默认值为true。wordWrap：用于设置文本是否在行末换行。若值为true，表示文本在行末换行：若值为false则表示文本不换行。其默认值为true。

36. 8．TextInput组件 • TextInput组件主要用于显示或获取动画中所需的文本。与TextArea组件不同的是，TextInput组件只用于显示或获取交互动画中的单行文本字段，如图9-12所示。 图9-12 TextInput组件参数

37. TextInput组件各参数的具体功能及含义如下：restrict：用于设置TextInput组件可从用户处接受的字符串。需注意的是：未包含在本字符串中的，以编程方式输入的字符也会被TextInput组件所接受。如果此属性的值为null，则TextInput组件会接受所有字符；若将值设置为空字符串(．．．’)，则不接受任何字符。其默认值为null。TextInput组件各参数的具体功能及含义如下：restrict：用于设置TextInput组件可从用户处接受的字符串。需注意的是：未包含在本字符串中的，以编程方式输入的字符也会被TextInput组件所接受。如果此属性的值为null，则TextInput组件会接受所有字符；若将值设置为空字符串(．．．’)，则不接受任何字符。其默认值为null。 • text：用于获取或设置TextInput组件中的字符串。此属性包含无格式文本，不包含HTML标签。若要检索格式为HTML的文本，应使用TextArea组件的htmlText属性。

38. 9.2.2 添加组件的方法 • 在Flash CS3的组件类型中，User Intreface组件用于设置用户界面，并实现大部分的交互操作组件是应用最广，要在动画中应用User Intreface交互组件，就需要将所需的组件添加到舞台中。 • 【例9-1】下面以在舞台中ComboBox组件为例，对Flash CS3中添加组件的方法进行讲解。

39. 图9-13 打开UI组件 • 操作步骤：(1) 选择【窗口】|【组件】命令(或按【Ctrl+F7】键)，打开“组件”面板。单击User Intreface左侧的按钮打开该类别，如图9-13所示。

40. (2) 单击User Intreface左侧的按钮打开该类别，并选中ComboBox组件，按住鼠标左键，然后将ComboBox组件向舞台中拖动，如图9-14所示。 图 9-14 拖动组件ComboBox

41. (3) 将ComboBox组件放置到适当位置后，释放鼠标左键，完成组件的添加，如图9-15所示。 图 9-15 完成组件添加

42. 9.2.3 设置组件属性的方法 • 在舞台中添加组件后，还需要根据动画的实际情况，对组件的属性进行设置。【例9-2】下面以ComboBox组件为例，对Flash CS3中设置组件属性的方法进行讲解。

43. 操作步骤：(1) 在舞台中选中要设置属性的ComboBox组件，如图9-16所示。 图 9-16 选中舞台中的ComboBox组件

44. (2) 在“属性”面板中单击“参数”选项卡，即可看到ComboBox组件的对应参数，如图9-17所示。 图 9-17 属性面板中参数

45. (3) 选中dataProvider参数，然后单击参数右侧的剧按钮，打开“值”对话框，如图9-18所示。 图 9-18 打开“值”对话框

46. (4) 单击按钮添加新值，将label的值设置为“白云”，将data的值设置为“xz””。然后用同样的方法添加其余的值。完成后单击“确定”按钮确认数值，并关闭“值”对话框，如图9-19所示。 图 9-19 添加新值

47. (5) 在“参数”面板中保持editable参数的默认值false，然后将prompt参数的值设置为“选择旅游地点”，并将rowCount参数的值设置为“3”， 如图9-20所示。 图9-20 设置参数

48. (6) 在舞台中单击鼠标左键，即可完成ComboBox组件的属性设置，如图9-21所示。 图9-21 完成组件属性设置

49. 9.2.4 组件检查器 • 在Flash cs3中，组件检查器主要用于显示和设置所选组件的参数和属性等信息。【例9-3】在动画中应用了较多组件的情况下，使用组件检查器，可以快速地对组件的参数和属性信息进行检查和修改，从而提高动画制作的效率。

50. 操作步骤：(1) 选择【窗口】|【组件检查器】命令(或按【Shift+F7】键)，打开“组件检查器”面板，然后在舞台中选中要检查的组件，如图9-22所示。 图9-22 组件检查器