Flash元件、逐帧动画与形状.ppt

1,1,第6讲 Flash元件与逐帧动画,2,2,教师信息,教师：柳青 电子信箱： L 办公室：信息楼B418 电话： 67703852,3,3,复习与回顾,两种文件：.fla和.swf 注意舞台的大小以及导出swf后的结果,4,4,目的、重点和难点,目的 掌握帧的概念，类型，编辑方法 了解图层的概念、类型和操作 掌握元件的生成和其属性的设置 掌握Flash逐帧动画制作 了解影片剪辑 重点 掌握帧、关键帧和空白关键帧的概念 掌握Flash逐帧动画制作 图形元件与实例 难点 帧、关键帧和空白关键帧的区别及帧的各种操作 元件与实例的区别,5,5,帧的概念,帧是进行Flash动画制作的最基本的单位，在时间轴上每一个矩形小方块即是一个帧，它是时间轴上的最小单位，是通用的动画计量单位。 每一帧都可以包含需要显示的所有内容，包括图形、声音、各种素材和其他多种对象. 一个完整的Flash动画就是由许多帧组成，播放时依次显示每一帧中的内容。通过连续播放这些帧，从而实现所要表达的动画效果。,6,6,帧的类型,空帧： 空帧不是真正意义上的帧，而只是在时间轴上一个矩形小方块，在这些矩形方块里可以放入帧。 空白关键帧： 空白关键帧就像一张白纸，可以在上面可以放入图形、声音、各种素材和其他多种对象。 关键帧： 在空白关键帧中放入对象，形成了关键帧。关键帧是特殊的帧，可以定义动画中的变化，包括对象的运动和特点(如大小和颜色) 。 普通帧： 在时间轴上，普通帧总是在关键帧的后面。前面关键帧的内容可以一直显示在随后的每个普通帧中，直到到达另一个关键帧为止。 过渡帧： 过渡帧包含了一系列帧，往往处于两个关键帧之间。利用过渡帧可以制作两种过渡动画：运动过渡和形状过渡。,7,各类的帧在时间轴上的显示,关键帧在时间轴上显示为实心的圆点 空白关键帧在时间轴上显示为空心的圆点 普通帧在时间轴上显示为灰色或白色填充的小方格 在关键帧后面显示为灰色 在空白关键帧后面显示为白色 过渡帧在时间轴上显示为浅绿色或浅紫色 表示“形状过渡帧”，颜色为浅绿色 表示“运动过渡帧”，颜色为浅紫色,8,8,各类的帧在时间轴上的示意图,关键帧,普通帧,空帧,空白关键帧,过渡帧,普通帧,9,9,关键帧和空白关键帧的区别,实心圆的关键帧表示该关键帧中有对象（绘图元件）,是关键帧。 空心圆的关键帧表示该关键帧中没有任何对象，也称空白关键帧。 单一的实心圆点表示关键帧。独立关键帧后面浅灰色的帧中具有与前面的关键帧同样的画面，这些浅灰色的帧以空心矩形符号为结尾。 空心圆点代表空的关键帧，当你新增一个空白关键帧时，就会以空心圆点表示。,10,10,关键帧和普通帧的区别,只有选择时间轴上的关键帧(包括空白关键帧)，舞台上才可以放置各种绘图元件、绘制各种图形。 如果选择时间轴上的普通帧，舞台上不能放置任何绘图元件，也不可以绘图。,11,11,插入关键帧、空白关键帧和普通帧的区别,在前一个关键帧的后面任一帧处插入关键帧，是复制前一个关键帧上的对象，并可对其进行编辑操作 如果插入普通帧，是延续前一个关键帧上的内容，不可对其进行编辑操作 插入空白关键帧，可清除该帧后面的延续内容，可以在空白关键帧上添加新的实例对象。 关键帧和空白关键帧上都可以添加帧动作脚本，普通帧上则不能。,12,12,帧的编辑,在时间轴上选择帧后，按右键打开快捷菜单，可以对所选帧进行相应的编辑。 帧的选择与移动 按住“ctrl”键，可以同时选择不相邻的多帧。 按住“shift”键，可以选择相邻的多帧。 右键，在快捷菜单中选择“选择所有帧” 帧的创建与转换 帧的复制、剪切与粘贴 帧的删除与清除 帧的翻转 如果希望制作的动画能倒着播放，可以使用“翻转帧”命令来达到效果。 选中时间轴上一系列帧，用鼠标右击它，在快捷菜单中选择“翻转帧”即可。,13,帧操作的常用快捷键,创建关键帧：F6 创建空白关键帧：F7 创建普通帧：F5 删除关键帧或者空白关键帧：Shift+F6 删除普通帧：Shift+F5,14,设置帧频,在Flash中，将每一秒钟播放的帧数称为帧频，帧频的单位是fps。 帧频是动画播放的速度。如Flash 的帧频是24帧/秒，即每一秒钟可以播放24帧画面。以每秒播放的帧数为度量，帧频太慢会使动画看起来不连贯，帧频太快会使动画的细节变得模糊。 通过“属性面板”可以设置帧频，帧频越大，播放速度越快，帧频越小，播放速度越慢。,15,15,图层的概念,在Flash动画中，可以将图层看作一叠透明的胶片，每张胶片上都有不同的内容，将这些胶片叠在一起就组成了一幅比较复杂的画面。 在上一图层的内容，会遮住下一图层相同位置的内容。如果上一图层的某个位置没有任何内容，透过这个位置就可以看到下一图层相同位置的内容。,16,图层的作用,图层是相对独立的，修改其中一层，不会影响到其他层，在图层中用户可以对其中的对象或动画进行编辑修改，而不会影响其他图层中的内容。 用户可以将一个复杂的动画分解成几个简单的小动画，将不同的动画放置在不同的图层上，各个小动画之间相互独立，从而组成一个复杂的动画。 利用一些特殊的图层还可以制作特殊的动画效果，如利用引导层可以制作引导动画，利用遮罩层可以制作遮罩动画。,17,17,图层的类型,正常（普通）图层： 系统默认的图层类型 引导图层： 动画中的对象在运动时的路径引导的图层，例如某一图层中的小球沿路径运动，就要用到这个引导图层。 被引导图层： 是一个与引导图层相关联的正常图层 遮罩图层： 好象是在对象上面遮着一个带有孔的图层，它常用于制作按照灯等动画效果 被遮罩图层： 该图层的内容只有遮罩图层在相应位置有遮罩对象时才可见，其他内容不可见 文件夹： 当图层过多时，可以使用图层文件夹，将图层放入文件夹中便于对图层进行管理,18,图层的模式,当前模式： 当前模式是指当前层处于编辑状态，用户可以对该图层中的对象进行编辑。 判别一个图层是否为当前模式的方法就是查看当前图层名称栏是否显示一个铅笔图标。 隐藏模式： 它的作用是指在将某个图层隐藏后，用户在编辑该图层以外的图层时，被隐藏的图层不受影响。 虽然被隐藏的图层在场景中看不到对象，但播放过程是可以看到的。 锁定模式： 它的作用是将一个或多个图层锁定后，就无法对其进行修改。 图层被锁定后，但是在场景中依然可以看到它。 轮廓模式： 在选择该模式后，将只显示图层中对象的轮廓。 在图层的名称栏上的彩色方块轮廓的颜色就是该图层中对象的轮廓颜色。,19,图层各种模式操作示意图,单击“时间轴”面板上方的 图标，可使全部图层上的对象只显示轮廓线；再次单击 图标，可恢复原状。,单击图层上的 图标，当其变为 形状时，该图层上所有对象都只显示轮廓线；再次单击 图标可恢复原状。,单击图层 图标下的 图标，当 图标变为 形状后，该图层即被隐藏；要显示被隐藏的图层，只需单击 图标即可。,单击“时间轴”面板上方的 图标，所有图层都将被隐藏；再次单击 图标，可显示全部图层。,单击“时间轴”面板上方的 图标，可锁定全部图层；再次单击 图标可解除所有图层的锁定。,单击某图层 图标下的 图标，当图标变为 形状时，表示该图层被锁定；解除图层的锁定，单击图层名称右侧的 图标即可。,20,20,图层的操作,图层操作 选择图层，按鼠标右键，在快捷菜单中选择操作。 通过图层工具栏进行操作 常用的图层操作 创建新普通图层。 创建新引导图层 删除图层 将普通图层转化为遮罩图层,21,图层的属性,在图层名称上右击鼠标，在快捷菜单中选择“属性” ，打开 “图层属性”对话框 ，可设置图层的各种属性 。,22,22,逐帧动画的基本原理,逐帧动画原理 将对象的运动过程分解成多个静态图形，再在时间轴上按顺序将这些连续的静态图形置于连续的关键帧中，当连续播放这些图片时，就形成了动画。 逐帧动画特点 对于要求较高的影片，逐帧动画能发挥出它独特的作用，具有非常大的灵活性，能最大限度地控制动画的变化细节，很适合于表演很细腻的动画。 消耗大量的时间。生成的动画文件较大。,23,创建逐帧动画的方法,用静态图片建立逐帧动画 用jpg、png等格式的静态图片连续导入Flash中，就会建立一段逐帧动画。 绘制矢量逐帧动画 用绘图工具等各种设计工具，在场景中一帧帧的画出内容。 文字逐帧动画 用文字作帧中的元件，实现文字跳跃、旋转等特效。 导入序列图像 可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish、swift 3D等）产生的动画序列。,24,24,课堂示例1：贵宾垂询热线,制作如样张所示动画。要求电话摆动的同时，电话号码依次出现，并保持静止片刻。 知识点： 逐帧动画基本原理 帧、关键帧和空白关键帧 图层的运用 控制动画的播放速度 控制某帧的延迟时间 参考“贵宾垂询热线-样张.swf”,25,25,课堂示例1-关键步骤,打开“贵宾垂询热线.fla”，设置舞台大小500*130像素。 静态文字“贵宾垂询 敬请莅临”单独放一个图层，并延续到40帧； 电话单独放一个图层，并延续到40帧；,26,26,课堂示例1-关键步骤（续）,电话号码单独放一个图层，每间隔5帧增加一个数字。 先在第1帧输入第1个数字 然后在第5帧插入关键帧，并编辑第5帧增加一个数字 按上述步骤分别编辑第10、15、20、25、30、35帧 分别保存为“贵宾垂询热线.fla”和“贵宾垂询热线.swf”,27,27,思考题,在本示例基础上，参考“贵宾垂询热线-思考-样张.swf”，完成思考题。,28,元件的概念,元件的建立是以重复使用为目的的，不但可以将其应用于当前影片，而且可以将其应用于其它影片。 元件中可以包含位图、图形、组合、声音甚至是其它元件。 在Flash中创建的所有元件都会出现在库面板中，拖拽库面板中的元件到场景，就可以反复利用元件 每个元件都具有独立的时间轴、工作区和图层，除此以外，每种元件类型都具有独特的属性。,29,元件的类型,Flash中包括三种元件类型，分别为图形元件、影片剪辑元件与按钮元件。 图形元件主要用于定义静态的、常用的图像符号。 按钮元件是一种具有交互功能的图形元件，用于响应各种鼠标事件，以实现用户的相应动作。 影片剪辑元件是Flash中应用最为广泛的元件类型，可以将它自身理解成为一个小动画。 在影片剪辑元件中可以制作独立的影片，制作影片的方法与在场景中没有区别 。,30,创建元件,在Flash中，可以通过两种方式创建元件，分别为创建新元件与将对象转换为元件。 创建新元件是指直接创建一个空白元件，然后自动进入元件编辑模式，接着在元件中创建和编辑元件中的对象。 将对象转换为元件是指将选定的对象转换为元件，对象可以为任何元素，将对象转换为元件后，即可改变对象的属性 。 选择对象，用“修改/转换为元件”菜单命令，可以实现元件转换。,31,编辑元件,在快捷菜单中选择“编辑” ，或双击库面板中的元件，就可进入元件的编辑状态。 元件的修改会直接影响到影片中每一个以它为基础的实例。,元件编辑状态,32,实例,应用于影片的元件均被称之为实例。 在工作区中选中实例，可以改变实例的尺寸、颜色与元件类型，但这些改动只针对实例本身，不会影响到库面板中的元件 。,33,33,课堂示例2-瓢虫与花,打开“瓢虫与花.fla”，利用库中的素材制作瓢虫飞舞的影片剪辑；制作花丛中5只大小不一，头部朝向不同的小瓢虫飞舞的动画 。 知识点： 掌握制作影片剪辑的方法 区分场景动画与影片剪辑动画 区分实例与元件 进一步理解逐帧动画 参考“瓢虫与花-样张.swf”,34,34,课堂示例2-关键步骤,打开文件“瓢虫与花.fla” “插入/新建元件”创建影片剪辑 “瓢虫飞舞”； 利用库中的“瓢虫1”、“瓢虫2”、 “瓢虫3” 、“瓢虫4”元件和逐帧动画方法制作“瓢虫飞舞”； 注意：调整图片位置可以利用“对齐面板” 一定要把“相对于舞台”按钮按下 将库中的“花”元件拖放3次到舞台上形成3个实例，调整3个实例的大小或者进行翻转，得到花丛； 将库中的“瓢虫飞舞”元件拖放5次到舞台上形成5个实例，调整5个实例的大小得到瓢虫群； 保存为“瓢虫与花.fla”和“瓢虫与花.swf”,35,补间形状动画,补间形状动画的概念 补间形状动画是指在两个或两个以上的关键帧之间对形状进行补间的动画，从而创建出类似于形变的效果，使一个形状看起来随着时间变成另一个形状。 补间形状动画可以改变对象的位置、大小和颜色等属性。 补间形状动画在CS4以前的版本叫形状补间动画 补间形状动画的要求 补间形状动画的对象必须是分离的(矢量图) 元件、组合、文字需要分离 有的对象需要分离多次，如文字 绘图工具绘制的图形本身就是分离的,36,36,创建补间形状动画,补间形状动画的创建步骤 在动画开始处创建一个空白关键帧，并放入需要变形的对象 在动画结束处创建一个空白关键帧，并放入变形后的对象 选择两关键帧之间任何一帧，按鼠标右键，在快捷菜单中选择“创建补间形状”命令 或者打开“插入”菜单，选择“补间形状”命令,37,37,补间形状动画的表现形式,补间形状动画头尾必须是关键帧，两关键帧中间被带有一个黑箭头和浅绿色背景的中间过渡帧分开(如图层4所示) 如果两关键帧中间的黑箭头变为黑点，代表补间形状动画创建错误 缺少开始或结束关键帧(如图层2,3所示) 对象分离或没有彻底分离(如图层1所示),38,38,补间形状动画参数设置,选择补间形状动画中任何一帧，打开补间形状动画的属性面板，设置属性 “缓动”选项 在1到 -100 的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速度补间。 在1 到 100 的正值之间，动画运动的速度从快到慢，朝运动结束的方向减速度补间。 默认为0，补间帧之间的变化速率是不变的。 “混合”选项 角形：创建的动画中间形状会保留有明显的角和直线，适合于具有锐化转角和直线的混合形状。 分布式：创建的动画中间形状比较平滑和不规则。,39,39,课堂示例3：雪人,运用补间形状动画实现“雪球”字变成“雪人”的过程。参看“雪人-样张.swf” 知识点： 文字与元件的分离 补间形状动画,40,40,课堂示例3-关键步骤,打开“雪人.fla”。 设置舞台背景色为蓝色。 在第1帧的中画白色的圆。 在第30帧插入空白关键帧，将库中元件“小雪人”拖放到舞台中央，并分离。 选择第1帧到第30帧中的某一帧，按右键，创建补间形状动画。 “缓动”值设置为-100。 保存为“雪人.fla”和“雪人.swf”,41,41,课堂示例4：白天黑夜,参考“白天黑夜-样张.swf”文件，制作补间形状动画 要求： 动画持续到60帧，其中变化50帧，停留10帧； 天空由黑逐渐变成下蓝上白的线性渐变色； 天空变化同时，月亮变成太阳。 知识点： 分层补间形状动画,42,42,课堂示例4-关键步骤,打开“白天黑夜.fla”文件，修改帧频为10； 把库中“背景”设置为舞台背景，持续到60帧； 新建图层，创建天色的变化； 在第1帧和第50帧分别画一个矩形，分别填充黑色和蓝到白的渐变色，设置大小与舞台一样大；通过在第60帧上插入帧持续； 创建补间形状动