Flash第四章上机.docx

Flash第四章上机.docx

《Flash第四章上机.docx》由会员分享，可在线阅读，更多相关《Flash第四章上机.docx（26页珍藏版）》请在冰点文库上搜索。

Flash第四章上机

学科

计算机动画设计

——FlashCS3

授课

内容

第四章元件、实例和库

第节

授课时间

12

课型

上机

教具

计算机

授课班级与时间

教

学

目

的

1、了解元件的概念

2、掌握三大元件的创建及使用方法

3、了解库界面

4、掌握库面板的使用方法

教

学

重

点

与

难

点

重点：

创建和编辑元件的方法

难点：

在flash动画制作中元件的正确运用技巧

提

问

设

计

1、什么叫元件？

什么叫库？

2、元件有哪些类型

3、影片剪辑类型的元件有何特点？

作

业

布

置

练习题目

见续页

预习内容

第4章元件、实例和库

学

生

学

习

状

态

知

识

与

技

能

基

础

通过实例的学习，学生能掌握元件创建与使用的相关技巧，少部分学生能够独立完成比较复杂的动画制作

班

级

学

习

状

态

中心校区教师备课教案（首页）

罗江职教中心教师备课教案（续页）

NO：

4（章）1（节）1（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

§立体按钮元件制作实例

【组织教学】

1、组织学生有次序的排队上机

2、检查学生是否带齐上机工具

3、讲解上机要求

4、口述上机简要内容

【教学过程】

一、示范教学

1、新建一电影文件，设置影片属性。

2、创建按钮组件：

（1）执行“插入/新建组件”命令。

在弹出的组件属性对话框中，为新按钮输一个名字，比如“anniu2”，选择类型为“按钮”，最后按“确定”按钮。

（2）创建按钮四帧的效果。

具体步骤和前面的类似（略）。

▲向上和经过帧效果如图3；向下和执行帧效果如图4。

图3向上和经过帧效果              图4向下和执行桢效果

▲提示：

这个按钮图形的制作有点巧妙，我们从绘制一个填充了渐变色的球开始，利用一系列的分割和变形，最终得到了具有金属感觉的立体按钮。

下面是分割和变形的步骤参考：

罗江职教中心教师备课教案（续页）

NO：

4（章）1（节）2（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

上面的制作过程中关键是最后两步：

先画一个大半径圆角矩形框，选中圆角矩形框内的色块旋转180度，然后删除圆角矩形框，就得到了具有下凹效果的最后一图。

二、巡回指导

观察学生制作情况，修正学生在制作时遇到的问题。

三、实作练习

学生利用所学，设计并制作一个带立体效果的按钮元件，保存为Flash文档，命名为“立体钮.fla”

【课堂小结】

本堂课让学生学会按钮元件的制作方式。

罗江职教中心教师备课教案（续页）

NO：

4（章）2（节）1（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

§影片剪辑在按钮元件中的应用范例－放电按钮

【组织教学】

1、组织学生有次序的排队上机

2、检查学生是否带齐上机工具

3、讲解上机要求

4、口述上机简要内容

【教学过程】

一、示范教学

本小节要制作一个放电的按钮，当鼠标放到按钮上，发出夺目的光芒，炫耀无比。

效果如图4-40所示。

图4-40放电按钮

1．创建“放电”影片剪辑元件

（１）新建一个Flash8影片文档，设置舞台尺寸为200×50像素，背景颜色设置为蓝色，其他保持默认设置。

（2）新建一名为“放电”的影片剪辑元件。

在这个元件的编辑场景中，选择“线条工具”，笔触颜色为“白色”，在场景中画一段约20像素折线。

如图4-41所示。

图4-41绘制折线

（3）在第３帧插入关键帧，用“任意变形工具”将场景中的折线向左拉约至60像素。

（4）单击第1帧，打开“属性”面板，创建“补间形状”。

在第５帧插入帧。

（5）新建“图层2”。

在第３帧插入空白关键帧。

选择“椭圆工具”，无笔触颜色。

打开“混色器”面板，设置填充样式为“放射状”，左色标为白色，Alpha值100％，右色标也为白色，Alpha值0％，如图4-42所示。

