09-交互组件应用.ppt

1、第9章,交互组件应用,学 习 目 标,本章主要介绍了Flash cs中交互组件的相关知识，包括组件的作用、类常用UI组件、添加组件以及设置组件属性等内容。对于本章所学的常用UI组件，应结合本章的实例重点掌握，并学会利用这些组件制作类似的交互式动画效果。,本 章 重 点,组件的概念和作用 常用组件 组件的添加和属性设置 组件检查器的使用,9.1组件概述,组件是Flashcs中重要的组成部分，在Flashcs的交互应用中，组件通常与ActionScript脚本配合使用，通过对组件参数进行设置，并将组件所获取的信息传递给相应的ActionScript脚本，然后通过脚本执行相应的操作，从而实现最基本的

2、交互功能。,9.1.1 组件的作用,在Flashcs中，组件的主要作用是为制作者提供大部分的交互功能，若要使动画具备某种特定的交互功能，除了为动画中的帧、按钮或影片剪辑添加ActionScript脚本这种方法外，还可利用Flash cs中提供的各种组件来实现。并利用不同类型的组件制作出简单的用户界面控件，也可以制作出包含多项功能的交互页面；同时用户还可根据需要，对组件的参数进行自定义设置，从而修改组件的外观和交互行为。,组件可以让制作者无需自行构建复杂的用户界面元素，将精力浪费在类似元件的创建上，而只需通过选择相应的组件，并为其添加适当的ActionScript脚本，即可轻松地实现所需的交互功

3、能。在Flash cs中，用户可根据需要，为动画添加相应的组件，并通过ActionScript脚本使其实现特定的交互效果。学好ActionScript脚本和组件的基本应用，是制作Flash交互动画的必要前提。,9.1.2 Flash cs中组件的类型,在Flash cs中，组件的类型包括UserIntreface组件(即UI组件)和Video组件两种，如图9-1所示。 具体功能及含义如下：,图9-1 Flash cs组件,User Interface(UI) 组件,User Interface组件用于设置用户界面，并通过界面使用户与应用程序进行交互操作，在Flash中的大多数交互操作，都通过该

4、组件实现。在User Interface组件中，主要包括Button、CheckBox、ComboBox、Loader、ScrolIPane和TextArea等，如图9-2所示。,图9-2 UI组件,2. Video组件,Video组件用户设置多媒体组件，并通过这些组件与各种多媒体制作与播放软件等进行交互操作。在Video组件中，主要包括FLVPlayback(通过它可轻松将视频播放器包括在Flash应用程序中)、FLVPlaybackCaptioning、BackButton、PlayButton、SeekBar、PlavPauseButton以及VolumeBar、FullScreenBu

5、tton等交互组件，如图9-3所示。,图9-3 Video组件,9.1.3 打开组件,在Flash cs中，选择【窗口】|【组件】菜单命令或按【Ctrl+F7】键可以打开或隐藏“组件”面板。用户可以方便地自定义组件的外观和行为来满足自己的设计需求，如图9-4所示。,图9-4 打开组件,9.2 组件基本应用,在Flash cs中，组件的基本应用主要包括添加组件以及设置组件属性等两个方面，在完成这两步操作之后，只需为组件添加相应的Action脚本即可实现基本的交互功能。下面就对Flash cs中常用的组件、添加组件并设置组件属性、以及利用组件检查器检查组件参数的方法进行详细讲解。,9.2.1 Fl

6、ash常用组件,在Flash cs的组件类型中，Video组件通常只在涉及到视频交互控制时才会应用，而除此之外的大部分交互操作都通过UI组件来实现，因而在制作交互动画方面，UI组件是应用最广，也是最常用的组件类型之一。,在Flash cs的UI组件中，常用组件包括 按钮组件(Button) 复选框组件(CheckBox) 下拉列表框组件(ComboBox) 列表框组件(List) 单选项组件(RadioButton) 滚动条组件(Scro11Pane) 文本显示组件(TextArea) 文本输入组件(Textlnupt),1Button,Button组件是Flash组件中最简单的一个组件，利用

7、Button组件可执行所有的鼠标和键盘交互事件。打开“组件”面板，选择Button组件，按住鼠标左键不放将其拖动到场景中即可完成按钮的创建，如图9-5所示。,图9-5 按钮组件参数,Button组件各参数的具体功能及含义如下：emphasized：用于指定当按钮处于弹起状态时，Button组件周围是否显示边框。若值为tme表示当按钮处于弹起状态时，在Button组件四周显示边框；若值为。false则表示不显示边框。其默认值为false。labelPlacement：用于确定按钮上的标签文本相对于图标的方向，包括left、right、top和bottom这4个选项。其默认值为right。labe

