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

第3章 网页元素——动画的制作

实训课件

实训目标

实现过程

任务一、设计与制作

logo

新建文件与保存文件。操作步骤如下：

（1）启动 Flash CS6。

（2）选择菜单“文件→新建”命令，打开“新建文档”对话框。

① 在“常规”列表框中选择“ActionScript2.0”。

② 在“宽”后的数值处单击，激活文本框，在文本框中输入“200”。

③ 在“高”后的数值处单击，激活文本框，在文本框输中入“165”。

④ 在“帧频”后的数值处单击，激活文本框，在文本框输中入“24”。

⑤ 单击“确定”按钮。 （3）选择菜单“文件→保存”命令，将文件保存为“logo.fla”。

制作图形元件“drupal”。操作步骤如下：

（1）选择菜单“插入→新建元件”命令，打开“创建新元件”对话框，在“名称”文本框中输入“drupal”，在“类型”下拉列表框中选择“图形”，单击“确定”按钮。

（2）选择菜单“文件→导入→导入到舞台”命令，打开“导入”对话框，选择“drupal(素材).gif”文件，单击“打开”按钮，将图像导入到舞台。

将“drupal”图形元件拖到“drupal闪烁”影片剪辑元件中。操作步骤如下：

（1）选择菜单“插入→新建元件”命令，打开“创建新元件”对话框，在“名称”文本框中输入“drupal闪烁”，在“类型”下拉列表框中选择“影片剪辑”，单击“确定”按钮。

（2）选择菜单“窗口→库”命令，在工作界面的右上角出现“库”面板。

（3）从“库”面板将“drupal”图形元件拖动到“drupal闪烁”影片编辑元件的剪辑窗口，并对齐编辑中心点，效果如图3.8所示。

Drupal闪烁

编辑窗口 编辑中心点

图3.8 “drupal”影片剪辑元件的编辑窗口

制作“drupal”图形忽明忽暗的效果。操作步骤如下：

（1）在“时间轴”面板中，如图

3. 9所示，在第30帧处单击鼠标右键，在快捷菜单中选择“插入关键帧”，产生一个动画条。

动画条

关键帧

图3.9 “时间轴”面板 帧频

（2）选中第1帧，在编辑窗口中单击“drupal”实例。

（3）选择菜单“窗口→属性”命令，在工作界面的右上角出现“属性”面板，如图3.10所示，在“样式”下拉列表框中选择“Alpha”，在“Alpha”文本框中输入“6”。

元件位于舞台

的位置

元件的透明度

图3.10 “drupal”实例的属性窗口

（4）在动画条的任意位置，单击鼠标右键，在快捷菜单中选择“创建传统补间”。

（5）按Enter键，观察动画效果。

导入“logo_bg(素材).jpg”图像。操作步骤如下：

（1）单击舞台窗口编辑栏左上角的“场景1”按钮，返回主场景。

（2）选择菜单“文件→导入→导入到舞台”命令，导入“logo_bg(素材).jpg”图像。 添加引导层，绘制运动路径。操作步骤如下：

（1）在“时间轴”面板，选中图层1，单击鼠标右键，在快捷菜单中选择“插入图层”，创建图层2。

（2）选中图层2的第1帧，从“库”面板将“drupal闪烁”影片编辑元件拖动到舞台。

（3）在“时间轴”面板中，选中图层2，单击鼠标右键，在快捷菜单中选择“添加传统运动引导层”，为图层

2

添加一个引导图层。

（4

）单击工作界面最右侧工具箱中的“笔触颜色”按钮

#000000，单击工具箱中的“填充颜色”按钮，设置无填充。

，，设置笔触颜色为（5）选中引导层的第1帧，单击工作界面最右侧工具箱中的“椭圆工具”按钮

绘制一个椭圆路径，效果如图3.12（1）所示。

（6）单击工具箱中的“任意变形工具”按钮，将鼠标指向圆环，鼠标变为，如图3.12（1）所示，此时单击鼠标左键，在椭圆四周形成一个变换框，如图3.12（2）所示，将鼠标移到椭圆外，鼠标变为形状

时，拖动鼠标旋转椭圆，如图3.12

（3

）所示。

图3.12 椭圆变形的过程图

（7）按→、↑键，将椭圆平移到跟“图层1”图层中的图像重合，如图3.12（4）所示。

（8）将鼠标移到舞台外单击，释放变形操作。

（9）选中引导层的第1帧，单击工具箱中的“橡皮擦工具”按钮

一小块，效果如图3. 13所示。

制作沿引导线飞行的动画。操作步骤如下：

（1）选中图层3的第30帧，按F5键，插入普通帧。

（2）选中图层2的第30帧，按F6键，插入关键帧。

（3）选中图层1的第30帧，按F5键，插入普通帧。

（4）选中图层2动画条中的任意1帧，单击鼠标右键，在快捷菜单中选择“创建传统补间”。

（5）选中图层2的第1帧，拖动“drupal闪烁”元件，将其注册点对准引导线的起点，效果如图3.13所示。 ，在椭圆处擦除

图3.13 椭圆引导线及起始关键帧中元件所在的位置

（6）选中图层2的第30帧，拖动“drupal闪烁”元件，将其注册点对准引导线的终点。 发布Flash动画。操作步骤如下：

（1）选择菜单“控制→测试影片→测试”命令，观看动画效果。

（2）选择菜单“文件→发布设置”命令，打开“发布设置”对话框，在“发布”区域中，选中“Flash”复选框，单击“确定”按钮。

（3）选择菜单“文件→发布”命令，生成Flash播放文件“logo.swf”。

（4）保存并关闭“logo.fla”文件。

任务二、设计与制作banner

新建文件“banner.fla”，导入“banner(素材).jpg”图像。操作步骤如下：

（1）新建一个类型为“ActionScript2.0”、大小为“1000像素*95像素”、帧频为“24fps”的空白文档。

（2）将文件保存为“banner.fla”。

（3）选中图层1的第1帧，导入“banner(素材).jpg”图像到舞台。可在“属性”面板设置图像的位置为X:0.0，Y:0.0。

输入文本“IM -DigiMarketing”。操作步骤如下：

（1）单击“时间轴”面板“图层”列表左下方的“插入图层”按钮，在图层1的上方插入图层2。

（2）选中图层2的第1帧，单击工具箱中的“文本工具”按钮，在“属性”面板中设置字体为“微软雅黑”、“bold”，大小为“16点”，文本颜色为“#999999”。

（4

）在舞台中单击鼠标，形成文本框，效果如图3.16所示。

图3.16 舞台中的文本框 图3.17 输入文本效果图