[高等教育]flash课件共享 第六章.ppt

第六章 Flash 8动画分类及网页文字动画,计算机与通信工程学院 王斌 2011年6月,本章简介,本章主要介绍Flash动画的分类以及不同类型动画的特征，并通过实例深入浅出地介绍了帧并帧动画、形状渐变动画和运动渐变动画的制作方法。结合网页特征和动画制作方法详细的介绍了常用的文字动画类型以及文本动画制作方法。,6.1 帧并帧动画（逐帧动画）,就是通过编辑和修改动画中的每一帧内容而产生的。它特别适合那些复杂的、每一帧图像都有变化的动画，而且这些变化并不止是简单的移动。因为Flash中需要存储每一个完整的帧，所以显著提高了文件的容量大小。,绘图纸,绘画纸是一个帮助定位和编辑动画的辅助功能，这个功能对制作逐帧动画特别有用。通常情况下，Flash 在舞台中一次只能显示动画序列的单个帧。使用绘画纸功能后你就可以在舞台中一次查看两个或多个帧了，如下图所示：,绘图纸各个按钮的介绍,【绘图纸外观】按钮：按下此按钮后，在时间帧的上方，出现 绘图纸外观标记。拉动外观标记的两端，可以扩大或缩小显示范围。 【绘图纸外观轮廓】按钮：按下此按钮后，场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程。 【编辑多个帧】按钮：按下后可以显示全部帧内容，并且可以进行“多帧同时编辑”。 【修改绘图纸标记】按钮：按下后，弹出菜单，菜单中有以下选项：,绘图纸各个按钮的介绍,、【总是显示标记】选项：会在时间轴标题中显示绘图纸外观标记，无论绘图纸外观是否打开。 、【锚定绘图纸】选项：会将绘图纸外观标记锁定在它们在时间轴标题中的当前位置。通常情况下，绘图纸外观范围是和当前帧的指针以及绘图纸外观标记相关的。通过锚定绘图纸外观标记，可以防止它们随当前帧的指针移动。 、【绘图纸 2】选项；会在当前帧的两边显示两个帧。 、【绘图纸 5】选项；会在当前帧的两边显示五个帧。 、【绘制全部】选项；会在当前帧的两边显示全部帧。,奔跑的豹子,新建flash文档，属性：400*260，背景白色 创建背景图层：文件-导入-导入到舞台-背景图，选择第8帧，在中间增加过度层（F5）， 新建图层，选择第一帧，文件-导入-导入到舞台-奔跑的豹子1，此时会弹出对话框，选择是 调整对象位置：先把“雪景图”锁定，然后按下时间轴面板下方的“编辑多个帧”，再单击“修改绘图标记”,奔跑的豹子,在弹出的菜单中选择“绘制全部”，最后执行“编辑全选”。 用鼠标将场景左上方的豹子拖动，这样就可以把8帧中的图片一次全移动到场景中央。 设置文字：新建图层，选择“文字工具”，属性设置：静态文本，隶书，大小35，深蓝色，在文本框中输入文字 控制-测试影片：ctrl+enter，满意就保存为fla格式文件，或者导出为swf格式：文件-导出-导出影片。,6.2 渐变动画,怎么制作上面的动画？,形状渐变动画,创建形状渐变动画必须具备的三个条件： 动画中至少两个帧，而且关键帧的内容不同（形状、位置或颜色不同） 关键帧中的画面内容必须具备形状渐变的元素。图像必须是打散的，如果图像为一个整体，必须经过【修改】|【分离】的步骤。 设置渐变动画的方式为形状渐变动画。,圣诞贺卡,导入背景图片 制作图层star1,star2,star3,star4 在每一个图层上分别创建星形元件 在时间轴上合适的点上插入关键帧 在后一个关键帧的舞台上改变星形为文字 在两个关键帧之间插入形状补间动画。,运动渐变动画,运动渐变动画是利用符号元件（图形、影片剪辑）来制作渐变动画。必须满足三个条件： 至少有两个关键帧，而且帧中内容必须是元件的实例，不能是形状和元件实例的混合。如果不是，可以用右键菜单中的【转化为元件】，将图形转化为元件。 两个关键帧中的内容不同（色彩、形状或位置等） 将补间动画形式设置为动画渐变类型。,演示：球相撞,注意： 如果场景中有背景（如下面的横线），需要设置普通帧直至场景结束。 填充可以改变以增加立体效果,在设计补间动画的过程中，时间轴中的帧与帧的关系有着紧密的联系，它们之间通过各种颜色和图标状态来区分，具体如下所示。,各种补间帧的状态,代表动画补间的开始和结束。,代表形状补间。,表示补间是断的或不完整的，例如，最后的关键帧丢失了。,形状补间和动画补间,各种补间帧的状态,表示内容与第一帧相同。,表明该帧已经用“动作”面板分配了一个帧动作。,一个红色标记表明该帧包含一个标签或注释。,形状补间和动画补间,形状补间动画和动作补间动画的区别,相同点：形状补间动画和动作补间动画都属于补间动画。前后都各有一个起始帧和结束帧。 二者之间的区别如下表所示。 动作补间动画 形状补间动画 在时间轴 淡紫色背景加长箭头 淡绿色背景加长箭头 组成元素 1 2 1、影片剪辑、图形元件、按钮、文字、位图等 2、 形状，如果使用图形元件、按钮、文字，则必先打散再变形。 完成的作用 1 2 1、实现一个元件的大小、位置、颜色、透明等的变化。 2、 实现二个形状之间的变化，或一个形状的大小、位置、颜色等的变化。,补充知识-填充变形工具,渐变工具与填充变形工具相配合可以产生非常好的立体效果。,填充中心,水平缩放,扩充变形,填充色旋转,6.3 网页文字动画创作,文本类型： 静态文本：内容不会随着网页交互而改变。 可输入文本：编辑时只创建文本框，文本内容在播放动画时由用户输入。 动态文本：在编辑时也只是创建文本框，文本框内容在播放动画影片时动态输入。 文本属性的设定：选中工具箱中的 工具，在舞台中单击即可显示文本编辑框，并设定其属性。,网页文字动画举例-文字跃现,注意： 第6步，文字的打散 第7步，墨水瓶工具，改变笔触的颜色。,形状提示,要控制更加复杂或罕见的形状变化，可以使用形状提示。形状提示会标识起始形状和结束形状中的相对应的点。 例如，如果要补间一张正在改变表情的脸部图画时，可以使用形状提示来标记每只眼睛。这样在形状发生变化时，脸部就不会乱成一团，每只眼睛还都可以辨认，并在转换过程中分别变化,形状提示,形状提示包含字母（从 a 到 z），用于识别起始形状和结束形状中相对应的点。最多可以使用 26 个形状提示。 起始关键帧上的形状提示是黄色的，结束关键帧的形状提示是绿色的，当不在一条曲线上时为红色。 要在补间形状时获得最佳效果，请遵循这些准则： 在复杂的补间形状中，需要创建中间形状然后再进行补间，而不要只定义起始和结束的形状。 确保形状提示是符合逻辑的。例如，如果在一个三角形中使用三个形状提示，则在原始三角形和要补间的三角形中它们的顺序必须是一致的。它们的顺序不能在第一个关键帧中是 abc，而在第二个中是 acb。 如果按逆时针顺序从形状的左上角开始放置形状提示，它们的工作效果最好。,遮罩动画,“遮罩”， 顾名思义就是遮挡住下面的对象。首先我在红板（遮罩层）上挖一个洞，把它放在蓝板（被遮罩层）之上，随着红板的移动，大家可以观察到的一个蓝色圆洞在移 动，这说明我们是透过红板上的这个洞看到下面的内容的。这个洞（元件）是透光区，所在层为遮罩层。它就像一张不透明的纸遮住它下面的图层，使你看不到下面 图层中的内容。而在遮罩层中的图片或文字，就像是在这张纸上开的孔，透过它就可以看到下面图层中的内容，这就是遮罩动画的原理。 “遮罩动画”也确实是通过“遮罩层”来达到有选择地显示位于其下方的“被遮罩层”中的内容的目地，在一个遮罩动画中，“遮罩层”只有一个，“被遮罩层”可以有任意个。,最简单的遮罩动画,遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。,遮罩文字,新建文档，背景为黑色 把图层1命名为“文字亮”，在第一帧插入“flash media”，颜色：白，并复制 新建图层“文字暗”，右击，在弹出的快捷菜单中选择“粘贴到当前位置”，改变颜色为深灰色 新建元件“光”，在编辑区中画一个放射性填充 回到场景1，新建图层，命名“遮罩”，把光元件拖入场景中 在遮罩层70帧处插入关键帧，并调整光元件的位置，将遮罩图层移动到文字亮图层底下，在文字亮图层创建遮罩。,万花筒效果,文档300*300 导入一幅颜色比较鲜艳的图片，转换为图形文件“图片” 新建一个影片剪辑，命名为“遮罩”，把“图片”元件从“库”面板中拖入到编辑区，利用“对齐”面板使其居中。 新建一个图层2，利用工具栏中的矩形工具绘制一个无边框的矩形，矩形大小为300*300，使其居中 利用直线工具在矩形中绘制两条对角线，删除其中的三个三角形及两条对角线。,万花筒效果,选中图层1的“图片”元件，选择“修改”-“变形”-“缩放与旋转”命令，打开面板，设置旋转角度为45度 放大“图形”元件至完全包含三角形位置 在图层1的第30帧插入关键帧，创建动作渐变动画。在下面的“属性”面板中选择逆时针旋转一周。 把图层2延长至30帧，选中图层2，右击，在弹出的快捷菜单中选择“遮罩层”命令，创建遮罩。 返回到场景1，从“库”面板中把“遮罩”影片剪辑拖放到场景中，x，y为0 右击，利用快捷菜单复制这个影片剪辑，并选择“粘贴到当前位置”命令，选择“修改”-“缩放和旋转”，旋转角度为180，利用同样方法，复制另外两个影片剪辑，形成全图。,闪闪的红星,知识提示： 将线条转化为填充 创建遮罩动画 使用变形面板 学习使用橡皮擦水龙头工具,闪闪红星,一、制作红五角星 1、选择“文件”“新建”命令，创建一个新动画。 2、选择“修改”“影片”命令，打开“影片属性”对话框，将背景颜色设置为纯黑色，单击“确定”按钮退出。 3、选择“插入”“新建组件”命令，打开“组件属性”对话框，在名称栏内输入“红星”，在“类型”栏下选“图形”。单击“确定”按钮退出。 4、选择直线工具，颜色选纯白，在工作区画一条直线。 5、选择“窗口”“面板”“转换”命令，打开“转换”对话框，选择“旋转”输入数值“36”，单击右下角左边的复制按钮复制4条直线。,知识提示： 将线条转化为填充 创建遮罩动画 使用变形面板 学习使用橡皮擦水龙头工具,闪闪红星,6、选择“编辑”“取消选择”命令，取消对任何对象的选择。 （由于5条直线呈辐射状交叉，因此实际上存在10条直线，其长度是原来的一半） 7、选择箭头工具，分别拖动这10条直线，组成五角星的图形。 8、选择直线工具，从五角星的各顶点画角平分线。 9、选择“窗口”“面板”“填充”，打开“填充”对话框，在下拉菜单中选渐变，在渐变色调整条下将两个色标调整为红色和黑色，形成由红到黑的渐变色。 10、选择油漆桶工具，在工具栏的“选项”下选“封闭大空隙”，在五角星中每隔一个三角形进行填充，油漆桶位置尽量靠近中心。 11、在填充对话框中，将渐变色调整为白色和红色的渐变，再将五角星中的其他三角形填充，油漆桶位置也尽量靠近中心。,闪闪红星,二、幅射线的制作 1、选择“插入”“新建组件”命令，打开组件属性对话框，在名称栏内输入“线”，类型栏内选择“图形”，单击“确定”按钮退出，进入“线”符号的制作。 2、选择“查看”菜单，打开标尺和网格线。 3、选择直线工具，选择“窗口”“面板”“描绘”命令，打开“描绘”对话框，将线宽设为4，画一条长度约300的直线。 4、选择选择“插入”“新建组件”命令，打开组件属性对话框，在名称栏内输入“线1”，类型栏内选择“图形”，单击“确定”按钮退出，进入“线1”符号的制作。 5、选择“窗口”“库”命令，打开“库”窗口，选择符号“线”，将其拖到工作区，放在工作区中心的下一方格，其右端与工作区的中心对齐。,闪闪红星,6、选择“修改”“转换”“编辑中心”命令，调整“线”引例的中心点，使其与工作区的中心重合。 7、在“转换”对话框中，将“旋转”数值设为15，单击复制按钮复制出如图所示的图形。 8、选择“编辑”“全选”命令，将所有对象都选择。选择“修改”“分解组件”命令，打碎所有对象，成为最初的矢量线，然后选择“修改”“外形”“转换行成填充”命令，将矢量线转换成矢量图形。 9、选择“插入”“新建组件”命令，打开组件属性对话框，在“名称”栏内输入“线2”，“类型”栏内选择“图形”，单击“确定”，进入线2符号制作。 10、在“库”窗口中选择符号“线”，将其拖到工作区，放在工作区中心的上一方格，其右端与工作区的中心对齐。 11、选择“修改”“转换”“编辑中心”命令，调整“线”引例的中心点，使其与工作区的中心点重合。 12、在“转换”对话框中，将“旋转”数值设为15，再单击复制按钮复制出如图所示的图形。,闪闪红星,三、产生运动的射线 1、单击时间线窗口上面的“场景1”图标，进入场景1的编辑制作。 2、在时间线窗口中，单击加层工具，增加两个新层图层2和图层3。 3、分别用鼠标从标尺上拖出纵横两条引导线，以确定舞台的中心。 4、在“库”窗口中，选择符号“线2”，将其放入图层1，调整其位置与舞台中心重合。 5、选择“窗口”“面板”“效果”命令，打开“效果”对话框，在下拉菜单中选“色彩”，将颜色调为金黄色。 6、选择图层2，从“库”窗口中选择符号“线1”将其放入图层2，调整其位置与舞台中心重合。 7、选择图层2单击鼠标右键，弹出快捷菜单，从中选择“遮蔽”，使图层2成为遮罩层，图层1成为被遮罩层。此时射线效果已经出现。,闪闪红星,8、选择图层3，从“库”窗口中选择符号“红星”，将其放入层3，调整其位置与舞台中心重合。 9、在“转换”对话框中，钩选“强制”，将缩放比例设为30%，按“回车”键应用。 10、单击图层2的“锁”图标，解除锁定。用鼠标选择图层2的第89帧，在面板转换对话框中，将旋转置设为4，按回车键应用。 11、在图层1和图层3的第89桢，插入“桢”或F5键。在图层2第89桢，插入“关键桢”或F6键。在层2的第一桢单击右键 面板帧，打开“帧”对话框，在“补间动画”下拉文本中选择“移动”，“旋转”下拉文本中选择“逆时针”或“CCW”。 12、在图层2单击右键，弹出快捷菜单选择“显示遮蔽”或“Show Masking”。 13、测试影片。最终完成。 参考链接：/blog/static/738128082009913112722356/,课本上效果示例,范例2-文字遮罩动画,范例3-探照灯文字动画,范例4-风吹字效果,范例5-时间轴特效,时间轴特效,时间轴特效（Timeline effects）是Flash MX 2004和Flash MX Professional 2004都拥有的新功能。使用Flash内建的时间轴特效，可以快速创建复杂的动画，和Swish有些类似。 时间轴特效可以应用于以下对象：文本、图形（包括矢量图、组合对象和图符）、位图、按钮图符。 提示：对电影剪辑应用时间轴特效时，Flash在电影剪辑内部嵌套特效。,时间轴特效,给一个对象添加时间轴特效时，Flash会新建一个层，然后把该对象传送到新建的层。该对象被放置在特效图形中，特效所需的所有过渡和变形存放在新建层的图形中。新建层的名称与特效的名称相同，后加一个编号，表示特效应用的顺序。添加时间轴特效时，在图符库中会添加一个以特效名命名的文件夹，内含创建该特效所用的元素。,时间轴特效,给一个对象添加时间轴特效的步骤如下： 1.按常规方法，在编辑区中添加一个对象（本例添加一个文本框）。 2.在编辑区中选取要添加时间轴特效的对象，然后选择InsertTimeline Effects（插入时间轴特效），再从其下级菜单中选择一种特效。本例选择InsertTimeline EffectsEffectsBlur（插入时间轴特效特效模糊），给文本框对象添加模糊特效。 3.在自动显示的特效设置对话框中预览基于默认设置的特效。如果需要，可以修改这些设置（详细的设置方法请参阅下一节），然后单击右上角的Update Preview（更新预览）按钮，预览新的设置的效果。,设置时间轴特效,每个时间轴特效都以特定的方式来处理图形或图符。你可以通过改变特效的各个参数，以获得理想的特效。在特效预览窗口，你可以修改特效的参数，快速预览修改参数后的变化，选择满意的效果。 Flash MX 2004内建的时间轴特效有：Copy to grid（拷贝为网格）、Distributed duplication（分布复件）、Blur（模糊）、Drop shadow（阴影）、Expand（扩展）、Explode（爆炸）、Transform（变形）和Transition（过渡）。通过设置不同的参数，可以获得不同的效果。,时间轴特效,下面分别说明这几种特效的参数及其设置方法。 1.Copy to Grid（复制到网格） 选择InsertTimeline EffectsAssistantsCopy to grid（插入时间轴特效辅助复制到网格），可以给选定对象添加“拷贝为网格”特效。 Copy to Grid（复制到网格）特效的作用是按列数复制选定的对象，然后按照行数列数，创建该元素的网格。,时间轴特效,2.Distributed Duplication（分散式重制） 选择InsertTimeline EffectsAssistantsDistributed duplication（插入时间轴特效辅助分散式重制），可以给选定对象添加“分散式重制”特效。 Distributed Duplication（分散式重制）特效的作用是根据设置的次数复制选定对象。第一个元素是原对象的复件，然后按一定的增量修改该对象，直至最后的对象反映设定的参数。,时间轴特效,3.Blur（模糊） 选择InsertTimeline EffectsEffectsBlur（插入时间轴特效特效模糊），可以给选定对象添加“模糊”特效。 Blur（模糊）特效的作用是，通过改变对象的alpha值、位置或缩放比例，创建运动模糊特效。 4.Drop shadow（投影） 选择InsertTimeline EffectsEffectsDrop shadow（插入时间轴特效特效投影），可以给选定对象添加“投影”特效。 Drop shadow（投影）特效的作用是在选定的对象下面创建一个阴影。,5.Expand（展开） 选择InsertTimeline EffectsEffectsExpand（插入时间轴特效特效展开），可以给选定对象添加“展开”特效。 Expand（展开）特效的作用是扩展、收缩或扩展与收缩对象。对两个或多个组合在一起或组合在一个电影剪辑或图形图符中的对象应用本特效效果最好。对包含文本或字母的对象应用本特效效果也不错 6.Explod