图4-42　“混色器”面板图4-43　放电图

罗江职教中心教师备课教案（续页）

NO：

4（章）2（节）2（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

在场景中画一个圆。

打开“属性”面板，将其大小设定为（120×126）。

将其拖放到折线的左端。

如图4-43所示。

2．创建“放电按钮”元件

（１）新建一名为“放电按钮”的按钮元件。

在这个元件编辑场景中，将“图层1”更名为“按钮”。

双击“矩形工具”，在弹出的“矩形设置”对话框中设置“边角半径”为“20点”，如图4-44所示。

图4-44设置矩形的边角半径图4-45按钮填充色设置

设置“笔触颜色”为无，“填充色”任意，在场景中画一个矩形。

打开“属性”面板，设置这个矩形的大小为250×45像素，坐标为（0，0）。

（２）选中矩形，打开“混色器”面板，填充类型为“线性”，增加一个色标，自左向右三个色标颜色值为“#000000、#AFB5FA、#333333”，对矩形进行填充。

设置如图4-45所示。

（３）选中矩形，单击“填充变形工具”，旋转“旋转手柄”90度，向下拉动“缩放”手柄，调整填充色如图4-46所示。

图4-46调整渐变填充

（４）在“点击”帧按F6插入关键帧。

（５）新建一名为“发光”的图层。

右击“按钮”层“弹起”帧，在弹出的快捷菜单中选“复制帧”命令；右击“发光”图层“弹起”帧，在弹出的快捷菜单中选“粘贴帧”命令。

选中“发光”层的矩形，打开“混色器”面板，设置如图4-47所示。

自左向右色标颜色值为“#FFFFFF、#B7C7FF、#858ABF”。

图4-47发光填充色设置图4-48白光填充色设置图4-49圆球填充色设置

罗江职教中心教师备课教案（续页）

NO：

4（章）2（节）3（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

在“指针经过”帧按F6插入关键帧，选中矩形，选择“填充变形工具”，向右稍稍拖动“缩放”手柄。

在“点击”帧按F7插入空白关键帧。

（６）新建一名为“白光”的图层。

在该图层“弹起”帧，选用“椭圆工具”绘制一个无笔触颜色的圆。

选中圆，打开“混色器”面板，设置如图4-48所示，自左向右色标颜色值为“#000000、#AFB5FA、#333333”。

打开“属性”面板，设置圆的大小为60×60像素，坐标为（-87，-7）。

在“点击”帧按F7插入空白关键帧。

（7）新建一名为“圆球”的图层。

在该图层“弹起”帧，选用“椭圆工具”绘制一个无笔触颜色的圆。

选中圆，打开“混色器”面板，设置如图4-49所示。

自左向右色标颜色值为“#DDDFFC、#ABB2FA、#424366”。

打开“属性”面板，设置圆的大小为50×50像素，坐标为（-81,-2）。

在“点击”帧按F7插入空白关键帧。

（8）新建一名为“动画”的图层。

在“指针经过”、“点击”帧按F7插入空白关键帧。

选择“指针经过”帧，打开“库”面板，将库中的“放电”元件拖入场景。

打开“属性”面板，设置其坐标为（-19，11）。

（9）新建一名为“文字”的图层，在“弹起”帧输入文字“Button”。

打开“属性”面板，设置字体为“ArialBlack”，字母间距“12”，字体大小“24”，文本颜色“#000000”；在“指针经过”帧插入关键帧，改变字体颜色“#444444”；在“按下”帧插入关键帧，改变字体颜色“#808080”；在“点击”帧插入空白关键帧。

至此，按钮元件制作完毕，其时间轴图层结构如图4-50所示。

图4-50图层结构

转回“场景1”，将“放电按钮”元件从库中拖入主场景中央，即完成本节范例。

二、巡回指导

观察学生制作情况，修正学生在制作时遇到的问题。

三、实作练习

学生利用所学，设计并制作一个按钮元件，保存为Flash文档，命名为“按钮.fla”

【课堂小结】

本小节制作按钮，主要是在按钮某个帧上添加动画效果（影片剪辑元件），从而组合成一款炫丽的动态按钮。

罗江职教中心教师备课教案（续页）

