中文版flash动画制作培训教程 第12章 Flash组件应用.ppt

1、第12课 Flash组件应用,本章要点 具体要求 本章导读 上机练习,本章要点,创建组件 设置组件属性,具体要求,掌握各种组件的创建方法 掌握各种组件属性的设置方法,本章导读,Flash MX 2004自带了【组件】面板，在该面板中存放了很多已经制作好的组件，如单选项、复选框等组件，利用这些制作好的组件可以在更短的时间内制作一个交互式动画，如调查表、选择题等。掌握了【组件】面板的使用方法后，在制作交互式动画时将更加得心应手。 RadioButton：交互式动画中的单选按钮 CheckBox：交互式动画中的复选框 ComboBox：交互式动画中的下拉列表框 List：交互式动画中的列表框 Scr

2、ollpane：交互式动画中的滚动条 Button：交互式动画中的按钮,12.1 创建组件,Flash MX 2004提供了一些用于交互动画制作的组件，利用这些组件的交互组合，配合相应的Actions语句，就可以制作出具有交互功能的交互式动画。本节将介绍如何创建常用的组件。,12.1 创建组件,12.1.1 知识讲解 12.1.2 典型案例创建歌曲调查问卷组件,12.1.1 知识讲解,下面讲解单选项（RadioButton）、复选框（CheckBox）和下拉列表框（ComboBox）等组件的创建方法。,12.1.1 知识讲解,1【组件】面板简介 2创建单选项RadioButton 3创建复选框

3、CheckBox 4创建下拉列表框ComboBox 5创建列表框List 6创建滚动条ScrollPane 7创建按钮Button,1【组件】面板简介,在Flash菜单栏中选择【窗口】【开发面板】【组件】命令，打开【组件】面板。其中最常用的组件包括复选框组件CheckBox、单选项组件RadioButton、下拉列表框组件ComboBox、列表框组件List、滚动条组件Scrollpane和按钮组件Button。 组件是按字母顺序分类排列的，可在【组件】面板中找到它们，并单击 按钮展开该类组件。每个组件都有预定义参数，可在制作Flash动画时设置这些参数。,1【组件】面板简介,每个组件还有一组

4、独特的“动作脚本”方法、属性和事件，它们也称为API（应用程序编程接口），使用户可以在运行时设置参数和其他选项。每个组件描述都包含了以下方面的信息： 辅助功能。 设置组件参数。 键盘交互与实时预览。 在应用程序中使用组件。 自定义组件的样式和外观。 “动作脚本”方法、属性和事件。,2创建单选项RadioButton,单选项（RadioButton）主要用于需要观众在相互排斥的选项之间进行选择的场合。通常，在Flash中创建一组单选项可以形成一个系列的选择组，观众只能在其中选择某一个选项，在选择该组中某一个选项后，将自动取消对该组内其他选项的选择。 只需在【组件】面板下的UI Component

5、s类中选择单选项RadioButton组件，按住鼠标左键不放将其拖放到舞台上即可创建单选项组件。,3创建复选框CheckBox,在一系列选择项目中，利用复选框可以同时选取多个项目。可通过UI Components中的CheckBox组件创建多个复选框，并为其设置相应的参数。 在【组件】面板的UI Components组件类型中选择复选框CheckBox组件，按住鼠标左键不放将其拖放到舞台上，即可完成复选框的创建。,4创建下拉列表框ComboBox,在【组件】面板下的UI Components类型中选择下拉列表框ComboBox组件，按住鼠标左键将其拖放到舞台上，创建下拉列表框。在创建好的下拉列

6、表框中，单击右边的 下拉按钮即可弹出设置好的下拉列表，供用户选择需要的选项。,5创建列表框List,列表框List组件是一个可滚动的单选或多选列表框，可以显示图形和文本。单击标签或数据参数字段时，将打开【值】对话框，可使用该对话框来添加显示在List中的项目。 在【组件】面板的UI Components类型中选择列表框List组件，按住鼠标左键将其拖放到舞台上，即可创建列表框。,6创建滚动条ScrollPane,滚动条ScrollPane组件用于在某个大小固定的文本框中显示更多的文本内容。滚动条是动态文本框与输入文本框的组合，在动态文本框和输入文本框中添加水平和竖直滚动条，用户可以通过拖动滚动