8、l：用于设置Button组件的名称。其默认值为Label。,selected：用于根据toggle的值设置Button组件是被按下还是被释放，若toggle的值为true则表示按下，值为false表示释放。其默认值为false，toggle：用于确定是否将Button组件转变为切换开关。若要让Button组件按下后马上弹起，则选择false选项；若要让Button组件在按下后保持按下状态，直到再次按下时才返回到弹起状态，则选择true。其默认值为false。,2CheckBox组件,CheckBox组件主要用于设置一系列可选择的项目，并可同时选取多个项目，以此对指定对象的多个数值进行获取或设置

9、，如图9-6所示。,图9-6 CheckBox组件及checkBox组件参数,CheckBox组件各参数的具体功能及含义如下：label：用于设置CheckBox组件显示的内容。其默认值为Label。selected：用于确定CheckBox组件的初始状态为选中(true)或取消选中(false)。其默认值为false。lablePlacement：用于确定CheckBox组件上标签文本的方向，包括left、right、top和bottom这4个选项。其默认值为fight。,3ComboBox组件,ComboBox组件的作用与对话框中的下拉列表框类似，通过单击ComboBox组件中的下拉按钮，

10、可打开下拉列表并显示相应的选项，通过选择选项获取所需的数值，如图9-7所示。,图9-7 ComboBox组件及ComboBox组件参数,ComboBox组件各参数的具体功能及含义如下：dataProvider：用于设置相应的数据，并将其与ComboBox组件中的项目相关联。prompt：用于设置ComboBox组件的项目名称。editable：用于确定是否允许用户在下拉列表框中输入文本。若允许输入选择true；若不允许输入则选择false，默认值为false。rowCount：用于确定不使用滚动条时，下拉列表中最多可以显示的项目数量，默认为5。,4List组件,List组件主要用于创建一个可滚

11、动的单选或多选列表框，并通过选择列表框中显示的图形或其他组件获取所需的数值，如图9-8所示。,图9-8 List组件参数,List组件各参数的具体功能及含义如下：allowMultipleSelection：用于指定List组件是否可同时选择多个选项。如果值为true，则可以通过按住【Shift】键来选择多个选项。其默认值为false。horizontalLineScrollSize：用于设置当单击列表框中水平滚动箭头时，要在水平方向上滚动的内容量，该值以像素为单位。其默认值为4。,horizontaIScrollPolicy：用于设置List组件中的水平滚动条是否始终打开。包括on、off和

12、auto这3个选项。其默认值为auto。verticalPageScrollSize：用于设置按滚动条轨道时，垂直滚动条上滚动滑块要移动的像素数。当值为0时，该属性检索组件的可用宽度。其默认值为0。dataProvider：用于设置相应的数据，并将其与L,ist组件中的选项相关联。,horizontalPageScrollSize：用于设置按滚动条轨道时，水平滚动条上滚动滑块要移动的像素数。当值为0时，该属性检索组件的可用宽度。其默认值为0。verticalLineScrollSize：用于设置当单击列表框中垂直滚动箭头时，要在垂直方向上滚动的内容量，该值以像素为单位。其默认值为4。verti

13、calScrollPolicy：用于设置List组件中的垂直滚动条是否始终打开。包括on、off和auto这3个选项。其默认值为auto。,5RadioButton组件,RadioButton组件主要用于设置一系列可选择项目，并通过选择其中的某一个项目获取所需的数值，如图9-9所示。,图9-9 RadioButton组件参数,RadioButton组件各参数的具体功能及含义如下：group Name：用于指定RadioButton组件所属的项目组，项目组由与该参数相同的所有RadioButton组件组成，在同一项目组中只能选择一个RadioButton组件，并返回该组件的值。label：用于设

14、置RadioButton的文本内容。其默认值是Label。lablePlacement：确定RadioButton组件上标签文本的方向，包括left、right、top和bottom这4个选项。其默认值为right。,selected：用于确定RadioButton组件的初始状态为选中(true)或取消选中(false)。其默认值为false。value：用于设置RadioButton的对应值。其默认值是null。,6ScrollPane,滚动条组件ScrollPane用于在某个大小固定的文本框中无法将所有内容显示完全时使用。滚动条是动态文本框与输入文本框的组合，在动态文本框和输入文本框中添加