NO：

4（章）3/1（节）1（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

§百叶窗效果

【组织教学】

1、组织学生有次序的排队上机

2、检查学生是否带齐上机工具

3、讲解上机要求

4、口述上机简要内容

【教学过程】

一、示范教学

1、新建一个flash文档，导入所需要的两张图片到库。

2、创建一个影片剪辑元件（变形），在里面制作一个矩形由宽变窄的形状变形动画

3、回到场景一，在图层一拖出一张图片

4、新建图层二，在第一帧拖出另一张图片

5、新建图层三，将元件（变形）拖到第一帧，并复制出多个元件，并列而满图片

6、右击图层三，选择为“遮罩层”

7、Ctrl+enter测试影片，并保存，命名为：

百叶窗.fla

二、巡回指导

观察学生制作情况，修正学生在制作时遇到的问题。

三、实作练习

学生利用所学，设计并制作一个动感相册效果，保存为Flash文档，命名为“相册.fla”

【课堂小结】

本堂课让学生学会影片剪辑元件的制作方式。

罗江职教中心教师备课教案（续页）

NO：

4（章）3/2（节）1（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

§雪花飘飘效果

【组织教学】

1、组织学生有次序的排队上机

2、检查学生是否带齐上机工具

3、讲解上机要求

4、口述上机简要内容

【教学过程】

二、示范教学

1、新建一个flash文档，导入所需要的一张背景图片到库。

2、创建一个影片剪辑元件（形态一），在里面制作一朵雪花从天空飘落下来的动作补间动画效果。

3、创建第二个影片剪辑元件（形态二），在里面制作一朵雪花从天空飘落下来的动作补间动画效果。

4、同上的方法，创建影片剪辑元件（形态三）

5、回到场景一，在图层一拖出背景图片

6、新建图层二，在第一帧分别拖出多个影片剪辑元件，并摆放好位置，调整好大小和透明度。

7、Ctrl+enter测试影片，并保存，命名为：

雪花飘飘.fla

二、巡回指导

观察学生制作情况，修正学生在制作时遇到的问题。

三、实作练习

学生利用所学，设计并制作树叶满天飘落效果，保存为Flash文档，命名为“落叶.fla”

【课堂小结】

本堂课让学生学会影片剪辑元件的制作方式。

罗江职教中心教师备课教案（续页）

NO：

4（章）4/1（节）1（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

§情人节贺卡

（一）

【组织教学】

1、组织学生有次序的排队上机

2、检查学生是否带齐上机工具

3、讲解上机要求

4、口述上机简要内容

【教学过程】

一、示范教学

1.绘制“烛焰”元件

（1）新建一个Flash8影片文档。

设置舞台背景颜色为蓝色，其他保持默认设置。

（2）执行【插入】|【新建元件】命令，或者按快捷键Ctrl+F8，弹出【创建新元件】对话框，在【名称】文本框中输入元件名称为“烛焰”，选择【行为】为【图形】。

如图2-106所示。

图2-106新建图形元件

（3）单击“确定”按钮，进入到“烛焰”元件的编辑场景。

使用【椭圆工具】绘制一个仅有边框无填充色的椭圆，使用【选择工具】调整，如图2-107所示。

图2-107绘制烛焰边框图2-108混色器设置

（4）执行【窗口】|【混色器】命令，填充样式设为放射状。

在渐变条上将左边色标设置为白色，并拖动到偏右方以加大白色在整个渐变色中的比例。

将右边色标设置为黄色，如图2-108所示。

罗江职教中心教师备课教案（续页）

NO：

4（章）4/1（节）2（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

（5）将场景中的图形填充渐变色后，烛焰的色彩并不尽如人意，需要使用【填充变形工具】进行调整。

选择【填充变形工具】单击填充色，会出现一个边上带有三个手柄的环形边框。

我们用鼠标分别按住中心的圆圈或边上的手柄里推外拉、上下左右的进行调整，现在将烛焰的颜色调整为上下略带一点黄色，上边黄色略多，如图2-109所示。

图2-109调整填充色图2-110绘制烛身元件

2.绘制“烛身”元件