7、条来显示更多的内容。 在【组件】面板的UI Components类型中选择滚动条ScrollPane组件，按住鼠标左键不放将其拖放到舞台上，即可完成滚动条的创建。,7创建按钮Button,按钮Button组件可以执行鼠标和键盘的交互事件，可将按钮的行为从按下改为切换，在单击切换按钮后，它将保持按下状态，直到再次单击时才会返回到弹起状态。Flash中的按钮Button组件可以使用自定义的图标。 在【组件】面板的UI Components类型中选择按钮Button组件，按住鼠标左键不放将其拖放到舞台上即可创建按钮。,12.1.2 典型案例创建歌曲调查问卷组件,本案例将制作一个名为“歌曲调查问卷”的

8、动画，在第一个问卷中填上所需的问题后，单击按钮组件即可自动生成调查结果，再单击第二幅问卷中的按钮组件即可回到第一幅问卷中。此练习的目的为学习组件的添加方法。,“歌曲调查问卷”最终效果图,案例目标,效果图位置：【第12课源文件歌曲调查问卷.fla】 制作思路： 1）利用绘图工具绘制出背景图形。 2）在场景中输入文字。 3）在场景中添加组件。 4）制作第二个问卷，并添加语句。,操作步骤,本案例分为三大部分：第一步，绘制背景图形并输入文字；第二步，添加组件；第三步，添加语句。,1绘制背景图形并输入文字,下面利用矩形工具和选择工具绘制出背景图形，并输入相关的文字，其具体操作（请老师参照软件讲解）：,2

9、添加组件,将背景图形和文本设置完成，即可将所需要的组件添加到场景中，并进行对齐，其具体操作（请老师参照软件讲解）：,3添加语句,要使问卷具有交互的功能，就得为按钮组件添加Actions语句，其具体操作（请老师参照软件讲解）：,案例小结,本案例制作了“歌曲调查问卷”的效果，在制作过程中主要学习了添加组件和Actions语句的方法。其中需要注意的是在添加组件时，要清楚每个常用组件的作用，避免出现所添加的组件不能正常工作的情况。,12.2 设置组件属性,创建完组件后，还需对其属性进行设置，以满足制作者的要求。本节将介绍如何设置常用组件的属性。,12.2 设置组件属性,12.2.1 知识讲解 12.2

10、.2 典型案例设置歌曲调查问卷,12.2.1 知识讲解,从【组件】面板中调用的组件一般都需要对其属性进行设置，经过设置后的组件才更加方便实用。,12.2.1 知识讲解,1设置单选项RadioButton属性 2设置复选框CheckBox属性 3设置下拉列表框ComboBox属性 4设置列表框List属性 5设置滚动条ScrollPane属性 6设置按钮Button属性,1设置单选项RadioButton属性,选中舞台中的单选项，打开【属性】面板，这时程序默认显示其【参数】选项卡下的内容，在此可以对组件的参数进行设置。在其【属性】选项卡中可设置组件的坐标、高和宽等。,单选项参数,1设置单选项Ra

11、dioButton属性,该选项卡中各项参数的含义如下： data：文本字符串数组，用于为label参数中的各项目指定相关联的值。 groupName：用于指定当前单选项所属的单选项组，该参数值相同的单选项自动被编为一组，并且在一组单选项中只能选择一个单选项。 label：用于设置按钮上的文本值，默认值是Radio Button。 labelplacement：用于确定单选项旁边标签文本的位置，其中包括4个选项，【left】，【right】，【top】和【bottom】，默认值为【right】。,1设置单选项RadioButton属性,selected：用于确定单选项的初始状态为被选中状态（tr

12、ue）或未选中状态（false），其默认值为【false】。被选中的单选项会显示一个圆点，一个组内只能有一个单选项被选中，如果一组内有多个单选项被设置为【true】，则会选中最后实例化的单选项。,2设置复选框CheckBox属性,选中舞台中的复选框，打开其【属性】面板，在【参数】选项卡中可设置复选框的参数。 该选项卡中各项参数的含义如下： label：其默认值是【CheckBox】，用于确定复选框右边的显示内容。 labelPlacement：包括4个选项，【left】，【right】，【top】和【bottom】，默认值是【right】。用于确定复选框上标签文本的方向。 selected：用

