《Flash CS5动画设计项目教程-电子教案-明丽宏 学习情境一 电子贺卡制作》由会员分享，可在线阅读，更多相关《Flash CS5动画设计项目教程-电子教案-明丽宏 学习情境一 电子贺卡制作（101页珍藏版）》请在金锄头文库上搜索。
1、国家示范（骨干）高职院校重点建设专业优质核心课程系列教材,Flash CS5动画设计项目教程 主 编 明丽宏 彭德林 副主编 徐士华 吴 琼 杨兆辉 主 审 张丽静 金忠伟 中国水利水电出版社,学习情境一 电子贺卡制作,目录,导入案例一 五角星的制作,导入案例二 绘制圣诞树,导入案例三 绘制水晶按钮,项目一 春节贺卡制作,项目拓展 生日贺卡制作,1,2,3,4,5,目录,学习情境练习,6,7,学习情境小结,教学要求,1.1 导入案例一 五角星的制作,本案例主要介绍通过“线条工具”、“渐变变形工具”、“椭圆工具”、“变形”面板的综合使用来制作五角星。在Flash CS5绘图中，有些绘图对象必须使
2、用精确变形和精确旋转设置，才能达到绘图对象的要求和效果，本案例以这些工具为基础进行绘图。最终案例效果如图1-1所示。,图 1-1 “五角星”效果,1.1.1 案例效果,在本案例中，主要解决以下问题： 1“线条工具”的使用。 2“渐变变形工具”的使用。 3“变形”面板中精确变形和精确旋转的使用。,1.1.2 案例目的,1.创建图形元件 （1）按“Ctrl+F8”组合键，创建一个名为“五角星”的图形元件。 2.绘制五角星 （1）选择“线条工具”，然后设置“笔触颜色”为黑色（#000000），按住“Shift”键的同时，在舞台中绘制一条直线，如图1-2所示。 （2）选择“任意变形工具”，这时直线效果
3、如图1-3所示。 （3）单击“窗口变形”，弹出如图1-4所示的“变形”面板。 （4）将“变形”面板中的“旋转”选项选中，并将角度设置为36，单击“变形”面板右下角的“（重制选区和变形）”按钮4次，得到如图1-5所示的图形。,图 1-2 绘制直线,图 1-3 选择任意变形工具,1.1.3 案例操作步骤,（5）选择“椭圆工具”并将“椭圆工具”的“填充颜色”设置为“无”，按住“Shift+Alt”组合键的同时，以直线的交点为中心画正圆，如图1-6所示。 （6）用直线将图1-6所示的图形连接成如图1-7所示的图形。 （7）选择“选择工具”，按住“Shift”键的同时，单击所要删除的直线，如图1-8所示
4、，按“Delete”键，将不要的直线删除，如图1-9所示。,图 1-5 复制旋转直线,图 1-4 “变形”面板,图 1-8 选择删除直线,图 1-9 五角星,图 1-6 绘制中心圆,图 1-7 直线连接,3. 填充选择 （1）选择“颜料桶工具”，并将填充颜色设置为“黑红线性渐变”。给五角星填充渐变色如图1-10所示。 （2）选择“选择工具”，按“Shift”键的同时，单击五角星的所有绘制直线，这时所有直线将被选中，如图1-11所示。按“Delete”键，将其直线删除，按钮“Ctrl+Enter”组合键即可查看效果，如图1-1所示。,图 1-10 填充颜色,图 1-11 选择直线,相关知识,1.
5、 执行“修改变形垂直（水平）翻转”，可将选中的对象垂直（水平）翻转。 2. 对象的倾斜：选中“变形”面板中的“倾斜”单选按钮，即可将选中对象旋转或复制一个倾斜的对象。,图 1-11 选择直线,图 1-10 填充颜色,图 1-11 选择直线,图 1-10 填充颜色,图 1-11 选择直线,相关知识,图 1-10 填充颜色,图 1-11 选择直线,1. 执行“修改变形垂直（水平）翻转”，可将选中的对象垂直（水平）翻转。 2. 对象的倾斜：选中“变形”面板中的“倾斜”单选按钮，即可将选中对象旋转或复制一个倾斜的对象。,相关知识,1.2 导入案例二 绘制圣诞树,本案例主要介绍通过“线条工具”、“选择工
6、具”、“椭圆工具”、“颜料桶工具”、“任意变形工具”及“刷子工具”的综合使用来制作圣诞树。在“圣诞树”绘图中，注意“任意变形工具”的灵活使用及“刷子工具”的“刷子形状”及“刷子大小”选项的设定，本案例以这些工具为基础进行绘图。最终案例效果如图1-12所示。,图 1-12 “圣诞树”效果,1.2.1 案例效果,1.2.1 案例效果,1.2.1 案例效果,在本案例中，主要解决以下问题： 1“椭圆工具”的使用。 2“任意变形工具”的使用。 3“颜料桶工具”的使用。 4“刷子工具”的使用。,1.2.2 案例目的,1绘制雪地背景 （1）选择“文件新建”命令，在弹出的新建文档对话框中选择“ActionSc
7、ript 2.0”，单击“确定”按钮，进入新建文档舞台窗口。按“Ctrl+F3”组合键，弹出文档“属性”面板，将“背景”选项设为深蓝色（#000066），如图1-13所示。在“时间轴”面板中将“图层1”重新命名为“白色雪地”。 （2）选择“铅笔工具”，选中工具箱下方的“平滑”按钮。在铅笔工具“属性”面板中将“笔触颜色”颜色选项设为“白色”，“笔触高度”选项设为4，如图1-14所示。 （3）在舞台窗口的中间位置绘制一条曲线。按住“Shift”键的同时，在曲线下方绘制出3条直线，使曲线与直线形成闭合区域，效果如图1-15所示。选择“颜料桶工具”，在工具箱中将填充色设为白色，在闭合的区域中间单击鼠标
8、填充颜色，效果如图1-16所示。,图 1-13 “文件属性”设置,图 1-14 “铅笔属性”设置,1.2.3 案例操作步骤,图 1-15 闭合区域,图 1-16 填充“白色”,2绘制圣诞树 （1）在“时间轴”面板中单击“锁定/解除锁定所有图层”按钮，对“白色雪地”图层进行锁定（被锁定的图层不能进行编辑）。单击“时间轴”面板下方的“新建图层”按钮，创建新图层并将其命名为“圣诞树”，如图1-17所示。选择“线条工具”，在工具箱中将“笔触颜色”设为绿色（#33cc66），在场景中绘制出圣诞树的外边线，效果如图1-18所示。,（2）选择“选择工具”，将光标放在圣诞树左上方边线的中心部位，光标下方出现圆
9、弧形状，这表明可以将该直线转换为弧线，在直线的中心部位按住鼠标并向下拖曳，直线变为弧线，效果如图1-19所示。用相同的方法把圣诞树边线上的所有直线转换为弧线，用相同的方法再绘制二棵小圣诞树，效果如图1-20所示。,图 1-17 新建“圣诞树”图层,图 1-18 圣诞树外边线,图 1-19 圣诞树外边线转换为弧形,图 1-20 绘制三棵圣诞树,（3）选择“颜料桶工具”，在工具箱中将“填充颜色”色设为绿色（#33cc66），用鼠标单击圣诞树的边线内部填充颜色，效果如图1-21所示。选择“椭圆工具”在工具箱中将“笔触颜色”设为无，将“填充颜色”设为黄色（#FFF33），如图1-22所示。按住“Shi
10、ft”键的同时，在舞台窗口的左上方绘制出一个圆形作为月亮，效果如图1-23所示。,图 1-21 圣诞树填充绿色,图 1-22“填充工具”设置,图 1-23 绘制月亮,3. 绘制雪花 （1）在“圣诞树”图层中单击“锁定/解除锁定所有图层”按钮，锁定“圣诞树”图层。单击“时间轴”面板下方的“新建图层”按钮，创建新图层，并将其命名为“雪花”，如图1-24所示。,（2）选择“刷子工具”，在工具箱中将“填充颜色”设为褐色（#996633），在工具箱下方的“刷子大小”选项中将笔刷设为第6个，将“刷子形状”选项设为圆形，如图1-25所示。在舞台窗口的右侧绘制出栅栏，效果如图1-26所示。将“填充颜色”设为黄
11、色（#FFFF66），在工具箱下方的“刷子大小”选项中将笔刷设为第8个，将“刷子形状”选项设为水平椭圆形，如图1-27所示。在前面的大圣诞树上绘制出一些黄色的装饰彩带，效果如图1-28所示。,图 1-24 创建“雪花”图层,图 1-25 设置“刷子工具”选项,图 1-26 绘制“栅栏”,图 1-27 设置“刷子工具”选项,图 1-28 大圣诞树绘制彩带,图 1-29 小圣诞树绘制彩带,（3）在工具箱下方的“刷子大小”选项中将笔刷设为第5个，在后面的小圣诞树上同样绘制出彩带，效果如图1-29所示。选择“椭圆工具”，在工具箱中将“笔触颜色”设为无，将“填充颜色”设为白色，按住“Shift”键的同时
12、，在场景中绘制出一个小圆形，效果如图1-30所示。 （4）按住“Alt”键，用鼠标选中圆形并向其下方拖曳，可复制当前选中的圆形，效果如图1-31所示。选中复制的圆形，用鼠标选中“任意变形工具”，在圆形的周围出现8个控制点，效果如图1-32所示。按住“Alt+Shift”组合键，用鼠标向内侧拖曳右下方的控制点，将圆形缩小，效果如图1-33所示。,（5）在场景中的任意地方单击，控制点消失，圆形缩小，效果如图1-34所示。用相同的方法复制出多个圆形并改变它们的大小，效果如图1-35所示。圣诞树绘制完成，按“Ctrl+Enter”组合键即可查看效果。,图 1-30 绘制白色圆形,图 1-31 复制圆形
13、,图 1-32 圆形周围出现控制点,图 1-33 拖曳控制点缩小圆形,图 1-34 取消控制点,图 1-35 复制多个圆形并改变大小,1. 使用“任意变形工具”时，按住“Shift”键，拖曳四个角部的控制点可实现等比例缩放。按住“Shift+Alt”组合键，拖曳四个角部的控制点可实现以中心点为中心的等比例缩放。,相关知识,1.3 导入案例三 绘制水晶按钮,本案例主要介绍通过“椭圆工具”、 “颜料桶工具”、“柔化填充边缘”命令、“颜色”面板、 “库”面板的综合使用来制作水晶按钮。在“水晶按钮”绘图中，注意灵活使用“颜料桶工具”对“椭圆”进行线性填充，本案例以这些工具为基础进行绘图。最终案例效果如
14、图1-36所示。,图 1-36 “水晶按钮”效果,1.3.1 案例效果,在本案例中，主要解决以下问题： 1“椭圆工具”的使用。 2“颜料桶工具”的使用。 3“颜色”面板的使用。 4“柔化填充边缘”命令。,1.3.2 案例目的,1绘制按钮元件 （1）选择“文件新建”命令，在弹出的新建文档对话框中选择“ActionScript 2.0”，单击“确定”按钮，进入新建文档舞台窗口。调出库面板，在库面板下方单击“新建元件”按钮，弹出“创建新元件”对话框，在“名称”选项文本框中输入“按钮A”，选择“图形”选项，单击“确定”按钮，新建一个图形元件“按钮A”，如图1-37所示。舞台窗口也随之转换为图形元件的舞
15、台窗口。 （2）选择“椭圆工具”，在工具箱中将笔触颜色设置为“无”，填充色设置为“灰色”，按住“Shift”键的同时，在舞台窗口中绘制一个圆形，选中圆形，在“属性”面板中，将图形的“宽”、“高”选项分别设为65，效果如图1-38所示。选择“窗口颜色”命令，弹出“颜色”面板，在“颜色类型”选项的下拉列表中选择“径向渐变”，选中色带上左侧的“颜色指针”，将其设为白色，在“Alpha”选项中将其不透明度设为0%，如图1-39所示。选中色带上右侧“颜色指针”，将其设为紫色（#53075F），如图1-40所示。,1.3.3 案例操作步骤,（3）选择“颜料桶工具”，在“圆形”的下方单击鼠标，将渐变色填充到
16、图形中，效果如图1-41所示。选择“椭圆工具”，在工具箱中将“笔触颜色”设置为“无”，“填充颜色”设为“紫色（#DEC7E4）”，按住“Shift”键的同时，在舞台窗口中绘制出第2个圆形，选中圆形，在“属性”面板中将宽、高选项分别设为65，效果如图1-42所示。,1-37 “库”面板,图 1-38 绘制圆形,图 1-39 “颜色”面板,图 1-40 设置右侧“颜色指针”颜色,图 1-41 填充径向渐变颜色,图 1-42 绘制第二个圆形,（4）选中圆形，选择“修改形状柔化填充边缘”命令，弹出“柔化填充边缘”对话框，将“距离”选项设为30，“步长数”选项设为30，勾选“扩展”选项，如图1-43所示，单击“确定”按钮，效果如图1-44所示。将制作好的渐变图形，拖曳到柔化边缘图形的上方，效果如图1-45所示。,图 1-43 “柔化填充边缘”对话框,图 1-44 柔化边缘效果,图 1-45 将渐变图形拖曳 到柔化边缘图形上方,（5）选择“文本工具”，在“属性”面板中进行设置
