《Flash8动画设计》 组件和模板.ppt

1、第八章 组件和模板,本章主要内容,8.1组件简介 8.2使用组件 8.3常用组件 8.4使用模板 8.5应用实例 8.6 本章习题与实验指导,第8章 组件和模板,8.1 组件简介,组件是带有参数的影片剪辑。组件既可以是一个简单的用户界面控件（如单选按钮或复选框）；也可以包含一定的内容（如滚动窗格）；组件还可以是不可见的（如FocusManager）。 组件是面向对象技术的一个重要特征。每个组件都有预定义参数。用户也可以在使用时重新设置这些参数，并且每个组件还有一组独特的动作脚本方法、属性和事件（也称API，应用程序编程接口），在运行组件时用户可以设置参数和其他选项。,包含四类组件：用户界面组件

2、（UI）、媒体组件、数据组件和管理器。 l用户界面组件（UI）：可以快速地与应用程序交互操作。例如，Button组件、CheckBox组件等。 l 媒体组件：可以将媒体流入到应用程序中。例如，MediaDisplay 组件、MediaPlayback 组件等。 数据组件：可以加载和处理数据源的信息。例如，DataBinding 组件、DataHolder组件、DataSet组件、WebServiceConnector 组件等。 管理器：管理器组件是一组不可见的组件，使用这些组件可以在应用程序中管理诸如焦点或深度之类的功能。例如，DepthManager类、FocusManager类、PopUp

3、Manager类等。,8.2 使用组件,使用组件有多种方法：可以使用“组件”面板来查看组件，也可以在创作过程中将组件添加到文档中。这样可在“属性”面板或“组件检查器”面板中查看或修改组件属性。此外，在多数情况下，用户还需要编写动作脚本，以便对组件数据进行处理。 所有组件都存储在“组件”面板中。选择“窗口”“开发面板”“组件”命令，或按下组合键Ctrl+F7都可以打开“组件”面板。,第8章 组件和模板,“组件”面板,1、添加组件和删除组件 向文档中添加组件，只需要打开“组件”面板，将选中组件从“组件”面板中拖放到舞台上，或者在“组件”面板中双击要添加的组件即可。 若从 Flash 文档中删除组件

4、的实例，可通过删除库面板中编译剪辑(SWC)图标来删除组件，或者直接选中舞台上的组件实例，按Delete键。,2、“组件检查器”面板和“属性”面板 将组件添加到Flash文档后，可以使用“属性”面板来设置和查看组件实例。也可以使用“组件检查器”面板来设置组件实例的参数。需要说明的是有些参数必须使用动作脚本来设置。 在“组件检查器”面板中查看组件实例：选择一个组件的实例，单击“窗口”“组件检查器”命令，打开“组件检查器”面板，单击“参数”选项卡查看参数。,3、处理组件事件 所有组件都有事件，若处理事件，需要编写在触发事件时执行的脚本代码。用户可以通过以下两种方式来处理组件事件： 使用on()组件

5、事件处理函数 处理组件事件最简单的方式是使用on()组件事件处理函数。用户可以将on()处理函数分配给组件实例，就像将处理函数分配给按钮或影片剪辑一样。,使用组件事件侦听器 处理组件事件最强大的方式是使用侦听器。事件由组件进行广播，作为侦听器注册到事件广播器（组件实例）的任何对象都会收到该事件的通知。用户可以向一个组件实例注册多个侦听器，也可以向多个组件实例注册一个侦听器。 使用事件侦听器模型，需要创建一个侦听器对象，该对象所带的属性应为事件的名称。,8.3 常用组件,8.3.1 Button（按钮）组件 Button 组件是一个可调整大小的矩形用户界面按钮。可以给按钮添加一个自定义图标。也可

6、以将按钮的行为从按下改为切换。在单击切换按钮后，它将保持按下状态，直到再次单击时才会返回到弹起状态。,第8章 组件和模板,1、Button 参数 l icon：给按钮添加自定义图标。该值是”库”面板中影片剪辑或图形元件的链接标识符，没有默认值。 l label：设置按钮上文本的值，默认值是“Button”。 l labelPlacement：确定按钮上的标签文本相对于图标的方向。该参数可以是left、right、top 或 bottom之一，默认值是 right。,lselected ：该参数指定是按下(true)还是释放(false)按钮，默认值为false。 l toggle：将按钮转变为

