第6章 Flash组件入门.ppt

《第6章 Flash组件入门.ppt》由会员分享，可在线阅读，更多相关《第6章 Flash组件入门.ppt（43页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、FlashFlash平面动画制作平面动画制作第第6 6章章 FlashFlash组件入门组件入门教学目标教学目标 教学重点、难点教学重点、难点 本章小结本章小结 教学内容教学内容 教学目标教学目标 通过这章的学习，学生可以学会通过这章的学习，学生可以学会FlashFlash组组件的使用方法和技巧件的使用方法和技巧 第第6 6章章 FlashFlash组件入门组件入门 教学重点与难点教学重点与难点 第第6 6章章 FlashFlash组件入门组件入门 FlashFlash组件中各个选项的含义、组件中各个选项的含义、作用及参数设置。作用及参数设置。教学内容教学内容 本章小结本章小结第第6 6章章

2、FlashFlash组件入门组件入门本章计划授课本章计划授课4学时学时本节内容本节内容FlashFlash组件概述组件概述Flash Flash 组件简介组件简介本章案例简介本章案例简介6.1 Flash组件概述组件概述 组件件是带有预定义参数的电影剪辑。通过这些参数，可以组件件是带有预定义参数的电影剪辑。通过这些参数，可以个性地修改组件的外观和行为。使用组件，并对其参数进行简单个性地修改组件的外观和行为。使用组件，并对其参数进行简单设置，再编写简单的脚本，就能完成专业人员才能实现的交互动设置，再编写简单的脚本，就能完成专业人员才能实现的交互动画。画。一、一、FlashFlash组件概述组件概

3、述6.1 Flash组件概述组件概述FlashCS3的的Actionscript2.0内置四种组件类型，包括用户内置四种组件类型，包括用户界面（界面（UI）组件、数据（）组件、数据（Data）组件、视频（）组件、视频（Video）组件和）组件和媒体（媒体（Media）组件。）组件。二、二、FlashFlash组件简介组件简介 6.1 Flash组件概述组件概述二、二、FlashFlash组件简介组件简介6.1 Flash组件概述组件概述 本章中将通过本章中将通过2个案例，来讲解个案例，来讲解Flash提供的组件功能。提供的组件功能。“会员注册表会员注册表”案例主要讲解的是案例主要讲解的是Rad

4、ioButton、CheckBox、Button、ComboBox和和TextArea几个常用组件的创建及使用方几个常用组件的创建及使用方法。法。“制作台历制作台历”案例主要讲解的是案例主要讲解的是DateChooser日期选择器和日期选择器和Label标签的使用。标签的使用。三、三、本章案例简介本章案例简介6.1 Flash组件概述组件概述 本节内容本节内容案例效果案例效果操作步骤操作步骤技术要点技术要点练习练习6.2“会员注册表会员注册表”案例案例 一、案例效果一、案例效果重点与难点：重点与难点：组件的使用步骤及组件的使用步骤及RadioButton、CheckBox、Button、Com

5、boBox和和TextArea几个常用组件的创建及使用方法。几个常用组件的创建及使用方法。6.2“会员注册表会员注册表”案例案例 二、操作步骤二、操作步骤1 1：设置背景设置背景（1）启动）启动AdobeFlashCS3，选择，选择【文件文件】【新新建建】菜单项，从菜单项，从“常规常规”对话框中选择对话框中选择Flash文件文件（ActionScript2.0）新建一个文档，设置文档大小为）新建一个文档，设置文档大小为450500像素，背景色为白色，命名为像素，背景色为白色，命名为“会员注册表会员注册表”，保存文档。，保存文档。(2)(2)将图层改名为将图层改名为”bgbg”,在在素材文件夹中

6、选择图片文素材文件夹中选择图片文件件“水果水果.jpg”导入到舞台导入到舞台.并调整大小并调整大小.将将”水果水果”图片转换为名称为图片转换为名称为”背景背景”的图形元的图形元件件.调整透明度为调整透明度为15%,15%,并设置笔触文本点缀并设置笔触文本点缀.6.2“会员注册表会员注册表”案例案例二、操作步骤二、操作步骤2创建文本创建文本（1）新建命名为）新建命名为“文本文本”的图层，在舞台上输入如下的图层，在舞台上输入如下文本信息：文本信息：6.2“会员注册表会员注册表”案例案例二、操作步骤二、操作步骤（2 2）选择）选择“文本工具文本工具”，并将文本类型改为，并将文本类型改为“输入文输入文

