flash-CS3动画制作综合实例.ppt
《flash-CS3动画制作综合实例.ppt》由会员分享,可在线阅读,更多相关《flash-CS3动画制作综合实例.ppt(112页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第第10章章 Flash CS3动画制作综合动画制作综合实例实例n教学目标:教学目标:本本章章所所讲讲解解的的3个个实实例例具具有有易易学学的的特特点点,每每个个实实例例不不仅仅侧侧重重于于Adobe Flash CS3基基础础知知识识的的总总结结,而而且且能能够够很很好好地地挖挖掘掘Adobe Flash CS3的的优优点点,使使其其在在每每一一个个实实例例的的制作中都能够发挥得淋漓尽致。制作中都能够发挥得淋漓尽致。n本章要点:本章要点:制作网页广告制作网页广告制作动态漫画制作动态漫画制作公益广告制作公益广告 第10章 Flash CS3动画制作综合实例n10.1 10.1 网页广告制作网页
2、广告制作n10.2 10.2 动态漫画动态漫画n10.3 10.3 公益广告公益广告第10章 Flash CS3动画制作综合实例10.1 网页广告制作n1.1.实训目的实训目的现如今网络已成为人们生活中的一部分,Adobe Flash CS3在网络中的应用是非常广阔的。通过本实例的制作,让读者了解Adobe Flash CS3在网页中的一般应用网页广告的制作,如图10-1所示。最终效果文件及所用素材见“实例”(Democh10网页广告制作)。图0-1 动画效果10.1 网页广告制作n2 2.实训实训步骤步骤(1)新建一个尺寸为“500*100”、背景颜色为“黑色”的Flash文档。将其命名为“
3、网页广告”,然后保存。(2)在菜单栏中选择【文件】【导入】【导入到库】命令,导入素材图像“莲1”。(3)打开【库】面板,单击【选择工具】按钮 将素材图片拖拽到舞台中并调整其位置,如图10-2所示。图10-2 导入素材图片10.1 网页广告制作(4)在“图层1”的第7、40帧按键,插入关键帧。(5)选择第7帧,在菜单栏中选择【窗口】【变形】命令,在【变形】面板中勾选【约束】复选框,这样能够等比例放大,输入数值如图10-3所示。在键盘上按键确定。图10-3 【变形】面板10.1 网页广告制作(6)在第7帧至第40帧之间任意处右击,在弹出的快捷菜单中选择【创建补间动画】命令,制作好图片的由大至小的缩
4、放动画效果。(7)在第45、80帧按键,插入关键帧。然后在第80帧将图片平移到舞台的左侧,在第45帧至第80帧之间任意处右击,在弹出的快捷菜单中选择【创建补间动画】命令,制作好图片的由右至左的移动效果。(8)在第85帧按键,插入关键帧,选中图片并在【属性】面板的【颜色】下拉列表框中选择【Alpha】选项,【Alpha数量】设为“15%”。10.1 网页广告制作(9)创建第80帧至第85帧的动画,【时间轴】面板如图10-4所示。图10-4 【时间轴】面板10.1 网页广告制作(10)在“图层1”上方插入“图层2”,单击【矩形工具】按钮 在舞台中拖拽出一个与画布大小基本相等的矩形,然后在“图层2”
5、上右击,在弹出的快捷菜单中选择【遮罩层】命令,如图10-5所示。图10-5 创建遮罩层10.1 网页广告制作(1)在菜单栏中选择【插入】【新建元件】命令,在弹出的【创建新元件】对话框中点选【图形】单选钮,单击【确定】按钮。(2)在工具箱中单击【文本工具】按钮,在其【属性】面板中,根据需要对文字的字体、字号、文本填充颜色进行修改,如图10-6所示。图10-6 设置【文本】工具的【属性】10.1 网页广告制作(3)在舞台中单击,然后输入文字“莲出淤泥而不染”,如图10-7所示。图10-7 输入文字10.1 网页广告制作(4)回到场景1,按+键创建新元件,在弹出的【创建新元件】对话框中点选【影片剪辑
6、】单选钮,单击【确定】按钮。(5)将新创建的文字图形元件拖拽到“影片剪辑”舞台中,并将每一个文字单独放置于一个图层,【时间轴】面板如图10-8所示。(6)在各个图层的第60帧按键插入帧。选择“图层1”的第10帧,按键插入关键帧。(7)选择“图层1”的第1帧,回到舞台编辑对象“莲”。在工具箱中单击【任意变形工具】按钮,然后打开【变形】面板,在【宽度】和【高度】文本框中均输入数值“150”,如图10-9所示,按键确定。10.1 网页广告制作(8)在【属性】面板的【颜色】下拉列表框中选择【Alpha】选项,【Alpha数量】设为“15%”。(9)选择“图层1”的第1帧,在【属性】面板的【补间】下拉列
7、表框中选择【动画】选项。这样“莲”字的动画效果设置完成。(10)参照步骤(17)(19),分别设置“图层2”“图层9”上的文字效果。【时间轴】面板如图10-10所示。图10-8 【时间轴】面板 图10-9 【变形】面板10.1 网页广告制作(11)在“图层9”上方插入“图层10”,并在其第60帧插入关键帧,然后在【动作-帧】面板中输入脚本语言“stop();”。(12)“影片剪辑”的动画效果如图10-11所示。图10-11 文字的动画效果10.1 网页广告制作(13)回到场景1,插入“图层3”,在第85帧插入关键帧。打开【库】面板,将刚刚制作好的“影片剪辑”拖拽至舞台放在合适位置,如图10-1
8、2所示。图10-12 文字在舞台中的摆放位置10.1 网页广告制作(14)分别将“图层1”、“图层2”、“图层3”的帧数延长至240帧。(1)插入影片剪辑2,导入几幅图片用于制作动画,所用素材见“站点实例”(FlashDemoch10网页广告制作png)。选择“图层1”的第1帧,将名为“背景”的图片拖拽至舞台,如图10-13所示。(2)在“图层1”的第70帧插入关键帧,回到第1帧,单击【任意变形工具】按钮,将其放大至270%,然后创建补间形状动画。(3)插入“图层2”,将名为“02-3左”的图片拖拽至舞台,如图10-14所示。参照步骤(2)创建动画效果。10.1 网页广告制作(4)插入“图层3
9、”,将名为“02-3右”的图片拖拽至舞台,如图10-15所示。参照步骤(2)创建动画效果。(5)插入“图层4”,在第15帧插入关键帧,将名为“02-2左”的图片拖拽至舞台,如图10-16所示。参照步骤(2)创建动画效果。图10-15 创建“02-3右”移动效果 图10-16 创建“02-2左”移动效果10.1 网页广告制作(6)参照步骤(1)(5),依次对图片“02-2右”、“02-1左”、“02-1右”进行动画设置。【时间轴】面板如图10-17所示。图10-17 【时间轴】面板10.1 网页广告制作(7)在“图层7”上方插入“图层8”,并在其第70帧插入关键帧,然后打开【动作】面板,在【动作
10、-帧】面板中输入脚本语言“stop();”。(8)回到场景1,在【时间轴】面板上插入“图层4”,并在其第155帧插入关键帧。然后将刚刚创建的“影片剪辑2”拖拽至舞台,放在左边。10.1 网页广告制作(9)插入“图层5”,单击【矩形工具】按钮 在舞台的左侧创建一个矩形,如图10-18所示。图10-18 创建矩形图形10.1 网页广告制作(10)选中“图层5”,右击并在弹出的快捷菜单中选择【遮罩层】命令,效果如图10-19所示。图10-19 运用遮罩层的效果10.1 网页广告制作(1)创建图形元件并输入文字“逸云莲池花圃”,然后在场景1中插入“图层6”,在第160帧将其拖拽至舞台,如图10-20所
11、示。图10-20 拖拽文字元件至舞台 10.1 网页广告制作(2)插入“图层7”,在第160帧插入关键帧。单击【矩形工具】按钮 创建一个矩形,并将其转换为元件。(3)在“图层7”的第203帧插入关键帧,并单击【任意变形工具】按钮 使矩形覆盖整个文字。在第160帧至第203帧之间右击,在弹出的快捷菜单中选择【创建形状补间动画】命令并将“图层7”设为遮罩层。(4)插入图形元件,单击【线条工具】按钮 在舞台中创建一条直线,然后在第2帧插入空白关键帧。(5)回到场景1,插入“图层8”,在第155帧插入关键帧,将直线元件拖拽至舞台中。10.1 网页广告制作(6)在“图层8”的第160帧和第205帧分别插
12、入关键帧。选择第205帧,将直线平移至舞台右边,创建补间动画,如图10-23所示。图10-23 制作移动动画10.2 动态漫画n1.1.实训目的实训目的 网上流行很多用Flash制作的笑话,其形式简单、活泼。这无疑给笑话的表现形式增添了新的色彩。动态漫画就是以平时创作的漫画为基础,借助Flash软件实现声像并茂的效果。这样就大大增加了漫画的喜剧效果。10.1 网页广告制作n2 2.实训实训步骤步骤(1)新建一个尺寸为“1000*646”、背景颜色为“白色”的Flash文档。(2)在菜单栏中选择【文件】【导入】【导入到库】命令,导入素 材 图 像“场 景 1-1”,所 用 素 材 见“站 点 实
13、 例”(FlashDemoch10动态漫画)。将其从【库】面板中拖拽至舞台,使其与舞台中央对齐。10.1 网页广告制作(3)按+键创建新元件,在弹出的【创建新元件】对话框中点选【图形】单选钮,然后单击【确定】按钮。(4)在工具箱中单击【文本工具】按钮,然后在舞台中单击,在【属性】面板中将颜色设为“#000000”,输入文字“PLAY”。(5)选中“L”,将其颜色修改为“#990000”。10.1 网页广告制作(6)按+键创建新元件,在弹出的【创建新元件】对话框中点选【按钮】单选钮,然后单击【确定】按钮。将刚刚创建的文字元件拖拽至舞台,如图10-26所示。(7)在【按钮】元件的【时间轴】面板中选
14、择【指针经过】,按键插入关键帧,单击在【时间轴】面板中的【任意变形工具】按钮,然后在【变形】面板中输入数值,如图10-27所示。按键确定。图10-26 创建的文字元件 图10-27 【变形】面板10.1 网页广告制作(8)在【时间轴】面板中选择【按下】,按键插入关键帧,选择【弹起】右击并在弹出的快捷菜单中选择【复制帧】命令,然后选择【按下】右击并在弹出的快捷菜单中选择【粘贴帧】命令。(9)在【属性】面板的【颜色】下拉列表框中选择【Alpha】选项,【Alpha数量】设为“70%”。(10)在【时间轴】面板中选择【点击】,按键插入关键帧,然后右击,在弹出的快捷菜单中选择【粘贴帧】命令。10.1
15、网页广告制作(11)按钮元件每一个关键帧处的图像如图10-29所示。图10-29 按钮元件每一个关键帧处的图像10.1 网页广告制作(12)回到场景1,在“图层1”的上方插入“图层2”,然后将按钮元件拖拽至舞台,放在右下方,如图10-30所示。10-30 放置按钮的位置10.1 网页广告制作(1)在菜单栏中选择【插入】【场景】命令,新建一个场景。(2)在菜单栏中选择【文件】【导入】【导入到库】命令,导入素材图像“背景纸”和“画框”,所用素材见“站点实例”(FlashDemoch10动态漫画)。(3)创建一个名为“片头”的影片剪辑。打开【库】面板,将“背景纸”拖拽至舞台,插入“图层2”,将“画框
16、”拖拽至舞台并放置于合适位置,如图10-31所示。10.1 网页广告制作(4)创建一个图形元件,单击【刷子工具】按钮 绘制一个如图10-32所示的文字图形。此图形作为“动态漫画”的标题。图10-31 拖拽图像至舞台 图10-32 绘制的文字图形10.1 网页广告制作(5)回到影片剪辑“片头”,在“图层1”上方新建一个“图层3”,并将刚绘制好的图形拖拽至舞台中央。(6)分别将图层1、2、3的帧数延长至第60帧。选中“图层2”分别在第13、15帧处插入关键帧,选择第1帧,在【属性】面板的【颜色】下拉列表框中选择【Alpha】选项,【Alpha数量】设为“20%”。10.1 网页广告制作(7)选择第
17、13帧,插入关键帧,单击【任意变形工具】按钮 将其放大一些。在【时间轴】面板中选择第1帧右击,在弹出的菜单中选择【创建补间动画】命令。选择第13帧右击,在弹出的快捷菜单中选择【创建补间动画】命令。【时间轴】面板如图10-33所示。图10-33 【时间轴】面板 图10-34 缩小图形10.1 网页广告制作(8)选择“图层3”的第1帧将其拖拽至第15帧。(9)插入“图层4”,在第15帧插入关键帧,然后导入声音文件“声音1”。(10)在“图层3”的第17、34、39帧各插入关键帧。选择第15帧,单击【任意变形工具】按钮 将其横向缩小,如图10-34所示。(11)选择第34帧,使用【任意变形工具】按钮
18、 将其放大,并在【属性】面板的【颜色】下拉列表框中选择【Alpha】选项,【Alpha数量】设为“0%”,如图10-35所示。10.1 网页广告制作(12)选择第1517帧和第3439帧分别创建补间动画,【时间轴】面板如图10-36所示。图10-35 放大图形并修改图形的属性 图10-36 “片头”影片剪辑的【时间轴】面板10.1 网页广告制作(12)选择第1517帧和第3439帧分别创建补间动画,【时间轴】面板如图10-36所示。(13)插入“图层5”,在第42帧插入关键帧。在菜单栏中选择【文件】【导入】【导入到库】命令,导入素材图像“印章”,所用素材见“站点实例”(FlashDemoch1
19、0动态漫画)。将其放置在舞台的右侧,如图10-37所示。图10-37 拖拽“印章”图形至舞台10.1 网页广告制作(14)选择“图层5”的第47帧,插入关键帧。回到第45帧,单击【任意变形工具】按钮 将其放大至超出舞台的大小。并在【属性】面板中将【Alpha数量】设为“0%”。在第42帧至第47帧之间右击,在弹出的快捷菜单中选择【创建补间动画】命令。(1)创建名为“画面1”影片剪辑,导入“画纸”图片并将其拖拽至舞台,插入“图层2”,导入“框1”图片并拖拽至舞台,如图10-38所示。图10-38 拖拽图形至舞台10.1 网页广告制作(2)创建名为“门”的图形元件,导入图像“1-1”、“1-2”,
20、将“1-1”拖拽至舞台并与其中央对齐。在“图层1”的第3帧插入关键帧,然后将“1-2”拖拽至舞台并与舞台中央对齐,在第7帧插入帧。(3)参照步骤(2),分别创建“谈话”、“端茶”、“狗”、“挑衅”、“回答”、“怒”、“大笑”、“流汗”图形元件。所用素材见“站点实例”(FlashDemoch10动态漫画)。(4)回到影片剪辑“画面1”,将所有的帧延长至第400帧。在“图层1”的上方插入“图层3”,然后将图形元件“门”拖拽至舞台。10.1 网页广告制作(5)在“图层3”的第10帧和第15帧插入关键帧,选择第1帧,单击【任意变形工具】按钮,对其变形并平移至舞台外的左侧,如图10-49所示。(6)选择
21、第10帧,在对其进行变形,如图10-50所示。单击第1、10帧,分别创建补间动画。图10-49 第1帧处的图形 图10-50 第10帧处的图形10.1 网页广告制作(7)插入“图层4”,然后导入声音元件“L”。(8)在“图层1”的上方插入“图层5”,单击【矩形工具】按钮,绘制一个没有边框、填充色为“#808080”的矩形并将其转换为图形元件,如图10-51所示。图10-51 绘制矩形10.1 网页广告制作(9)在第5帧插入关键帧,选择第1帧,在【属性】面板中将【Alpha数量】设为“0%”,创建补间动画。【时间轴】面板如图10-52所示。图10-52 【时间轴】面板10.1 网页广告制作(10
22、)在“图层3”的上方插入“图层6”。选择“图层5”的第5帧右击,在弹出的快捷菜单中选择【复制帧】命令,然后选择“图层6”的第1帧右击,在弹出的快捷菜单中选择【粘贴帧】命令。选中“图层6”右击,在弹出的快捷菜单中选择【遮罩层】命令。(11)在“图层4”的上方插入“图层7”,在第47帧插入关键帧,然后将图形元件“喝茶”拖拽至舞台,如图10-53所示。在第50帧插入关键帧,选择第47帧,在【属性】面板中将【Alpha数量】设为“0%”并创建补间动画。10.1 网页广告制作(12)插入“图层8”,在第45帧插入关键帧,导入声音元件“Y”。(13)在“图层4”的上方插入“图层9”,单击【矩形工具】按钮
23、绘制如图10-54所示的矩形并将其转换为名为“灰色”的图形元件。图10-54 创建矩形 10.1 网页广告制作(14)在第47帧插入关键帧,然后选择第45帧,在【属性】面板中将【Alpha数量】设为“0%”并创建补间动画。【时间轴】面板如图10-55所示。图10-55 【时间轴】面板10.1 网页广告制作(15)在“图层7”的上方插入“图层10”,在第60帧创建关键帧。然后将“灰色”图形元件拖拽至舞台放在左侧,如图10-56所示。(16)单击第64帧创建关键帧,选择第60帧,在【属性】面板中将【Alpha数量】设为“0%”并创建补间动画。(17)插入“图层10”,在第63帧创建关键帧,然后将“
24、端茶”图形元件拖拽至舞台,如图10-57所示。在第65帧插入关键帧。图10-56 摆放“灰色”图形元件的位置 图10-57 拖拽“端茶”元件至舞台10.1 网页广告制作(18)选择第63帧,在【属性】面板中将【Alpha数量】设为“0%”并创建补间动画。(19)参照步骤(41)(44),分别创建右侧两个板块的动画,舞台图像如图10-58所示,中间图像对应的图层是“图层12”和“图层13”,右侧图像对应的图层是“图层14”和“图层15”。图10-58【时间轴】面板10.1 网页广告制作(20)导入声音素材“dog”,然后在“图层13”的上方插入“图层16”,在第88帧插入关键帧,将声音素材从【库
25、】面板中拖拽至舞台。【时间轴】面板如图10-60所示。图10-60 导入声音“dog”10.1 网页广告制作(21)选择“图层8”,在【属性】面板中单击【编辑】按钮,弹出【编辑封套】对话框,如图10-61所示。图10-61 【编辑封套】对话10.1 网页广告制作(22)在该对话框中,选择第89帧和第91帧,分别插入一个滑块,然后将第91帧的滑块拖至中间位置,如图10-62所示。这样此处的声音就会降低音量。图10-62 编辑声音10.1 网页广告制作(23)在第101帧和第105帧插入一个滑块,将第101帧的滑块拖拽至中间部位,然后单击【确定】按钮。这样在播放声音文件“dog”时,这个声音只作为
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- flash CS3 动画 制作 综合 实例
限制150内