交互组件应用汇总课件.ppt

1、2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学第第9课课 交互组件应用交互组件应用w 本课要点本课要点w 具体要求具体要求w 本课导读本课导读w 上机练习上机练习2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学本课要点本课要点w组件的基本概念组件的基本概念w应用应用Flash 8中的常用组件中的常用组件w设置组件属性设置组件属性w组件检查器组件检查器2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学具体要求具体要求w了解组件的作用，以及了解组件的作用，以及Flash 8中的中的组件类型。组件类型。w掌握掌握Flash 8中常用组

2、件的应用。中常用组件的应用。w掌握为组件设置属性的基本方法。掌握为组件设置属性的基本方法。w了解并掌握组件检查器的基本应用。了解并掌握组件检查器的基本应用。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学本课导读本课导读在在Flash 8中，若要使动画具备某种特定中，若要使动画具备某种特定的交互功能，除了为动画中的帧、按钮或的交互功能，除了为动画中的帧、按钮或影片剪辑添加影片剪辑添加Action脚本这种方法外，还脚本这种方法外，还可利用可利用Flash 8中提供的各种组件来实现中提供的各种组件来实现。用户只需根据动画的实际情况，在场景。用户只需根据动画的实际情况，在场景中

3、添加相应类型的组件，并为组件添加适中添加相应类型的组件，并为组件添加适当的脚本即可。当的脚本即可。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.1 Action脚本概述脚本概述组件是组件是Flash 8中重要的组成部分，中重要的组成部分，在在Flash 8的交互应用中，组件通常的交互应用中，组件通常与与Action脚本配合使用。通过对组件脚本配合使用。通过对组件参数进行设置，并将组件所获取的信参数进行设置，并将组件所获取的信息传递给相应的息传递给相应的Action脚本，然后通脚本，然后通过脚本执行相应的操作，从而实现最过脚本执行相应的操作，从而实现最基本的交互功能。

4、基本的交互功能。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.1 Action脚本概述脚本概述9.1.1 知识讲解知识讲解9.1.2 典型案例典型案例打开打开【组件组件】面面 板查看组件类型板查看组件类型2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.1.1 知识讲解知识讲解在在Flash 8中，用户可根据需要，为中，用户可根据需要，为动画添加相应的组件，并通过动画添加相应的组件，并通过Action脚本使其实现特定的交互效果。学好脚本使其实现特定的交互效果。学好Action脚本和组件的基本应用，是制脚本和组件的基本应用，是制作作Flash交

5、互动画的必要前提。在本交互动画的必要前提。在本节中，就将对组件的作用以及节中，就将对组件的作用以及Flash 8中组件的基本类型进行讲解。中组件的基本类型进行讲解。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.1.1 知识讲解知识讲解1.组件的作用组件的作用2.Flash中组件的类型中组件的类型2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学1.组件的作用组件的作用Flash 8中的组件，可以为制作者提中的组件，可以为制作者提供大部分的交互功能。利用不同类型供大部分的交互功能。利用不同类型的组件，可以制作出简单的用户界面的组件，可以制作出简单的

6、用户界面控件，也可以制作出包含多项功能的控件，也可以制作出包含多项功能的交互页面。同时用户还可根据需要，交互页面。同时用户还可根据需要，对组件的参数进行自定义设置，从而对组件的参数进行自定义设置，从而修改组件的外观和交互行为。修改组件的外观和交互行为。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学2.Flash中组件的类型中组件的类型在在Flash 8中，组件的类型包括：中，组件的类型包括：Data组件、组件、FLV Playback-Player 8组件、组件、FLV Playback Custom UI组组件、件、Media-Player 6-7组件和组件和User

7、 Interface组件（即组件（即UI组件）。组件）。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.1.2 典型案例典型案例打开打开【组件组件】面板查看组件类型面板查看组件类型w案例目标案例目标本案例将打开本案例将打开【组件组件】面板，然后查面板，然后查看看【组件组件】面板中的各组件类型。通面板中的各组件类型。通过练习，可掌握在过练习，可掌握在Flash 8中打开中打开【组件组件】面板并选择相应组件的基本面板并选择相应组件的基本操作。操作。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.1.2 典型案例典型案例打开打开【组件组件】面板查看

8、组件类型面板查看组件类型w操作思路操作思路（1）选择相关命令打开）选择相关命令打开【组件组件】面板。面板。（2）在打开的）在打开的【组件组件】面板中打开相应面板中打开相应的组件类别，并查看该类别下的组件。的组件类别，并查看该类别下的组件。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.1.2 典型案例典型案例打开打开【组件组件】面板查看组件类型面板查看组件类型w操作步骤操作步骤具体操作步骤请教师参照软件和书中具体操作步骤请教师参照软件和书中内容进行讲解。内容进行讲解。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.1.2 典型案例典型案例打开