13、于确定复选框的初始状态为选中状态（true）或未选中状态（false）。被选中的复选框会显示一个对勾标记。,复选框参数,3设置下拉列表框ComboBox属性,选中舞台中的下拉列表框，打开其【属性】面板，在【参数】选项卡中可设置下拉列表框的参数。,3设置下拉列表框ComboBox属性,该选项卡中各项参数的含义如下： data：将一个数据值与ComboBox组件中的每个项目相关联。 editable：其默认值为【false】，用于决定用户是否能在下拉列表框中输入文本。【true】表示可以输入文本，【false】则表示不可以输入文本，。,3设置下拉列表框ComboBox属性,labels：它可以设置

14、一个文本值数组，以此来决定ComboBox组件下拉菜单的显示内容。单击该项右边的 图标，将打开【值】对话框，单击左上角的 按钮，可以为下拉列表添加一个选项，单击 按钮，可以删除当前选中的选项。单击 或 按钮，可以改变选项的顺序。 rowCount：其默认值为5，可以确定在不使用滚动条时最多能显示的项目数。,4设置列表框List属性,选中舞台中的列表框，打开其【属性】面板，在【参数】选项卡中可设置列表框的参数。 该选项卡中各项参数的含义如下： data：文本字符串数组，用于填充列表数据的数值组，为label参数中的各项目指定相关联的值，其内容必须与labels完全相同。 labels：与下拉列表

15、框的labels选项类似，单击右边 的 按钮将打开【值】对话框，其设置方法与下拉列表框类似。,下拉列表框参数,4设置列表框List属性,multipleSelection：用于确定是否能选择多个选项，【true】选项表示能选择多个选项，【false】选项表示不能选择多个选项。 rowHeight：用于确定每个选项的高度，以像素为单位，默认值是20。,5设置滚动条ScrollPane属性,选中舞台中的滚动条，打开其【属性】面板，在【参数】选项卡中可设置滚动条的参数。,5设置滚动条ScrollPane属性,该选项卡中各项参数的含义如下： contentPath：确定要加载到滚动条中的内容所在位置。

16、 hLineScrollSize：确定每单击滚动条两边的箭头按钮时，水平滚动条移动多少个单位，默认值为5。 hPageScrollSize：指定每次单击滚动条时，轨道水平移动的距离，默认值为20。 hScrollPolicy：确定是否显示水平滚动条。该值可以为【on】（显示），【off】（不显示）或【auto】（自动），默认值为【auto】。,5设置滚动条ScrollPane属性,scrollDrag：确定是否允许用户在滚动条中滚动内容，如果允许选择【true】选项，如果不允许选择【false】选项，默认值为【false】。 vLineScrollSize：指定每次单击滚动条两边的箭头按钮时，

17、垂直滚动条移动多少个单位，默认值为5。 vPageScrollSize：指定每次单击轨道时，垂直滚动条移动的距离，默认值为20。 vScrollPolicy：确定是否显示垂直滚动条。该值可以为【on】（显示），【off】（不显示）或【auto】（自动），默认值为【auto】。,6设置按钮Button属性,选中舞台中的按钮，打开其【属性】面板，在【参数】选项卡中可设置按钮的参数。,6设置按钮Button属性,该选项卡中各项参数的含义如下： icon：没有默认值，可以为按钮添加自定义图标，在其后的文本框中可以输入图标的位置。 label：其默认值是【Button】，它决定按钮上显示的内容。 lab

18、elPlacement：其默认值是【right】，它可以确定按钮上的标签文本相对于图标的方向。其中包括4个选项，【left】，【right】，【top】和【bottom】。,6设置按钮Button属性,selected：其默认值为【false】。如果toggle的值是【true】，则该参数指定按钮的状态是按下（true）还是释放（false）。 toggle：其默认值为【false】，它可以确定是否将按钮转变为切换开关。如果想让按钮在单击后立即弹起，可选择【false】选项；如果想让按钮在单击后保持凹陷状态，在再次单击后才返回到弹起状态，可选择【true】选项。,12.2.2 典型案例设置歌曲调查问卷,本案例将为前面制作的“歌曲调查问卷”动画中的组件设置属性。 效果图位置：【第12课源文件歌曲调查问卷.fla】 制作思路： 1）设置RadioButton组件属性。 2）设置ComboBox组件属性。 3）设置ScrollPane组件属性。 4）设置Button组件属性。,“歌曲调查问卷”最终效果图,操作步骤,下面选择各个不同的组件，并在【属性】面板中对其进行设置，其具体操作（请老师参照软件讲解）：,案例小结,本案例为上一节的“歌曲调查问卷”动画中添加的单选项、下拉列