(实训课件)第3章网页元素动画的制作.pdf

网页制作三剑客 第3 章 网页元素——动画的制作 实训课件 实训目标 计算机基础教研室 ·1 · 网页制作三剑客 实现过程 任务一、设计与制作logo Step1. 制作图形元件“drupal”  新建文件与保存文件。操作步骤如下： （1）启动Flash CS6 。 （2 ）选择菜单“文件→新建”命令，打开“新建文档”对话框。 ① 在“常规”列表框中选择“ActionScript2.0 ”。 ② 在“宽”后的数值处单击，激活文本框，在文本框中输入“200 ”。 ③ 在“高”后的数值处单击，激活文本框，在文本框输中入“165”。 ④ 在“帧频”后的数值处单击，激活文本框，在文本框输中入“24 ”。 ⑤ 单击 “确定”按钮。 （3 ）选择菜单“文件→保存”命令，将文件保存为“logo.fla ”。  制作图形元件“drupal ”。操作步骤如下： （1）选择菜单 “插入→新建元件”命令，打开“创建新元件”对话框，在“名称”文 本框中输入“drupal ”，在“类型”下拉列表框中选择“图形”，单击“确定”按钮。 （2 ）选择菜单“文件→导入→导入到舞台”命令，打开“导入”对话框，选择“drupal(素 材).gif ”文件，单击 “打开”按钮，将图像导入到舞台。 Step2. 制作影片剪辑元件“drupal 闪烁”  将“drupal ”图形元件拖到“drupal 闪烁”影片剪辑元件中。操作步骤如下： （1）选择菜单 “插入→新建元件”命令，打开“创建新元件”对话框，在“名称”文 本框中输入“drupal 闪烁”，在“类型”下拉列表框中选择“影片剪辑”，单击“确定”按 钮。 （2 ）选择菜单 “窗口→库”命令，在工作界面的右上角出现“库”面板。 （3 ）从“库”面板将“drupal ”图形元件拖动到“drupal 闪烁”影片编辑元件的剪辑窗 口，并对齐编辑中心点，效果如图3.8 所示。 计算机基础教研室 ·2 · 网页制作三剑客 Drupal 闪烁 编辑窗口 编辑中心点 图3.8 “drupal ”影片剪辑元件的编辑窗口  制作“drupal ”图形忽明忽暗的效果。操作步骤如下： （1）在“时间轴”面板中，如图3. 9 所示，在第30 帧处单击鼠标右键，在快捷菜单中 选择“插入关键帧”，产生一个动画条。 动画条 关键帧 帧频 图3.9 “时间轴”面板 （2 ）选中第1 帧，在编辑窗口中单击“drupal ”实例。 （3 ）选择菜单“窗口→属性”命令，在工作界面的右上角出现“属性”面板，如图3.10 所示，在“样式”下拉列表框中选择“Alpha ”，在“Alpha ”文本框中输入“6 ”。 元件位于舞台 的位置 元件的透明度 图3.10 “drupal ”实例的属性窗口 （4 ）在动画条的任意位置，单击鼠标右键，在快捷菜