15、水平和竖直滚动条，可以通过拖动滚动条来显示更多的内容，如图9-10所示。,图9-10 ScrollPane组件,ScrollPane组件各参数的具体功能及含义如下：scrollDrag：可确定是否允许用户在滚动条中滚动内容，如果允许选择“Ixue”选项，如果不允许选择“false”选项，默认值为“false”。SOUlCe：获取或设置以下内容：绝对或相对URL(该URL标识要加载的SWF或图像文件的位置)、库中影片剪辑的类名称、对显示对象的引用或者与组件位于同一层上的影片剪辑的实例名称。,7TextArea组件.,TextArea组件主要用于显示或获取动画中所需的文本。在交互动画中需要显示或获

16、取多行文本字段的任何地方，都可使用TextArea组件来实现，如图9-11所示。,图9-11 TextArea组件参数,TextArea组件各参数的具体功能及含义如下：condenseWhite：用于设置是否从包含HTML文本的TextArea组件中删除多余的空白。在Flash cs中，空格和换行符都属于组件中的多余空白。当值为tme时表示删除多余的空白；值为false表示不删除多余空白。其默认值为falseeditable：用于设置允许用户编辑TextArea组件中的文本。值为true表示用户可以编辑TextArea组件所包含的文本；值为false则表示不能进行编辑。其默认值为true。,h

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

18、lText：用于设置或获取TextArea组件中文本字段所含字符串的HTML表示形式。其默认值为空。restrict：用于设置TextArea组件可从用户处接受的字符串。如果此属性的值为null，则TextArea组件会接受所有字符。如果此属性值设置为空字符串()，则TextInput组件不接受任何字符。其默认值为null。,wordWrap：用于设置文本是否在行末换行。若值为true，表示文本在行末换行：若值为false则表示文本不换行。其默认值为true。,8TextInput组件,TextInput组件主要用于显示或获取动画中所需的文本。与TextArea组件不同的是，TextInput

19、组件只用于显示或获取交互动画中的单行文本字段，如图9-12所示。,图9-12 TextInput组件参数,TextInput组件各参数的具体功能及含义如下：restrict：用于设置TextInput组件可从用户处接受的字符串。需注意的是：未包含在本字符串中的，以编程方式输入的字符也会被TextInput组件所接受。如果此属性的值为null，则TextInput组件会接受所有字符；若将值设置为空字符串()，则不接受任何字符。其默认值为null。 text：用于获取或设置TextInput组件中的字符串。此属性包含无格式文本，不包含HTML标签。若要检索格式为HTML的文本，应使用TextAre

20、a组件的htmlText属性。,9.2.2 添加组件的方法,在Flash cs的组件类型中，User Intreface组件用于设置用户界面，并实现大部分的交互操作组件是应用最广，要在动画中应用User Intreface交互组件，就需要将所需的组件添加到舞台中。 【例9-1】下面以在舞台中ComboBox组件为例，对Flash cs中添加组件的方法进行讲解。,操作步骤：(1) 选择【窗口】|【组件】命令(或按【Ctrl+F7】键)，打开“组件”面板。单击User Intreface左侧的按钮打开该类别，如图9-13所示。,图9-13 打开UI组件,(2) 单击User Intreface左侧

21、的按钮打开该类别，并选中ComboBox组件，按住鼠标左键，然后将ComboBox组件向舞台中拖动，如图9-14所示。,图 9-14 拖动组件ComboBox,(3) 将ComboBox组件放置到适当位置后，释放鼠标左键，完成组件的添加，如图9-15所示。,图 9-15 完成组件添加,9.2.3 设置组件属性的方法,在舞台中添加组件后，还需要根据动画的实际情况，对组件的属性进行设置。【例9-2】下面以ComboBox组件为例，对Flash cs中设置组件属性的方法进行讲解。,操作步骤：(1) 在舞台中选中要设置属性的ComboBox组件，如图9-16所示。,图 9-16 选中舞台中的Combo

22、Box组件,(2) 在“属性”面板中单击“参数”选项卡，即可看到ComboBox组件的对应参数，如图9-17所示。,图 9-17 属性面板中参数,(3) 选中dataProvider参数，然后单击参数右侧的剧按钮，打开“值”对话框，如图9-18所示。,图 9-18 打开“值”对话框,(4) 单击按钮添加新值，将label的值设置为“白云”，将data的值设置为“xz”。然后用同样的方法添加其余的值。完成后单击“确定”按钮确认数值，并关闭“值”对话框，如图9-19所示。,图 9-19 添加新值,(5) 在“参数”面板中保持editable参数的默认值false，然后将prompt参数的值设置为“选择旅游地点”，并将rowCount参数的值设置为“3”， 如图9-20所示。,图9-20 设置参数,(6) 在舞台中单击鼠标左键，即可完成