网页设计基础教程与上机指导元件和组件.pptx

《网页设计基础教程与上机指导元件和组件.pptx》由会员分享，可在线阅读，更多相关《网页设计基础教程与上机指导元件和组件.pptx（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、会计学1网页设计基础教程与上机指导元件和组件网页设计基础教程与上机指导元件和组件教学提示和教学目标教学提示和教学目标n n教学提示：在教学提示：在FlashFlash中，最主要的动画元素是元件。元件包括中，最主要的动画元素是元件。元件包括3 3种种类型图形元件、按钮元件和影片剪辑元件。不同的元件类型具备类型图形元件、按钮元件和影片剪辑元件。不同的元件类型具备不同的特点，合理地使用元件是制作专业不同的特点，合理地使用元件是制作专业FlashFlash动画的关键。动画的关键。n n在在Flash 8Flash 8中内置了很多常用的组件。设计这些组件的目的就是为中内置了很多常用的组件。设计这些组件的

2、目的就是为了让开发人员重复使用和共享代码，封装复杂功能，使设计人员了让开发人员重复使用和共享代码，封装复杂功能，使设计人员无需编写无需编写ActionScriptActionScript就能够使用和自定义这些功能。有了这些内就能够使用和自定义这些功能。有了这些内置的组件，即使是初学者也能制作出简单的应用程序。置的组件，即使是初学者也能制作出简单的应用程序。n n教学目标：教学目标：n n熟悉元件和实例熟悉元件和实例n n掌握创建图形元件掌握创建图形元件n n掌握创建影片剪辑元件掌握创建影片剪辑元件n n掌握创建按钮元件掌握创建按钮元件n n掌握创建元件的实例掌握创建元件的实例n n掌握组件的使

3、用掌握组件的使用n n掌握使用元件创建百叶窗掌握使用元件创建百叶窗第1页/共9页19.1 元件与实例元件与实例n n19.1.1 创建图形元件n n19.1.2 创建影片剪辑元件n n19.1.3 创建按钮元件n n19.1.4 创建元件的实例n n19.1.5 编辑元件和实例第2页/共9页19.1.1 创建图形元件创建图形元件n n图形元件是最简单的图形元件是最简单的FlashFlash元件，它可以作为静态图片和动画来使用。但是若元件，它可以作为静态图片和动画来使用。但是若图形元件中含有动画时，有自己的时间线，但其时间线必须与影片中的时间图形元件中含有动画时，有自己的时间线，但其时间线必须与

4、影片中的时间线同步，也就是说图形元件中的动画是捆绑在主时间轴上的，当影片停止时，线同步，也就是说图形元件中的动画是捆绑在主时间轴上的，当影片停止时，图形元件的动画也停止了。创建图形元件有两种方法。图形元件的动画也停止了。创建图形元件有两种方法。n n1.1.直接创建图形元件。直接创建图形元件。n n2.2.将已有元素转换为图形元件将已有元素转换为图形元件第3页/共9页19.1.2 创建影片剪辑元件创建影片剪辑元件n n创建影片剪辑元件的具体操作步骤如下。创建影片剪辑元件的具体操作步骤如下。n n(1)(1)选择选择【插入插入】|【新建元件新建元件】命令，弹出命令，弹出【创建新元件创建新元件】对

5、话框，对话框，如图如图19.519.5所示。所示。n n(2)(2)在对话框中的在对话框中的【名称名称】文本框中输入元件的名称，在文本框中输入元件的名称，在【类型类型】列表列表中选中中选中【影片剪辑影片剪辑】单选按钮，单击单选按钮，单击【确定确定】按钮，切换到影片剪辑按钮，切换到影片剪辑编辑窗口，如图编辑窗口，如图19.619.6所示。所示。n n(3)(3)根据需要，用户可以在影片剪辑编辑窗口中进行编辑。根据需要，用户可以在影片剪辑编辑窗口中进行编辑。n n(4)(4)完成元件内容制作以后，选择完成元件内容制作以后，选择【编辑编辑】|【编辑文档编辑文档】命令，返回命令，返回场景窗口。场景窗口

6、。第4页/共9页19.1.3 创建按钮元件创建按钮元件n n按钮是元件的一种，它可以根据可能出现的每一种状态显示不同的图像、响按钮是元件的一种，它可以根据可能出现的每一种状态显示不同的图像、响应鼠标动作和执行指定的行为。应鼠标动作和执行指定的行为。n n按钮有特殊的编辑环境，通过在按钮有特殊的编辑环境，通过在4 4帧时间轴上创建关键帧，指定不同的按钮状帧时间轴上创建关键帧，指定不同的按钮状态。态。n n【弹起帧弹起帧】：表示鼠标指针不在按钮上时的状态。：表示鼠标指针不在按钮上时的状态。n n【指针经过帧指针经过帧】：代表鼠标指针在按钮上时的状态。：代表鼠标指针在按钮上时的状态。n n【按下帧按