9、打开【组件组件】面板查看组件类型面板查看组件类型w案例小结案例小结本案例通过简单的几步操作，练习了在本案例通过简单的几步操作，练习了在Flash 8中打开中打开【组件组件】面板，并查看组面板，并查看组件的基本方法。在练习时，除掌握基本的件的基本方法。在练习时，除掌握基本的操作方法外，还应尽量熟悉各组件类别下操作方法外，还应尽量熟悉各组件类别下的组件名称，以及各组件在该类别下的大的组件名称，以及各组件在该类别下的大致位置，为以后的实际应用打下必要的基致位置，为以后的实际应用打下必要的基础。础。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.2 组件基本应用组件基本应用了

10、解组件的作用、类型以及了解组件的作用、类型以及【组件组件】面板的相关操作后，在本节中，就将面板的相关操作后，在本节中，就将对对Flash 8中组件的基本应用进行讲中组件的基本应用进行讲解。解。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.2 组件基本应用组件基本应用9.2.1 知识讲解知识讲解9.2.2 典型案例典型案例利用组件利用组件 获取用户信息获取用户信息2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.2.1 知识讲解知识讲解在在Flash 8中，组件的基本应用主要中，组件的基本应用主要包括添加组件以及设置组件属性等两包括添加组件以及

11、设置组件属性等两个方面，在完成这两步操作之后，只个方面，在完成这两步操作之后，只需为组件添加相应的需为组件添加相应的Action脚本即可脚本即可实现基本的交互功能。实现基本的交互功能。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.2.1 知识讲解知识讲解1.Flash常用组件常用组件2.添加组件的方法添加组件的方法3.设置组件属性的方法设置组件属性的方法4.组件检查器组件检查器2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学1.Flash常用组件常用组件在在Flash 8的各组件类型中，的各组件类型中，FLV Playback-Player 8

12、组件、组件、FLV Playback Custom UI组件和组件和Media-Player 6-7组件组件用于对视频播放进行控制，用于对视频播放进行控制，Data组件用于组件用于加载和处理数据源的信息，加载和处理数据源的信息，User Interface组件则用于设置用户界面，并实组件则用于设置用户界面，并实现大部分的交互操作，因而在制作交互动现大部分的交互操作，因而在制作交互动画方面，画方面，User Interface组件是应用最广，组件是应用最广，也是最常用的组件类别之一。也是最常用的组件类别之一。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学2.添加组件的方法

13、添加组件的方法下面以在动画场景中的下面以在动画场景中的ComboBox组件为例，对组件为例，对Flash 8中添加组件的中添加组件的方法进行讲解。具体操作请教师参照方法进行讲解。具体操作请教师参照软件和书中内容进行讲解。软件和书中内容进行讲解。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学3.设置组件属性的方法设置组件属性的方法在场景中添加组件后，还需要根据动在场景中添加组件后，还需要根据动画的实际情况对组件的属性进行设置。画的实际情况对组件的属性进行设置。下面以下面以ComboBox组件为例，对组件为例，对Flash 8中设置组件属性的方法进行中设置组件属性的方法进行

14、讲解，具体操作请教师参照软件和书讲解，具体操作请教师参照软件和书中内容进行讲解。中内容进行讲解。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学4.组件检查器组件检查器组件检查器用于显示和设置所选组件组件检查器用于显示和设置所选组件的参数和属性等信息。在组件较多的的参数和属性等信息。在组件较多的情况下，使用组件检查器，可以快速情况下，使用组件检查器，可以快速对组件的参数和属性信息进行检查和对组件的参数和属性信息进行检查和修改，从而提高动画制作的效率。其修改，从而提高动画制作的效率。其具体操作请教师参照软件和书中内容具体操作请教师参照软件和书中内容进行讲解。进行讲解。200

15、9教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.2.2 典型案例典型案例利用组件获取利用组件获取 用户信息用户信息w案例目标案例目标本例将利用本节所学的常用组件，制作一个本例将利用本节所学的常用组件，制作一个具有信息收集功能的具有信息收集功能的“利用组件获取用户信利用组件获取用户信息息.fla”动画。通过本例的练习，掌握动画。通过本例的练习，掌握Flash 8中常用组件的应用，以及结合中常用组件的应用，以及结合Action脚本脚本实现特定功能的基本思路和方法。实现特定功能的基本思路和方法。n源文件位置：源文件位置：【第第9课课源文件源文件利用组件获取利用组件获取用户信息用户

