《创建时间轴动画》PPT课件.ppt

,高等教育出版社 高等教育电子音像出版社,本章学习内容,3.1 元件,元件的类型,图形元件：可用于静态图像，与主时间轴同步运行。 按钮元件：通过事件来激发它的动作。按钮元件有4种状态，即“弹起”、“指针经过”、“按下”、“单击”。 影片剪辑元件 ：本身就是一段小动画，可以包含交互控制、声音甚至嵌套其他影片剪辑的实例，是用途和功能最多的元件。,建立元件,将现有的矢量对象转换成元件 （快捷键：F8）,建立元件的方法,使用元件编辑模式建立元件 （快捷键：Ctrl+F8）,复制元件,创建元件后，用户可以在文档中重复使用它的实例，并修改单个实例的以下实例属性，而不会影响其他实例或原始元件。 复制元件实例的方法是：在按下。Alt键的同时用鼠标将待复制的元件拖动出一个副本，即可创建该元件的另一个实例。 复制元件的方法是：在库面板中单击鼠标右键，在出现的快捷菜单中选择“直接复制”命令，即可创建元件的副本。,修改元件,修改与编辑元件，必须先切换至元件模式下才能进行 切换元件模式方法有两种： 在舞台上，双击元件实例。 在库面板中，双击元件名。 注意：在元件编辑模式下进行的更改会影响该元件的所有实例。,元件的存放处库,公用库 库 如何将库里的元件加入舞台,3.2 时间轴面板,时间轴面板,帧的类型,帧的类型,不同性质的帧的区别,关键帧在时间轴上显示为实心的圆点，空白关键帧在时间轴上显示为空心的圆点，普通帧在时间轴上显示为灰色填充的小方格。 同一层中，在前一个关键帧的后面任一帧处插入关键帧，是复制前一个关键帧上的对象，并可对其进行编辑操作。 如果插入普通帧，是延续前一个关键帧上的内容，不可对其进行编辑操作。 插入空白关键帧，可清除该帧后面的延续内容，可以在空白关键帧上添加新的实例对象。 关键帧和空白关键帧上都可以添加帧动作脚本，普通帧上则不能添加。,动画中的图层,当用户创建动画时，可以使用图层和图层文件夹来组织动画序列的组件和分离动画对象，这样它们就不会互相擦除、相连或分割。 Flash的舞台在同一时间制作多个对象的动画，每个组或元件等舞台对象必须在独立的图层上。,图层的操作,重命名图层,3.3 逐帧动画,逐帧动画（Frame By Frame）是一种常见的动画形式，其原理是在连续的关键帧中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放形成动画。,人物表情变化案例,步骤详解： 运行Flash CS4，在资源光盘的“本书范例第3章原始素材3.3 逐帧动画”文件夹中，打开“表情变化.fla”文件，准备进行动画制作。 将库面板中画有昕昕微笑表情的元件“head”拖到舞台上，形成一个实例。 按F7键在时间轴的第2帧上新建一个空白关键帧，然后将库中将画有昕昕开心表情的元件“head5”拖到舞台上，形成一个实例。,人物表情变化案例,步骤详解： 再次按F6键在时间轴的第3帧上新建一个关键帧，然后使用“任意变形工具”将元件“head5”旋转一定角度。 再次按F7键在时间轴的第4帧上新建一个关键帧，然后将画有昕昕微笑表情的元件“head”拖到舞台上，然后单击“任意变形工具”按钮将元件“head”旋转一定角度。 用鼠标右键单击舞台空白处，将帧频改为5fps。按Ctrl+Enter组合键预览动画效果，即可形成一个昕昕微笑点头的动画效果。 选择“文件”|“保存”命令将该fla文件保存。,技术点睛,逐帧动画是Flash动画最基本的形式，是通过更改每一个连续帧在编辑舞台上的内容来建立的动画。因为逐帧动画的帧序列内容不一样，不但给制作增加了负担，而且最终输出的文件量也很大。 逐帧动画的优势：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。 通常第一个关键帧会在空白舞台上第一个实例生成时会自动生成，但第2帧以后的关键帧需要手动添加。,影片剪辑元件中逐帧动画的运用,影片剪辑元件拥有独立于主时间轴的多帧时间轴，如果针对影片剪辑元件进行逐帧动画制作，则可以拥有一个独立于主时间轴的动画元件。,步骤详解,运行Flash CS4，打开“静态蝴蝶.fla”，准备进行动画制作。 在库面板中可以看到有一个命名为“butterfly”的图形元件，对该元件右击，在弹出的快捷菜单中将“属性”修改 为“影片剪辑”。 将库中元件“butterfly”拖到舞台上，形成一个实例。 双击该元件实例，进入元件编辑画面。,步骤详解,由于要修改蝴蝶各个部分的状态，先用鼠标单击时间轴的“eyes”层（第1层）的第5帧，然后按住Shift键同时鼠标单击时间轴的“right-up”层（最后1层）的第5帧，则所有层的第5帧都被选中了，按F6键为时间轴所有层的第5帧处新建一个关键帧，然后使用“任意变形工具”调整4个翅膀的位置至两两重合位置 。,步骤详解,先用鼠标单击时间轴的“eyes”层（第1层）的第1帧，然后按住Shift键同时鼠标单击时间轴的“right-up”层（最后1层）的第1帧。选择所有层的第1帧后，右击鼠标，在出现的快捷菜单中选择“复制帧”命令。用鼠标单击时间轴的“eyes”层（第1层）的第10帧，然后按住Shift键同时鼠标单击时间轴的“right-up”层（最后1层）的第10帧。选择所有层的第10帧后，右击鼠标，在出现的快捷菜单中选择“粘贴帧”命令，将全部层第1帧的内容都复制到各层的第10帧中。,步骤详解,用鼠标选择“场景1”，退出元件编辑画面，一个动画的蝴蝶影片剪辑元件完成了。在库面板中，可以看到该元件有一个播放按钮，按下该播放按钮可以看到蝴蝶扇动着翅膀。 选择“文件”|“保存”命令将该fla文件保存。,技术点睛,如何选择多个帧 复制帧 延长帧 时间轴上的快捷菜单,利用Deco工具生成逐帧动画,“Deco工具”是一种图案装饰性工具，它主要包括3种模式：,网格填充,单击“Deco工具”按钮，在属性面板的“绘制效果”选项卡中的下拉列表中选择“网格填充”模式，在工作区中单击鼠标，则图案将以网格的方式填充整个区域。,对称刷子,选择“Deco工具”，在属性面板的“绘制效果”选项卡中的下拉菜单中选择“对称刷子”模式，在工作区中单击鼠标，则图案将以对称的形式填充整个区域。在工作区中出现一个轴线，同时在属性面板的“高级选项”选项卡中的下拉菜单中提供了4种模式，选择不同的模式，图案的对称形式和调整形式也会有所不同,藤蔓式填充,选择“Deco工具”，在属性面板的“绘制效果”选项卡中的下拉菜单中选择“藤蔓式填充”模式，在工作区中单击鼠标，则会在舞台中出现树叶和花朵的蔓延过程，在蔓延的图案上再单击鼠标停止填充。若是在空白处单击鼠标则继续从单击位置开始填充。,生成逐帧动画,若想将图案蔓延过程生成逐帧动画效果，则需要选择“藤蔓填充模式”，然后再属性面板中勾选“动画图案”的复选框，然后设置动画的帧频为一帧生成一个动画，然后在工作区中单击，则在时间轴上将以逐帧动画的形式展示图案蔓延过程。,举一反三,利用关键帧和逐帧动画，可以绘制一把自动展开和折起的扇子。只需要先绘制出一个扇叶，将其做成元件，然后在不同的关键帧上依次放置不同数量的扇叶就可以形成扇子自动张合的动画。,步骤详解,运行Flash CS4，打开资源光盘的“本书练习第3章原始素材 3.3逐帧动画扇子源文件.fla”文件。 在文件图层1处选中第1帧至第18帧的所有帧，按F6键插入关键帧。 选中扇片图层第1帧，把左边第2片扇片元件按“Delete”键删除，然后单击“选择工具”按钮框选除左边第1片以外的所有扇片元件，保留左边第1片扇片元件，把选择的其他扇片元件按Delete键删除。这样，在第1帧中只保留1片扇片元件。选中第2帧，删除扇片的方法同上，不同处是保留左边的第1、第2片扇片元件，把选择的其他扇片元件按Delete键删除。依此类推，第18帧保留所有的扇片元件。,步骤详解,选中扇片图层第1帧，再按住Shift键同时单击第18帧即可全选所有关键帧。然后右击鼠标出现快捷菜单，选择“复制帧”命令。在第30帧处右击鼠标出现快捷菜单，选择“粘贴帧”命令，即可把第118帧内容复制到第3047帧处。在第3047帧全选中的情况下右击鼠标出现快捷菜单，选择“翻转帧”命令，把第118帧的状态翻转过来。在第60帧右击鼠标出现快捷菜单，选择“插入帧”命令进行延时。 按Ctrl+Enter 组合键预览动画效果，并将文件保存。,3.4 形状补间动画,何谓补间动画？补间是“在中间”的简称，用户只要在头、尾关键帧中建立图像，而中间渐变过程的动画图像Flash会自动补上。 “形状补间动画”顾名思义就是建立类似外形渐变的效果，让形状看起来好像会随着时间轴变换成另一个形状。,制作矢量图形变形效果,启动Flash CS4，选择“创建新项目”的“Flash文件（ActionScript 3.0）”选项，创建一个新文档。 在工具栏中单击“椭圆工具”按钮 ，按住Shift键不放，从舞台中央拖曳出一正圆形。 依次在第10、20、30帧处按F6键新建关键帧，删除原有图形，重新画一个方形、三角形、五角星形，对各个对象的颜色分别进行设置，并适当调整各对象的位置。 在两个关键帧之间的任一普通帧右击鼠标，选择快捷菜单中的“创建补间形状”命令。一个连续变形的Flash形状补间动画就做好了。,技术点睛,形状补间动画是在两个关键帧端点之间，通过改变基本图形的形状或色彩变化，并由程序自动创建中间过程的形状变化而实现的动画。 矢量图形与元件是有区别的。形状补间动画适合于矢量图形之间的变化（如圆到方的变化）。动画针对的对象只能是矢量图形，不能是元件。如果图形对象有组合设置或为元件对象，应先按Ctrl+B键将组合或元件完全打散后，再设置其形状渐变效果。 形状补间帧至少需要用两个关键帧来标识，它们被带有一个黑箭头和浅绿背景的中间过渡帧分开。补间的速度也可以通过增加帧数或者减少帧数来调整。加速度可以通过设置属性面板中的缓动值来解决。,形状渐变制作多环变幻的气氛背景,步骤详解： 启动Flash CS4，选择“创建新项目”的“Flash文件（ActionScript 3.0）”选项，创建一个新文档。 在属性面板中设置舞台大小为500500像素。单击“确定”按钮，进入场景1 。 创建影片剪辑元件 选择“插入”|“新建元件”命令创建一个名为“多环”的影片剪辑。 按住Shift键，用矩形工具在工作区画一个500 500像素，无笔触色，全居中的正方形。单击“渐变变形工具”按钮，单击场景中的矩形，在将鼠标放到中间小圆游标上往中间推，作出环形效果。 在第15帧处插入关键帧，单击舞台中的矩形，在颜色面板中设置另一种渐变颜色，然后将教材中图3-26中间的小白三角平推到左边。,形状渐变制作多环变幻的气氛背景,步骤详解： 右击第1帧，在快捷菜单中选择“复制帧”命令，在第30帧处右击鼠标，在快捷菜单中选择“粘贴帧”命令。单击舞台中的矩形，然后再用鼠标将图3-26中的小白三角平推到右边。 分别在两个关键帧之间的任一普通帧上右击鼠标，选择快捷菜单中的“创建补间形状”命令。,形状渐变制作多环变幻的气氛背景,步骤详解： 返回场景1，添加3个图层，共4个图层。选择图层1，从库中将多环影片剪辑元件拖入舞台，居中设置后将该图层上锁。选择图层2，从库中将多环影片剪辑元件拖入舞台居中放置，选择“修改”|“变形”|“水平翻转”命令让该实例水平翻转，并在属性面板的“色彩效果”的样式中选择“Alpha”，设置透明度Alpha为50后将该图层上锁。选择图层3，从库中将多环影片剪辑元件拖入舞台居中放置，选择“修改”|“变形”|“顺时针翻转90度” 命令让该实例翻转，并在属性面板的“色彩效果”的样式中选择“Alpha”，设置透明度Alpha为35后将该图层上锁。选择图层4，从库中将多环影片剪辑元件拖入舞台居中放置，选择“修改”|“变形”|“逆时针翻转90度” 命令让该实例翻转，并在属性面板的“色彩效果”的样式中选择“Alpha”，设置透明度Alpha为20后将该图层上锁。 按Ctrl+Enter 组合键预览动画效果，并将文件保存。,利用形状提示符实现翻页特效,关键技术：书页的翻动要沿中心轴进行，实现的技巧：添加形状提示符。,步骤详解,（1）启动Flash CS4，选择“创建新项目”的“Flash文件（ActionScript 3.0）”选项，创建一个新文档。 （2）在属性面板中设置背景色为蓝色，单击“确定”按钮，进入场景1。,步骤详解,（3）制作翻开的封面 在绘图工具栏当中选择矩形按钮，在属性面板当中设置“笔触颜色”为黑色，“填充颜色”为线性，选取填充渐变中的左色标为“灰色”，右色标为“白色”，在舞台上绘制一个矩形。通过“选择工具”调整上下线为拱形，使之看上去为书页的形状。 按住Alt键拖动书页即可复制一份上面步骤中绘制好的书页。然后选择“修改”|“变形”|“水平翻转”命令，使复制的书页水平翻转，并调节该书页在舞台上的位置呈翻开状。,步骤详解,(4)制作翻书的封面 选中刚刚制作的书页，在拖动鼠标的同时按下Alt键，再复制出一张书页。单击该书页，按F8键转换为影片剪辑，将元件命名为book。 在舞台上直接双击book元件。进入book元件的编辑状态。 在元件编辑状态中，在第15和30帧处各插入一关键帧，先选择第15帧，单击“选择工具”按钮，当鼠标指向书页的右上角和右下角变形为直角时，拖动鼠标将书页的形状调整为如右图所示。,步骤详解,(4)制作翻书的封面 选择第30帧，选择“修改”|“变形”|“水平翻转”命令，使该书页水平翻转，形状调整至左边。 分别在两个关键帧之间的任一普通帧右击鼠标，选择快捷菜单中的“创建补间形状”命令。 选中第15帧，选择菜单“修改”|“形状”|“添加形状提示”命令，或者按下快捷键ctrl+shift+H，添加4个形状提示符，并将4个提示符拉到图形对象的4个角上 ，如图所示. 选择第30帧，在图形对象上设置4个提示符相应的位置 .,步骤详解,（5）返回主场景，添加新层，命名为“文字”层，在舞台上输入文字“翻书效果” （6）这样整个“翻书效果”就制作完成，将文件保存，并按Ctrl+Enter”组合键预览动画效果。,技术点睛,形状提示符与形状补间动画相互配合可以起到约束调整矢量对象形状变化的作用，在制作翻书效果、文字书写效果时常常会用到。在添加形状提示符时，要特别注意每个提示符的一一对应关系，只有准确设定了关键帧中的形状提示符的位置，才可能达到预想的效果。,彩色变幻的气氛背景,步骤详解： 启动Flash CS4，选择“创建新项目”的“Flash文件（ActionScript 3.0）”选项，创建一个新文档。 在属性面板中设置舞台大小为500500像素，设置背景颜色为白色。单击“确定”按钮，进入场景1。 单击图层1的第1帧，选择“窗口”|“颜色”命令，打开颜色面板选择填充色码表最下行左数第3个红黑放射状填充渐变效果。按住Shift键，用矩形工具在工作区画一个500 500像素，无笔触色，红黑放射状填充渐变效果，全居中的正方形。,彩色变幻的气氛背景,步骤详解： 在第80帧处插入关键帧，然后在第20、40、60帧处插入关键帧，打开颜色面板选择填充色码表双击左边的色块，打开色码表，依次分别选择绿色、紫色和蓝色。此时各实例均已打散（如没打散将其全部打散，快捷键为Ctrl+B），分别单击第1、20、40、60帧上右击鼠标，选择快捷菜单中的“创建补间形状”命令。 在舞台中新建一层，将一个弹吉他的动画人物作为影片剪辑元件导入到该文件的元件库中。建立新的文件夹放置相应的图片，最后将影片剪辑元件拖入舞台，就可以看到该实例在彩色背景中舞动的效果了。将文件保存，并按Ctrl+Enter键查看效果。,技术点睛,导入动态图片（如后缀名是.gif的图片）时，如果直接“导入到库”则可能会在库里出现很多图片和一个“影片剪辑”元件。为了更清晰地摆放各种元件，方便自己的后续操作，最好先新建一个文件夹，将这些图片和影片剪辑都放入这个文件夹中，然后拖动文件夹中的“影片剪辑”就可以在舞台中产生动画效果。,制作灯光滚动变幻的气氛背景,步骤详解： 启动Flash CS4，选择“创建新项目”的“Flash文件（ActionScript 3.0）”选项，创建一个新文档。 在属性面板中设置舞台大小为500500像素，单击“确定”按钮，进入场景1。 单击图层1第1帧，选择“窗口”“颜色”命令，打开颜色面板选择参数与操作。按住Shift键，用矩形工具在工作区画一个500 500像素，无笔触色，红黑放射状填充渐变效果，全居中的正方形。,制作灯光滚动变幻的气氛背景,步骤详解： 在第80帧处插入关键帧，然后在第20、40、60帧处插入关键帧。单击第1帧中的实例，选择填充变形工具，然后用鼠标将矩形中间白色三角推向矩形的左上角 单击第20帧中的实例，选择填充变形工具，用鼠标将场景中矩形中间的白色三角推向矩形的右上角。同理，在第40帧将矩形中间的白色三角推向矩形的右下角。第60帧将矩形中间的白色三角推向矩形的左下角。 分别在第1、20、40、60帧上右击鼠标，选择快捷菜单中的“创建补间形状”命令。,制作灯光滚动变幻的气氛背景,步骤详解： 在舞台中新建一层，选择“文件”|“导入”|“导入到库”命令，导入“本书练习第3章原始素材3.4 形状补间动画吉他手.gif”文件。这时，如果将一个弹吉他的动画人物作为影片剪辑元件导入到该文件的元件库中。建立新的文件夹放置相应的图片，最后将影片剪辑元件拖入舞台，就可以看到该实例在彩色背景中舞动的效果了。将文件保存，并按Ctrl+Enter键查看效果。,3.5 动作补间动画,动作补间动画可以让所选元素经过位置的移动、放大缩小、左右旋转等，产生让人目瞪口呆的动画效果。,图片动作效果,在Flash中，常常需要制作图片的各种动作效果，例如图片的翻转、呈现、消失、移动等等。这些效果需要应用动作补间来实现。 动作补间与形状补间的区别在于：形状补间主要用于矢量对象的动画制作，而动作补间主要用于图形或者元件的动画。,步骤详解,启动Flash CS4,打开“本书范例第3章原始素材3.5 动作补间动画图片动作效果.fla”。里面已经为用户建立好一个背景层 。 新建“图层2”，按Ctrl+L打开库，选中“图层2”的第1帧，拖曳库中的“国旗”图片到舞台上放置。选择“窗口”|“对齐”命令，在出现的对齐面板中单击“相对于舞台”，在“匹配大小”选项中选择“匹配宽和高”，在“分布”选项中选择“垂直居中分布”，在“对齐”选项中选择“水平中齐”，以此来调整图片对象在舞台上的位置 。选择图片对象，按F8键转换为图片元件。分别在第15帧、第30帧和第45帧处按F6键插入关键帧。,步骤详解,在图层2第45帧被选中的状态下，选择名为“国旗”的图片，并将属性面板中的“色彩效果”选项的样式调为“Alpha”，并把值设置为“0%”。回到第1帧，将图片拖曳到画布以外的区域，并单击工具栏中的“任意变形工具”按钮将图片元件等比例缩小。 鼠标右击时间轴上图层2的第1帧，选择快捷菜单中的“创建传统补间”，并在属性栏中将补间的旋转方式设置为“顺时针”。鼠标右击时间轴上图层2的第30帧，选择快捷菜单中的“创建传统补间”，这样就做好了第1张图片“国旗”的进入和退出动作。,步骤详解,下面接着来做第2张图片“天安门”的进入和退出动作。新建一个图层（图层3），选中图层3的第46帧，按下F6键添加关键帧，拖曳第2张图片“天安门”到舞台上放置。选择“窗口”“对齐”命令，在出现的对齐面板中单击“相对于舞台”，在“匹配大小”选项中选择“匹配宽和高”，在“分布”选项中选择“垂直居中分布”，在“对齐”选项中选择“水平中齐”，以此来调整图片对象在舞台上的位置。选择图片对象，按F8键转换为图片元件。分别在图层3的第60帧、第75帧和第90帧处按F6键插入关键帧。,步骤详解,在图层3第90帧被选中的状态下，选择名为“天安门”的图片，并将属性面板中的“色彩效果”选项的样式调为“Alpha”，值设置为“0%”。回到第46帧，将图片拖曳到画布以外的区域，并使用工具栏中的任意变形工具将图片元件等比例缩小。,步骤详解,鼠标分别右击时间轴上图层3的第46、75帧，选择快捷菜单中的“创建传统补间”，并在属性栏中将补间的旋转方式设置为“顺时针”。 选中背景层的第90帧，按F5键添加普通帧对背景层进行延时。 将文件另存为“图片动作效果.fla”，并按Ctrl+Enter键查看动作补间动画效果。,技术点睛,动作补间，也称为运动渐变。适合于设置原件、群组、图层等对象的大小、颜色、位置、旋转等变化。运动的对象必须是元件或是一个对象，不能是矢量图形。 动作补间动画至少需要设置两个关键帧，这两个关键帧被一个黑箭头和浅蓝背景的中间过渡帧分开。有问题的过渡帧，例如丢失了关键帧，Flash软件会用虚线来标识。 不同于动作补间，形状补间适用于图形之间的变化（如圆到方的变化），运动的对象只能是矢量图形，不能是元件。如果在形状过渡中使用文字，首先需将文本分解。,技术点睛,一个场景中，导入舞台的对象转换为元件再进行动作补间设置以达到重复利用和有效使用的目的。例如对于导入到库的图形对象是无法设置透明度的，只有把图形对象转化成元件才能设置Alpha样式。但是，同一时刻同一层要保证只有一个元件进行动作补间动画设置，否则无法设置动画。 对齐面板可以重新调整选定对象的对齐方式和分布。对齐面板分为5个区域：其中“相对于舞台”按钮可以调整选定对象相对于舞台尺寸的对齐方式和分布，如果没有按下此按钮则是两个以上对象之间的相互对齐和分布。“对齐”区域用于调整选定对象的左对齐、水平中齐、右对齐、上对齐、垂直中齐和底对齐。“分布”区域用于调整选定对象的顶部、水平居中和底部分布，以及左侧、垂直居中和右侧分布。“匹配大小”区域用于调整选定对象的匹配宽度、匹配高度或匹配宽和高。“间隔”区域用于调整选定对象的水平间隔和垂直间隔。,文字特效中动作补间的运用,一个有创意的动漫作品少不了文字动画的制作。动作补间经常应用于文字动画特效中。 本案例制作的就是一个文字晃动的效果。,步骤详解,启动Flash CS4，选择“创建新项目”的“Flash文件（ActionScript 3.0）”选项，创建一个新文档。 选择“修改”|“文档”命令，出现“文档属性”对话框，设置尺寸、背景颜色等相关属性，然后单击“确定”按钮。 选择“文字工具”在舞台上输入“FLASH”几个字，然后选择该文字，再在属性面板中设置字体为“Arial Black”、大小为“60”。接着选择 “选择工具”选择文字对象，按Ctrl+B键将文字打散，然后将“F”、“L”、“A”、“S”、“H”5个文字分别设置为“红色”、“橙色”、“黄色”、“绿色”及“蓝色”。,步骤详解,单击“选择工具”按钮，选择所有文字对象后，选择“修改”|“时间轴”|“分散至图层”命令将文字分散至5个图层中，自上而下图层名称自动命名为“F”、“L”、“A”、“S”、“H” 。选择原先的“图层1”，然后按右下角的“删除图层”按钮将此图层删除。 在时间轴中除了保留“F”图层外，分别在其他图层中单击“显示/隐藏所有图层”按钮，将另外四个图层的内容暂时设置为隐藏。在“F”图层按F6键将第3帧设置为关键帧，然后选择“任意变形工具”，对对象任意进行大小缩放及旋转角度的调整。,步骤详解,调整完后，对“L”、“A”、“S”、“H”各层也做如第5步骤的调整。 将所有图层的第5帧设置为关键帧，选择“任意变形工具”，将对象重新做大小缩放及旋转角度的调整。 鼠标分别右击时间轴上所有图层的第1、3帧，选择快捷菜单中的“创建传统补间”，设置文字各自晃动的连接效果 。 将文件另存为“晃动文字.fla”，按Ctrl+Enter键观看影片晃动文字效果。,技术点睛,文本的属性面板可以进行字体大小、字符间距等细节的设置。 文本类型 静态文本 动态文本 输入文本,如何变换文字效果,动画制作中有些效果不能直接在文本对象的初始状态实现。例如为文本填充渐变，为文本提供轮廓，或者改变单个字符的形状。要以这种方式编辑文本，需要首先将文本分解这样做的目的是将文本从一组可编辑和配置的字符转换为最基本形式，即矢量图形。从而可以用任何方式对其进行整形或从图形的角度进行编辑。 注意：一旦文本被分解，就不再能作为文本编辑。所以在分解之前确保正确设置文本内容及其外观。,变换文字的方法,文字转变为矢量图形的操作步骤如下：首先选中所有的文本，选择“修改”“分离”命令；然后连续按两次Ctrl+B键将这些文字分离，转化为矢量图形。此时文字已经变为矢量形状，可以对其进行颜色和其他细节操作。如有需要可以设置完后再将文字转化为元件。,制作动画相册,步骤详解： 启动Flash CS4，选择“创建新项目”的“Flash文件（ActionScript 3.0）”选项，创建一个新文档。选择“文件”|“导入”|“导入到库”命令，分别导入文件所需图片。 按Ctrl+L键打开库，拖曳第一张图片到舞台放置。选择“窗口”“对齐”命令，在出现的对齐面板中单击“相对于舞台”，在“匹配大小”选项中选择“匹配宽和高”，在“分布”选项中选择“垂直居中分布”，在“对齐”选项中选择“水平中齐”，以此来调整图片对象在舞台上的位置。并把此层重命名为背景层。 选择图片对象，按F8键将其转换为图片元件。在第10帧处按F6键插入关键帧，回到第1帧，在绘图工具中选择“任意变形工具”，调整照片的大小并将属性面板中的“色彩效果”选项的样式调为“Alpha”，并把值设置为“0%”。在两个关键帧之间(第2帧和第9帧)，右击鼠标，在弹出的快捷菜单中选择“创建传统补间”。,制作动画相册,步骤详解： 在第21帧处按F7键插入空白关键帧，在库中拖曳“画轴”图片到舞台放置，选择“窗口”|“对齐”命令，在出现的对齐面板中单击“相对于舞台”，在“匹配大小”选项中选择“匹配宽和高”，在“分布”选项中选择“垂直居中分布”，在“对齐”选项中选择“水平中齐”，以此来调画轴在舞台上的位置。在第100帧处按F5键插入帧，并锁定该层。 新建图层2，重命名为“标题层”。在右上角输入“盆景艺术”的文字。并在属性面板对文字进行大小、颜色等细节设置。 新建图层3，重命名为“盆景图片1” 层。在第21帧处插入空白关键帧，拖曳其中一张盆景图片到舞台放置。在工具中选择“任意变形工具”，调整照片的大小。,制作动画相册,步骤详解： 选择图片对象，按F8键转换为元件。在第45帧处按F6键插入关键帧，回到第21帧，在工具中选择“任意变形工具”，调整照片的大小。并将照片拖到偏离舞台、右下角空白的位置。在两个关键帧之间(第22帧和第44帧) 设置传统补间，在属性面板中的选择“旋转”选项设置为“顺时针”。 在第57帧处按F6键插入关键帧，将属性面板中的颜色选项的“Alpha”值设置为“0”。在两个关键帧之间(第46帧和第56帧) 设置传统补间。 依上述方法对其他图层的图片进行动作补间设置。 将文件另存为“动作补间动画.fla”，并按Ctrl+Enter键查看动作补间动画效果。,3.6 引导层补间动画,引导层的功能是可以让元件沿着绘制的行进路线按照设定的方法移动。,案例解析,本案例通过使用引导层补间动画，在Flash CS4中制作一只蝴蝶从花丛中沿设定路线飞舞的动画过程。请读者思考，Flash怎样加上小小的设计，让这只蝴蝶将从右方翩翩飞入花丛中？ 关键技术：新建一个引导层。,步骤详解,在Flash CS4中打开资源光盘中的“本书范例第3章原始素材3.6 引导层补间动画蝴蝶引导层.fla”文件。现有flash文档的时间轴上已有4个图层，分别是butterfly（蝴蝶）图层、红花图层、黄花图层和绿叶图层。因为本案例的大概有100多帧，为了制作上的方便，请将时间轴右侧的“时间布局”下拉菜单设置为“小”，这样一来用户就可以在时间轴上一次浏览更多的帧了。 此时库中只有背景鲜花的元件，没有蝴蝶元件。打开资源光盘中的“本书范例第3章中间文件3.3逐帧动画动态蝴蝶元件.fla”文件，此时库面板显示了两个文档的元件内容。在“蝴蝶引导层.fla”文件的舞台中选择“动态蝴蝶元件.fla”文件中库面板里的butterfly元件拖到舞台中。则蝴蝶引导层.fla文件也有了butterfly这个蝴蝶影片剪辑元件。,步骤详解,选中butterfly图层，把库中的蝴蝶拖入舞台中。选择舞台中的蝴蝶，在工具栏中单击“任意变形工具”按钮，调整蝴蝶的大小与角度。 选中butterfly图层的第1帧，用鼠标右键单击，选择“添加传统运动引导层”。,步骤详解,在“传统运动引导层”中，单击“铅笔工具”按钮，绘制出蝴蝶的行进路线。 让蝴蝶在花丛中扇动着翅膀停留一段时间，然后再让它飞舞起来。为了做出这种效果，先选中butterfly层，分别在第15帧和第105帧按下F6键建立关键帧，接着单击“选择工具”按钮将第15帧中蝴蝶元件的中心点与引导层中的行进路线起点对齐，同样，调整第105帧中蝴蝶元件的中心点与引导层中的行进路线的终点对齐。在butterfly层的第15帧与第105帧之间单击鼠标右键，在弹出的快捷菜单中选择“创建传统补间”命令，将这一段设置为动作补间动画。 完成对象与行进路线的对齐动作后，选择“文件”“另存为”命令保存文档，并按Ctrl+Enter键查看此动画的效果。,技术点睛,本案例中在另外的Flash文档中导入了一个蝴蝶的影片剪辑元件。可以看出通过库面板，元件得到了共享。从事小组创作的同学，可以由有美工功底的同学制作了动漫景物后转换为元件，给后期制作的同学进行使用，动漫制作的过程就可以象工厂的流水线一样进行。 引导层补间动画可以自定义对象运动路径。通过在对象上方添加一个运动路径的层，在该层中绘制运动路线，而让对象沿路线运动，而且可以将多个层链接到一个引导层，使多个对象沿同一个路线运动。,观察一下引导层和butterfly层的递归状态，如果如左图所示，则要用鼠标将butterfly层拖动到引导层上，形成如右图的隶属状态。这样，引导层才能真正起到引导的作用。,技术点睛,使用元件的优势,可以重复利用，利于控制文件大小 可以通过元件的嵌套，做出复杂的动画 方便动画的循环播放,3.7遮罩层补间动画,在Flash的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。 遮罩主要有两种用途： 用在整个场景或特定区域，使场景外的对象或特定区域外的对象不可见。 用来遮罩住某一元件的一部分,从而实现一些特殊的效果。,望远镜效果,步骤详解： 启动Flash CS4，选择“创建新项目”的“Flash文件（ActionScript 3.0）”选项，创建一个新文档。 选择“文件”|“导入”|“导入到库”命令，导入文件所需图片。本案例图片可以使用资源光盘中的“本书范例第3章原始素材3.7 遮罩层补间动画风景图片.jpg”。,望远镜效果,步骤详解： 按Ctrl+L键打开库，拖曳刚刚导入的图片到舞台放置。选择“窗口”|“对齐”命令，在出现的对齐面板中单击“相对于舞台”按钮，在“匹配大小”选项中选择“匹配宽和高”，在“分布”选项中选择“垂直居中分布”，在“对齐”选项中选择“水平中齐”，以此来调整图片对象在舞台上的位置。并把此层重命名为“pic”。在第40帧处按F5键插入帧。 新建图层2，重命名为“望远镜”。 在该层用“椭圆工具”画两个相交的圆如望远镜形状。 选择“望远镜”对象，按F8键转换为图形元件。分别在第20、40帧处按F6键插入关键帧。在绘图工具中单击“选择工具”按钮，分别在第1、20、40帧处调整望远镜的位置。在第1、20关键帧处分别设置动画补间。,望远镜效果,步骤详解： 在“望远镜”图层右击，在弹出菜单中选择“遮罩”命令，该图层就会变成遮罩层，“望远镜”的层图标就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的“pic”层关联为“被遮罩层”。 选择“文件”|“另存为”命令保存“遮罩层.fla”，并按Ctrl+Enter键查看此动画的效果。,技术点睛,创建遮罩 在Flash中没有一个专门的按钮来创建遮罩层，遮罩层是由普通图层转化的。只要在某个图层上右击，在弹出的快捷菜单中勾选“遮罩” 项，该图层就会生成遮罩层，“层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩层”。,技术点睛,构成遮罩和被遮罩层的元素 遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮、影片剪辑、图形、位图、文字、线条。,文字的探照灯效果,步骤详解： 启动Flash CS4，选择“创建新项目”的“Flash文件（ActionScript 3.0）”选项，创建一个新文档。 单击“文字工具”按钮，在舞台上输入相应文字。选择文字，在属性面板中设置字体颜色为绿色并设置适当的文字大小。 选择文字，按F8键将文字转换成一个名为text的元件。用鼠标双击该层，改名为“green”。 鼠标单击文字，按Ctrl+C复制文字。新建一个图层，命名为“red”层。按Ctrl+Shift+V键，将文字粘贴到原来的位置上。并按Ctrl+B键两次将文字打散，选取填充色为红色把该层文字变为红色。,文字的探照灯效果,步骤详解： 在“red”上新建一个“遮罩层”，在该层中绘制一个不带边线的圆形用做遮罩，填充颜色不限，直径大于输入文字的高度。选中该圆，按F8键将其转换为“遮罩”的图形元件 将实例圆拖到文字左边，在同一层第25帧按下F6键插入一个关键帧，再在第50帧按下F6键插入一个关键帧。将第25帧的圆从最左端移到最右端。 选择“遮罩层”的第1帧，设置动作渐变动画。对第25帧进行同样的操作,文字的探照灯效果,步骤详解： 在“遮罩层”的名称附件上右击，在弹出菜单中选择“遮罩层”命令，把这一层变为遮罩层。 在“green”层和“red”层的第50帧按F5键插入帧进行延时。 将文件另存为“遮罩文字.fla”，并按Ctrl+Enter键观看效果。,3.8 骨骼动画,使用骨骼工具可以对元件实例和形状绘制骨骼，同时结合使用绑定工具可以调整形状对象的各个骨骼和控制点之间的协调关系。 关键技术：Flash CS4中的骨骼系统可以帮助用户方便地将各个元素以父子形式链接起来。例如在昕昕走路移动的过程中，身体移动时，她的胳膊、腿脚、提包等也要跟随移动。,步骤详解,在Flash CS4中打开资源光盘的“本书范例第3章原始素材3.8 骨骼动画骨骼动画.fla”文件，文件中已有绘制好的昕昕的全身图像和她所携带的提包。可以看出，昕昕的身体各部分，如头、身体、四肢、提包已经分别定义为不同的影片剪辑。 现在准备应用骨骼工具。因为身体是人的重心，所以根骨骼应该是身体。单击“骨骼工具”按钮，在身体上单击下，然后拖动鼠标不放到头部的位置，松手放开。也就是说，当在骨骼工具的上方出现了“+”的时候，就表明身体和头部形成了联系。此时松开鼠标则可以建立1根骨骼的链接。但是为了符合常理，要将建立链接的点定位在头部的下方，类似于人的脖子。,步骤详解,同样，从身体出发，分别定义好四肢的骨骼。这时需要注意的是，使用骨骼工具从身体向四肢做链接的时候，拖到的链接点的位置最好是双手和双脚与身体接触的部位，这样在接下来形成骨骼动画的时候才能更加准确地移动双手和双脚。再用骨骼工具将提包与昕昕的右手建立链接。 如果在定义骨骼动作之前，需要修改骨骼动作的轴心，单击“选择工具”按钮，再单击舞台的空白处，取消查看骨骼。再单击“任意变形工具”按钮，点选头部，将中心点拖到脖子的位置上。然后分别用任意变形工具修改左右手和左右脚的中心位置，分别调整到如教材中图3-82所示的效果。此时5个白色圆点的的位置，也就是身体与头部、手和脚之间的连接处，这样昕昕在接下来走路的过程中才会按照正常人的样子来活动头部以及手脚。当然也要调整提包和右手的轴心位置。,步骤详解,此时若想在新的一帧插入关键帧来改变该元件形态，即“姿势”。现在准备插入一个走路的姿势。在骨架_1图层的第12帧右击鼠标，在快捷菜单中选择“插入姿势”命令后，单击“选择工具”按钮，然后分别拖曳昕昕的双手和双脚，抬起左脚，双手和头部分别调整使其协调，并使提包跟随着手臂一起移动。如果拖曳后昕昕的手和脚与身体的位置出现了偏差，可以使用“任意变形工具”和“选择工具”进一步调整到适合的位置为止。 接下来，在骨架_1图层的第24帧处右击，在快捷菜单中选择“插入姿势”命令后，继续使用选择工具调整昕昕走路的姿势：右脚抬起，左脚放下，左手在前，右手在后，头部稍微移动，并使提包跟随着手臂一起移动。,步骤详解,按照以上的方法分别在骨架_1图层的第36帧、48帧处、60帧处分别右击，在快捷菜单中选择“插入姿势”命令后，继续使用“选择工具”和“任意变形工具”调整昕昕的走姿和提包的位置。 然后将时间线分别移动到第1、12、24、36、48、60帧处进行微调，使昕昕的走路姿势协调，并使提包跟着昕昕手臂的走动而移动。为了看到昕昕右手拎包的效果，可以暂时修改文档的背景颜色为蓝色。在舞台上右击，弹出的快捷菜单中选择“文档属性”命令，在文档属性对话框中修改文档的“背景颜色”为蓝色。调整完毕后，按Enter键播放时间轴观看效果，如果出现连接有偏差的地方，再重新利用任意变形工具和选择工具进行调整。,步骤详解,昕昕走路的姿势正确后，为了实现昕昕走路的效果就要移动一定的位置了，单击“选择工具”按钮，然后框选身体的全部，再单击“任意变形工具”按钮，分别在第12、24、36、48、60帧处，将鼠标指针移动到黑色边框里面，指针右下方出现向四方的黑色箭头的时候，使用“任意变形工具”向前方和下方移动即可。 选择“文件”|“另存为”命令保存文档，并按Ctrl+Enter键查看此动画的效果，即可看到昕昕的走路效果。,技术点睛,骨骼工具是Flash CS4中新增的一个强有力制作人物动作的工具。使用骨骼根据可以让元件实例和形状对象按复杂而自然的方式移动，同时只需做很少的设计工作。 使用骨骼工具向元件的实例内部添加骨骼时，每个元件的实例只能具有一个骨骼。一旦创建骨骼后，所有被骨骼关联的元件都会移动到Flash CS4的“骨架”图层中。在使用骨骼工具的时候，首先需要确定一个主要的支点（例如本案例中昕昕的身体），然后拖动出其他的分支点（例如本案例中昕昕的头部和四肢）；通过在时间轴上添加姿势来实现动画人物的姿势或表情的变化。 使用骨骼工具向单个形状的内部添加骨骼时，可以添加多个骨骼，这不同于元件的实例（每个实例只能具有一个骨骼）。,3.9 动画编辑器,读者已经学习了如何用引导层引导蝴蝶沿着特定路径飞行，本案例将借助动画编辑器制作蝴蝶上下翻飞的动画效果。,步骤详解,在Flash CS4中打开资源光盘中的“本书范例第3章原始素材3.9 动画编辑器蝴蝶.fla”文档，准备进行动画制作。 在库面板中可以看到有一个命名为“butterfly”的图形元件。按Ctrl+F8键新建元件，命名为“fly”，类型为“影片剪辑”。 将库中元件“butterfly”拖到影片剪辑FLY编辑场景中，形成一个实例。这时候的蝴蝶比较大，选择“任意变形工具”将其缩放到合适的位置。,步骤详解,在时间轴的第80帧处按F6键插入关键帧，然后将鼠标放在第180帧中间的任意位置右击，在弹出的快捷菜单中选择“创建补间动画”，这时时间轴中第180帧处的颜色变为浅蓝色。 选择“窗口”|“动画编辑器”命令打开“动画编辑器”面板。如教材中图3-87所示，动画编辑器可以精确地调整动画的属性值。该面板有5个栏目，分别是“基本动画”、“转换”、“色彩效果”、“滤镜”、“缓动”。在“基本动画”栏目中可设置x、y和旋转z的属性值。在面板的右边是该属性的曲线，可以调整这个曲线来更改对象的x属性。,步骤详解,在动画编辑器中，有两个方向相反的小三角形，它可以用来跳转到另一个关键帧，中间的棱形可添加和删除关键帧。将鼠标移到第5帧处，单击中间的棱形，添加关键帧。添加关键帧后X、Y的图表中增加了两个黑色的圆点。 用选择工具单击选择蝴蝶并向下拖动，松开鼠标之后看到动画编辑器中X、Y图表形成了向上倾斜的直线。此时X、Y的具体的值分别为：364.9像素和494像素。为了蝴蝶出现旋转的效果，在这里设置旋转Z的值为6.3o。,步骤详解,用同样的方法，单击黄色菱形图标，分别在10，15，20，25，30，35，40，45，50，55，60，65，70，75处添加关键帧。并分别设置其X、Y旋转Z的值。 选择“文件”|“另存为”命令保存文档，并按Ctrl+Enter键查看此动画的效果，可以看到蝴蝶飞行的效果完成了。,技术点睛,动画编辑器是Flash CS4新增的功能面板，可以精确地调整动画的属性值。这里有5 个栏目，可分别调整相应在的动画属性 添加、移除和关键帧导航: 在关键帧一栏中，有两个方向相反的小三角形，它可以用来跳转到另一个关键帧，中间的棱形可添加和删除关键帧。 基本动画：x、y、z属性控制了缓动动画的位置，叫做空间属性。 缓动：可以为相应属性设置缓动效果 。 色彩栏和滤镜栏：用法跟缓动一样，通过单击“+”来添加相应效果，并设置其属性值 。,3.10 3D转换动画,3D转换功能是Flash CS4中又一新增的功能。可以通过3D旋转和移动工具为原本2D的动画元件添加具有空间感的补间动画，沿X、Y、Z轴任意旋转和移动对象能够产生极具透视效果的动画。,步骤详解,启动Flash CS4，选择“创建新项目”的“Flash文件（ActionScript 3.0）”选项，创建一个新文档。 使用文字工具在画布上写上“Flash”，将字体改为“