7、下帧】：表示鼠标单击按钮时的状态。：表示鼠标单击按钮时的状态。n n【单击帧单击帧】：定义对鼠标单击做出反应的区域，这个反应区域在影片中：定义对鼠标单击做出反应的区域，这个反应区域在影片中是看不见的。是看不见的。第5页/共9页19.1.4 创建元件的实例创建元件的实例n n元件创建完成以后，就可以在影片中的任何地方使用该元件的实例，但需要注意的是，影片剪辑实例的创建和包含动画的图形实例的创建是不同的，影片剪辑只需要一帧就可以播放动画，但在编辑环境中不能演示动画效果，而包含动画的图形实例，则必须在与其元件同样长的帧中放置，才能显示完整的动画。第6页/共9页19.1.5 编辑元件和实例编辑元件和实

8、例n n1.1.编辑元件编辑元件n n在对一个元件进行编辑时，舞台和时间轴都会转而显示该元件对应的内容。在在对一个元件进行编辑时，舞台和时间轴都会转而显示该元件对应的内容。在Flash 8Flash 8中，中，对一个元件进行编辑有对一个元件进行编辑有3 3种方式，可以在元件实例中右击，在弹出的快捷菜单中选择种方式，可以在元件实例中右击，在弹出的快捷菜单中选择【编辑编辑】选项、选项、【在当前位置编辑在当前位置编辑】选项或者选项或者【在新窗口中编辑在新窗口中编辑】选项。无论选择哪一种选项。无论选择哪一种方式，时间轴只显示该对象对应的时间轴。方式，时间轴只显示该对象对应的时间轴。n n【编辑编辑】：

9、可以改变舞台的显示内容使它显示元件对应的图形。：可以改变舞台的显示内容使它显示元件对应的图形。n n【在当前位置编辑在当前位置编辑】：可以使舞台上该元件对应的图形以外的所有对象变暗。：可以使舞台上该元件对应的图形以外的所有对象变暗。n n【在新窗口中编辑在新窗口中编辑】：可以把它放到一个单独的窗口中进行编辑。：可以把它放到一个单独的窗口中进行编辑。n n2.2.编辑实例编辑实例 n n在在【颜色颜色】下拉列表中有以下选项。下拉列表中有以下选项。n n【无无】：没有效果：没有效果n n【亮度亮度】：更改实例的亮度。：更改实例的亮度。n n【色调色调】：更改实例的色调。：更改实例的色调。n nAl

10、phaAlpha：更改实例的透明度。：更改实例的透明度。n n【高级高级】：单击：单击【设置设置】按钮，弹出按钮，弹出【高级效果高级效果】对话框。对话框。第7页/共9页19.2 使使 用用 组组 件件n n在在Macromedia Flash Professional 8Macromedia Flash Professional 8中使用组件有多种方法，中使用组件有多种方法，可以使用可以使用【组件组件】面板来查看组件，并可以在创作过程面板来查看组件，并可以在创作过程中将组件添加到文档中。在将组件添加到文档中后，可中将组件添加到文档中。在将组件添加到文档中后，可以在以在【属性属性】面板或面板或【

11、组件检查器组件检查器】面板中查看组件属面板中查看组件属性。性。n n1.1.【组件组件】面板面板n n所有组件都存储在所有组件都存储在【组件组件】面板中，如图面板中，如图19.1319.13所所示。示。n n2.2.【库库】面板中的组件面板中的组件n n在将组件添加到文档后，它将在在将组件添加到文档后，它将在【库库】面板中显面板中显示为编辑剪辑元件示为编辑剪辑元件(SWC)(SWC)。n n3.3.创建组件的多个实例创建组件的多个实例n n通过将组件图标从库拖动到舞台上，可以添加该通过将组件图标从库拖动到舞台上，可以添加该组件的多个实例。组件的多个实例。n n4.4.动态预览中的组件动态预览中的组件n n(1)(1)动态预览功能动态预览功能n n(2)(2)处理处理SWCSWC文件和编译剪辑文件和编译剪辑n n(3)(3)编译影片剪辑元件编译影片剪辑元件n n(4)(4)导出导出SWCSWC第8页/共9页