7、本本”。在文本。在文本“姓名姓名”和和“年龄年龄”右边各加一个文本右边各加一个文本框，并在实例名称中分别命名为框，并在实例名称中分别命名为“xingmingxingming”和和”nianlingnianling”.3添加组件添加组件（1）新建一个图层，命名为）新建一个图层，命名为“组件组件”，选择，选择【窗口窗口】【组件组件】命令命令 6.2“会员注册表会员注册表”案例案例二、操作步骤二、操作步骤(2)“性别：性别：”的右侧；的右侧；将将UserInterface（用户界面）（用户界面）组件组件-“组件组件”-RadioButton（单选按钮），（单选按钮），“籍贯：籍贯：”的右侧设置为的右

8、侧设置为ComboBox（下拉列表框）（下拉列表框）组件；组件；“爱好：爱好：”的右侧选择的右侧选择CheckBox（复选框）组件（复选框）组件 “座右铭：座右铭：”的下方设置为：的下方设置为：TextArea（文本域）组（文本域）组件，并适当调整一下它的大小和位置；件，并适当调整一下它的大小和位置；舞台的下方选择舞台的下方选择Button（按钮）组件，（按钮）组件，6.2“会员注册表会员注册表”案例案例二、操作步骤二、操作步骤效果如图：效果如图：6.2“会员注册表会员注册表”案例案例二、操作步骤二、操作步骤（3）使用）使用【选择工具选择工具】选中选中“性别：性别：”后的第一个单后的第一个单选

9、按钮，在其选按钮，在其“属性属性”面板中单击面板中单击“参数参数”选项卡，选项卡，将将label的值设为的值设为“男男”。选中。选中“性别：性别：”后的第二个后的第二个单选按钮，将单选按钮，将label的值设为的值设为“女女”。（4）单击）单击“籍贯：籍贯：”后面的下拉列表框，在后面的下拉列表框，在“属性属性”面板中的面板中的“属性属性”选项卡中将它命名为选项卡中将它命名为“jiguan”，设置对应参数如图：设置对应参数如图：6.2“会员注册表会员注册表”案例案例二、操作步骤二、操作步骤（5）单击）单击“爱好：爱好：”右侧的第一个复选框，在右侧的第一个复选框，在“属性属性”面板中将其命名为面板

10、中将其命名为“aihao1”，将显示文字设为，将显示文字设为“音乐音乐”，。依照此种方法，将其它，。依照此种方法，将其它3个复选框，分别命个复选框，分别命名为名为“aihao2”、“aihao3”、“aihao4”，显示文，显示文字分别为字分别为“旅游旅游”、“看书看书”、“运动运动”。6.2“会员注册表会员注册表”案例案例二、操作步骤二、操作步骤（6）单击）单击“座右铭：座右铭：”下方的文本域，在下方的文本域，在“属性属性”面面板中将其命名为板中将其命名为“zuo”。（7）单击舞台最下方的按钮，在）单击舞台最下方的按钮，在“属性属性”面板中将其面板中将其命名为命名为“zhuce”，label

11、设为设为“注册注册”。（8）新建一个图层，命名为）新建一个图层，命名为“AS和结果和结果”，在第，在第2帧帧按按F6键插入关键帧，按照键插入关键帧，按照“会员注册表会员注册表”标题的操作标题的操作方法制作方法制作“注册信息注册信息”标题；单击选择标题；单击选择【文本工具文本工具】，设置文本类型为设置文本类型为“动态文本动态文本”，然后在标题下方居中，然后在标题下方居中位置拖动一个适当大小的矩形框，接着在位置拖动一个适当大小的矩形框，接着在“属性属性”面面板中将其变量名设为板中将其变量名设为“jieguo”，设置文本颜色为深，设置文本颜色为深蓝色，显示类型为蓝色，显示类型为“多行多行”；选择；选

12、择“组件组件”面板中的面板中的按钮，将其拖入到动态文本的下方。将其命名为按钮，将其拖入到动态文本的下方。将其命名为“fanhui”，显示文字为，显示文字为“返回返回”。6.2“会员注册表会员注册表”案例案例二、操作步骤二、操作步骤效果如图：效果如图：6.2“会员注册表会员注册表”案例案例二、操作步骤二、操作步骤4、编写代码、编写代码（1）选中）选中“AS和结果和结果”层中的第层中的第1帧，单击鼠标右键，帧，单击鼠标右键，在弹出的快捷菜单中选择在弹出的快捷菜单中选择“动作动作”命令，将命令，将“动作动作”面板打开，输入如图动作脚本：面板打开，输入如图动作脚本：6.2“会员注册表会员注册表”案例案

