任务一动画的基本类型之——逐帧动画.49
任务二动画制作之——形状补间动画.52
任务三动画制作之——动作补间动画.54
任务四形状补间动画实例——变形小球.56
任务五动作补间动画实例——转动的风车.58
项目六制作特殊动画.62
任务一制作引导动画.63
任务二制作遮罩动画.66
任务三引导层动画实例.69
任务四遮罩层动画实例——画轴打开.72
任务五遮罩层动画实例二——电影片尾字幕.75
项目七声音设置.78
任务一添加声音.79
任务二制作MTV83
项目八交互式动画制作.84
任务一“动作”面板动作工具箱.85
任务二Actions语句.87
任务三ActionScript的应用(一).91
任务四ActionScript的应用(二).93
项目九动画的测试、优化和发布.95
任务一动画的测试与优化.96
任务二动画的导出与发布.99
项目十综合实例.102
任务一用Flash制作跳动的小球.103
任务二用Flash制作鼠标跟随.109
任务三用Flash制作生日贺卡.113
项目一FlashCS5基础知识
任务一:初识FlashCS5
图1-1
图1-2
图1-3
图1-4
任务二FlashCS5文件基本操作
图1-5
图1-6
图1-7
任务三FlashCS5动画制作原理
就是工作区,最主要的可编辑区域。在这里可以直接绘图,或者导入外部图形文件进行安排编辑,再把各个独立的帧合成在一起,以生成电影作品。
用它可以调整电影的播放速度,并把不同的图形作品放在不同图层的相应帧里,以安排电影内容播放的顺序。
放置了可供图形和文本编辑的各种工具,用这些工具可以绘图,选取,喷涂,修改以及编排文字,还有些工具可以改变查看工作区的方式。在选择了某一工具时,其所对应的修改器(Modifier)也会在工具条下面的位置出现,修改器的作用是改变相应工具对图形处理的效果。
列出了大部分最常用的文件操作,打印,剪贴板,撤消和重做,修改器以及控制舞台放大比例的图标和选项,便于进行更为快捷的操作。
用以存放可以重复使用的称为符号的元素。符号的类型包括有图片(Graphics),按钮(Button)和电影片断(MovieClip)。其调用的快捷键为Ctrl-L。
控制电影的播放操作的工具集合,一般不大常用,处于隐藏状态。
例1:使用工具制作一个“笑脸”或“哭脸”
矢量图形
矢量图形使用直线和曲线来描述图像,它是由一个个单独的点构成的,每一个点都有其各自的属性,如位置、颜色等。如图2-1
图2-1
位图使用像素点来描述图像,并将它们安排在网格内。
编辑位图时,修改的是像素而不是直线和曲线。位图和分辨率有关,因为描述图像的数据被固定到特定大小的网格中。编辑位图可以改变其外观质量,尤其是调整位图的大小会使图形的边缘产生锯齿,这是因为像素被重新分配到网格中的缘故。二者的区别如图2-2
图2-2
在Flash中有两种绘图模型,即“合并绘制”模式和“对象绘制”模式,为绘制图形提供了极大的灵活性。
“合并绘制”模式时,重叠绘制图形时,会自动进行合并。如果选择同一个图层中的图形与另一个图形合并,移动它则会永久改变其下方的图形。
当你所绘制的线条穿过别的线条或图形时,它会象刀一样把其他的线条或图形切割成不同的部分。同时,线条本身也会被其他线条和图形分成若干部分。
“对象绘制”模式允许将图形绘制成独立的对象,且在叠加时不会自动合并。分离或重排重叠图形时,也不会改变它们的外形。FalshCS4将每个图形创建为独立的对象,可以分别进行处理。
使用“对象绘制”模式绘制图形,只需选择一个支持“对象绘制”模式的绘图工具,如线条工具、钢笔工具、椭圆工具、矩形工具、多角星形工具、铅笔工具和刷子工具,然后单击“工具箱”中“选项”下的“对象绘制”按钮或按“J”键,就可以从“合并绘制”模式切换到“对象绘制”模式。
使用【选择】工具移动对象,只需单击边框然后拖曳图形到舞台上的任意位置即可。
主要功能是选择对象,对对象进行变形等。对象被选中后,选中部分会填充小的亮点。
基本操作有:选取单一对象;选取多个对象;选取填充区和轮廓钱;选取连续线条;选取对象的某一区域;取消选择对象;移动对象;修改形状
主要用于调整线条上的节点,改变线条的形状。部分选取工具没有选项。
基本操作有:删除节点;移动节点;角点转换为曲线点;调节曲率
主要作用也是选择物体。与选择工具不同的是,套索工具可以用来选取任何形状范围的对象,而选择工具只能拖出矩形的选取范围,因此它的功能更强一些。
FlashCS5常用绘图工具包括:线条工具、铅笔工具、钢笔工具、椭圆工具、矩形工具、刷子工具、橡皮擦工具等。
任务二FlashCS5绘图常用工具
【例2.1】利用线条工具绘制一条“红色”、粗细为“5”、宽高度为“100150”、位置在“120150”的点直线。
【例2.2】利用钢笔工具绘制一片树叶,效果如图2-3所示。
图2-3
【例2.2】利用铅笔工具绘制一片树叶,效果如图2-4所示。
图2-4
Flash提供了两种绘制椭圆的工具,椭圆工具和基本椭圆工具。
使用椭圆工具可以绘制椭圆和圆。选择工具箱中的椭圆工具,在舞台中按住鼠标左键向任意方向拖动即可绘制一个椭圆。按住【Shift】键,同时按住鼠标左键拖动可绘制一个圆。
基本椭圆工具也称为图元椭圆工具,使用基本椭圆工具可以绘制图元椭圆。基本椭圆工具操作方法与椭圆工具相同。
【例2.2】利用椭圆工具绘制餐盘,效果如图2-6所示。
图2-6
矩形工具是一个工具组,包括矩形工具和多角星形工具,通过单击右下角的黑色三角进行切换。矩形工具与椭圆工具用法相似,注意矩形圆角的设置。
选择矩形工具,在舞台中按住鼠标左键向任意方向拖动即可绘制一个矩形。按住【Shift】键,同时按住鼠标左键拖动可绘制一个正方形。
基本矩形工具也称为图元矩形工具,使用基本矩形工具可以绘制图元矩形。基本矩形工具操作方法与矩形工具相同。
【例2.3】绘制如图2-7树叶,利用例2.1中的树叶组合成一棵树。
使用多角星形工具,在舞台上按住鼠标左键向任意方向拖动即可绘制一个多边形或星形。
多角星形工具“属性”面板与线条工具的“属性”面板相比多了“选项”按钮,如图2-8所示。
图2-8
在此对话框中设置“样式”为“多边形”或“星形”,设置“边数”一般介于3~32之间的数值,设置“星形顶点大小”一般介于0~1之间的数值以指定星形顶点的深度,此数值越接近0,创建的顶点就越深(如针)。如果是绘制多边形,应保持此设置默认(也就是数值为0.50),它不会影响多边形的形状。
【例2.4】绘制如下图2-9所示的星星和五角星。
图2-9
【例2.3】绘制图2-10图形,利用钢笔工具绘制。
图2-10
墨水瓶工具用于更改线条的颜色、线宽和样式等属性,线条的颜色可以使用纯色、渐变色以及位图图像,
与墨水瓶工具相对应,颜料桶工具的功能是更改填充区域的颜色。它可以填充封闭区域或不完全封闭区域,填充时可以使用纯色、渐变色以及位图图像。
吸管工具用于拾取填充或线条的颜色值,选择吸管工具后,鼠标图标变成一个吸管,用吸管单击对象的任意位置,可获得此位置的颜色值及其它属性。
使用任意变形工具可以对图形做出各种各样的变形,制作各种Flash特效。选择任意变形工具后,在选项栏中有四个选项按钮
自动变形工具一共可以做出五种变形处理:旋转、倾斜、缩放、扭曲和封套。其中旋转、倾斜、缩放对所有的对象都有效,而扭曲和封套只对形状对象有效,对组对象、符号和位图都不起作用。
使用手形工具可以移动舞台。
使用缩放工具可以缩放舞台。
图标
说明
具体描述
首先选择一个或多个对象,然后选择“窗口”→“信息”命令或按【Ctrl+I】键,打开“信息”面板,输入所选择对象的左上角位置的x和y的值,x和y值也是相对于舞台左上角,如图2-11所示。
图2-11
如果需要绘制的图形和已有图形相同,可以将已有图形进行复制。在Flash中,复制图形的方法有如下3种:
(1)选择要复制的对象,选择“编辑”→“复制”命令或按【Ctrl+C】键复制,再选择“编辑”→“粘贴到中心位置”命令或按【Ctrl+V】键粘贴即可,若选择“编辑”→“粘贴到当前位置”命令或按【Ctrl+Shift+V】键可以将对象粘贴到原位置。
(2)用选择工具选择对象后,按住【Ctrl】键不放并拖动鼠标进行复制。
(3)用任意变形工具选择对象后,按住【Alt】键不放并拖动鼠标进行复制。
删除对象可以将其从文件中删除。删除舞台上的实例不会从库中删除元件。选中要删除的对象后,按【Delete】键或按【BackSpace】键或选择“编辑”→“清除”命令或选择“编辑”→“剪切”命令,还可以在该对象上单击鼠标右键,在弹出的快捷菜单中选择“剪切”命令,即可将对象删除。
在图层内,FlashCS5会根据对象的创建顺序层叠对象,将最新创建的对象放在最上面。对象的层叠顺序决定了它们在层叠时出现的顺序。使用图层操作和菜单命令可以在任何时候更改对象的层叠顺序。
在FlashCS5中,可以使用选择工具、部分选取工具和任意变形工具来变形对象,通过些工具来编辑图形,可以使图形达到理想的变形效果。在制作Flash动画时,如果创建了多个图形对象,并且要把这些图形对象按相对的位置排列在一起,可以使用FlashCS5提供的辅助线和“对齐”面板来排列对象。
部分选取工具常常与钢笔工具配合使用。它能象选择工具一样选择并移动对象,还能编辑普通线条和图像的轮廓线条,通常用来编辑曲线上锚点。该工具的“属性”面板和“选项”区域无相应的内容。
在FlashCS5中,使用任意变形工具是最常用的方法。根据所选的元素,可以任意变形、旋转、倾斜、缩放和扭曲该元素。
任意变形工具是一个功能强大的编辑工具,利用它可以对对象进行4种变形设置,分别是旋转与倾斜、缩放、扭曲和封套操作,制作出特殊的效果。
在移动对象时,对象的边缘会出现水平或垂直的虚线,该虚线自动与另一个对象的边缘对齐,便于确定对象的位置,这种虚线就是辅助线。移动对象时会出现辅助线。
除了用辅助线功能来对齐对象外,还可以用“对齐”面板来对齐对象。
群组又叫组合,是将多个元素组合为一个对象来处理。例如,创建了一幅绘画后(如树或花),可以将该绘画的元素组合成一组,这样就可以将该绘画当成一个整体来选择和移动。当选择某个组时,“属性”面板会显示该组的x和y坐标及其像素尺寸。
群组对象的方法是先用选择工具选择需要群组的多个对象,然后选择“修改”→“组合”命令或按【Ctrl+G】键,即可将多个对象组合成一个整体。群组后这几个对象就变为一个对象,在群组对象外围有一个蓝色边框。
选择“修改”→“取消组合”命令或按【Ctrl+Shift+G】键,可以取消组合。
打散又叫分离,是指将位图、文字或群组后的图形打散成一个一个的像素点,以便对其中的一部分进行编辑。
打散位图会将图像中的像素分散到离散的区域中,可以分别选中这些区域并进行修改。
在选择位图过程中,用选择工具框选位图时,会发现不能选中其中的一部分,只能用鼠标单击选中整个位图,位图四周会出现灰色边框,此时选择“修改”→“分离”命令或按【Ctrl+B】键即可打散位图,再用选择工具框选位图的一部分,会发现这部分出现许多像素点,这时就可以对这部分进行编辑了。
任务四填充图形图像
选择“窗口”→“颜色”命令或按【Shift+F9】键,可以打开“颜色”面板。FlashCS5在默认的面板情况下,“颜色”面板已在Flash窗口右侧。“颜色”面板如图2-12所示。
图2-12
在“颜色”面板中,填充类型包括“无”、“纯色”、“线性”、“放射状”和“位图”5种,不管是哪一种,其“颜色”面板有相同的功能参数设置和按钮。
【例2.4】使用椭圆工具和线性渐变绘制一个鸡蛋。
【例2.5】使用椭圆工具和放射状渐变绘制质感的按钮。
每一个Flash影片都包含自己的调色板,并存储在Flash文档中。Flash将文件的调色板显示为笔触颜色和填充颜色空间,以及“样本”面板中的样本(以小方格显示颜色)。这个面板帮助用户从当前的调色板中组织、加载、保存和删除单独的颜色。
在Flash中,矢量图形使用直线和曲线来描述图像,每个矢量都有两个属性:笔触(轮廓)和填充。这两个属性决定了矢量图形的轮廓和整体颜色。
1.使用工具箱中的“笔触颜色”与“填充颜色”控件
2.使用属性面板中的“笔触颜色”与“填充颜色”控件
在FlashCS5中,利用工具箱和“属性”面板都可以设置图形的笔触颜色和填充颜色,还可以利用工具箱中的多个工具来修改笔触颜色和填充颜色。
墨水瓶工具可以更改线条或者形状轮廓的笔触颜色、宽度和样式。对直线或形状轮廓只能应用纯色,而不能应用渐变或位图。
【例2.7】利用墨水瓶工具对文字添加边框,效果如下图所示。
墨水瓶工具是更改对象的笔触特性,而颜料桶工具则是更改对象的填充颜色。颜料桶工具可以用颜色填充封闭区域。此工具既可以填充空的区域也可以更改已涂色区域的颜色。用户可用颜料桶工具和“颜色”面板配合设置出纯色、渐变填充以及位图填充进行涂色,制作出绚丽的色彩效果。用户可以使用颜料桶工具填充未完全封闭的区域,并且可以让Flash在使用颜料桶工具时闭合形状轮廓中的空隙。
填充变形工具是为了使填充的渐变色彩更丰富而设置的,利用该工具可以对所填颜色的范围、方向和角度等进行设置,以获得丰富的特殊效果。
【例2.8】绘制一个网页上经常可以看到的按钮,如下图所示。
使用滴管工具可以从一个对象复制填充和笔触属性,然后立即将它们应用到其它对象。滴管工具还允许从打散的位图图像取样用作填充。滴管工具没有相应的“选项”区域和“属性”面板。
橡皮擦工具可以擦除笔触颜色和填充颜色,可以擦除整个对象对象或对象中不需要的部分,它只能应用于打散后的图形。橡皮擦工具无相应的“属性”面板,选中对象后【Ctrl+B】键打散位图,选择橡皮擦工具,其“选项”区域如图2-131所示。从“擦除模式”下拉列表中选择一种模式,并确认“水龙头”按钮没有被按下,在对象上拖动鼠标光标进行所需的擦除操作,释放鼠标左键完成擦除操作。
用户可以锁定渐变色或位图填充,使填充看起来好像扩展到整个舞台,并且用该填充涂色的对象好像是显示下面的渐变或位图的遮罩。
当用户随刷子或颜料桶工具选择了锁定填充功能键并用该工具涂色的时候,位图或渐变填充将扩展覆盖用户在舞台中涂色的对象。
(1)选择刷子或者颜料桶工具,然后选择作为填充的渐变或位图。
(2)从颜色中的“类型”弹出菜单中,选择“线性”渐变或“放射状”渐变,然后选择刷子或者颜料桶工具。
(3)单击“锁定填充”功能键。
(4)首先对要放置填充中心的区域进行涂色,然后移到其它区域。
(1)选择要使用的位图。
(2)先从颜色的“类型”弹出菜单中选择“位图”。
(3)选择刷子或颜料桶工具。
(4)单击“锁定填充”功能键。
(5)首先对要放置填充中心的区域进行涂色,然后移到其它区域。
本实例将介绍如何利用简单的方法在Flash作品中表现漂亮的香蕉。
卡通造型在Flash作品中出现频率非常高,而且应用非常的广泛。通过本实例简单了解香蕉的基本画法,使用“钢笔工具”、“线条工具”绘制形状,使用“填充变形工具”、“任意变形工具”调整图像的颜色和大小,造型简单,色彩艳丽,是Flash里很典型的创作方法。
本章主要讲解了Flash的绘图基础、基本绘图工具的使用、编辑图形图像和填充图形图像的基础操作知识,以及相应的“属性”面板等,为以后深入学习制作Flash动画奠定了坚实的基础。通过本章的基础知识和实例的学习,希望读者能够熟练掌握基本绘图工具、编辑图形图像工具、填充图形图像工具等的使用方法,制作出优美的动画效果。
项目三FlashCS5文本工具
任务一文本工具
文本工具主要用于输入和设置动画中的文字信息。
FlashCS5中主要使用3种类型的文本:静态文本、动态文本和输入文本。所有的文本字段都支持Unicode。
(1)静态文本:用于显示影片中不作任何变化的文字。文本内容在运行时不会发生改变,静态文本可以创建超级链接,并且选择目标窗口。
(2)动态文本:用于显示影片中会被更新的文字。该内容可以来自于即时数据源、动态更新的文本,如体育得分、股票报价或天气报告。
(3)输入文本:用于在运行时由用户输入文本,它可用于任何需要用户输入的时候,如输入密码或者回答问题等。如下图
②双击图层名前的按钮,弹出图层属性对话框,在名称标签后的文本框中输入新的图层明,单击确定即可。
1.可编辑状态:单击对应图层名即可切换的可编辑状态。
2.显示、隐藏图层:单击对应图层的按钮即可切换图层的显示、隐藏状态。
3.锁定、解锁图层:单击对应图层的按钮即可切换图层的锁定、解锁状态。
4.轮廓显示图层:单击对应图层的按钮即可切换图层的轮廓显示状态。
Ctrl+z:撤消
F7:插入空白关键帧
Ctrl+c:复制
Ctrl+v:粘贴(默认是粘贴画布的中心)
Ctrl+shift+v:原位置粘贴
任务二元件的创建
元件概述和类型
创建图形元件
创建影片剪辑元件
创建按钮元件
在Flash中,元件包括以下三种类型:
按钮元件用于创建动画的交互控制按钮,支持鼠标“弹起”、“指针经过”、“按下”和“点击”4种状态;支持音频效果和交互效果,能与图形元件和影片剪辑元件嵌套使用,功能十分强大。
在Flash中,创建图形元件的方法大致有以下方法:
1)选中要改变属性的实例;
2)使用变形工具(1)打开需引用的动画文件(例如“画柱展开”文件)。
(2)执行“窗口”→“库”命令,打开“库”面板。选择库面板中“画柱展开”动画。
(3)回到正在编辑的动画文件,选择“画柱展开”库面板中的“symbol5”图形元件,将其拖动到待编辑动画的场景中。
任务四场景与图片素材的使用
场景的创建
场景的编辑
图片素材的使用
在制作动画的过程中,有时需要创建其它场景作为背景。创建新的场景的方法主要有以下两种:
(1)选择“窗口”→“其它面板”→“场景”命令,打开“场景”面板,单击“添加场景”按钮,即可新建一个场景,如图所示。
(2)选择“插入”→“场景”命令即可插入新的场景,如图所示。
(1)删除场景:选择“窗口”→“其它面板”→“场景”命令,打开“场景”面板,选中要删除的场景,再单击“场景”面板中的“删除场景”按钮将其删除。
(2)更改场景名称:在“场景”面板中双击场景名称,然后输入新的名称即可。
(3)复制场景:选中要复制的场景,然后单击“场景”面板中的“直接复制场景”按钮。
(4)更改场景在文档中的播放顺序:在“场景”面板中将场景拖到不同的位置进行排列即可。
如果计算机操作系统种安装了QuickTime4或更高版本,就能导入位图。
(1)将位图与矢量图导入到舞台。选择“文件”→“导入”→“导入到舞台”命令或按【Ctr+R】键,则把图像导入到舞台,同时也保存到库中。
(2)将位图与矢量图导入到库。选择“文件”→“导入”→“导入到库”命令,则把图像直接导入到库,舞台不存在图像。如果舞台上要显示图像,在“库”面板中把导入的图像拖动到舞台。
(3)在Flash中还可以使用剪贴板将位图导入到舞台。具体过程如下:
从另一个图像编辑程序中将位图复制到剪贴板。大多数程序都支持【Ctrl+C】键。
返回到Flash中,确定存在没有被锁定的层可以粘贴复制位图。
通过从菜单中选择“编辑”→“粘贴”命令或按【Ctrl+V】键将位图粘贴到舞台上。
在FlashCS5中,为了减小Flash文件的存储容量,可以将已导入位图转换为矢量图。
分离位图会将图像中的像素分散到离散的区域中,可以分别选中这些区域并进行修改。
具体操作为:选择“修改”→“位图”→“转换位图为矢量图”命令,打开“转换位图为矢量图”对话框如图所示。
“转换位图为矢量图”对话框中各项功能如下:
(1)颜色阈值:输入一个介于1~500之间的值。当两个像素进行比较后,如果它们在RGB颜色值上的差异低于该颜色阈值,则两个像素被认为是颜色相同。如果增大了该阈值,则意味着降低了颜色的数量。
(2)最小区域:输入一个介于1~1000像素之间的值,用于设置在指定像素颜色时要考虑的周围像素的数量。
(3)曲线拟合:单击右侧箭头的按钮,从弹出菜单中选择一个选项(像素、非常紧密、紧密、一般、平滑、非常平滑),用于确定绘制的轮廓的平滑程度。
(4)角阈值:单击右侧箭头的按钮,从弹出菜单中选择一个选项(较多转角、一般、较少转角),以确定是保留锐边还是进行平滑处理。
要创建最接近原始位图的矢量图形,设置以下的值:
“颜色阈值”:10。
“最小区域”:1像素。
“曲线拟合”:像素。
“角阈值”:较多转角。
利用已学知识,制作一张“中秋节贺卡”,熟练掌握层和帧的操作方法,动画最终效果如图:
1.新建一Flash文档,设置舞台大小为“500*400”,将图层1重命名为“背景”。
2.选择“工具”面板中的“矩形”工具,在“背景”图层中中绘制一个500*300大小的无边框矩形。打开“混色器”面板,设置图中第1个滑块颜色为#EDCA3D,第2个为#0202FD,将矩形水平、垂直居中对齐,使用填充变形工具改变填充效果。
3.新建图层2并重命名为“边框”,在“边框”图层中绘制2个500*50大小的无边框、填充为黑色的矩形。分别将2个将矩形垂直方向顶部对齐底部对齐,将2个矩形水平方向居中对齐。
4.新建图层3并重命名为“星星”,重复绘出多个顶点数值、大小、颜色深浅不一的星形。
5.新建图层4并重命名为“月亮”,选择铅笔工具绘出月亮的轮廓,再次采用将月亮分为上下两部分。
6.将月亮上半部分设置为放射状填充,打开“混色器”面板,设置图中第1个滑块颜色为#FFFF00,第2个为#A6A7D9。选择填充变形工具改变填充效果。将月亮下半部分填充为纯色#FFFFCC。
7.按Ctrl+F8键打开“新建元件”对话框,在对话框中将“元件1”重命名为“人物”,选中图形单选按钮,新建一个名为“人物”的图形元件(有关元件的详细操作将会下一章节详细介绍)。
8.按Ctrl+R键打开“导入”对话框,选中需导入的图片“人物.jpg”,将其导入到编辑区,(为方便辨别图片中的白色部分,可以将背景设置为黑色)按Ctrl+B键将图片打散,使用“套索”工具的“魔术棒”选中白色背景,将其删除。
9.回到场景1,新建图层5并重命名为“人物”,将元件“人物”托至其合适的位置,分别在“人物”图层第2、3、4、5帧处按F6插入关键帧,并微调第2~5帧中元件角度。
10.新建图层6并重命名为“文字”,选择工具箱中的文本工具,在舞台中输入“中秋节快乐”,设置其字体为“方正舒体”,字体大小为“50”,字体颜色为黄色。
11.分别在图层“背景”、“边框”、“星星”、“月亮”、“人物”的第5帧处按F5插入普通帧。
12.按Ctrl+Enter键测试动画效果。
项目五FlashCS5简单动画制作
本项目将要学习FlashCS5在制作简单动画方面的有关知识。逐帧动画和补间动画是两种基本动画。熟练掌握它们的制作方法,是后面复杂动画以及综合动画制作成功的关键。同时,本项目将介绍复习FlashCS5动画的制作流程和输出方法。
了解动画的基本类型
熟练掌握逐帧动画的制作方法
熟练掌握形状补间动画的制作方法
熟练掌握动画补间动画的制作方法
逐帧动画的制作
形状补间动画的制作
动画补间动画的制作
动画的制作原理
逐帧动画
形状补间动画
动作补间动画
动画实例
任务一动画的基本类型之——逐帧动画
动画制作基本原理
动画制作流程
逐帧动画实例
(1)视觉暂留现象
(2)计算机动画形成原理
利用人的视觉暂留现象,用连续的静态图片(相邻图片之间有稍微不同)按一定的速度运行起来,就形成了动画。
(1)逐帧动画:创建每帧动画的内容,然后逐帧播放
(2)形状动画:指两个图形对象的变换,其变化效果是由Flash控制的,其动画效果是从一个图形转换为另一个图形。
(3)动作动画:指同一个对象不同状态的变化,其变化效果是由Flash控制的,常用于制作同一对象的位移、尺寸缩放、旋转、颜色渐变等效果。
⑴打开新影片文件并安排场景;
⑵插入动画元件(帧、图层等);
⑶设定动画效果并测试动画;
⑷使用文件/保存命令保存扩展名为.fla的Flash动画文件;
⑸输出影片.swf
(1)如果一幅动画中有两个或两个以上的不同类的对象同时运动,要把这些对象分别放在不同的图层上,使之各自独立,互不干扰。
(2)制作动画时,最好把一个动作单独放置在一个图层中,等这个图层制作好后,再制作另一个图层。
(如果我们担心有些帧之间图形的位置间隔不太恰当,可以打开显示模式,来查看各帧的相对效果)
单击“修改绘图纸标记”按钮,修改绘图纸外观标记的显示
本实例利用FlashCS3制作逐帧动画,实例最后平面效果如图所示(动画效果见本实例的源文件)。
任务二动画制作之——形状补间动画
补间动画的定义
补间动画的分类
补间动画的制作流程
补间动画实例
补间动画分两种:形状补间动画和动作补间动画。
形状补间动画:主要实现二个形状之间的变化,或一个形状的大小、位置、颜色等的变化。产生形状补间动画的关键帧之间用淡绿色背景的黑色箭头表示。
动作补间动画:主要实现一个元件的大小、位置、颜色、透明度等的变化等。产生动作补间动画的关键帧之间用淡紫色背景的黑色箭头表示。
形状补间动画制作步骤
7.要调整渐变过渡帧的变化速度。可以拖动“扩大值”旁边的箭头或输入一个值.
8.可以选择混合类型的一个选项。
控点的作用:在补间形状动画的起始和结束帧中设置控点以便对变形过程进行人为的控制。
设置控点方法:
例1:美女变脸
例2:色彩变化的彩球
颜色渐变动画其制作方法与形状补间动画类似。
例3:矩形大变身
在舞台中画二个矩形,让它们同时变形,一个加形状提示,一个不加形状提示,看看这二个变形有什么不同。
1、一个对象一层
2、一般一个对象要转换为元件
3、在形状动画中不要建立元件,对象要打散,形变的对象只能是普通的图形对象,如不是普通图形则必须首先按Ctrl+B分离。
任务三动画制作之——动作补间动画
动作补间动画的定义
动作补间动画的制作流程
动作补间动画实例(元件的五种变化:移动、缩放、旋转、颜色、透明度)
动作补间动画:用于对同一实例、组合体和文字的位置、大小、旋转、倾斜、颜色等属性产生渐变,生成一系列动作的动画效果。
3.在动画要结束的地方创建第二个关键帧,然后选择结束帧
4.更改结束帧中的实例、组或文本块,执行以下操作之一:
使用默认的电影属性,创建一个新文件。
选取绘图工具中的椭圆工具,设置笔触颜色为无,填充颜色为蓝黑渐变色,按住Shift键在舞台左上角绘制一个无边框的正圆。
(1)选中第20帧,击右键,单击插入空白关键帧在第20帧处插入空白关键帧。
(2)选择多角星形工具,如图:
(3)在舞台右下角,绘制一无边框红黑渐变色的五边形。如图:
(4)创建关键帧的动作回到第一帧,单击属性打开“属性”面板,在补间动画中选择形状。如图1-4:
执行Ctrl+回车,预览动画效果。
1、如何修改文档,使球体变成五角星之后再逐渐变为球体。
2、制作文字变形效果,数字5变成9(提示:文字制作变形效果必须将文字转换为图形,使用修改菜单中的分离命令)
任务五动作补间动画实例——转动的风车
变形面板的使用
组合对象
选择工具的使用
部分选取工具的使用
动作补间中使用旋转
学习任务:制作一个只有4个叶片的风车绕风车中心点旋转的动画。
操作步骤:
1、【插入】→【新建元件】
2、元件名称命名为“叶片”,行为选取“图形”,单击确定,进入元件编辑状态。
3、选择矩形工具,将设置笔触颜色为无填充色,填充颜色为绿黑渐变色。
4、在符号区中绘制矩形。
5、选择“部分选取工具”,选中矩形后,拖动矩形左下角顶点至矩形右下角顶点处,使左下角两个顶点重合,矩形变成三角形。
6、选择“选择工具”,移动鼠标指针到三角形的上边线处,鼠标变成箭头下跟圆弧线时,按住鼠标左键向上拖动,使之成为弧形。
7、使用“部分选取工具”,选中变形后的三角形,通过拖动该图形底部的控制点将上图调整为如下图所示的扇形。
8、拖动叶片符号,使扇形的顶点与符号编辑工作区的中心点“+”字重合,建立符号中心点。
1、建立名为“风车”的图形符号,进入符号编辑工作区。
2、使用Ctrl+L组合键打开库面板。弹出如图所示的窗口,从中选取叶片符号,并拖动符号到编辑工作区。如图所示
3、拖动扇形叶片符号使其顶点与风车符号中心点重合。
4、执行【窗口】→【设计面板】→【变形】命令,打开变形面板。
6、单击右下角的“复制并应用转换”按纽,复制叶片,绘制出风车图形,如图
7、执行【编辑】→【全选】命令,将叶片全部选中,然后执行【修改】→【组合】命令,将风车组合为一个整体。
1、单击场景1,回到工作区中,将风车符号拖到舞台上。
2、使用任意变形工具,调节风车符号的大小。
3、选择第10帧,按F6插入关键帧。
4、回到第一帧,单击属性打开“属性”面板,在补间框中选择“动作”。在旋转下拉列表中选择顺时针。
利作本课所学知识制作一个旋转的六角形雪花动画,你会吗?
项目六制作特殊动画
学习Flash不能局限于前面所讲的简单动画的制作方法,本项目将介绍Flash中特殊动画的制作方法,主要包括引导动画、遮罩动画和残影动画的制作。从制作原理上来说,它们都是由第5章所讲的3种基本动画演变而来的。但是这三种动画都需要由至少两个图层共同构成,因此制作方法相对基本动画而言较复杂。使用引导动画可以使对象沿设置的路径运动。使用遮罩动画可以制作不同的画面显示效果。制作残影动画时,主要应用到图层的创建、移动和复制等操作,对其中每一个图层的制作方法也与制作3种基本动画的方式相同。
掌握遮罩动画的制作方法
掌握残影动画的制作方法
遮罩动画的制作方法
引导层的应用
遮罩层的设置
制作遮罩动画
残影动画
任务一制作引导动画
引导动画的制作原理
引导动画制作的一般步骤
多层引导动画的制作
一个最基本“引导动画”由两个图层组成,上面一层是“引导层”,它的图层图标为,下面一层是“被引导层”,图标为,同普通图层一样。引导层是用来指示元件运行路径的,所以“引导层”中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。而“被引导层”中的对象是跟着引导线走的,可以使用影片剪辑、图形元件、按钮、文字等,但不能应用形状。
1、引导层
引导线必须制作在引导层中,而需要使用引导线作为运动轨迹线的物体所在层必须在引导层的下方,一个引导层可以为多个图层提供运动轨迹。同时在一个引导层中可以有多条运动轨迹。
图6-1
2、引导线
引导线就是轨迹或辅助线的作用。它让物体沿着引导线路径运行,运动的对象其关键帧必须完全吸附在轨迹上(即物体运动的轨迹,一般使用钢笔工具来制作)
图6-2
1、创建引导层和被引导层
2、引导层和被引导层中的对象
引导层是用来指示元件运行路径的,所以“引导层”中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。而“被引导层”中的对象是跟着引导线走的,可以使用影片剪辑、图形元件、按钮、文字等,但不能应用形状。由于引导线是一种运动轨迹,不难想象,“被引导”层中最常用的动画形式是动作补间动画,当播放动画时,一个或数个元件将沿着运动路径移动。
3、向被引导层中添加元件
“引导动画”最基本的操作就是使一个运动动画“附着”在“引导线”上。所以操作时特别得注意“引导线”的两端,被引导的对象起始、终点的2个“中心点”一定要对准“引导线”的2个端头。
1、“被引导层”中的对象在被引导运动时,还可作更细致的设置,比如运动方向,把【属性】面板上的【路径调整】前打上勾,对象的基线就会调整到运动路径。而如果在【对齐】前打勾,元件的注册点就会与运动路径对齐。
2、引导层中的内容在播放时是看不见的,利用这一特点,可以单独定义一个不含“被引导层”的“引导层”,该引导层中可以放置一些文字说明、元件位置参考等,此时,引导层的图标为。
3、在做引导路径动画时,按下工具栏上的【对齐对象】功能按钮,可以使“对象附着于引导线”的操作更容易成功。
4、过于陡峭的引导线可能使引导动画失败,而平滑圆润的线段有利于引导动画成功制作。
5、被引导对象的中心对齐场景中的十字星,也有助于引导动画的成功。
6、向被引导层中放入元件时,在动画开始和结束的关键帧上,一定要让元件的注册点对准线段的开始和结束的端点,否则无法引导,如果元件为不规则形,可以按下工具栏上的任意变形工具,调整注册点。
7、如果想解除引导,可以把被引导层拖离“引导层”,或在图层区的引导层上单击右键,在弹出的菜单上选择【属性】,在对话框中选择“正常”作为图层类型。
8、如果想让对象作圆周运动,可以在“引导层”画个圆形线条,再用橡皮擦去一小段,使圆形线段出现2个端点,再把对象的起始、终点分别对准端点即可。
9、引导线允许重叠,比如螺旋状引导线,但在重叠处的线段必需保持圆润,让Flash能辨认出线段走向,否则会使引导失败。
①引导层一旦建立完成后应将其锁定
②对运动对象定位时最好打开“帖紧至对象”工具,这样当吸附正确时中心点会放大。
多层引导动画实际就是利用一个引导层同时引导多个被引导层中的对象。
在制作引导动画时,系统一般只对引导层下的一个图层建立链接关系,如果要使引导层能够引导多个图层,可通过拖移图层到引导层下方或更改图层属性的方法添加需要被引导的图层即可。
实例1:小球的无规则运动
实例2:飞舞的蝴蝶
实例3:飘雪
任务二制作遮罩动画
遮罩动画制作的一般步骤
多层遮罩动画的制作
遮罩层是一个特殊的图层,能够透过该图层中的对象看到“被遮罩层”中的对象及其属性(包括它们的变形效果),但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。
在Flash中没有一个专门的按钮来创建遮罩层,遮罩层其实是由普通图层转化的。只要在某个图层上单击右键,在弹出菜单中选择“遮罩层”,使命令的左边出现一个小勾,该图层就会生成遮罩层,“层图标”就会从普通层图标变为遮罩层图标,系统会自动把遮罩层下面的一层关联为“被遮罩层”。
1、什么是遮罩
遮罩动画是Flash中的一个很重要的动画类型,很多效果丰富的动画都是通过遮罩动画来完成的。在Flash的图层中有一个遮罩图层类型,为了得到特殊的显示效果,可以在遮罩层上创建一个任意形状的“视窗”,遮罩层下方的对象可以通过该“视窗”显示出来,而“视窗”之外的对象将不会显示。
2、遮罩有什么用
在Flash动画中,“遮罩”主要有2种用途,一个作用是用在整个场景或一个特定区域,使场景外的对象或特定区域外的对象不可见,另一个作用是用来遮罩住某一元件的一部分,从而实现一些特殊的效果。
在Flash中没有一个专门的按钮来创建遮罩层,遮罩层其实是由普通图层转化的。你只要在某个图层上单击右键,在弹出菜单中选择【遮罩层】,使命令的左边出现一个小勾,该图层就会生成遮罩层,“层图标”就会从普通层图标变为遮罩层图标,系统会自动把遮罩层下面的一层关联为“被遮罩层”,在缩进的同时图标变为,如果你想关联更多层被遮罩,只要把这些层拖到被遮罩层下面就行了,如图所示。
遮罩层中的图形对象在播放时是看不到的,遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等,但不能使用线条,如果一定要用线条,可以将线条转化为“填充”。
被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层,可以使用按钮,影片剪辑,图形,位图,文字,线条。
可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段,从而使遮罩动画变成一个可以施展无限想象力的创作空间。
遮罩层的基本原理是:能够透过该图层中的对象看到“被遮罩层”中的对象及其属性(包括它们的变形效果),但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。比如,我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。
多层遮罩动画实际就是利用一个遮罩层同时遮罩多个被遮罩层的遮罩动画。
一般在制作遮罩动画时,系统只对遮罩层下的一个图层建立遮罩关系,如果要使遮罩层能够遮罩多个图层,可通过拖移图层到遮罩层下方或更改图层属性的方法添加需要被遮罩的图层。在FlashCS3中为遮罩层添加多个被遮罩层的方法主要有以下两种:
如果需要被遮罩的图层位于遮罩层上方,可以选取该图层,将其拖移至遮罩层下方。
如果需要添加的图层位于遮罩层下方,双击该图层上的图标,在打开的“图层属性”对话框中选中单选按钮即可
或许你读了上面的描述,还有点模糊,那么,通过一些范例,相信你会感受到遮罩动画的神奇!
制作一个“图片切换”动画,练习遮罩动画的制作方法。
学生实例练习
实例1:探照灯效果
实例2:放大镜效果
实例3:万花筒
实例4:MTV字幕效果
实例5:百叶窗效果
实例6:地球转动
任务三引导层动画实例
让对象沿路径运动
引导层的使用
导入图片作为背景
操作步骤:
选择【文件】-【新建】命令新建一个动画文件。
1、【文件】→【导入】→【导入到舞台】,导入一张花朵图片做为背景,调整图片大小、
位置,使之与舞台大小一致。并在图层1第70帧处单击F5插入帧。
三、制作蝴蝶飞的影片剪辑符号
1、按快捷键Ctrl+F8创建一个名为“蝴蝶飞””的影片剪辑元件。
2、执行【文件】→【导入】→【导入到舞台】命令,导入蝴蝶图片。
选用任意变形工具,蝴蝶图片四周出现8个小方框,把鼠标放在右下的小方框上,待鼠标变为一个圆形箭头,鼠标轻轻向左一拖,把蝴蝶转个方向,如图
5、用任意变形工具,把蝴蝶压扁。
四、制作蝴蝶沿路径飞的运动动画
2、按Ctrl+L快捷键,打开库面板。将蝴蝶元件拖入到舞台中,然后在“蝴蝶”图层中右键单击第70帧,选择插入关键帧(或按F6插入关键帧),
3、添加运动引导层
(1)、建立引导层,选中“蝴蝶”图层,选择【插入】-【运动引导线】命令,或者直接单击图层面板左下角第2个图标添加“引导层”按钮。
2、单击引导层,在引导层中用铅笔绘制出一条运动线,注意要将“工具”面板下面的图标改为平滑。如图4-5。
五、使蝴蝶沿路线运动
2、第1帧和第70帧之间创建“动作”动画,单击第1帧,打开属性面板,设置“补间”为[动作],勾选[缩放]、[调整到路径]、[同步]、[对齐]。
3、画制作完成。按“Ctrl+Enter”测试动画,由于引导层在动画输出时是不可见的,所以只看到一蝴蝶在飞。
4、测试影片,保存动画。
思考与拓展
1、再添加一只飞舞的蝴蝶,你会吗?
2、如果要让蝴蝶在花朵上停留一会儿,你将如何修改此文档?
任务四遮罩层动画实例——画轴打开
导入图片
遮罩的应用
操作步骤
一、新建空白文档
1、打开Flash,创建一空白文档,设置舞台尺寸。
单击“属性”面板上【大小】右边的“控件按钮”,弹出设置【文档属性】对话框,最上面【尺寸】是用来设定【舞台】大小尺寸的,输入宽度的值:300px(像素);高度的值不变:500px(像素),其他项保持不变,单击【确定】。如图
二、导入背景图片
打开【文件】菜单→【导入】→【导入到舞台】,打开导入对话框找到要导入的文件,单击【打开】,把一画导入到舞台,调整图片的最佳位置及大小。重命名此图层为“画”。如图。
三、制作画轴元件
1、执行【插入】菜单→创建新元件命令,名称输入“画轴”,行为选择“图形”,单击【确定】按钮,进入元件编辑窗口,单击矩形工具,笔触颜色选择无色,打开“混合器面板”,颜色样式框选择“线性”渐变,在下面的渐变工具栏中、中间设置白色,左右设置为褐黄色。利用矩形工具,在工作区中拖运鼠标,形成中间发亮的画轴。
2、单击“场景1”标签,回到场景,插入一新图层,命名为“遮罩”,利用矩形工具画一比背景画略宽的矩形,在此层60帧插入“关键帧”,调整第一帧,矩形大小高50像素,并置于画的顶端,单击第一帧,在“属性”面板中,补间动作设置为“形状”,右击此层名称栏,在快捷单中执行“遮罩层”命令。如图
3、插入上画轴
单击“插入图层”按钮,重命名为“上画轴”,然后,打开库面板,把“画轴”元件拖到画卷的顶端,调整位置大小。单击此画轴,复制此画轴(Ctrl+c键),锁定此图层。
四、制作下画轴动画
插入新图层,并重命名为“下画轴”,按【Ctrl】+【Shift】+【V】对上画轴进行原位置粘贴,然后利用光标键或鼠标拖动把此画轴移动到上画轴的下方。
单击第60帧,插入“关键帧”,并把此帧画轴拖动到画卷下方,再单击第一帧,打开“属性”面板,在补间栏选择“动作”。即可创下画轴从上到下的运动。如图
五、测试影片。
(Ctrl+回车键)。看画轴画卷展开是否协调,注意调整遮罩矩形的位置大小,直至达到满意效果。然后保存文档。
任务五遮罩层动画实例二——电影片尾字幕
调整图片Alpha值
为动画加入背景音乐
制作一个效果动画。(要求:自选一幅合适的图片作背景动画,字幕由下向上运动最后消失,并选择合适的音乐片段给片尾加背景音乐)
一、新建文件
1、创建一个背景为白色、宽为400像索、高为300像素的Flash文档。如图9-1
二、插入背景图形
1、执行【文件】→【导入】→【导入到舞台】命令或使用快捷键(Ctrl+R键),将外部图片导入到舞台中。调整图片大小,使之与舞台大小一致,作为背景图片、如果所选图片色彩较深的,可以先将其转换成符号,调整其Alpha值,使背景变淡。
2、在120帧处单击F5键插入相同的帧,将该层的名称改为“背景”。锁定“背景”图层。如图
三、制作文字动画
1、单击插入图层按扭,添加新层,并将其命名为“字幕”。
2、在“字幕”层的第一帧中,选择文字工具,设置字体,字号,字色,输入字幕内容,并将文字块置于如图所示的位置(舞台下方)。
3、在“字幕“图层的第120帧上按F6键,插入关键帧,并将文字块移动到下图所示的位置(舞台上方)。
4、在第一帧处创建运动补间动画。如图
四、设置遮罩效果
2、在“遮罩文字”图层第1帧,选择矩形工具绘制一个无边框有填充颜色的矩形,
如图9-4
3、在“遮罩文字”图层上单击鼠标右键,在弹出的快键菜单中,选择“遮罩层”命令。
五、加入背景音乐
先准备好背景音乐
1、新添加一层,并命名为“音乐”。
2、选择“音乐”层的第一帧,按ctrl+R键,打开[导入]对话框,在指定位置选择相应的声音文件。
3、打开属性面板,在面板的“声音”下拉列表中选择你要使用的声音文件。如图
六、测试动画通过后,根据需要保存文件。
本项目介绍了FlashCS3中特殊动画的制作方法,主要包括引导动画、遮罩动画和残影动画的制作。从制作原理上来说,它们都是由第5章所讲的3种基本动画演变而来的。但是这三种动画都需要由至少两个图层共同构成,因此制作方法相对基本动画而言较复杂。使用引导动画可以使对象沿设置的路径运动。使用遮罩动画可以制作不同的画面显示效果。制作残影动画时,主要应用到图层的创建、移动和复制等操作,对其中每一个图层的制作方法也与制作3种基本动画的方式相同。
项目七声音设置
熟悉Flash支持的音频文件
熟练掌握为动画添加声音的方法
独立完成制作出完整的Flash动画作品
Flash支持的音频文件
导入和编辑声音
压缩并导出声音
声音的应用
添加声音
编辑声音
压缩与输出声音
任务一添加声音
在动画中添加声音
在制作动画时,常需要为故事动画添加声音,为MTV和动态按钮添加音乐等。声音有传递信息的作用,为Flash动画添加恰当的声音,可以使Flash作品更加完整。下面将介绍在Flash动画中添加声音的方法。
Flash的声音分为事件声音和音频流两种。如果要把声音文件加入到Flash中,可以先将声音文件导入到当前文档的库。Flash可以导入的声音文件格式很多,一般情况下,在Flash中可以直接导入MP3格式和WAV格式的声音文件。
MP3格式体积小、传输方便、音质较好。虽然采用MP3格式压缩音乐时对文件有一定的损坏,但由于其编码技术成熟,音质还是比较接近CD的水平。同样长度的音乐文件,用MP3格式存储比用WAV格式储存的体积小十分之一。现在的Flash音乐大都采用MP3格式。
WAV格式是PC标准声音格式。WAV格式的声音直接保存声音数据,没有对其进行压缩,因此音质非常好。Windows系统音乐都使用WAV格式。但是因为其数据没有进行压缩,所以体积相当庞大,占用的空间也就随之变大,不过由于其音质很好,一些Flash动画的特殊音效也常常使用WAV格式。
在Flash动画中为了使人物或对象更加生动有趣,可以为其添加声音,以增强Flash作品对欣赏者的吸引。
2)如果在导入mp3声音文件时显示“读取文件时出现问题,一个或多个文件没有导入”,可以将该文件使用音频转换软件重新压缩或转换为wav文件后再导入。
Flash本身没有制作音频的功能,一般情况下,用户可以先用其他音频编辑工具录制一段音频文件,再将其导入到Flash文件中。将声音导入到库中后,即可为按钮和帧添加声音。
【练习7-1】:
1)打开素材文件7-1源文件.fla;
2)导入声音music.mp3;
3)打开库测试声音;
4)插入新层;在新层第1关键添加声音。
在制作交互动画时,常常会使用到按钮元件。在Flash中,可以为按钮的每种状态添加声音,从而制作出生动的动画效果。
为按钮添加声音的操作步骤:
使用专用测试窗口测试影片操作方法:
(3)、“HTML”选项卡
在【发布设置】对话框中,设置动画的发布格式后,可以对发布的动画格式进行预览。其具体操作如下:
(1)选择”文件/发布预览”命令,将弹出其子菜单。
(2)在该菜单中选择一种要预览的文件格式,即可在动画预览界面中看到该动画发布后的效果。
对动画进行了测试、优化、导出和发布设置后,就可以将动画上传到网上了。
在“发布设置”对话框中分别对选定的文件格式进行具体设置后,单击按钮即可完成动画的发布,并在Flash源文件所在位置生成一个网页格式的文件。选择该文件,然后单击鼠标右键,在弹出的快捷菜单中选择“打开”命令即可打开发布的文件,动画发布后的文件可以在IE浏览器中观看。
本次上机练习将把名为“花飘落”的动画发布到网上,发布预览效果。
(1)选择“视图”→“数据流图表”命令或“帧数图表”命令测试动画。
(2)学习优化动画、优化动画元素、优化文字的操作方法。
(3)掌握导出图像文件、导出声音文件、导出影片文件的操作方法。
(4)了解发布设置、发布flash影片、发布html网页、发布gif图像、发布JPEG图像的选项设置。
通过对项目内容的学习,读学生可以掌握到测试影片和优化作品的方法,同时还学习到发布影片和其他文件类型的设置方法。
项目十综合实例
了解Flash动画的制作方法和流程
掌握Flash动画制作的技术要点
Flash各案例的技术要点
Flash作品的制作步骤
Flash动画的制作方法和流程
跳动的小球
鼠标跟随效果
生日贺卡
任务一用Flash制作跳动的小球
制作一个简单的“小球运动”实例,添加按钮,控制小球的跳动。
启动FlashCS5,创建一个新空白文档。
图10-2-1
1、执行【插入】→【新建元件】命令,打开“创建新元件”对话框,名称框中输入“蝴蝶飞”,行为“选择”影片剪辑,单击“确定”按钮。如图10-2-2所示
图10-2-2
图10-2-3
1、执行【插入】菜单→【新建元件】,打开创建新元件对话框,名称栏输入“图形”,行为选择“按钮”,单击“确定”,进行按钮元件编辑窗口。如图10-2-4所示。
图10-2-4
2、在“点击”帧插入关键帧,单击“椭圆”工具,按下【shift】键,以工作区十字心为中心画一正圆。如图10-2-5所示。
图10-2-5
1、执行【插入】菜单→【新建元件】命令,打开“创建元件”对话框,名称框中输入“蝴蝶飞隐”,“行为”选择“影片剪辑”,单击“确定”,进入元件编辑窗口。
打开库窗口,从库中把“按钮”元件拖动到元件编辑工作区,与工作区中的“+”号对齐,并将此层命名为“圆形”,并将此层延伸到15帧。
3、选取“蝴蝶”层第2帧,插入关键帧,将“蝴蝶飞“元件,从库中拖到工作区,并且调整“蝴蝶”元件大小,且与“圆形”按钮重合。
图10-2-6
图10-2-7
单击“圆形“按钮,添加对象脚本:图10-2-8
on(rollover)﹛gotoAndplay(2)﹜
图10-2-8
单击“蝴蝶”层的第一帧,添加帧脚本:
stop()
图10-2-9
六、按【Ctrl】+【Enter】键测试影片,并保存文件。
如果使蝴蝶飞向远方,越来越小,并渐渐隐去,你如何修改此动画?
任务三用Flash制作生日贺卡
制作生日贺卡动画。共分五个场景。
片头:点明主题,标出制作者
主体(3个场景):制作生日贺卡
片尾:祝词
一、制作场景1。
1、修改文档属性,设置背景色为黑色。
打开【修改】菜单→【文档】,在“文档属性”对话框中设置背景颜色为“黑色”,单击【确定】
2、导入背景图片:执行【文件】菜单→【导入】→【导入到舞台】命令项,找到图片文件,单击【打开】,图片导入到舞台,调整图片位置、大小,在舞台右侧留出一块,准备写字。延伸此层到100帧,重命名此图层为“背景”,锁定此层。
图10-3-1
同样,在41帧,插入关键帧,在“记”字上方画一扁矩形,然后,在100帧处,插入关键帧,利用任意变形工具把矩形放大,遮住文字“记得今天是什么日子吗?”单击第41帧,打开“属性”面板,“补间”栏,选择“形状”。
右击图层名称,在快捷菜单中选择“遮罩层”。如图10-3-2所示。
图10-3-2
4、修改“文字”元件。
新建小狗元件:执行【插入】菜单→【新建元件】,名称框输入“小狗”,行为选“影片剪辑”,单击确定,进入元件编辑区,执行【文件】菜单→【导入】→【导入到舞台】打开对话框,把小狗.GIF图片,导入到舞台。如图10-3-3
图10-3-3
再次双击打开“文字”元件,在遮罩层上方,插入一个新图层,命名为“小狗”,在100帧插入关键帧,把“小狗”元件,拖到文字“朋友”下方,并在此帧添加“stop()”命令。如图10-3-4
图10-3-4
单击“场景”标签,回到场景,插入一个新图层,命名为“按钮“,然后,执行【窗口】菜单→【其它面板】→【公用库】→【按钮】,在场景右侧面板中出现【库-按钮】面板,展开此面板打开【Playback】项,找到【gelRight】按钮如图10-3-5所示,把它拖到场景的左下角,适当调整大小,单击选中此按钮,打开“动作-按钮”面板添加如下命令:
on(release){gotoAndplay(“场景2”,1)}
请注意引号和逗号均用英文半角字符,
单击第一帧,添加“stop()”命令。
图10-3-5
二、制作场景2
执行【插入】菜单→【场景】,进入新场景编辑区。
1、制作几个元件
执行【插入】→【新建元件】命令,打开“新建元件”对话框,“名称”输入“小精灵”,“确定”,进入文件编辑窗口,导入小精灵.GIF图片,执行【文件】→【导入】→【导入到舞台】,打开导入时对话框,找到“小精灵”图片,单击【打开】。图10-3-6
图10-3-6
同样利用“女孩.gif”图片,制作“跳舞”影片剪辑元件。
利用“唱歌.gif”图片制作“唱歌”影片剪辑元件。
利用“一桌饭菜.jpg”图片制作“饭菜”图形元件。
利用“生日蛋糕.jpg”图片制作“生日蛋糕”图形元件。如图10-3-6
利用“吹蜡烛.jpg”图片制作“吹蜡烛”图形元件。
插入新图层,命名为“文字”。执行【插入】→【新建元件】,名称框输入“文字2”,“行为”选择“影片剪辑”,单击【确定】,进入元件编辑区。单击文本工具“A”,在工具区输入:“今天是你的生日”,设置成隶书、40磅、红色、加粗,在40帧插入帧(F5键),插入新图层,命名为:“遮罩”,利用矩形工具,在文字左侧画一窄矩形、高度比文字略高,在40帧插入关键帧,利用“任意变形工具”,使矩形完全覆盖住文字,单击第一帧,打开“属性”面板,补间栏选择“形状”。右击图层名称,从快捷菜单中选择“遮罩层”命令。
单击场景标签,回到场景,把刚创建的“文字2”元件拖动到“女孩”头部。
插入新图层,命名为“脚本”。在第一帧添加脚本:stop()
把场景1按钮复制过来,具体方法:单击场景1按钮,按【Ctrl】+【C】组合键复制,回到场景2,【Ctrl】+【Shift】+【V】原位置粘贴,单击选中此按钮,如图10-3-7所示,打开“动作-按钮”面板修改为如下命令:
on(release){gotoAndplay(“场景3”,1)}
请注意引号和逗号均用英文半角字符。
图10-3-7
三、制作场景3
重命名图层1为“图片”,把库中的“饭菜”,拖到舞台中部,缩小图片,利用“属性”面板,颜色的Alpha值设为10%,在50帧处插入关键帧,并放大图片,Alpha值设为100%。
插入新图层,重命名为“文字”,在舞台右侧,插入竖排文字:“给你准备了一桌酒席”。
插入新图层,重命名为“遮罩”,在文字正上方,用矩形工具画一个矩形,在50帧处插入关键帧,利用“任意变形工具”,使矩形完全覆盖住文字,单击第一帧,打开“属性”面板,补间栏选择“形状”。右击图层名称,从快捷菜单中选择“遮罩层”命令。如图10-3-8所示:
图10-3-8
在“图片”图层51帧处插入空白关键帧,把库中的“生日蛋糕”元件拖动到舞台外左侧,利用“任意变形工具”缩小图片,在100帧处插入关键帧,放大图片至整个舞台。
在“文字”图层51帧处插入空白关键帧,利用文本工具输入一横排文字:“送上一盒蛋糕,送上一份祝福”,设置成隶书、30磅、绿色、加粗。在100帧处插入帧。
在“遮罩”图层51帧处插入空白关键帧,在文字左方,用矩形工具画一个矩形,在100帧处插入关键帧,利用“任意变形工具”,使矩形完全覆盖住文字,单击第51帧,打开“属性”面板,补间栏选择“形状”。
在“图片”图层101帧处插入空白关键帧,把库中的“吹蜡烛”元件拖动到舞台左侧,调整位置大小,把库中的“唱歌”元件拖动到舞台右侧,调整位置大小。如图10-3-9所示。
图10-3-9
制作“生日快乐”元件:执行【插入】→【新建元件】命令,打开“新建元件”对话框,“名称”输入“生日快乐”,行为选“影片剪辑”,单击确定,进入元件编辑区,新建三个层共四个层,由下到上分别命名为:“生”、“日”、“快”、“乐”;分别在1、3、5、7帧插入关键帧,用“文本工具”分别输入“生”、“日”、“快”、“乐”,各层分别在17、25帧插入关键帧,调整各层各关键帧文字位置,使每个字上下跳动。分别在起始帧和17帧设置“动作”补间。如图10-3-10所示。
图10-3-10
回到场景,在“文字”图层101帧处插入空白关键帧,把库中的刚制作“生日快乐”元件拖到舞台的右侧中部,调整位置大小。
导入声音“祝你生日快乐”(同导入图片文件),打开“属性”面板,在“声音”框选中刚导入的声音文件“祝你生日快乐”,“同步”框选择“事件”、“循环”。
把场景1按钮复制过来,并修改脚本为:on(release){gotoAndplay(“场景5”,1)},并在此帧处插入动作脚本:stop().如图10-3-11所示:
图10-3-11
四、制作片头——场景4
1、打开【插入】菜单→【场景】,进入新场景编辑区,重命名图层为“文字”,单击工具栏文本工具A,在舞台中部单击,输入“生日快乐”,单击箭头工具,退出编辑状态,打开“属性”面板,文本栏一定为“静态文本”,选择“颜色”为红色,字体为“华文行楷”字号为“72磅”,然后,鼠标拖动文字到舞台中部合适位置。在此层60帧处插入“帧”。
选中此图层第一帧,打开属性面板,“补间”栏选择“形状”。
在此图层名称处右击,执行快捷菜单的“遮罩层”命令项。如图10-3-12所示:
图10-3-12
执行【插入】菜单→【新建元件】命令项,制作出一个“play”按钮(过程略)
回到场景,打开库面板,把“play”按钮拖到舞台左下方,调整大小、位置。单击此按钮,打开动作面板,添加如下命令:
on(release){play()}
在此层的100帧处插入关键帧,打开动作面板,添加命令:
stop()//在此帧处停止播放动画片
最后,如图10-3-13所示:
图10-3-13
五、制作场景5——片尾
1、执行【插入】菜单→【场景】命令,进入场景编辑区.
2、双击图层名称修改为“文字”,在工作区中输入文字:
“送你一份祝福:
开心每一秒,
快乐每一天,
幸福每一年,
健康到永远!
送你一件礼物,
我自做的外套:
前面是平安,
后面是幸福,
吉祥是领子,
如意是袖子,
快乐是扣子,
口袋里满是温暖,
穿上吧,
让它相伴你的每一天!
生日快乐”
在200帧处插入关键帧,把文本移到舞台上方。
5、为了给祝词设置背景,可导入一张图片(过程略)。如果未被遮罩,可右击此图层名称栏,从快捷菜单中选择“属性”,打开“属性”对话框,选择“被遮罩”,单击【确定】,设为“被遮罩”层。如图10-3-14所示:
图10-3-14
最后,在200帧添加脚本:stop()。场景5如图10-3-15所示:
图10-3-15
六、调整场景顺序:
执行【窗口】菜单→【设计面板】→【场景】命令项,打开如下对话框:如图10-3-16
图10-3-16
利用此面板可进行场景的排序、复制、添加、删除操作。最下面三个按钮从左到右分别是“复制、添加、删除”场景按钮,影片的播放是按场景的前后顺序播放的,我们想先播放“场景4”即片头,就应把“场景4”即片头拖到场景1前。