7、切换开关。值为true时，按钮在按下后保持按下状态，直到再次按下时才返回到弹起状态；值为false时，按钮的行为就像普通按钮，默认值为false。 请进入Flash通过实例介绍Button组件的具体应用。,2、Button组件的应用 下面通过实例介绍Button组件的具体应用。 请进入Flash窗口，根据教材介绍的操作步骤完成实例制作。,测试按钮效果图,8.3.2 CheckBox（复选框）组件 CheckBox是一个可以选中或取消选中的方框。复选框是任何表单或 Web 应用程序中的一个基础部分。每当需要收集一组非相互排斥的true或false值时，都可以使用复选框。当复选框被选中后，框中会出

8、现一个复选标记。对于一组复选框选项，用户可以不选或者选择选项中的一个或多个。,1、CheckBox 参数 l label：设置复选框上文本的值，默认值是CheckBox。 l labelPlacement：确定复选框上标签文本的方向。该参数可以是下列四个值之一： left、right、top 或 bottom，默认值是right。 lselected：将复选框的初始值设为选中(true)或取消选中(false)。,CheckBox组件参数,2、CheckBox 组件的应用 下面的示例是一个用于收集客户个人信息的表单，其中包含一组个人兴趣爱好列表供客户选择。 请进入Flash窗口完成操作。,复选

9、框组件实例效果图,8.3.3 ComboBox（组合框）组件 ComboBox有静态和可编辑之分。使用静态组合框可以从下拉列表中做出一项选择；使用可编辑的组合框可以在列表顶部的文本字段中直接输入文本，也可以从下拉列表中选择一项。组合框是由Button、TextInput和 List三个子组件组成。,1、ComboBox 参数 ldata：为ComboBox组件中的每个项目设置一个相关联数据值，该数据参数是一个数组。 leditable：确定ComboBox组件是可编辑的(true)还是只能选择的(false)。默认值为 false。 labels：用一个文本值数组填充ComboBox组件。 r

10、owCount：设置在不使用滚动条的情况下一次最多可以显示的项目数。默认值为5。,ComboBox组件参数,2、ComboBox组件的应用 制作一个组合框，并在其下拉列表中呈现出一个从中选择城市的列表。 请进入Flash窗口完成操作。,ComboBox组件应用,8.3.4 Label（标签）组件 Label组件是Flash 8中新加入的一个组件。通常使用Label 组件为表单的其它组件创建文本标签，也可以使用 Label 组件来替代普通文本字段。,Label组件参数,1、Label 参数 参数含义如下： autoSize：指明标签的大小和对齐方式应如何适应文本，默认值为none。 html：指

11、明标签是否采用HTML格式，默认值为 false。 text：指明标签的文本，默认值是Label。,2、Label组件的应用 用Label 组件为复选框及组合框添加标签。 请进入Flash窗口完成操作。,组件应用效果图,8.3.5 List（列表框）组件 List组件是一个可滚动的单选或多选列表框，它与ComboBox组件有相似的功能和用法。 1、List 组件参数 其它参数含义如下： lmultipleSelection：是一个布尔值，用于设置列表框的选项能否多选。默认值为false，即只能选择其中一项。若选择true，可同时选择多项，选择多项时需要按下Ctrl键的同时点击要选择的项目。 l

12、 rowHeight：可以设置列表框每行的高度，默认值是20。,2、List组件的应用 请进入Flash窗口完成操作。,List组件应用,List组件参数,8.3.6 NumericStepper（数字微调器）组件 NumericStepper 组件允许用户在一个数值范围内选择某一值。NumericStepper只处理数值数据，此外，要显示两个以上的数值位置（例如，数字5246 或1.34），在编辑时必须调整数字微调器的大小。,1、NumericStepper参数 参数含义如下： Maximum：设置步进的最大值，默认值为 10。 minimum：设置步进的最小值，默认值为 0。 stepSi

13、ze ：设置步进的变化单位，默认值为 1。 value：设置当前步进的值，默认值为 0。,NumericStepper组件参数,2、NumericStepper组件的应用 本例中的数字微调器允许用户从-5050 之间选择一个数字，增量为1。 请进入Flash窗口完成操作。,NumericStepper组件应用,8.3.7 RadioButton（单选按钮）组件 使用RadioButton组件允许用户从一组选项中选择惟一的选项。RadioButton组件必须用于至少有两个RadioButton实例的组。在任何给定的时刻，都只有一个组成员被选中，用户可以设置groupName参数，以指明单选按钮属

14、于哪个组。,1、RadioButton 参数 l data：是与单选按钮相关的值。 l groupName：单选按钮的组名称，默认值为radioGroup。 l label：设置单选按钮的标签。 l labelPlacement：设置标签文本在单选按钮的什么位置，默认值是right。 l selected：将单选按钮的初始值设置为是否被选中。,设置RadioButton组件参数,2、RadioButton 组件的应用 设置单选按钮用于显示性别。 请进入Flash窗口完成操作。,组件实例效果,8.3.8 ScrollPane（滚动窗格）组件 ScrollPane组件的功能是提供滚动条，用户可以很