（1）执行【插入】|【新建元件】命令，或者按快捷键Ctrl+F8，弹出【创建新元件】对话框，在【名称】文本框中输入元件名称为“烛身”，选择【行为】为【图形】。

（2）单击“确定”按钮，进入到“烛身”元件的编辑场景。

使用【椭圆工具】绘制一个仅有边框无填充色的椭圆，使用【选择工具】略加调整，并使用【任意变形工具】进行旋转，如图2-110所示。

（3）打开【混色器】面板，填充样式设为放射状。

在渐变条上将左边色标设置为黄色（#F5DD38），并拖动到偏右方；将右边色标设置为红色（#F76648），如图2-111所示。

图2-111设置填充色图2-112调整填充色

（4）填充渐变色后，使用【填充变形工具】调整，如图2-112所示。

（5）为使烛身更漂亮，在刚刚作好的图形旁边画一个无边框的椭圆，颜色填充设置为：

左边色标设置为#F76648，右边色标设置为#F5DD38。

（6）椭圆画好后用【任意变形工具】调整倾斜。

罗江职教中心教师备课教案（续页）

NO：

4（章）4/1（节）3（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

（7）使用【选择工具】将画好的椭圆拖放到烛身上。

（8）选择【刷子工具】，在选项中将刷子大小选择略小一点的笔刷，填充色设为淡黄色，在烛身上添加高光，删除边框线条，完成烛身元件造型。

如图所示。

3.绘制“烛光”元件

（1）执行【插入】|【新建元件】命令，或者按快捷键Ctrl+F8，弹出【创建新元件】对话框，在【名称】文本框中输入元件名称为“烛光”，选择【行为】为【图形】。

（2）单击“确定”按钮，进入到“烛光”元件的编辑场景。

打开【混色器】面板，填充样式设为放射状。

将鼠标移近渐变条，当鼠标指针右下角出现一个加号

时，单击鼠标，在渐变条上增加一个色标。

将左边色标设置为黄色，并稍向右移；中间色标为红色；右边色标为白色，为使光焰呈模糊虚幻而不突兀，将右边白色色标的Alpha值调整为零，如图2-117所示。

图2-117设置填充色图2-118绘制无边框正圆图2-119收缩变形

（3）使用【椭圆工具】绘制一个无边框的正圆，如图2-118所示。

（4）使用【任意变形工具】将其纵向收缩。

如图2-119所示。

4.组装“蜡烛”元件

（1）新建一个名字为“蜡烛”的图形元件。

进入到这个元件的编辑场景中。

（2）“蜡烛”元件共分三层。

先制作烛身层。

双击时间轴上“图层1”，将“图层1”改名为“烛身”。

如图2-120所示。

图2-120修改图层名

罗江职教中心教师备课教案（续页）

NO：

4（章）4/1（节）4（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

（3）按Ctrl+L组合键打开【库】面板，将“烛身”元件拖放到舞台上。

选中该元件按住Alt键向下拖放进行复制

2-121

2-122

（4）选中所有元件，执行【修改】|【对齐】|【左对齐】命令，再执行【按高度均匀分布】命令。

（5）使用【任意变形工具】旋转最上面和最下面的元件，如图2-121示。

（6）将鼠标指向“烛身”图层上，单击右键，在弹出的快捷菜单中选择【插入图层】命令。

系统默认插入图层为“图层2”，双击“图层2”，改名为“烛焰”。

将【库】面板中“烛焰”元件拖放到合适位置。

如图2-122示。

（7）插入一个新图层，将图层改名为“烛光”。

将“烛光”元件拖放到舞台上。

因为烛光在蜡烛的后面，所以用鼠标选择“烛光”层，将它拖放到“烛身”层下方。

现在三层的排列顺序如图2-123示。

图2-123层顺序图2-124烛完成效果

（8）在【属性】面板中将背景色改为黑色，使蜡烛的色彩更明亮。

完成后的蜡烛如图2-124示。

二、巡回指导

观察学生制作情况，修正学生在制作时遇到的问题。

三、实作练习

学生利用所学，完成动画未完成部分

【课堂小结】

本堂课让学生学会元件在具体实例中的应用

罗江职教中心教师备课教案（续页）

NO：

