1、Flash平面动画制作,第6章 Flash组件入门,教学目标,教学重点、难点,本章小结,教学内容,教学目标,通过这章的学习，学生可以学会Flash组件的使用方法和技巧,第6章 Flash组件入门,教学重点与难点,第6章 Flash组件入门,Flash组件中各个选项的含义、作用及参数设置。,教学内容,本章小结,第6章 Flash组件入门,6.3 “制作台历”案例,6.1 Flash组件概述,本章计划授课4学时,6.2 “会员注册表”案例,本节内容,Flash组件概述,Flash 组件简介,本章案例简介,6.1 Flash组件概述,组件件是带有预定义参数的电影剪辑。通过这些参数，可以个性地修改组件
2、的外观和行为。使用组件，并对其参数进行简单设置，再编写简单的脚本，就能完成专业人员才能实现的交互动画。,一、 Flash组件概述,6.1 Flash组件概述,Flash CS3的Actionscript 2.0内置四种组件类型，包括用户界面（UI）组件、数据（Data）组件、视频（Video）组件和媒体（Media）组件。,二、 Flash组件简介,6.1 Flash组件概述,二、 Flash组件简介,6.1 Flash组件概述,本章中将通过2个案例，来讲解Flash提供的组件功能。“会员注册表”案例主要讲解的是RadioButton、CheckBox、Button、ComboBox和Text
3、Area几个常用组件的创建及使用方法。“制作台历”案例主要讲解的是DateChooser日期选择器和Label标签的使用。,三、 本章案例简介,6.1 Flash组件概述,本节内容,案例效果,操作步骤,技术要点,练习,6.2 “会员注册表” 案例,一、案例效果,重点与难点：组件的使用步骤及RadioButton、CheckBox、Button、ComboBox和TextArea几个常用组件的创建及使用方法。,6.2 “会员注册表” 案例,二、操作步骤,1：设置背景 （1）启动Adobe Flash CS3，选择【文件】【新建】菜单项，从“常规”对话框中选择Flash文件（ActionScrip
4、t2.0）新建一个文档，设置文档大小为450500像素，背景色为白色，命名为“会员注册表”，保存文档。(2)将图层改名为”bg”,在素材文件夹中选择图片文件“水果.jpg” 导入到舞台.并调整大小.将”水果”图片转换为名称为”背景”的图形元 件. 调整透明度为15%,并设置笔触文本点缀.,6.2 “会员注册表” 案例,二、操作步骤,2创建文本 （1）新建命名为“文本”的图层，在舞台上输入如下文本信息：,6.2 “会员注册表” 案例,二、操作步骤,（2）选择“文本工具”，并将文本类型改为“输入文本”。在文本“姓名”和“年龄”右边各加一个文本框，并在实例名称中分别命名为“xingming”和”ni
5、anling”.3添加组件 （1）新建一个图层，命名为“组件”，选择【窗口】【组件】命令,6.2 “会员注册表” 案例,二、操作步骤,(2) “性别：”的右侧；将User Interface（用户界面）组件-“组件”-RadioButton（单选按钮），“籍贯：”的右侧设置为ComboBox（下拉列表框）组件；“爱好：”的右侧选择CheckBox（复选框）组件“座右铭：”的下方设置为：TextArea（文本域）组件，并适当调整一下它的大小和位置；舞台的下方选择Button（按钮）组件，,6.2 “会员注册表” 案例,二、操作步骤,效果如图：,6.2 “会员注册表” 案例,二、操作步骤,（3）使
6、用【选择工具】选中“性别：”后的第一个单选按钮，在其“属性”面板中单击“参数”选项卡，将label的值设为“男”。选中“性别：”后的第二个单选按钮，将label的值设为“女”。 （4）单击“籍贯：”后面的下拉列表框，在“属性”面板中的“属性”选项卡中将它命名为“jiguan”，设置对应参数如图：,6.2 “会员注册表” 案例,二、操作步骤,（5）单击“爱好：”右侧的第一个复选框，在“属性”面板中将其命名为“aihao1”，将显示文字设为“音乐”，。依照此种方法，将其它3个复选框，分别命名为“aihao2”、“aihao3”、“aihao4”，显示文字分别为“旅游”、“看书”、“运动”。,6.2
7、 “会员注册表” 案例,二、操作步骤,（6）单击“座右铭：”下方的文本域，在“属性”面板中将其命名为“zuo”。 （7）单击舞台最下方的按钮，在“属性”面板中将其命名为“zhuce”，label设为“注册”。 （8）新建一个图层，命名为“AS和结果”，在第2帧按F6键插入关键帧，按照“会员注册表”标题的操作方法制作“注册信息”标题；单击选择【文本工具】，设置文本类型为“动态文本”，然后在标题下方居中位置拖动一个适当大小的矩形框，接着在“属性”面板中将其变量名设为“jieguo”，设置文本颜色为深蓝色，显示类型为“多行”；选择“组件”面板中的按钮，将其拖入到动态文本的下方。将其命名为“fanhu
8、i”，显示文字为“返回”。,6.2 “会员注册表” 案例,二、操作步骤,效果如图：,6.2 “会员注册表” 案例,二、操作步骤,4、编写代码 （1）选中“AS和结果”层中的第1帧，单击鼠标右键，在弹出的快捷菜单中选择“动作”命令，将“动作”面板打开，输入如图动作脚本：,6.2 “会员注册表” 案例,二、操作步骤,（2）选中“AS和结果”层中的第2帧，打开“动作”面板，输入如图的动作脚本：5、测试并保存文件。,6.2 “会员注册表” 案例,三、技术要点,1、如何使用组件 步骤如下： （1）添加组件。方法1：双击“组件”面板中的某个组件，它就会出现在舞台的中央。方法2：在“组件”面板中将其选中，按
9、住鼠标左键将其拖入到舞台适当的地方即可。 （2）在舞台上选择该组件。 （3）在“属性”面板中输入组件实例的名称，或者单击“参数”选项卡并在“组件”字样下的框中输入组件实例的名称。 （4）单击“参数”选项卡，然后为实例指定参数。,6.2 “会员注册表” 案例,2 单选钮RadioButton组件的使用,三、技术要点,RadioButton 参数,6.2 “会员注册表” 案例,3 复选框CheckBox组件的使用 CheckBox参数,三、技术要点,6.2 “会员注册表” 案例,4 按钮Button组件的使用,三、技术要点,Button 参数,6.2 “会员注册表” 案例,5 下拉列表框Combo
10、Box组件的使用,三、技术要点,ComboBox 参数,6.2 “会员注册表” 案例,6 TextArea组件的使用,三、技术要点,TextArea 参数,6.2 “会员注册表” 案例,（1）利用TextArea组件和Button组件制作一个留言版信息，用户输入的标题和留言内容两部分在单击按钮后，显示在下一个页面中。（2）利用RadioButton组件和Button组件制作一道单项选择题。若是用户答对了，就显示出“答对了！恭喜你！”若是用户答错了，则显示“答错了！请继续努力！”。,四、练习,6.2 “会员注册表” 案例,本节内容,案例效果,操作步骤,技术要点,练习,6.3 “制作台历”案例,一
11、、案例效果,重点与难点：DateChooser日期选择器和Label标签的调入和设置参数方法，以及如何完成DateChooser和Label之间的数据绑定。,6.3 “制作台历”案例,二、操作步骤,1新建文档并命名启动Adobe Flash CS3后，新建一个文档，设置文档大小为700400象素，背景颜色为淡绿色（“#99CC99”）。保存文件名为”台历“。 2.添加并设置组件（1）将”图层1”改名为“组件”。【窗口】【组件】DateChooser日期选择器，将其拖入到舞台的右边，适当调整它的大小；选择Label标签，将它也拖入到日期选择器的下方，用来显示选择的日期。,6.3 “制作台历”案例
12、,二、操作步骤,（2）选中“日期选择器”，在其“属性”面板中单击“参数”选项卡，可以设置其中的参数,如图：,6.3 “制作台历”案例,二、操作步骤,（3）选中舞台上的Label标签，在其“属性”面板中单击“参数”选项卡，可以设置其中的参数。Rili和xsrili设置如图：,“rili”绑定的数据 “rili”绑定的组件,6.3 “制作台历”案例,二、操作步骤,“xsrili”绑定的数据 “xsrili”绑定的组件,6.3 “制作台历”案例,二、操作步骤,3、设置背景 设置如图背景：,6.3 “制作台历”案例,二、操作步骤,4、“四季图”动画制作 （1）新建”四季图“图层，将素材库中的“春.jp
13、g”、“夏.jpg”、“秋.jpg”、“冬.jpg”添加到库中 。 （2）选择【插入】【新建元件】命令，将“春.jpg”创建一个名称为“tu1”的图形元件。利用此方法将“夏.jpg”、“秋.jpg”、“冬.jpg”创建为“tu2”、“tu3”、“tu4”的图形元件。 （3）再次选择【插入】【新建元件】命令，创建一个名称为“四季图”的影片剪辑。将“tu1”元件拖入到第一层中，然后新建一层，画一个圆形。回到主场景，把“四季图”元件拖入到舞台中。双击“四季图”元件，此时可以对照着主场景中的带点圆圈调整影片剪辑里的圆相同大小。,6.3 “制作台历”案例,二、操作步骤,春、夏、秋、冬图层帧效果设置如图：
14、5、测试并保存文件。,6.3 “制作台历”案例,三 、技术要点,1. DateChooser组件的使用DateChooser组件是一个允许用户选择日期的日历。它包含一些按钮，这些按钮允许用户在月份之间来回滚动并单击某个日期将其选中，可以用来设置指示月份和日名称、星期中的哪一天、任何禁用日期以及加亮显示当前日期的参数。,6.3 “制作台历”案例,三 、技术要点,2. Label组件的使用Label组件用于为表单中的另一个组件创建文本标签，例如，TextInput字段左侧的“姓名：”标签接受用户的姓名。,6.3 “制作台历”案例,用自己的相片设计一个日历。,四、练习,6.3 “制作台历”案例,本章主要学习使用Flash组件的方法和技巧，利用组件我们可以创建功能强大、效果丰富的程序界面。通过本章的学习，可以掌握组件各选项的含义，学会设置组件的参数，并能够用动作脚本提取组件中的值。,本章小结,
