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