本课资源下载
逐帧动画是一种常见的动画形式( Frame By Frame ),其原理是在“连续的关键帧”中分解动画动作,也就是 在时间轴的每帧上逐帧绘制不同的内容,使其 连续播放而成动画。
因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画 具有非常大的灵活性,几乎可以表现任何想表现的内容,而 它类似与电影的播放模式,很适合于表演细腻的动画。 例如: 人物或动物急剧转身、 头发及衣服的飘动、走路、说话 以及精致的 3D 效果等等。
5 . 1 利用逐帧动画制作林中散步的女孩
学习目的
本节你将学习掌握以下知识:
u 逐帧动画的制作方法
u 【绘图纸外观】按钮 的使用方法
u 【编辑多个帧】按钮 的使用方法
u 【修改绘图纸标记】按钮 的使用方法
u 【对齐面板】的使用方法
u 插入帧与删除帧
学习方法
本节要学习的是将几张 静态图片连续导入到 Flash 中,并利用【绘图纸】功能及【对齐面板】将图像对齐,最后建立一段林中散步女孩的逐帧动画。
对于初学者来说,将图片导入到Flash 中非常容易做到,但是同时编辑所有导入的图片,并且将它们对齐放在合适的位置,在这点上初学者可能就会一知半解了。本节主要教给你一种同时编辑多个对象的简单方法,并且通过本节的讲解,初学者可以照葫芦画瓢的制作出精彩的课后练习,来加强学习成果,提高学习兴趣。
课前热身
( 1 )创建影片文档
执行 【文件】| 【新建】命令,在弹出的对话框中选择【常规】| 【Flash 文档】选项后,单击【确定】按钮,新建一个影片文档。在【文档属性】对话框中进行设置:文件大小为550 ×480 像素,【背景色】为白色,如图5-1-1 所示。
图5-1-1 设置文档属性
( 2 )修改图层名称
双击 【 图层 1 】 的图层名称,将其图层名称修改为 【 背景 】,如图5-1-2 所示 。
图 5-1-2 修改图层名称
专家提示:及时修改图层名称让其与内容相对应,可以更准确快速的找到每个图层中的内容,方便编辑与修改,所以养成一个良好的图层命名习惯是必要的。
( 3 )导入背景图片及人物图片
单击【 背景 】层第一帧, 执行【文件】 | 【导入】 | 【导入到舞台】命令,将素材包 1 中的“背景 .bmp ”图片导入到场景中, 选择第 16 帧,按下 F5 插入帧,使帧的内容延续到第 16 帧,如图 5-1-3 所示。
图 5-1-3 导入背景图片
新建一个图层,命名为 【 人物 】 。单击此层第1 帧, 执行【文件】 | 【导入】 | 【导入到舞台】命令,弹出。。。。。将素材包 1 中的走路系列图片导入(只需选中走路 1.gif 导入即可) 。此时会弹出一个对话框,如图 5-1-4 所示。
图 5-1-4 系列图片导入
选择 【是】按钮, Flash 会自动把 gif 中的图片序列按序号以逐帧形式导入到场景中,如图 5-1-5 所示。
图 5-1-5 导入的 gif 动画在场景的上方形成帧帧动画
如下图 5-1-6 所示是导入后的动画序列,它们被 Flash 自动分配在 8 个关键帧中。
图 5-1-6 导入的 8 张图片
(4 )多帧编辑调整对象大小
虽然图片已经导入进来了,但是导入的序列图片大小已经超出了场景范围。我们可以一帧帧来调整图片大小:先将一幅图缩小,将其位图的宽高值记下,再把其它图片设置成相同坐标值。但是这种作法非常浪费时间, Flash 软件已经为大家准备好了 【编辑多个帧】按钮 ,下面就一起来进行多帧编辑。
专家提示: 缺省状况下,导入的对象被放在场景坐标“0 ,0 ”处,而且大小有可能与场景内容不符,所以我们必须调整其大小并移动它们。
单击 【 背景 】 图层在 【时间轴】面板小黄锁下方的黑点,对此图层进行 加锁,如图 5-1-7 所示。
图 5-1-7 锁定背景层
专家提示: 在进行多帧编辑时,编辑的是场景中全部对象,为了避免误操作,所以要将一些不需要编辑的图层进行锁定。
单击 【 时间轴 】 面板下方的 【编辑多个帧】按钮 ,再单击 【修改绘图纸标记】按钮 ,在弹出的菜单中选择【绘制全部】命令,如图 5-1-8 所示。
图 5-1-8 选择显示全部选项
最后 执行 【编辑】 | 【全选】命令,此时时间轴和场景效果如图 5-1-9 所示。
图 5-1-9 选取多帧编辑
在【属性】面板上单击黑锁按钮 将长宽比例锁定,设置宽为120 ,按下【回车】键后所有选中的图像变小,如图5-1-10 所示。
图5-1-10 调整位图大小
利用【工具箱】中的【选择工具】 将所有图片拖放到场景中央, 执行【窗口】 | 【设置面板】 | 【对齐】命令(快捷键 Ctrl+K ),在弹出的【对齐】面板中单击【上对齐】按钮 ,将所有的图像上方对齐,如图5-1-11 所示。
图5-1-11 上对齐位图
单击 【编辑多个帧】按钮 ,取消编辑多个帧。再单击一下【绘图纸外观】按钮 ,用鼠标选中每一帧上的位图,利用键盘上的左右方向键移动位图,使所有位图重叠在一起,如图 5-1-12 所示。
图 5-1-12 移动图像使其重叠
单击【绘图纸外观】按钮 取消其多帧查看效果。
(5 ) 插入帧与删除多余的帧
现在可以按“Ctrl+Enter” 测试一下动画效果,会发现,一帧一个动作对于人物走动来说速度过于太快,所以在【人物】图层的各帧上按一下F5 (插入一帧),如图5-1-13 所示。
图5-1-13 将【人物】层各帧延长一帧
指 点迷津——插入帧的其它两种方法是: ① 在 【时间轴】 要插入帧的地方右击,在弹出的快捷菜单中选择 【插入帧】命令。 ② 执行 【插入】| 【时间轴】| 【帧】命令 。
选中17 帧至24 帧,在时间轴上右击,在弹出的快捷菜单中选择 【删除帧 】命令,将多余的帧删除,如图5-1-14 所示。
图5-1-14 删除帧
(6 ) 测试存盘
执行【控制】| 【测试影片】命令(快捷键Ctrl+Enter ),观察动画效果,如果满意,执行【文件】| 【保存】命令,将文件保存成“走路.fla ”文件,如果要导出Flash 的播放文件,执行【文件】| 【导出】| 【导出影片】命令。
至此,一个在林中散步的漂亮女孩逐帧动画就制作完成了(参见素材包1 )。
课堂讲解
在前面的“课前热身”中,我们利用实例讲解了 【对齐面板】中的上对齐功能,利用导入静态图片创建逐帧动画的方法,还讲解了【绘画纸】里的【绘图纸外观】按钮 、【编辑多个帧】按钮 、【修改绘图纸标记】按钮 的使用方法。下面详细的讲解一下【绘画纸】的功能、【对齐面板】的应用,并给大家归纳总结创建逐帧动画的方法。
1 .【绘画纸】的功能
【绘画纸】是一个帮助定位和编辑动画的辅助功能,这个功能对制作逐帧动画特别有用。通常情况下, Flash 在舞台中一次只能显示动画序列的单个帧。使用绘画纸功能后,你就可以在舞台中一次查看两个或多个帧了。
如图 5-1-15 所示,这是使用【绘画纸】功能后的场景,可以看出,当前帧中内容用全彩色显示,其它帧内容以半透明显示,它使我们看起来好像所有帧内容是画在一张半透明的绘图纸上,这些内容相互层叠在一起。当然,这时你只能编辑当前帧的内容。
如图 5-1-15 同时显示多帧内容的变化
【绘画纸】各个按钮的功能:
● 【绘图纸外观】按钮:按下此按钮后,在时间帧的上方,出现 绘图纸外观标记。拉动外观标记的两端,可以扩大或缩小显示范围。
● 【绘图纸外观轮廓】按钮:按下此按钮后,场景中显示各帧内容的轮廓线,填充色消失,特别适合观察对象轮廓,另外可以节省系统资源,加快显示过程。
● 【编辑多个帧】按钮:按下后可以显示全部帧内容,并且可以进行“多帧同时编辑”。
● 【修改绘图纸标记】按钮:按下后,弹出菜单,菜单中有以下选项:
【总是显示标记】选项:会在时间轴标题中显示绘图纸外观标记,无论绘图纸外观是否打开。
【锚定绘图纸】选项:会将绘图纸外观标记锁定在它们在时间轴标题中的当前位置。通常情况下,绘图纸外观范围是和当前帧的指针以及绘图纸外观标记相关的。通过锚定绘图纸外观标记,可以防止它们随当前帧的指针移动。
【绘图纸 2 】选项;会在当前帧的两边显示两个帧。
【绘图纸 5 】选项;会在当前帧的两边显示五个帧。
【绘制全部】选项;会在当前帧的两边显示全部帧。
2 .【对齐面板】的应用
使用【对齐面板】,可以对编辑区中多个对像进行排列、分布、匹配大小、调整间隔等操作,使布局整齐美观,如图 5-1-16 所示。
图 5-1-16 对齐面板
【对齐面板】由排列对齐、分布对齐、匹配大小、间隔以及相对舞台同几部分组成:
( 1 )排列对齐(水平排列和垂直排列)
① 水平排列 : 从左到右分边是水平方向的左对齐、左右居中对齐、右对齐。
② 垂直排列 :从左到右分边是垂直方向的上对齐、上下居中对齐、下对齐。
( 2 )分布对齐(水平分布和垂直分布):
① 水平分布 :从左到右分别为垂直方向基于上边缘的分布、基于中心的分布、基于下边缘的分布。
② 垂直分布 :从左到右分别为水平方向基于左边缘的分布、基于中心的分布、基于右边缘的分布。
( 3 )匹配大小 :将一组对象的宽度、高度或两者调整为对象的最大尺寸。从左到右分别为水平对齐、垂直对齐、水平垂直对齐。
( 4 )间隔 :将一组对象在水平或垂直方向上按照等间距的方式排列。从左到右分别为水平间距的调整、垂直间距的调整。
( 5 )相对舞台 :在默认状态时上述按钮的操作是对于对象本身的,单击此按钮后,则所做的操作是相对于舞台的。
3 .创建逐帧动画的方法:
( 1 )用导入的静态图片建立逐帧动画:用 jpg 、 png 等格式的静态图片连续导入到 Flash 中,就会建立一段逐帧动画(参考实例:走路)。
( 2 )绘制矢量逐帧动画:用鼠标或压感笔在场景中一帧帧的画出帧内容(参考实例:雪莲花)。
( 3 )文字逐帧动画:用文字作帧中的元件,实现文字跳跃、旋转等特效。
( 4 )指令逐帧动画:在时间帧面板上,逐帧写入动作脚本语句来完成元件的变化。
( 5 )导入序列图像:可以导入 gif 序列图像、 swf 动画文件或者利用第 3 方软件(如 swish 、 swift 3D 等)产生的动画序列。
课后练习
1 .利用导入静态图片建立逐帧动画法制作骏马飞奔的动画。(素材包 2 )
2 .利用绘制矢量逐帧动画法制作盛开的 雪莲花(请参考下载资源中的范例源文件)。
3 .利用文字逐帧动画制作文字跳跃、旋转特效。
4 .利用导入素材包4 中的7.gif 动画图片制作小鸟飞的逐帧动画。
5. 利用素材包 4 中 sucai.fla 制作出 天篷元帅斗篷的飘动效果(在 斗篷与领带两层制作逐帧动画) 。
专家提示:用选择工具及部分选取工具逐帧修改对象衣角,形成斗篷与领带飘动效果,其每帧图像效果如图5-1-17 所示。
逐帧动画第 1 帧 逐帧动画第 2 帧 逐帧动画第 3 帧
图 5-1-17 天篷元帅斗篷的飘动效果逐帧动画