13、例二、操作步骤二、操作步骤（2）选中）选中“AS和结果和结果”层中的第层中的第2帧，打开帧，打开“动作动作”面板，输入如图的动作脚本：面板，输入如图的动作脚本：5、测试并保存文件。、测试并保存文件。6.2“会员注册表会员注册表”案例案例三、技术要点三、技术要点1、如何使用组件、如何使用组件步骤如下：步骤如下：（1）添加组件。）添加组件。方法方法1：双击：双击“组件组件”面板中的某个组件，它就会出现面板中的某个组件，它就会出现在舞台的中央。在舞台的中央。方法方法2：在：在“组件组件”面板中将其选中，按住鼠标左键将面板中将其选中，按住鼠标左键将其拖入到舞台适当的地方即可。其拖入到舞台适当的地方即可

14、。（2）在舞台上选择该组件。）在舞台上选择该组件。（3）在）在“属性属性”面板中输入组件实例的名称，或者单击面板中输入组件实例的名称，或者单击“参数参数”选项卡并在选项卡并在“组件组件”字样下的框中输入组件实例字样下的框中输入组件实例的名称。的名称。（4）单击）单击“参数参数”选项卡，然后为实例指定参数。选项卡，然后为实例指定参数。6.2“会员注册表会员注册表”案例案例2 单选钮单选钮RadioButton组件的使用组件的使用三、技术要点三、技术要点RadioButton 参数参数6.2“会员注册表会员注册表”案例案例3 复选框复选框CheckBox组件的使用组件的使用CheckBox参数参数

15、三、技术要点三、技术要点6.2“会员注册表会员注册表”案例案例4 按钮按钮Button组件的使用组件的使用三、技术要点三、技术要点Button 参数参数6.2“会员注册表会员注册表”案例案例5 下拉列表框下拉列表框ComboBox组件的使用组件的使用三、技术要点三、技术要点ComboBox 参数参数6.2“会员注册表会员注册表”案例案例6 TextArea组件的使用组件的使用三、技术要点三、技术要点TextArea 参数参数6.2“会员注册表会员注册表”案例案例（1）利用）利用TextArea组件和组件和Button组件制作一个留言版信息，用组件制作一个留言版信息，用户输入的标题和留言内容两部

16、分在单击按钮后，显示在下一个户输入的标题和留言内容两部分在单击按钮后，显示在下一个页面中。页面中。（2）利用）利用RadioButton组件和组件和Button组件制作一道单项选择题。组件制作一道单项选择题。若是用户答对了，就显示出若是用户答对了，就显示出“答对了！恭喜你！答对了！恭喜你！”若是用户答若是用户答错了，则显示错了，则显示“答错了！请继续努力！答错了！请继续努力！”。四、练习四、练习 6.2“会员注册表会员注册表”案例案例本节内容本节内容案例效果案例效果操作步骤操作步骤技术要点技术要点练习练习 6.3“制作台历制作台历”案例案例一、案例效果一、案例效果重点与难点：重点与难点：Dat

17、eChooser日期选择器和日期选择器和Label标签的调入和设置参数标签的调入和设置参数方法，以及如何完成方法，以及如何完成DateChooser和和Label之间的数据绑定。之间的数据绑定。6.3“制作台历制作台历”案例案例二、操作步骤二、操作步骤1 1新建文档并命名新建文档并命名 启动启动AdobeAdobeFlashFlashCS3CS3后，新建一个文档，后，新建一个文档，设置文档大设置文档大小为小为700400象素，背景颜色为淡绿色（象素，背景颜色为淡绿色（“#99CC99”）。保存）。保存文件名为文件名为”台历台历“。2.添加并设置组件添加并设置组件 （1）将）将”图层图层1”改名

