FLASH组件的认识和使用ppt课件.ppt

第12章 组件的使用,12.1 组件的概念12.2 组件的分类12.3 组件的基本操作12.4 常用组件本章小结习题十二,组件实际上是一段复杂的影片剪辑，它本身自带参数，用户可以通过参数修改组件的外观和行为。组件封装了复杂的功能，它的主要作用是让用户共享代码，从而使用户在不了解ActionScript的情况下也能够使用和自定义这些功能。,12.1 组件的概念,使用组件不仅可以减少动画的创作时间，提高工作效率，还可以给Flash动画带来统一的标准化界面。在完全安装Flash 8应用程序后，选择“窗口”“组件”命令，可以打开组件面板（见图12.1.1），它提供了Flash 8应用程序自带的所有组件。用户不仅可以使用这些自带组件，还可以自己创建组件或者下载他人创建的组件。,图12.1.1 组件面板,Flash 8应用程序自带了用户界面组件、媒体组件、数据组件、视频播放组件和管理器组件5种类型的组件，下面分别进行介绍。12.2.1 用户界面组件利用用户界面组件，用户可以与应用程序进行交互操作。用户界面组件共有22种，它们的名称及功能如表12.1所示。,12.2 组件的分类,表12.1 用户界面组件及功能,12.2.2 媒体组件利用媒体组件，用户可以在应用程序中控制和显示媒体流。媒体组件共有3种，它们的名称及功能如表12.2所示。12.2.3 数据组件利用数据组件，可以加载和处理数据源的信息。数据组件共有6种，它们的名称及功能如表12.3所示。,表12.2 媒体组件及功能表12.3 数据组件及功能,12.2.4 视频播放组件利用视频播放组件可以在Flash应用程序中快速地创建视频播放器并定义其外观，从而方便用户对视频文件的回放进行控制。视频播放组件共有10种，它们的名称及功能如表12.4所示。,表12.4 视频播放组件及功能,12.2.5 管理器组件管理器是不可见的组件，使用这些组件，可以在应用程序中实现管理焦点或深度之类的功能。管理器组件共有6种，它们的名称及功能如表12.5所示。,表12.5 管理器组件及功能,在了解了组件的概念与分类之后，下面介绍组件的基本操作。12.3.1 添加组件当向Flash文件中添加组件时，用户可以直接从组件面板中拖动组件到舞台上（见图12.3.1），或者选中组件，双击鼠标左键将其添加到舞台上。,12.3 组件的基本操作,图12.3.1 从组件面板中拖动组件到舞台上,在添加组件之后，该组件就成为一个组件实例，用户可以通过属性面板或组件检查器面板设置其参数，如图12.3.2和图12.3.3所示。,图12.3.2 属性面板,图12.3.3 组件检查器面板,12.3.2 调整组件实例的大小如果组件实例没有足够的尺寸显示它的标题，当在Flash Player中播放时，该组件实例的标题文本将会被删除一部分，如图12.3.4所示。,图12.3.4 组件实例的标题文本被删除一部分,用户可以在属性面板的“宽”和“高”文本框中输入数值，调整组件实例的大小，从而完全显示其标题文本，如图12.3.5所示。,图12.3.5 调整组件实例的大小,提示：在Flash 8中，用户还可以使用变形面板或工具箱中的任意变形工具调整组件实例的大小。12.3.3 启用动态预览功能启用动态预览功能可以使组件尽可能地“所见即所得”，即使编辑状态和发布后的效果一样。但是动态预览不能够反映组件属性的改变情况。若要启用动态预览功能，可以选择“控制”“启用动态预览”命令，图12.3.6所示的为启用动态预览功能前、后的效果。,图12.3.6 启用动态预览功能前、后的效果,12.3.4 删除组件实例若要删除某一组件实例，可以在选中后直接按“Delete”键；若要删除某一组件的所有实例，可以在库面板中选中相应元件及其Skins文件夹，然后单击“删除”按钮，图12.3.7和图12.3.8所示的为删除MuteButton元件及其Skins文件夹前、后的效果。,图12.3.7 删除MuteButton元件前、后的效果,图12.3.8 删除MuteButton元件的Skins文件夹的前、后效果,为了在Flash动画中更好地使用组件，下面介绍几种常用组件。12.4.1 Button组件Button组件用于创建按钮，相对于其他组件而言，Button组件的功能和参数设置比较简单。下面通过一个实例来进行介绍，操作步骤如下：（1）从组件面板中拖动Button组件到舞台中。,12.4 常用组件,（2）选中Button组件实例，在属性面板的“实例名称”文本框中输入字符“myButton”，如图12.4.1所示。,图12.4.1 设置实例名称,（3）单击“参数”标签，打开如图12.4.2所示的“参数”选项卡，设置Button组件实例的参数。,图12.4.2 Button组件实例的“参数”选项卡,对其中各项说明如下：1）icon：用于为按钮添加自定义图标。2）label：用于设置按钮上的文本，默认值是Button，这里设置为“Click me”。3）labelPlacement：用于设置按钮文本相对于图标的方向，其参数可以是left，right，top或者bottom，默认值是right。4）selected：用于设置按钮的状态是按下（true）还是释放（false），默认值为false。,5）toggle：用于将按钮转变为切换开关，默认值为false，这里设置为“true”。（4）单击时间轴面板中的“插入图层”按钮，插入“图层2”。（5）选择“窗口”“动作”命令，打开动作面板，如图12.4.3所示。,图12.4.3 动作面板,（6）选中“图层2”的第1帧，在动作面板中输入以下代码：function clicked() trace(“You clicked the button!”);myButton.addEventListener(“click”, clicked);（7）按“Ctrl+Enter”键，测试效果，如图12.4.4所示。,单击按钮前 单击按钮后图12.4.4 效果图,12.4.2 CheckBox组件CheckBox组件用于创建复选框，当收集一组非相互排斥的true或false值时，可以使用复选框。下面通过一个实例来进行介绍，操作步骤如下：（1）从组件面板中拖动CheckBox组件到舞台中。（2）选中CheckBox组件实例，单击“参数”标签，打开如图12.4.5所示的“参数”选项卡，设置CheckBox组件实例的参数。,图12.4.5 CheckBox组件实例的“参数”选项卡,对其中各项说明如下：1）label：用于设置复选框上的文本，默认值为defaultValue，这里设置为“语文”。2）labelPlacement：用于设置复选框文本相对于图标的方向，默认值是right。3）selected：用于设置复选框的初始状态是选中（true）还是取消选中（false）。,（3）重复第（1）步和第（2）步的操作，另外拖入两个CheckBox组件，并设置它们的“label”值分别为“数学”和“英语”。（4）按“Ctrl+Enter”键，测试效果，如图12.4.6所示。,图12.4.6 效果图,12.4.3 ComboBox组件ComboBox组件用于创建下拉菜单，在其中提供了多个选项，用户可以选择其中的一个或多个。下面通过一个实例来进行介绍，操作步骤如下：（1）从组件面板中拖动ComboBox组件到舞台中。（2）选中ComboBox组件实例，单击“参数”标签，打开如图12.4.7所示的“参数”选项卡，设置ComboBox组件实例的参数。,图12.4.7 ComboBox组件实例的“参数”选项卡,对其中各项说明如下：1）data：用于将一个数据值与ComboBox组件中的每个项目相关联，该数据参数是一个数组。2）editable：用于设置ComboBox组件是可编辑的（true）还是可选择的（false），默认值为false。3）labels：用一个文本值数组填充ComboBox组件。双击其文本框，将弹出“值”对话框（见图12.4.8），在其中添加“年龄”、“性别”和“民族”3个值，如图12.4.9所示。,图12.4.8 “值”对话框 图12.4.9 添加3个值,4）rowCount：用于设置在不使用滚动条的情况下一次最多可以显示的项目数，默认值为5。（3）单击“确定”按钮，属性面板如图12.4.10所示。,图12.4.10 设置“labels”值后的属性面板,（4）按“Ctrl+Enter”键，测试效果，如图12.4.11所示。,图12.4.11 效果图,12.4.4 Label组件Label组件用于创建不可编辑的单行文本字段。下面通过一个实例来进行介绍，操作步骤如下：（1）从组件面板中拖动Label组件到舞台中。（2）选中Label组件实例，单击“参数”标签，打开如图12.4.12所示的“参数”选项卡，设置Label组件实例的参数。对其中各项说明如下：1）autoSize：用于设置标签的大小和对齐方式。,图12.4.12 Label组件实例的“参数”选项卡,2）html：用于设置标签是否采用HTML格式，这里设置为“true”或“false”。3）text：用于设置标签的文本，这里设置为“Label A”。（3）重复第（1）步和第（2）步的操作，另外拖入两个Label组件，并设置它们的“text”值分别为“Label B”和“Label C”。（4）按“Ctrl+Enter”键，测试效果，如图12.4.13所示。,“html”值为“true”时 “html”值均为“false”时图12.4.13 效果图,12.4.5 List组件List组件用于创建下拉列表，在其中可以显示图形，也可以包含其他组件。下面通过一个实例来进行介绍，操作步骤如下：（1）从组件面板中拖动List组件到舞台中。（2）选中List组件实例，单击“参数”标签，打开如图12.4.14所示的“参数”选项卡，设置List组件实例的参数。,图12.4.14 List组件实例的“参数”选项卡,对其中各项说明如下：1）data：用于设置填充列表数据的值数组，默认值为 ，即为空数组。2）labels：用于设置填充列表标签的文本值数组，默认值为 ，即为空数组。双击其文本框，弹出“值”对话框（见图12.4.15），在其中添加“年龄”，“性别”和“民族”3个值（见图12.4.16），然后单击“确定”按钮，属性面板如图12.4.17所示。3）multipleSelection：用于设置是否可以选择多个值，默认值为false。4）rowHeight：用于设置每行的高度，以像素为单位，默认值是20，这里设置为“25”或“50”。,图12.4.15 “值”对话框 图12.4.16 添加3个值,图12.4.17 设置“labels”值后的属性面板,（3）按“Ctrl+Enter”键，测试效果，如图12.4.18所示。,“rowHeight”的值为“25”时 “rowHeight”的值为“50”时图12.4.18 效果图,12.4.6 RadioButton组件RadioButton组件用于创建一组单选按钮。下面通过一个实例来进行介绍，操作步骤如下：（1）从组件面板中拖动RadioButton组件到舞台中。（2）选中RadioButton组件实例，单击“参数”标签，打开如图12.4.19所示的“参数”选项卡，设置RadioButton组件实例的参数。,图12.4.19 RadioButton组件实例的“参数”选项卡,对其中各项说明如下：1）data：用于设置与每个单选按钮相关联的值，该数据参数是一个数组，没有默认值。2）groupName：用于设置单选按钮的组名称，默认值为radioGroup，这里设置为“num”。3）label：用于设置按钮上的文本，默认值为Radio Button，这里设置为“正数”。4）labelPlacement：用于设置按钮文本相对于图标的方向，该参数可以是left，right，top或bottom，默认值是right。,5）selected：用于设置单选按钮是否处于选中状态。被选中的单选按钮会显示一个圆点。一个组内只有一个单选按钮可以有被选中的值（true）；如果组内有多个单选按钮被设置为true，则会选中最后的单选按钮，默认值为false。（3）重复第（1）步和第（2）步的操作，另外拖入两个RadioButton组件，并设置它们的“label”值分别为“零”和“负数”。（4）按“Ctrl+Enter”键，测试效果，如图12.4.20所示。,图12.4.20 效果图,12.4.7 Window组件Window组件用于创建可随意拖动的窗口，无论何时需要向用户提供信息或最优先的选择，都可以在应用程序中使用该组件创建一个窗口。下面通过一个实例来进行介绍，操作步骤如下：（1）从组件面板中拖动Window组件到舞台中。（2）选中Window组件实例，在属性面板中设置其“宽”为“150”，“高”为“150”，“X：”为“200”，“Y：”为“125”，然后按“Enter”键确认，更改其大小和位置。,（3）单击“参数”标签，打开如图12.4.21所示的“参数”选项卡，设置Window组件实例的参数。,图12.4.21 Window组件实例的“参数”选项卡,对其中各项说明如下：1）closeButton：用于设置是否显示关闭按钮，这里设置为“true”。2）contentPath：用于设置链接图片的路径及名称，这里设置为“D:Documents and SettingstiancuiyunMy Documents1771.jpg”。3）title：用于设置窗口的标题，这里设置为“可爱的小猫咪”。（4）按“Ctrl+Enter”键，测试效果，如图12.4.22所示。,图12.4.22 效果图,本章主要对组件的使用进行了介绍，包括组件的概念、组件的分类、组件的基本操作以及常用组件的使用方法。通过本章的学习，用户应该学会创建简单的组件实例。,本章小结,一、填空题1组件实际上是一段复杂的_，它本身自带参数，用户可以通过参数修改组件的外观和行为。2当向Flash文件中添加组件时，用户可以直接从_中拖动组件到舞台上。,习题十二,二、选择题1用户可以使用的组件包括（ ）。（A）Flash 8自带的组件 （B）自己创建的组件（C）常用组件 （D）他人创建的组件2Flash 8应用程序自带的组件包括（ ）。（A）用户界面组件 （B）媒体组件（C）数据组件 （D）视频播放组件（E）管理器组件,三、简答题1简述启用动态预览功能的作用。2若要删除某一组件实例，应如何操作？四、上机操作题1创建一个Button组件实例，并为其添加图标。2自选一段文本，并使用TextArea和TextInput组件将其显示出来。,