4（章）4/2（节）1（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

§情人节贺卡

（二）

【组织教学】

1、组织学生有次序的排队上机

2、检查学生是否带齐上机工具

3、讲解上机要求

4、口述上机简要内容

【教学过程】

一、示范教学

1、绘制“心”元件

（1）执行【插入】|【新建元件】命令，或者按快捷键Ctrl+F8，弹出【创建新元件】对话框，在【名称】文本框中输入元件名称为“心”，选择【行为】为【图形】。

（2）绘制心形，步骤同前面已经学习的方法相同。

效果图如下：

2、绘制“珍珠”元件

1）“珍珠”元件的制作很简单，关键是填充色的设置。

使用【椭圆工具】画一个无填充色的正圆。

（2）打开【混色器】面板，填充样式设为放射状。

左边色块设置为灰色（#A09696），并稍向右移，右边色块为浅黄色（#F5F0D8），如图2-143所示。

图2-143设置填充色图2-144调整填充色

（3）使用【颜料桶工具】在靠圆心左上的地方单击鼠标，或者在任意地方单击鼠标后再用【填充变形工具】进行调整。

如图2-144所示。

罗江职教中心教师备课教案（续页）

NO：

4（章）4/2（节）2（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

（4）复制该圆形，插入新图层，在“图层2”执行【编辑】|【粘贴到当前位置】命令。

将填充色更改为如图2-145所示设置。

样式放射状，左边色块白色，右边色块浅黄色（#F4F1CC），Alpha为0%。

完成后的珍珠如图2-146所示。

图2-145设置填充色图2-146珍珠效果

3、制作“项链”元件

（1）新建一个名字为“项链”的图形元件。

（2）这个元件分两层。

图层1画上心形曲线，如图2-147所示。

图2-147绘制心形曲线图2-148放置珍珠元件

（3）在“图层2”上沿上面的曲线将“珍珠”元件均匀的放置好。

如图2-148所示。

4、制作“情人节”元件

1）新建一个名字为“情人节”的图形元件。

（2）在这个元件的编辑场景中。

选择【文字工具】

，在“属性”面中设置文本类型为【静态文本】，【字体】为方正行楷简体，字体大小、颜色随意，因为后面还会再作调整。

（3）在舞台上输入“情人节”三字，连续执行两次【修改】|【分离】命令，使其呈网点状成为可编辑形状的图形状态。

（4）用【橡皮擦工具】

擦去“情”字两点，再使用【选择工具】将鼠标放到“节”字下端向左下方拖动将其拉长。

如图2-149所示。

罗江职教中心教师备课教案（续页）

NO：

4（章）4/2（节）3（页）

学与教（知识与技能）的过程设计

相关学科知识

延伸与德育渗透

图2-149使文字变化

（5）使用【选择工具】将“节”字下方被拉长部分调整为曲线状。

（6）在【混色器】面板中设置填充样式为线性，左边和右边色块为红色，中间色块为白色

（7）使用【选择工具】框选所有文字，使用【颜料桶工具】

在文字上从上向下拖动鼠标填充颜色，然后将笔触颜色设为白色，使用【墨水瓶工具】

，挨个单击文字，给文字加上白色边框。

（8）插入新图层，打开“库”面板。

在“图层2”上拖放入“心”元件，用【任意变形工具】调整到适合大小，分别放到情字和节字上，如图2-150所示。

图2-150放置心形元件

5、完成整个画面制作

（1）单击“时间轴”上的

按钮，返回到“场景1”。

（2）新建2个图层，并将所有图层分别重新命名为“蜡烛”、“心”和“项链”。

（3）在“蜡烛”图层放入“蜡烛”元件，在“心”图层放入“心”和“情人节”元件，在“项链”图层放入“项链”元件。

将这些对象摆放成合适的位置。

（4）还可以绘制一些光影元件放在“蜡烛”图层中，以增加效果。

范例最终如图。

二、巡回指导

观察学生制作情况，修正学生在制作时遇到的问题。

三、实作练习

学生利用所学，自己创作动画作品

【课堂小结】

本堂课让学生学会元件在具体实例中的应用，能在实际运用中灵活运用所学知识，创作动画作品