第7章组件ppt课件.ppt

第7章 组件第第7章章 组件与行为组件与行为 本章重点 组件是一些复杂的带有可定义参数的影片剪辑符号，一个组件就是一段影片剪辑。用户可以使用组件在Animate CC中快速构建应用程序。组件旨在让开发人员重用和共享代码，封装复杂功能，让用户在没有“动作脚本”时也能使用和自定义这些功能。本章主要讲解组件的分类以及使用方法。学习本章，读者应掌握组件的相关操作。本章内容包括： 组件的类型 组件的操作 使用User Interface组件7.1 组件组件 执行菜单中的“窗口|组件”命令，调出“组件”面板，如图7-1所示。Animate CC 2015“组件”面板中包含“User Interface”和“Video” 两类组件。 “User Interface”组件用于创建界面，实现简单的用户交互功能。Animate CC 2015提供了17种“User Interface”组件。在“组件”面板中展开“User Interface”文件夹，即可看到所有的“User Interface”组件，如图7-1b所示。 “Video”组件用于插入多媒体视频，以及多媒体控制的控件。Animate CC 2015提供了15种“Video”组件。在“组件”面板中展开“Video”文件夹，即可看到所有的“Video”组件，如图7-1c所示。图7-1a “组件”面板 图7-1b 17种“User Interface”组件 图7-1c 15种“Video”组件 7.2 组件的操作组件的操作 在Animate CC 2015中，可以对组件进行添加、删除和调整外观等操作。1.添加和删除组件添加和删除组件 （1）添加组件用户可以直接双击“组件”面板中要添加的组件，即可将其添加到舞台中央。也可以在“组件”面板中选择要添加的组件，将其拖入舞台中。（2）删除组件如果要删除舞台中已经添加的组件实例，可以在舞台中直接选中该组件实例，按键盘上的Delete键，即可将其删除。2.调整组件外观调整组件外观 添加到舞台中的组件实例都是系统默认大小的，用户如果要调整组件大小，可以通过图7-2所示的“属性”面板来完成。图7-2 通过“属性”面板调整组件大小 通过“属性”面板还可以对舞台中的组件实例进行色调、透明度等参数进行调整。图7-3为对舞台中的组件实例进行色调调整的效果。图7-3 通过“属性”面板调整组件的色调进行调整 通过“属性”面板还可以对舞台中的组件实例添加滤镜效果。图7-4为对舞台中的组件实例添加“发光”滤镜的效果。图7-4 对舞台中的组件实例添加“发光”滤镜的效果7.3 使用User Interface组件 Animate CC 2015提供了17种“User Interface”组件。用户可以在“组件”面板中选中要使用的组件，然后将其直接拖到舞台中。接着在舞台中选中组件，再在“属性”面板中对其参数进行相应的设置。下面主要介绍几种典型“User Interface”组件的参数设置与应用。1. Button组件组件 Button组件为一个按钮，如图7-5所示。使用按钮可以实现表单提交以及执行某些相关的行为动作。在舞台中添加Button组件后，可以通过“属性”面板设置Button组件的相关参数，如图7-6所示。该面板的主要参数含义如下。图7-5 Button组件 图7-6 Button组件的“属性”面板lemphasized：用于设置是否为Button组件添加强调底纹。默认为未选中状态。lenabled：用于设置Button组件是否可以接受焦点和输入，默认为选中状态。llabel：用于设置按钮上的文本。llabelPlacement：用于设置按钮上的文本在按钮图标内的方向。该参数可以是下列4个值之一，即left、right、top或bottom，默认为right。lselected：该参数指定按钮是处于按下状态(true)还是释放状态(false)，默认值为false。ltoggle：用于将按钮转变为切换开关。如果值为true，则按钮在单击后保持按下状态， l并在再次单击时返回到弹起状态。如果值为false，则按钮行为与一般按钮相同toggle默认值为false。lvisible：用于设置Button组件是否可见，默认为选中状态。2. CheckBox组件组件 CheckBox组件为多选按钮组件，如图7-7所示。使用该组件可以在一组多选按钮中选择多个选项。在舞台中添加CheckBox组件后，可以通过“属性”面板设置CheckBox组件的相关参数，如图7-8所示。该面板的参数含义如下。图7-7 CheckBox组件 图7-8 CheckBox组件的“属性”面板enabled：用于设置CheckBox组件是否可以接受焦点和输入，默认为选中状态。如果未勾选enabled复选框，则CheckBox组件显示为灰色不可选状态，如图7-8b所示。图7-8b CheckBox组件显示为灰色不可选状态label：用于设置多选按钮右侧文本的值。labelPlacement：用于设置按钮上的文本在按钮图标内的方向。该参数可以是下列4个值之一，即left、right、top或bottom，默认为right。图7-8c为选择不同选项的效果比较。 selected：用于设置多选按钮的初始值为被选中或取消选中。被选中的多选按钮会显示一个对勾，其参数值为true。如果将其参数值设置为false表示会取消选择多选按钮。 visible：用于设置CheckBox组件是否可见，默认为选中状态。3. ComboBox组件组件 ComboBox组件为下拉列表的形式，如图7-9所示。用户可以在弹出的下拉列表中选择其中一项。在舞台中添加ComboBox组件后，可以通过“属性”面板设置ComboBox组件的相关参数，如图7-10所示。该面板的主要参数含义如下 。图7-9 ComboBox组件 图7-10 ComboBox组件的“属性”面板ldataProvider：用于设置下拉列表当中显示的内容，以及传送的数据。leditable：用于设置下拉菜单中显示的内容是否为编辑状态，默认值为不可编辑。lenabled：用于指示组件是否可以接受焦点和输入。lprompt：用于设置ComboBox组件开始显示时的初始内容。lrestrict：用于设置在组合框的文本字段中输入字符集。lrowCount：用于设置下拉列表框中可显示的最大行数。lvisible：用于设置 ComboBox组件是否可见，默认为选中状态。4. RadioButton组件组件 RadioButton组件为单选按钮组件，可以供用户从一组单选按钮选项中选择一个选项，如图7-11所示。在舞台中添加RadioButton组件后，可以通过“属性”面板设置RadioButton组件的相关参数，如图7-12所示。该面板的主要参数含义如下。图7-11 RadioButton组件 图7-12 RadioButton组件的“属性”面板enabled：用于设置RadioButton组件是否可以接受焦点和输入，默认为选中状态。groupName：单击按钮的组名称，一组单选按钮有一个统一的名称。label：用于设置单选按钮上的文本内容。labelPlacement：用于确定按钮上标签文本的方向。该参数可以是下列4个值之一，即left、right、top或bottom，其默认值为right。selected：用于设置单选按钮的初始值为被选中或取消选中。被选中的单选按钮中会显示一个圆点，其参数值为true，一个组内只有一个单选按钮可以有被选中的值true。如果将其参数值设置为false，表示取消选择单选按钮。 value：用于设置RadioButton组件的系统读取值，当系统要读取用户设置的值时，要根据设置的value值来进行判定，而不是Label名称。 visible：用于设置RadioButton组件是否可见，默认为选中状态。5. ScrollPane组件组件 ScrollPane组件为滚动窗格组件。该组件用于设置一个可滚动的区域来显示JPEG、GIF与PNG文件以及SWF文件，如图7-13所示。在舞台中添加ScrollPane组件后，可以通过“属性”面板设置ScrollPane组件的相关参数，如图7-14a所示。该面板的参数含义如下。图7-13 ScrollPane组件 图7-14a ScrollPane组件的“属性”面板lenabled：用于设置ScrollPane组件是否可以接受焦点和输入，默认为选中状态。lhorizontalLineScrollSize：当显示水平滚动条时，用以设置水平方向上的滚动条水平移动的数量。其单位为像素，默认值为4。lhorizontalPageScrollSize：用于设置按滚动条时，水平滚动条上滚动滑块要移动的像素数。当该值为0时，该属性检索组件的可用宽度。lhorizontalScrollPolicy：用于设置水平滚动条是否显示。在右侧下拉列表框中有auto、on、off三个选项可供选择。选择anto选项，软件将根据插入内容的尺寸确定是否添加水平滚动条；选择on选项，则会添加水平滚动条，如图7-14b所示；选择off选项，则不会添加水平滚动条。lscrollDrag：用于设置当用户在滚动窗格中拖动内容时，是否发生滚动。lsource：用于设置滚动区域内的图像文件或SWF文件。lverticalLineScrollSize：当显示垂直滚动条时，用来设置单击滚动箭头要在垂直方向上滚动多少像素。其单位为像素，默认值为4。lverticalPageScrollSize：用于设置按滚动条时垂直滚动条上滚动滑块要移动的像素数。当该值为0时，该属性检索组件的可用高度。lverticalScrollPolicy：用于设置垂直滚动条是否显示。在右侧下拉列表框中有auto、on、off三个选项可供选择。选择anto选项，软件将根据插入内容的尺寸确定是否添加垂直滚动条；选择on选项，则会添加垂直滚动条，如图7-14c所示；选择off选项，则不会添加垂直滚动条。图7-14b 添加垂直滚动条 图7-14c 添加垂直滚动条lvisible：用于设置ScrollPane组件是否可见，默认为选中状态。6. TextArea组件组件 TextArea组件用于创建文本字段，如图7-15所示。在舞台中添加TextArea组件后，可以通过“属性”面板设置TextArea组件的相关参数，如图7-16所示。该面板的主要参数含义如下。图7-15 TextArea组件 图7-16 TextArea组件的“属性”面板 leditable：用于设置TextArea组件是否允许编辑，默认值为可编辑。lenabled：用于设置TextArea组件是否可以接受焦点和输入，默认为选中状态。lhorizontalScrollPolicy：用于设置水平滚动条是否始终显示。lhtmlText：用于设置文本采用HTML格式，可以使用字体标签来设置文本格式。lmaxChars：用于设置TextArea组件中最多能输入多少个字符。如果用户不对其进行限定，只需保持默认值0即可。lrestrict：用于设置TextArea组件输入的字符集。ltext：用于设置TextArea组件的内容。lverticalScrollPolicy：用于设置垂直滚动条是否始终显示。lvisible：用于设置TextArea组件是否可见，默认为选中状态。lwordWrap：用于设置文本是否可以换行，默认为选中状态，即可自动换行。7. ProgressBar组件组件 ProgressBar组件为进程条组件，如图7-17所示。通过该组件可以快速的创建动画预览画面，即通常在打开动画时见到的Loading界面。在舞台中添加ProgressBar组件后，可以通过“属性”面板设置ProgressBar组件的相关参数，如图7-18所示。该面板的参数含义如下。图7-17 ProgressBar组件 图7-18 ProgressBar组件的“属性”面板ldirection：用于设置进度条中蓝色的填充方向。默认值为right（向右）。lenabled：用于设置ProgressBar组件是否可以接受焦点和输入，默认为选中状态。lmode：用于设置进度栏运行的模式。有event、polled和manual三种模式可供选择。默认为event。lsource：用于将一个要转换为对象的字符串来表示实例名称。ltext：用于输入进度条的名称。8. NumericStepper组件组件 NumericStepper组件为数字微调组件，如图7-19所示。该组件由显示上、下三角按钮和旁边的步进器文本框中的数字组成。当用户按下按钮时，数字将根据参数中指定的单位递增或递减，直到用户释放按钮或达到最大或最小值位置。在舞台中添加NumericStepper组件后，可以通过“属性”面板设置NumericStepper组件的相关参数，如图7-20所示。该面板的参数含义如下。图7-19 NumericStepper组件 图7-20 NumericStepper组件的“属性”面板lenabled：用于设置NumericStepper组件是否可以接受焦点和输入，默认为选中状态。lmaximum：用于设置可在步进器文本框中显示的最大值，默认值为10。lminimum：用于设置可在步进器文本框中显示的最小值，默认值为0。lstepSize：用于设置每次单击时，步进器文本框中增加或减小的单位，默认值为1。lvalue：用于设置在步进器文本框中显示的值，默认值为0。lvisible：用于设置NumericStepper组件是否可见，默认为选中状态。9. Label组件组件 Label组件为文本标签组件，如图7-21所示。该组件是一行文字，用户可以指定一个标签的格式，也可以控制标签的对齐和大小。在舞台中添加Label组件后，可以通过“属性”面板设置Label组件的相关参数，如图7-22所示。该面板的主要参数含义如下。图7-21 Label组件 图7-22 Label组件的“属性”面板 lautoSize：用于设置标签对齐方式。在右侧下拉列表框中有left、center、right和none四个选项可供选择。默认值为none。lenabled：用于设置Label组件是否可以接受焦点和输入，默认为选中状态。lhtmlText：用于设置文本采用HTML格式，可以使用字体标签来设置文本格式。lselectable：用于设置标签是否采用HTML格式。选中该复选框，则不能使用HTML来设置标签的格式。lText：用于设置标签标签的文本。lvisible：用于设置Label组件是否可见，默认为选中状态。lwordWrap：用于设置文本是否可以换行，默认为未选中状态，即不自动换行。10. List组件组件 List组件为列表框组件，如图7-23所示。图7-24为设置了列表框数据后的效果。该组件与ComboBox组件很相似，二者区别在于List组件一开始就显示为多行，而ComboBox组件一开始只显示1行。在舞台中添加Label组件后，可以通过“属性”面板设置Label组件的相关参数，如图7-25所示。该面板的参数含义如下。图7-23 List组件 图7-24 设置了列表框数据后的效果 图7-25 List组件的“属性”面板10. List组件组件 List组件为列表框组件，如图7-23所示。图7-24为设置了列表框数据后的效果。该组件与ComboBox组件很相似，二者区别在于List组件一开始就显示为多行，而ComboBox组件一开始只显示1行。在舞台中添加Label组件后，可以通过“属性”面板设置Label组件的相关参数，如图7-25所示。该面板的参数含义如下。图7-23 List组件 图7-24 设置了列表框数据后的效果 图7-25 List组件的“属性”面板11. TextInput组件组件 TextInput组件用于输入文本内容，如图7-32所示。该组件TextArea组件的功能很相似，都是用于输入文本内容。二者区别在于TextInput组件只能输入一行文本，且可以将文本以密码的形式显示；而TextArea组件能输入多行文本，但不能将文本以密码的形式显现。在舞台中添加TextInput组件后，可以通过“属性”面板设置TextInput组件的相关参数，如图7-33所示。该面板的参数含义如下。图7-32 TextInpu组件 图7-33 TextInpu组件的“属性”面板 ldisplayAsPassword：用于设置输入的文本内容是否以密码形式进行显示。图7-34为勾选该复选框前后输入文本内容的效果。leditable：用于设置TextInput组件是否允许编辑，默认值为可编辑。lenabled：用于设置TextInput组件是否可以接受焦点和输入，默认为选中状态。lmaxChars：用于设置TextInput组件中最多能输入多少个字符。如果用户不对其进行限定，只需保持默认值0即可。lrestrict：用于设置TextInput组件输入的字符集。ltext：用于设置TextInput组件默认显示的文本内容。lvisible：用于设置TextInput组件是否可见，默认为选中状态。12. ColorPicker组件组件 ColorPicker组件用于在舞台中添加拾色器，如图7-35所示。在舞台中添加ColorPicker组件后，可以通过“属性”面板设置ColorPicker组件的相关参数，如图7-36所示。该面板的参数含义如下。图7-35 ColorPicker组件 图7-36 ColorPicker组件的“属性”面板lenabled：用于设置ColorPicker组件是否可以接受焦点和输入，默认为选中状态。lselectedColor：用于设置ColorPicker组件默认显示的颜色。lshowTextField：用于设置ColorPicker组件是否显示字符标识颜色区域。图7-37为勾选该复选框前后的效果比较。lvisible：用于设置ColorPicker组件是否可见，默认为选中状态。13. UIScrollBar组件组件 UIScrollBar组件用于在舞台中添加滚动条，如图7-38所示。在舞台中添加UIScrollBar组件后，可以通过“属性”面板设置UIScrollBar组件的相关参数，如图7-39所示。该面板的参数含义如下。图7-38 UIScrollBar组件 图7-39 UIScrollBar组件的“属性”面板ldirection：用于设置滚动条的方向。在右侧下拉列表框中有vertical和horizontal两个选项可供选择。选择vertical选项，则滚动条的方向时垂直的；选择horizontal选项，则滚动条的方向是水平的。lscrollTargetName：用于设置UIScrollBar组件目标对象的名称。lvisible：用于设置UIScrollBar组件是否可见，默认为选中状态。