Flash 8 形状补间动画详解及实例
- 格式:doc
- 大小:685.00 KB
- 文档页数:10
图3-6-4图层【属性】面板(8)如果想让对象作圆周运动,可以在“引导层”画个圆形线条,再用橡皮擦去一小段,使圆形线段出现2个端点,再把对象的起始、终点分别对准端点即可。
(9)引导线允许重叠,比如螺旋状引导线,但在重叠处的线段必需保持圆润,让Flash能辨认出线段走向,否则会使引导失败。
实例:海底世界海底是很多人向往的神秘世界,今天,我们就用Flash来试着描绘这个世界。
这个实例中包括了补间运动动画、补间形状动画、遮罩动画、引导路径动画等四种动画形式,制作上要比前面几课中的实例难度大一些,不过,它能综合复习前面学过的内容,操作原理也是我们熟悉的,相信你一定能顺利完成这个实例,其运行效果如图3-6-19所示。
图3-6-19 海底知识提要 1、综合应用四种动画形式 2、创建透明水泡 3、创建多层遮罩制作步骤(1)创建影片文档新建一个影片文档,舞台尺寸设置为450*300象素,【背景色】设置为深蓝色,如图3-6-20所示。
图3-6-20 文档属性(2)创建元件本例中的元件较前面的实例要多一些,我们把它们分成“水泡部分”、“海底部分”、“游鱼部分”三个部分来叙述。
先来创建和水泡有关的部分。
1、创建“单个水泡”元件执行【插入】|【新建元件】命令,新建一个图形元件,名称为“单个水泡”。
先在场景中画一个无边的园,颜色任意,大小为30*30,再设置混色器面板的参数,四个调节手柄全为白色,Alpha值从左向右依次为100%、40%、10%、100%,如图3-6-21所示,用油漆筒工具在画好的圆的中心偏左上的地方点一下,如对填充的颜色不满意,可以用填充变形工具进行调整。
图3-6-21 水泡、填充位置及混色器面板参数图 3-6-22 水泡及引导线2、创建“一个水泡及引导线”元件执行【插入】|【新建元件】命令,新建影片剪辑,名称为“一个水泡及引导线”。
点击添加引导层按钮添加一个引导层,在此层中用铅笔工具从场景的中心向上画一条曲线并在第60帧处加普通帧。
Flash8基础入门实例教程为了避免学习本软件枯燥无味,本教程按照flash动画类型进行讲解,在制作动画实例的过程中顺便学习flash工具的使用方法,flash8有以下四种基本动画类型:逐帧动画、形变动画、运动动画和路径动画(也叫引导动画),另外还有一个很重要的遮罩效果(有些教程里提到flash有5种动画,其实是把这招效果看做了一种动画,实质上遮罩只是一种效果,遮罩层类似于PS的蒙板),下面我们就结合实例,对每种动画进行讲解和演示。
一、逐帧动画在时间帧上逐帧绘制帧内容称为逐帧动画,由于是一帧一帧的画,所以逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容。
逐帧动画在时间帧上表现为连续出现的关键帧,实例一:制作一个倒计时54321的动画。
步骤:1、点击图层第一帧,在舞台上输入数字5。
【小技巧】对齐对象。
点击选择工具,选中“5”,打开对齐工具面板【Ctrl+K】点击相对于舞台按钮,在纵向和横向上将文字对齐于屏幕中心点。
2、按F6快捷键,插入4个关键帧。
3、依次将2-5关键帧的数字改为4321.4、保存flash文档,CTRL+S,命名为逐帧动画,点击保存。
5、测试影片,CTRL+回车,或者用控制菜单的【测试影片】命令。
查看效果。
6、此时发现数字变化太快,我们可以用以下方法修改。
(1)方法一修改帧率,CTRL+J打开文档属性面板,看到帧率为12,也就是说每秒钟播放,可以调整为1,也就是每秒播放1帧,CTRL+K测试效果。
(2)方法二,延长帧,将每一帧拖至12帧长,最后一帧在需要延长到的帧格里俺F5插入帧。
(我们提倡用此方法,这样做出的动画适合web播放)二、形变动画(即形状渐变动画)就是从一个形状通过多帧变化为另一个形状的动画。
实例:圆形 方形步骤:1、在第一帧用椭圆工具,画一个圆,点中椭圆工具后可以调整笔触和填充颜色,这里我们笔触选择无,填充用红色,画圆的时候按下SHFIT拖动可以画出正圆。
2、利用选择工具,选中圆形,用对齐工具将圆对齐至屏幕中心点。
Flash 8 动作补间动画详解及实例动作补间动画也是Flash中非常重要的表现手段之一,与“形状补间动画”不同的是,动作补间动画的对象必需是“元件”或“成组对象”。
运用动作补间动画,您可以设置元件的大小、位置、颜色、透明度、旋转等种种属性,配合别的手法,您甚至能做出令人称奇的仿3D的效果来。
本实例详细讲解了动作补间动画的特点及创建方法,并分析了动作补间动画和形状补间动画的区别,我们精心设计的一个实例将带您进一步加深对动作补间动画的了解。
1.动作补间动画的概念(1)动作补间动画的概念在Flash的时间帧面板上,在一个时间点(关键帧)放置一个元件,然后在另一个时间点(关键帧)改变这个元件的大小、颜色、位置、透明度等等,Flash 根据二者之间的帧的值创建的动画被称为动作变形动画。
(2)构成动作补间动画的元素构成动作补间动画的元素是元件,包括影片剪辑、图形元件、按钮等等,除了元件,其他元素包括文本都不能创建补间动画的,其他的位图、文本等等都必须要转换成元件才行,只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。
(3)动作补间动画在时间帧面板上的表现动作补间动画建立后,时间帧面板的背景色变为淡紫色,在起始帧和结束帧之间有一个长长的箭头,如图3-4-1所示。
图3-4-1 动作补间动画在时间帧上的表现(4)形状补间动画和动作补间动画的区别形状补间动画和动作补间动画都属于补间动画。
前后都各有一个起始帧和结束帧,二者之间的区别如下表所示。
区别之处动作补间动画形状补间动画在时间轴上的表淡紫色背景加长箭头淡绿色背景加长箭头现组成元素影片剪辑、图形元件、按钮形状,如果使用图形元件、按钮、文字,则必先打散再变形。
完成的作用实现一个元件的大小、位置、颜色、透明等的变化。
实现二个形状之间的变化,或一个形状的大小、位置、颜色等的变化。
5)创建动作补间动画的方法在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件,一帧中只能放一个项目,在动画要结束的地方创建或选择一个关键帧并设置该元件的属性,再单击开始帧,在【属性面板】上单击【补间】旁边的“小三角”,在弹出的菜单中选择【动作】,或单击右键,在弹出的菜单中选择【新建补间动画】,就建立了“动作补间动画”。
FLASH实例练习--传统补间和形状补间动画教学提纲
F L A S H实例练习--传统补间和形状补间动
画
精品资料
实例一:字母动画
1、新建舞台,设置舞台大小和背景颜色,帧频为12
2、用文字工具“welcome”,将字母打散,调整各个字母的颜色,选中所有字
母右键选择分散至各个图层,分别选中各个字母转换为图片元件
3、选中W图层,在12帧处打一个关键帧,调整12帧处的位置,ALPHA
值,做出飞入淡入效果,在任意帧处右键选择传统补间动画,选中任意帧,在帧属性面板上选择补间-旋转,做出旋转效果
4、选中E图层,将第1帧移至第13帧,在25帧处打一个关键帧,照以上步
骤给E字母做出旋转淡入飞入效果
5、将各个字母依次做出旋转淡入飞入效果
6、用传统补间动画为各字母做出变色效果,结尾做出放大淡出效果
实例二:摇摆的坠子
1、新建舞台610*320,舞台色黑色,帧频为30
2、用矩形工具绘制圆角方块,填充色为线性渐变,第一个色标
(64,146,200),第二个色标(112,158,203),第三个色标
(255,255,255),笔触为4,边框为线性渐变,第一个色标
(191,191,191),第二个色标(255,255,255),第三个色标
(200,200,200),第四个色标(64,64,64),圆角参数为5
3、用线条和椭圆工具来绘制连接绳子,最后将图形转换为图形元件
4、新建图层,命名为背景,拖至最下层,从文件-导入-导入到舞
台,导入背
景图片
仅供学习与交流,如有侵权请联系网站删除谢谢2。
flash“形状补间”动画教案(精)第一篇:flash“形状补间”动画教案(精)Flash“形状补间”动画教案学科名称:计算机班级:初二八班课时:一节课一、教学目标:1、知识与技能:(1)掌握形状补间动画的制作方法(2)掌握实例属性的设置(3)了解组合与打散的概念2、过程与方法:通过“圆变方”等动画的制作,掌握形状补间动画的一般制作方法。
3、情感态度与价值观:通过动画的制作,进一步激发学生学习动画的积极性,培养学生自主探索的精神.二、教学重点:掌握形状补间动画的制作方法。
三、教学难点:1、能够对实例属性进行设置2、将组合实例打散的方法四、教学方法:演示法、任务驱动法五、教学媒体:计算机六、教学过程:1、创设情境,导入新课教师播放一个简单的“圆变方”形状补接动画,提问,导入新课。
设计意图:激发学生的学习兴趣。
2、新课教学(1).先让学生建个自己的文件夹(2). 演示并逐步教“图形变形”动画,一一制作动画,让一个愿变成矩形① 启动flash,选定“椭圆工具”,用适当的颜色在舞台上画一个圆② 单击“时间轴”面板中的第1帧,在“属性”面板中单击补间框,打开下拉列表,再单击其中的“形状”选项,把补间类型设置为形状③ 单击“时间轴”面板中的的50帧,执行“插入、空白关键帧”命令,(或F7)插入空白关键帧④ 选定“矩形工具”,在舞台中画一个矩形⑤ 仿照第2步到第4步操作,在时间轴面板的第2022入空白关键帧,画一个三角形⑥ 敲回车键,播放动画,观看效果⑦ 保存文件到自己的文件夹3、巩固练习让学生掌握图形变形之后,尝试着把图形变为文字(可以是自己的名字),发现其中的问题并解决问题(期间讲解使用文字工具制作的文字不能直接做形状补间动画的原因,并提出“打散”与“组合”概念)。
七、备注:1. 在形状补间动画的起始关键帧和结束关键帧之间,会显示一条带箭头的浅绿色背景的直线,表名在两个关键帧以及他们之间所有帧生成了一个形状补间动画2.关键帧中图片、文字等元件的分离操作是“形状补间动画”制作的关键第二篇:flash教案补间形状动画三(精)补间形状动画【课时】 3课时【教学目标】一. 知识目标 1.熟练形变制作; 2.能看懂设计原理; 3.能根据需进行形变动画的设计创作;二. 能力目标1.培养学生观察的能力,发展学生的动手实践能力;2.建立探求规律和分析解决问题的能力,促进学生个性发展;三. 德育目标培养学生互帮互助的精神;【重点难点】重点:元件中形变与舞台中形变的区别与联系。
实践课课时教案1.清点人数,设备情况二、讲解示范与学生练习(1)复习如何将文本打散(CTRL+B)要求学生制作一个彩虹填充文字(学生制作,关键一步将文字打散)。
(2)、新授课1、引入(西游记的孙悟空的变形,孙悟空有多少变化?同学们想拥有孙悟空的本领吗?——教师出示做好的(形状补间变形动画)动画4.1(引入)(3)、讲Flash动画的分类:1、形状补间动画(针对矢量物品);2、动作补间动画(针对元件实例)注意:矢量图形是计算机图形学中用或点、直线、多边形等基于数学方程的几何图元表示图像。
1、形状补间动画的定义形状:特定事物或物质的一种存在或表现形式补间:计算机通过相关软件的补充中间的动画过程(没有准确定义)要点:在两个关键帧中分别放置不同的形状,通过属性设置让Flash软件根据两者的内容来创建动画。
时间帧面板特点:淡绿色的箭头在两个关键帧之间连接。
2、形状补间动画操作步骤:1、动画的起始帧:在该位置插入关键帧(F5——帧,F6——关键帧F7——空白关键帧),放置变形对象的起始状态。
调整位置。
2、确定结束帧:在该位置插入空白关键帧,放置变形的结束对象,并设置状态。
3、创建动画:时间帧面板上单击第一帧,选择属性面板的补间旁边的小三角形,选择形状(观察时间帧面板上的相应图层的颜色、箭头为实心)4、测试动画实例1:图形补间(图形之间相互转换)1、自绘图形3、形状补间动画属性参数设置1、缓动(查看位置,拖动滑杆)。
负值(动画运动速度从慢到快,朝运动结束的方向加速补间);正值(动画运动速度从快到慢,朝运动结束的方向减慢补间)。
学生经过实验总结出以上结论,然后验证2、混合(查看位置,选项内容)。
角形(创建的动画中间形状会保留有明显的角和直线,适合于具有锐化转角和直线的混合形状);分布式(创建的动画中间形状比较平滑和不规则)。
补充资料:补间形状通过补间形状,可以创建类似于形变的效果,使一个形状看起来随着时间变成另一个形状。
公开课教案◆课题:动作补间动画◆授课人:董新颐◆授课班级:09动漫◆授课地点:三号机房◆授课时间:2009年10月22日(下午第二堂课3:00--3:45)《Flash8.0基础教程》公开课授课人:董新颐教学班级:09动漫授课时间:2009年10月22日授课地点:三号机房【课题】动作补间动画【课型】新授课【教学目标】情感目标:①培养学生的自主学习意识②通过完成实际操作,体验成功,养成认真、严谨的科学态度知识目标:①理解动作补间动画的概念②熟记制作简单动作补间动画的流程③会设置“动作补间动画”的属性技能目标:能独自制作一个简单的动作补间动画【教学重点】①掌握动作补间动画的概念②掌握制作简单动作补间动画的流程③动作补间动画的属性设置【教学难点】①如何制作动作补间动画②如何设置动作补间动画的属性【教学方法】讲解演示法,任务驱动法,练习法【教具】利用多媒体教学手段【教学过程】复习导入在前面的学习过程中,我们学习了形状补间动画的相关知识,回顾一下:演示一个三维动画案例给学生看,辅助学生回忆相关的知识。
1、形状补间动画的概念。
2、形状补间动画在时间帧面板上的表现。
3、创建形状补间动画的步骤。
4、在创建形状补间动画时使用形状提示。
新课讲授演示一个皓月当空的动画,引入本节课的内容。
一、动作补间动画的概念(1)动作补间动画的概念动作补间动画:是在起始帧上放置一个元件实例,然后在结束帧中改变这个元件实例的属性,再让Flash根据两者之间的差值创建动画。
只要确定了起始帧和结束帧的内容,那么Flash就可以把中间的过程补充完整。
(2)动作补间动画在时间帧面板上的表现包含动作补间动画的帧,它的背景色是淡紫色的,并且在起始帧和结束帧之间有一个长箭头连接起来,如图所示。
动作补间动画在在时间轴上的体现(3)动作补间动画与形状补间动画的区别形状补间动画和动作补间动画都属于补间动画。
他们都各有一个起始帧和结束帧,都用一根箭头连接。
步骤/方法
1、新建一个flash文档。
2、文件——导入——导入到库,然后双击位图,把文档大小改来和位图一样。
3、接着设置位移属性。
4、选择椭圆工具,把笔触色和填充色全部调整为黑色。
5、新建一个图层,在图层2上面画一个圆,移动到背景素材上面,调整大小,最后看不出来的样子。
6、然后在图层二80帧处插入关键帧,用文本工具打上字。
7、选择工具选中该字,然后右键——分离,就会出现如下图所示的效果。
8、点击图层2的中间部分,然后下面属性栏中会出现补间,选择形状就可以了,然后时间轴上会出现如下的一条线。
9、接着再新建一个图层,,在70帧片插入一个关键帧,用椭圆工具画一个小圆,然后在1 50帧处插入关键帧,打上另外一个字,分离,做形状补间动画。
10、同样的方法把所有的字做好。
11、最后保存为.swf格式!。
Flash8.0(中⽂版)教程与实例解析Flash动画制作内容提要⼀、基本概念:⽮量图,点阵图,元件,库,实例,帧和关键帧,时间轴,层,组合与分离⼆、Flash基本绘画三、制作:动作补间动画和形状补间动画四、制作:引导层动画和遮罩动画五、声⾳的导⼊和制作影⽚剪辑⼀、Flash基本操作与简介1、保存⽂档:“另存为”保存⽂件名称、路径Flash源⽂件的后缀是.fla2、输出动画:“导出影⽚”命令,可以把作品输出成.swf格式的动画⽂件3、位图模式:采⽤点阵⽅式来记录,从图像左上⾓第⼀个点开始,到右下⾓最后⼀个点结束,记录所有像素的颜⾊值。
该存储模式⽐较适合于内容复杂的图像和真实的照⽚,但图像在放⼤和缩⼩的过程中会失真,占⽤磁盘空间也较⼤。
位图图像由像素组成,每个像素都被分配⼀个特定位置和颜⾊值。
数码相机拍摄的照⽚、扫描仪扫描的稿件以及绝⼤多数的图⽚都属于点阵图。
位图图像与分辨率有关,即在⼀定⾯积的图像上包含有固定数量的像素。
因此,如果在屏幕上以较⼤的倍数放⼤显⽰图像,或以过低的分辨率打印,位图图像会出现锯齿边缘。
4、⽮量图模式:是存储图像内容的轮廓部分。
例:⼀个圆形图案只要存储圆⼼的坐标位置和半径长度,以及圆形边线和内部的颜⾊。
优点是图像的缩放不会引起图像失真,图像的存储空间⽐位图⽅式要少得多,且便于修改。
⽮量图形由称为⽮量的数学对象定义的线条和曲线组成,⽮量根据图像的⼏何特性描绘图像。
⽮量图形与分辨率⽆关。
⽮量图形是表现标志图形的最佳选择。
⼆、Flash⼯具运⽤1、绘制线条(1)线条⼯具:绘制各种类型线段(2)钢笔⼯具:绘制精确的路径、直线或曲线,可调节直线的⾓度和长度,修改曲线的弧度。
(3)铅笔⼯具:可随意绘制各种线条和形状,有三种模式可供选择2、绘制图形(1)椭圆⼯具:绘制椭圆或圆(2)矩形⼯具:绘制矩形或正⽅型(3)多⾓星型⼯具:绘制多边型或星型3、设置图形颜⾊(1)墨⽔瓶⼯具填充或改变图形的轮廓线颜⾊(2)颜料桶⼯具可以为图形填充颜⾊4、编辑图形(1)任意变形⼯具⽤于移动、旋转、缩放和变形对象(2)填充变形⼯具⽤于变换具有渐变填充的效果(3)选择⼯具⽤于选中对象和改变对象的边线(4)部分选择⼯具⽤于修改图形⼤⼩、形状和路径5、对象的组合与分离(1)对象的组合执⾏“修改”—“组合”命令,可以将多个对象组合为⼀个整体,对这个整体进⾏单独的编辑。
动画补间与形状补间实例一:将一个小圆变化成大圆步骤:1、新建一个flash文档,550*400px,背景白色2、在图层一的第一帧,插入一个关键帧,按住shift键,使用椭圆工具画一个无边框的小点的正圆,圆的颜色可以任意。
3、在图层一的第20帧插入一个关键帧(快捷键是F6),将圆放大,圆的颜色可以改变也可以不改变。
4、用鼠标右键点在第1帧关键帧上出来菜单,选择“创建补间形状”。
5、将第一帧复制,在第40帧上粘贴,然后在第20关键帧上出来菜单,选择“创建补间形状”。
6、在控制菜单中选择“测试影片”,或者Ctrl+Enter看下效果,然后在文件菜单中选择“导出”——>”导出影片”,进行保存。
实例二:将一个小圆变化成大圆步骤1、新建一个flash文档,550*400px,背景白色。
2、在菜单“插入”——“新建元件”,将元件名称修改成“圆形”,设置元件的类型为图形就可以。
(其他元件类型在本例中也可)。
3、进入元件编辑界面,使用椭圆工具绘制一个正圆,大小都可以,因为回到场景中可以调整。
若要在元件中调整大小可以使用任意变形工具。
4、回到场景编辑界面,点击途中红框位置。
5、打开库面板,可看到刚创建的元件,将“圆形”元件拖到舞台上,并用任意变形工具调整其大小与位置。
构成图层一的第一帧。
6、在第20帧插入关键帧,将此圆形变大一些。
7、在第一帧“创建传统补间”,或者“创建补间动画”,都可以,然后将第一帧复制帧,在第40帧粘贴帧,在第20帧“创建传统补间”,或者“创建补间动画”,都可以。
8、菜单“控制”——“测试影片”,看一下效果与上面的形状补间的区别。
练习:1、形状变化过程,有正方形变成圆形,变成三角形,在变回正方形。
2、文字颜色变化过程,效果如例子。
补间形状与补间动画内容一、补间形状——窗帘飘动步骤如下:一、创建影片文档和制作动画背景1、新建一个flash 8影片文档,设置舞台背景颜色为淡蓝色,其他保持默认。
2、将“图层1”从新命名为“风景”,执行【文件】→【导入】→【导入到舞台】命令,将外部图像文件“风景.jpg”导入到场景中。
将风景图片缩小到合适尺寸,选择第80帧,按F5键,增加一个普通帧,以延伸风景图片。
3、新添加一个图层,并将这个图层重新命名为“窗户”。
在这个图层上,选择工具箱中的【矩形工具】,设置“笔触颜色”为无,“填充色”为淡黄色,在场景中绘制出一个长方形的窗帘盒。
选择【矩形工具】,设置“笔触颜色”为淡蓝色,“填充色”为无,线条粗细为2.5,在舞台上绘制出窗框的形状,再用【线条工具】绘制窗框上的一些线条,画窗框时,要注意保持对称,如图1所示:图14、选择“窗户”图层的第80帧,按F5键插入帧。
二、创建“窗帘”图形元件1、执行【插入】→【新建元件】命令,新建一个名为“窗帘”的图形元件。
2、进入新元件的编辑场景,选择【矩形工具】,设置“笔触颜色”为黑色,“填充色”为无,在场景中绘制出一个矩形,再用【线条工具】在矩形上绘制几道线条,如图2所示:图2 图33、打开“混色器”面板,在其中选择填充类型为“线性”,在颜色条下,设置3个色块,从左到右,依次设置为灰色(#c8c8c8)、白色(#fafafa)和灰色(#c4c4c4),设置如图3所示:4、选择【颜料桶工具】,选择“选项”中的【封闭大空隙】命令。
这样填充以后,窗帘就形成几个颜色快,给人感觉是柔软的纱帘在垂下时形成的褶皱,如图4所示:图4 图55、按【delete】键把轮廓线条删除,并用【选择工具】调整窗帘的形状,然后,选择整个窗帘形状,执行【修改】→【形状】→【优化】命令,使它变得有一定弧度,比较圆滑,如图5所示:6、分别选择第35帧和第80帧,分别插入关键帧,然后建立第1帧到第35帧之间的补间形状,第35帧到第80帧之间的补间形状。
Flash 8 逐帧动画详解及实例本节素材下载从本单元起,我们将逐渐给大家介绍Flash8.0中的五种常见的动画形式:逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导线动画。
本节着重介绍逐帧动画(FrameBy Frame),这是一种常见的动画手法,它的原理是在连续的关键帧中分解动画动作,也就是每一帧中的内容不同,连续播放而成动画。
由于逐帧动画的帧序列内容不一样,不仅增加制作负担而且最终输出的文件量也很大,但它的优势也很明显:因为它相似与电影播放模式,很适合于表演很细腻的动画,如3D效果、人物或动物急剧转身等等效果。
1.逐帧动画的概念和在时间帧上的表现形式在时间帧上逐帧绘制帧内容称为逐帧动画,由于是一帧一帧的画,所以逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容。
逐帧动画在时间帧上表现为连续出现的关键帧,如图3-2-1所示。
图 3-2-1 逐帧动画2.创建逐帧动画的几种方法(1)用导入的静态图片建立逐帧动画用jpg、png等格式的静态图片连续导入Flash中,就会建立一段逐帧动画。
(2)绘制矢量逐帧动画用鼠标或压感笔在场景中一帧帧的画出帧内容。
(3)文字逐帧动画用文字作帧中的元件,实现文字跳跃、旋转等特效。
(4)导入序列图像可以导入gif序列图像、swf动画文件或者利用第3方软件(如swish、swift 3D等)产生的动画序列。
3.绘图纸功能(1)绘画纸的功能绘画纸是一个帮助定位和编辑动画的辅助功能,这个功能对制作逐帧动画特别有用。
通常情况下,Flash 在舞台中一次只能显示动画序列的单个帧。
使用绘画纸功能后,你就可以在舞台中一次查看两个或多个帧了。
如图3-2-2所示,这是使用绘画纸功能后的场景,可以看出,当前帧中内容用全彩色显示,其它帧内容以半透明显示,它使我们看起来好像所有帧内容是画在一张半透明的绘图纸上,这些内容相互层叠在一起。
当然,这时你只能编辑当前帧的内容。
图3-2-2 同时显示多帧内容的变化(2)绘图纸各个按钮的介绍绘图纸外观按钮按下此按钮后,在时间帧的上方,出现绘图纸外观标记。
形状补间动画是Flash中非常重要的表现手法之一,运用它,你可以变幻出各种奇妙的不可思议的变形效果。
本节从形状补间动画基本概念入手,带你认识形状补间动画在时间帧上的表现,了解补间动画的创建方法,学会应用“形状提示”让图形的形变自然流畅,最后,提供了二个实例练手,帮助你更深地理解形状补间动画。
1.形状补间动画的概念(1)形状补间动画的概念在Flash的时间帧面板上,在一个时间点(关键帧)绘制一个形状,然后在另一个时间点(关键帧)更改该形状或绘制另一个形状,Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。
(2)构成形状补间动画的元素形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化,其变形的灵活性介于逐帧动画和动作补间动画二者之间,使用的元素多为用鼠标或压感笔绘制出的形状,如果使用图形元件、按钮、文字,则必先“打散”再变形。
(3)形状补间动画在时间帧面板上的表现形状补间动画建好后,时间帧面板的背景色变为淡绿色,在起始帧和结束帧之间有一个长长的箭头,如图3-3-1所示。
图3-3-1 形状补间动画在时间帧面板上的标记(4)创建形状补间动画的方法在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状,一般一帧中以一个对象为好,在动画结束处创建或选择一个关键帧并设置要变成的形状,再单击开始帧,在【属性】面板上单击【补间】旁边的小三角,在弹出的菜单中选择【形状】,此时,时间轴上的变化如图3-3-1所示,一个形状补间动画就创建完毕。
2.认识形状补间动画的属性面板Flash的【属性】面板随鼠标选定的对象不同而发生相应的变化。
当我们建立了一个形状补间动画后,点击时间帧,【属性】面板如图3-3-2所示。
图3-3-2 形状补间动画【属性】面板形状补间动画的【属性】面板上只有二个参数:(1)“简单”选项在“0”边有个滑动拉杆按钮,单击后上下拉动滑杆或填入具体的数值,形状补间动画会随之发生相应的变化。
形状补间动画是Flash中非常重要的表现手法之一,运用它,你可以变幻出各种奇妙的不可思议的变形效果。
本节从形状补间动画基本概念入手,带你认识形状补间动画在时间帧上的表现,了解补间动画的创建方法,学会应用“形状提示”让图形的形变自然流畅,最后,提供了二个实例练手,帮助你更深地理解形状补间动画。
1.形状补间动画的概念(1)形状补间动画的概念在Flash的时间帧面板上,在一个时间点(关键帧)绘制一个形状,然后在另一个时间点(关键帧)更改该形状或绘制另一个形状,Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。
(2)构成形状补间动画的元素形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化,其变形的灵活性介于逐帧动画和动作补间动画二者之间,使用的元素多为用鼠标或压感笔绘制出的形状,如果使用图形元件、按钮、文字,则必先“打散”再变形。
(3)形状补间动画在时间帧面板上的表现形状补间动画建好后,时间帧面板的背景色变为淡绿色,在起始帧和结束帧之间有一个长长的箭头,如图3-3-1所示。
图3-3-1 形状补间动画在时间帧面板上的标记(4)创建形状补间动画的方法在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状,一般一帧中以一个对象为好,在动画结束处创建或选择一个关键帧并设置要变成的形状,再单击开始帧,在【属性】面板上单击【补间】旁边的小三角,在弹出的菜单中选择【形状】,此时,时间轴上的变化如图3-3-1所示,一个形状补间动画就创建完毕。
2.认识形状补间动画的属性面板Flash的【属性】面板随鼠标选定的对象不同而发生相应的变化。
当我们建立了一个形状补间动画后,点击时间帧,【属性】面板如图3-3-2所示。
图3-3-2 形状补间动画【属性】面板形状补间动画的【属性】面板上只有二个参数:(1)“简单”选项在“0”边有个滑动拉杆按钮,单击后上下拉动滑杆或填入具体的数值,形状补间动画会随之发生相应的变化。
在1到 -100 的负值之间,动画运动的速度从慢到快,朝运动结束的方向加速度补间。
在1 到 100 的正值之间,动画运动的速度从快到慢,朝运动结束的方向减慢补间。
默认情况下,补间帧之间的变化速率是不变的。
(2)“混合”选项“混合”选项中有二项供选择:“角形”选项:创建的动画中间形状会保留有明显的角和直线,适合于具有锐化转角和直线的混合形状。
“分布式”选项:创建的动画中间形状比较平滑和不规则。
至此,“形状补间动画”的相关知识大家都已经有所了解,下面动手个实例,体会一下形状补间动画的奇妙。
实例:庆祝国庆实例简介国庆的夜空绚丽多彩,朵朵礼花在天空中绽放,远处传来礼炮的轰鸣声,让我们来给这美丽的夜晚增加点喜庆,挂几个大红灯笼来庆祝祖国的生日吧。
实例播放效果如图 3-3-4所示。
图3-3-4 庆祝国庆实例画面知识提要创建矢量图形创建形状补间动画将文字转变为形状用混色器设置颜色制作步骤1、创建新文档执行【文件】|【新建】命令,在弹出的面板中选择【常规】|【Flash文档】选项后,点击【确定】按钮,新建一个影片文档,在【属性】面板上设置文件大小为400*330象素,【背景色】为白色,如图3-3-5所示。
图3-3-5 文档属性2、创建背景图层执行【文件】|【导入到场景】命令,将本实例中名为“节日夜空.jpg”图片导入到场景中,在第80帧处按下F5,加普通帧。
如图3-3-6所示。
图3-3-6 插入背景图片3、创建灯笼形状我们先来画灯笼,执行【窗口】|【设计面板】|【混色器】命令,打开混色器面板,如图3-3-7所示设置混色器面板的各项参数。
图3-3-7 混色器面板设置之一选择工具栏上的椭圆工具,去掉边线,在场景中画一个椭圆做灯笼的主体,大小为65*40象素。
接着我们来画灯笼上下的边,打开【混色器】面板,按照如图3-3-8设置参数。
图3-3-8 混色器面板设置之二选择工具栏上的矩形工具,去掉边线,画一个矩形,大小为30*10象素,复制这个矩形,分别放在灯笼的上下方,再画一个小的矩形,长宽为7*10象素,作为灯笼上面的提手。
最后用直线工具在灯笼的下面画几条黄色线条做灯笼穗,一个漂亮的灯笼就画好了。
如图3-3-9所示(为了能清楚的显示灯笼,可暂时将背景色改为蓝色)。
图3-3-9 画好的灯笼4、复制粘贴四个灯笼复制刚画好的灯笼,新建三个图层,在每个图层中粘贴一个灯笼,调整灯笼的位置,使其错落有致的排列在场景中。
在第20、40帧处为各图层添加关键帧,如图3-3-10所示。
图3-3-10 错落有致的灯笼及时间轴面板5、把文字转为形状取代灯笼选取第一个灯笼,在第40帧处用文字“庆”取代灯笼,文字的的【属性】面板上的参数:【文本类型】为静态文本,【字体】为隶书,【字体大小】为60,【颜色】为红色。
对“庆”字执行【修改】|【分散】命令,把文字转为形状。
如图 3-3-11上半部分所示。
依照以上步骤,在第40帧处的相应图层上依次用“祝”、“国”、“庆”三个字取代另外三个灯笼,并执行【分散】操作,其结果如图 3-3-11下半部分所示。
图3-3-11 用文字形状取代灯笼形状及文字打散6、设置文字形状到灯笼形状的转变。
在“灯笼”各图层的第60帧及80帧处,分别添加关键帧,现在,在80帧处各“灯笼”图层中的内容为“文字图形”,应该把它们换成“灯笼”。
具体办法可以分别选择第20帧中的“灯笼”图形,再一个个“粘贴”进第80帧中,当然,你先应该清除第80帧处4个“灯笼”图层中的内容哦!7、创建形状补间动画。
在“灯笼”各图层的第20、60帧处单击帧,在【属性】面板上单击【补间】旁边的小三角在弹出的菜单中选择【形状】,建立形状补间动画,如图3-3-12所示。
图3-3-12 创建形状补间动画8、测试存盘执行【控制】|【测试影片】命令,观察本例swf文件生成的动画有无问题,如果满意,执行【文件】|【保存】命令,将文件保存成“庆祝国庆.fla”文件存盘,如果要导出Flash的播放文件,执行【导出】|【导出影片】命令保存成“庆祝国庆.swf”文件。
使用形状提示形状补间动画看似简单,实则不然,Flash在“计算”2个关键帧中图形的差异时,远不如我们想象中的“聪明”,尤其前后图形差异较大时,变形结果会显得乱七八糟,这时,“形状提示”功能会大大改善这一情况。
形状提示的作用在“起始形状”和“结束形状”中添加相对应的“参考点”,使Flash在计算变形过渡时依一定的规则进行,从而较有效地控制变形过程。
(2)添加形状提示的方法先在形状补间动画的开始帧上单击一下,再执行【修改】|【形状】|【添加形状提示】命令,该帧的形状就会增加一个带字母的红色圆圈,相应地,在结束帧形状中也会出现一个“提示圆圈”,用鼠标左键单击并分别按住这2个“提示圆圈”,在适当位置安放,安放成功后开始帧上的“提示圆圈”变为黄色,结束帧上的“提示圆圈”变为绿色,安放不成功或不在一条曲线上时,“提示圆圈”颜色不变,如图3-3-3所示。
图3-3-3 添加形状提示后各帧的变化(3)添加形状提示的技巧“形状提示”可以连续添加,最多能添加26个。
按逆时针顺序从形状的左上角开始放置形状提示,它们的工作效果最好。
确保“形状提示”是符合逻辑的。
例如,前后关键帧中有2个三角形,我们使用3个“形状提示”,那么2个三角形中的“形状提示”顺序必须是一致的,而不能第一个形状是abc,而在第二个形状是acb,形状提示要在形状的边缘才能起作用,在调整形状提示位置前,要打开工具栏上【选项】下面的【吸咐开关】,这样,会自动把“形状提示”吸咐到边缘上,如果你发觉“形状提示”仍然无效,则可以用工具栏上的放大工具点击形状,放大到2000倍,以确保“形状提示”位于图形边缘上。
另外,要删除所有的形状提示,选择【修改】|【形状】|【删除所有提示】。
删除单个形状提示,单击右键,在弹出菜单中选择【删除提示】。
实例练习上面我们曾谈到,为得到流畅自然的形状变形动画,可以添加形状提示,本例是专为此而设计的练习。
请你在光盘的相关目录中找到“添加形状提示练习.swf”文件,如图3-3-15所示。
这2个同样是“形状变形”,其中右边的变形用了变形“参考点”,从中,我们可以看出变形效果有明显的差异。
图3-3-15 添加形状提示实例界面知识提要添加形状提示创建形状补间动画1、创建新文档执行【文件】|【新建】命令新建一个影片文档,设置舞台尺寸为300*200象素,【背景色】为蓝色#0000FF。
2、创建变形对象。
我们要在场景中写二个数字“1”,让它们同时变形,一个加形状提示,一个不加形状提示,看看这二个变形有什么不同。
先在图层一的场景左边中写入数字“1”,【属性】面板上设置【文本格式】为静态文本、【字体】为隶书、【字号】100、【颜色】白色。
再建一个图层二,在场景右边写入数字“1”,参数同上,此层是添加形状提示层。
然后在二层各40帧的地方加关键帧,各写入数字“2”,在第60帧处加普通帧,使变形后的文字稍做停留。
3、把字符转为形状逐一选取各层数字的第1、40帧,执行【修改】|【分散】命令,把数字打散转为形状。
4、创建补间动画在图层一、二的第一帧处各自建立形状补间动画。
5、添加形状提示在图层二的第一帧处,执行【修改】|【形状】|【添加形状提示】命令二次,如图3-3-16所示。
图3-2-16 添加形状提示菜单确认工具栏上的对齐对象按钮已按下选中,调整第1、40帧处的形状提示如图3-3-17所示。
图3-3-17 添加形状提示的第1、40帧6、添加文字说明新建一层,在二个渐变的下面分别写上“未加形状提示”、“加用形状提示”的说明。
在第60帧处加普通帧。
至此,这个实例制作完成,测试一下,看看效果,你能体会到添加形状提示的巧妙之处了吧。