15、方便地观看尺寸过大的影片剪辑、JPEG 文件和SWF文件。另外，在创作和运行时，都可以使用动作脚本来设置滚动窗格的内容。,1、ScrollPane 参数 contentPath：设置要加载到滚动窗格中的内容。该值可以是本地SWF或JPEG文件的相对路径、Internet上文件的相对或绝对路径，也可以是设置“为动作脚本导出”的影片剪辑元件的链接标识符。 lhLineScrollSize：设置单击水平滚动条的向左或向右箭头时滑动尺寸的大小。,ScrollPane 组件参数,lhPageScrollSize：设置每次按下轨道时水平滚动条移动多少个单位，默认值为20。 lhScrollPolicy：设

16、置是否显示水平滚动条。该值可以为on（无论影片剪辑与滚动窗格的相对大小如何都显示水平滚动条）、off（无论影片剪辑与滚动窗格的相对大小如何都不显示水平滚动条）或auto（根据影片剪辑与滚动窗格的相对大小来决定显示水平滚动条）。 l scrollDrag：设置是否允许用户在滚动窗格中用鼠标拖拽影片剪辑对象。默认值为,false，即只能通过滚动条查看滚动窗格中的影片剪辑。若设为true，允许用户直接使用鼠标拖拽滚动窗格中的影片剪辑。 l vLineScrollSize：设置单击垂直滚动条的向上或向下箭头时滑动尺寸的大小。 l vPageScrollSize： 设置每次按下轨道时垂直滚动条移动多少个

17、单位。 lvScrollPolicy：是否显示垂直滚动条。该值的设置方法与hScrollPolicy参数相似。,2、ScrollPane组件的应用 使用滚动窗格显示一幅风景图片。 请进入Flash窗口完成操作。,ScrollPane组件应用,8.3.9 TextArea（文本域）组件 TextArea组件可以提供多行文本的输入。 1、TextArea 组件参数 l editable：指明TextArea 组件是否可编辑，默认值为true。 html：指明文本是否采用HTML格式，默认值为false。 text：指明TextArea的内容。 wordWrap：指明文本是否自动换行，默认值为tru

18、e。,TextArea 组件参数,2、TextArea 组件的应用 为两个TextArea组件实例的参数分别设置不同的值，将会有不同的效果。 请进入Flash窗口完成操作。,TextArea组件不同参数应用效果图,8.3.10 TextInput（输入文本框）组件 TextInput组件和TextArea组件功能比较相似，都可以提供文本输入，不同是TextInput组件只能提供单行文本的输入。 1、TextInput组件参数 editable：指明 TextInput组件是否可编辑，默认值为true。 password：指明字段是否为密码字段，默认值为false。 text：指定TextInp

19、ut 的内容。,2、TextInput组件的应用 将两个TextInput组件实例中的password参数分别设为true 和false两种情况，观察运行结果。,TextInput 组件参数,TextInput组件应用,8.3.11 DateChooser(日期选择)组件 DateChooser组件允许用户从日历中选择一个或多个日期。 1、DateChooser组件参数 l dayNames：显示周的文本，默认为S,M,T,W,T,F,S分别代表周日至周六。 l disabledDays：设置每周的哪一天无效（反白，不能选择）。0为周日，1为周一，2为周二，依此类推。 lfirstDayOfW

20、eek：设置哪一天为每周的第一天。0为周日，1为周一，2为周二。,l monthNames：可以根据语言的种类指定显示月份的名称，默认是英文的月份单词 l showToday：是否使用特殊标志显示当天的日期，默认是true。,DateChooser组件参数,2、DateChooser组件的应用 下面通过一个简单的示例说明DateChooser组件的使用方法。 请进入Flash窗口完成操作。,测试效果图,8.3.12 Window(窗口)组件 Window组件在一个具有标题栏、边框和关闭按钮（可选）的窗口内显示电影剪辑的内容。Window 组件还支持拖动操作，用户可以单击标题栏并将窗口及其内容拖动到另一个位置，但拖动边框不会更改窗口的大小。,1、Window 组件参数 l closeButton：指明是否显示关闭按钮。 l contentPath：指定窗口的内容。内容可以是电影剪辑的链接标识符，或是屏幕、表单或包含窗口内容的幻灯片的元件的名称；也可以是要加载到窗口的SWF 或JPG 文件的绝对或相对URL。 ltitle：指明窗口的标题。,Window组件参数,2、Window