16、信息.fla】2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.2.2 典型案例典型案例利用组件获取利用组件获取 用户信息用户信息w操作思路操作思路（1）将图层）将图层1重命名为重命名为“背景背景”图层，输图层，输入相应文字信息，并创建动态文本区域。入相应文字信息，并创建动态文本区域。（2）新建）新建“组件组件”图层，添加图层，添加ComboBox和和RadioButton组件，并设置组件，并设置组件属性。组件属性。（3）新建）新建“按钮脚本按钮脚本”图层，添加图层，添加Button组件，并为其添加相应的组件，并为其添加相应的Action脚本。脚本。2009教师教师fl

17、ash培训教案培训教案新余市长新余市长青小学青小学9.2.2 典型案例典型案例利用组件获取利用组件获取 用户信息用户信息w操作步骤操作步骤具体操作步骤请教师参照软件和书中具体操作步骤请教师参照软件和书中内容进行讲解。内容进行讲解。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.2.2 典型案例典型案例利用组件获取利用组件获取 用户信息用户信息w案例小结案例小结本案例通过利用本案例通过利用Button，RadioButton和和ComboBox组件，并结合相应的组件，并结合相应的Action脚本，实脚本，实现了对用户输入信息的获取功能。在制作本例的过现了对用户输入信息的

18、获取功能。在制作本例的过程中，除了掌握这几种常用组件的基本应用外，还程中，除了掌握这几种常用组件的基本应用外，还应了解应了解Action脚本的大致含义，以及如何将所用组脚本的大致含义，以及如何将所用组件与件与Action脚本相关联的基本方法。除此之外，还脚本相关联的基本方法。除此之外，还可尝试利用可尝试利用ScrollPane和和CheckBox组件，替代本组件，替代本例中的动态文本区域和例中的动态文本区域和RadioButton组件，以对其组件，以对其进行有针对性的练习。进行有针对性的练习。2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.3 上机练习上机练习9.3.

19、1 利用组件实现背景选择利用组件实现背景选择9.3.2 利用组件制作利用组件制作IQ测试测试2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.3.1 利用组件实现背景选择利用组件实现背景选择本次练习结合本课所学的内容，利用本次练习结合本课所学的内容，利用ComboBox组件配合组件配合Action脚本，制作脚本，制作一个可以通过下拉列表框选择动画背景的一个可以通过下拉列表框选择动画背景的“利用组件实现背景选择利用组件实现背景选择.fla”动画。动画。n素材位置：素材位置：【第第9课课素材素材】n源文件位置：源文件位置：【第第9课课源文件源文件利用组件实现利用组件实现背景

20、选择背景选择.fla】2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.3.1 利用组件实现背景选择利用组件实现背景选择操作思路操作思路n文档的场景尺寸为文档的场景尺寸为550200像素，背景颜色像素，背景颜色为深灰色。为深灰色。n将图层将图层1重命名为重命名为“背景背景”图层，将导入的图图层，将导入的图片素材分别放置到第片素材分别放置到第27帧中，并为各帧添帧中，并为各帧添加加“stop();”脚本。脚本。n新建新建“组件组件”图层，将图层，将ComboBox组件放置组件放置到场景，设置其属性并添加适当的到场景，设置其属性并添加适当的Aciton语语句。句。2009教

21、师教师flash培训教案培训教案新余市长新余市长青小学青小学9.3.2 利用组件制作利用组件制作IQ测试测试本次练习将运用本课所学知识，利用本次练习将运用本课所学知识，利用Flash 8中的中的RadioButton和和Button组件组件，配合，配合Action脚本，制作一个具有简单脚本，制作一个具有简单IQ测试功能的测试功能的“利用组件制作利用组件制作IQ测试测试.fla”动画效果动画效果n素材位置：素材位置：【第第9课课素材素材】n源文件位置：源文件位置：【第第9课课源文件源文件利用组件制作利用组件制作IQ测试测试.fla】2009教师教师flash培训教案培训教案新余市长新余市长青小学青小学9.3.2 利用组件制作利用组件制作IQ测试测试操作思路操作思路n文档的场景尺寸为文档的场景尺寸为550390像素，背景颜色为像素，背景颜色为白色。白色。n导入本例所需的图片素材，并将导入的素材放导入本例所需的图片素材，并将导入的素材放置到场景中作为背景。置到场景中作为背景。n新建新建“问题问题”图层，使用文本工具和绘图工具图层，使用文本工具和绘图工具在场景中输入相应的文字并绘制问题图形。在场景中输入相应的文字并绘制问题图形。n在各关键帧中添加本例需要用到的组件，设置在各关键帧中添加本例需要用到的组件，设置各组件的参数，并添加相应的脚本。各组件的参数，并添加相应的脚本。