18、为改名为“组件组件”。【窗口窗口】【组件组件】DateChooser日期选择器，将其拖入到日期选择器，将其拖入到舞台的右边，适当调整它的大小；舞台的右边，适当调整它的大小；选择选择Label标签，将它也拖入到日期选择器的下方，用来显标签，将它也拖入到日期选择器的下方，用来显示选择的日期。示选择的日期。6.3“制作台历制作台历”案例案例二、操作步骤二、操作步骤（2）选中）选中“日期选择器日期选择器”，在其，在其“属性属性”面板中单击面板中单击“参数参数”选项卡，可以设置其中的参数选项卡，可以设置其中的参数,如图：如图：6.3“制作台历制作台历”案例案例二、操作步骤二、操作步骤（3）选中舞台上的）

19、选中舞台上的Label标签，在其标签，在其“属性属性”面板中单击面板中单击“参参数数”选项卡，可以设置其中的参数。选项卡，可以设置其中的参数。Rili和和xsrili设置如图：设置如图：“rili”绑定的数据 “rili”绑定的组件 6.3“制作台历制作台历”案例案例二、操作步骤二、操作步骤 “xsrili”绑定的数据 “xsrili”绑定的组件6.3“制作台历制作台历”案例案例二、操作步骤二、操作步骤3、设置背景、设置背景设置如图背景：设置如图背景：6.3“制作台历制作台历”案例案例二、操作步骤二、操作步骤4、“四季图四季图”动画制作动画制作（1）新建）新建”四季图四季图“图层，将素材库中的

20、图层，将素材库中的“春春.jpg”、“夏夏.jpg”、“秋秋.jpg”、“冬冬.jpg”添加到库中添加到库中。（2）选择）选择【插入插入】【新建元件新建元件】命令，将命令，将“春春.jpg”创建创建一个名称为一个名称为“tu1”的图形元件。利用此方法将的图形元件。利用此方法将“夏夏.jpg”、“秋秋.jpg”、“冬冬.jpg”创建为创建为“tu2”、“tu3”、“tu4”的图的图形元件。形元件。（3）再次选择）再次选择【插入插入】【新建元件新建元件】命令，创建一个名称命令，创建一个名称为为“四季图四季图”的影片剪辑。将的影片剪辑。将“tu1”元件拖入到第一层中，然元件拖入到第一层中，然后新建一

21、层，画一个圆形。回到主场景，把后新建一层，画一个圆形。回到主场景，把“四季图四季图”元件拖元件拖入到舞台中。双击入到舞台中。双击“四季图四季图”元件，此时可以对照着主场景中元件，此时可以对照着主场景中的带点圆圈调整影片剪辑里的圆相同大小。的带点圆圈调整影片剪辑里的圆相同大小。6.3“制作台历制作台历”案例案例二、操作步骤二、操作步骤 春、夏、秋、冬图层帧效果设置如图：春、夏、秋、冬图层帧效果设置如图：5、测试并保存文件。、测试并保存文件。6.3“制作台历制作台历”案例案例三三 、技术要点、技术要点1.DateChooser组件的使用组件的使用 DateChooser组件是一个允许用户选择日期的

22、日历。组件是一个允许用户选择日期的日历。它包含一些按钮，这些按钮允许用户在月份之间来回滚动它包含一些按钮，这些按钮允许用户在月份之间来回滚动并单击某个日期将其选中，可以用来设置指示月份和日名并单击某个日期将其选中，可以用来设置指示月份和日名称、星期中的哪一天、任何禁用日期以及加亮显示当前日称、星期中的哪一天、任何禁用日期以及加亮显示当前日期的参数。期的参数。6.3“制作台历制作台历”案例案例三三 、技术要点、技术要点2.Label组件的使用组件的使用 Label组件用于为表单中的另一个组件创建文本标签，组件用于为表单中的另一个组件创建文本标签，例如，例如，TextInput字段左侧的字段左侧的“姓名：姓名：”标签接受用户的姓标签接受用户的姓名。名。6.3“制作台历制作台历”案例案例用自己的相片设计一个日历。用自己的相片设计一个日历。四、练习四、练习 6.3“制作台历制作台历”案例案例 本章主要学习使用本章主要学习使用Flash组件的方法和技巧，利用组组件的方法和技巧，利用组件我们可以创建功能强大、效果丰富的程序界面。通过本件我们可以创建功能强大、效果丰富的程序界面。通过本章的学习，可以掌握组件各选项的含义，学会设置组件的章的学习，可以掌握组件各选项的含义，学会设置组件的参数，并能够用动作脚本提取组件中的值。参数，并能够用动作脚本提取组件中的值。本章小结本章小结