搜索
清华大学计算机系基础教学部2007年4月Flash动画制作2内容提要基本概念矢量图、点阵图，元件、库、实例，帧和关键帧，时间轴，层，组合与分离Flash基本绘图制作动作补间动画和形状补间动画制作引导层动画和遮罩动画声音的导入和制作影片剪辑3Flash简介Flash是Micromedia公司推出的网页设计和网页动画制作软件。Flash支持动画、声音和交互，具有强大的多媒体编辑功能，使用Flash可以设计出引导时尚潮流的网站、动画、多媒体及互动影像。Flash采用矢量技术，生成的文件容量小，适合网络传输•Flash的播放插件很小，很容易下载和安装•通用性好，在各浏览器中都是统一的样式•在Flash中可以整合图形、音乐、视频等多媒体元素，并可以实现用户与动画的交互•和互联网紧密结合，适合制作Web页和站点•简单易学4Flash工作界面工具箱时间轴舞台元件库面板5Flash基本操作创建Flash文档执行“文件”/“新建”命令，在“新建文档”对话框中选择“Flash文档”选项设置文档属性执行“修改”/“文档”命令，在“文档属性”对话框中设置文档的大小、背景色、动画帧频率和标尺的单位6Flash基本操作保存文档执行“文件”/“保存”命令，在“另存为”对话框中设置要保存文件的名称、路径Flash源文件的后缀是.fla在Flash中导入对象执行“文件”/“导入”／“导入到舞台”命令，可以导入外部的图像、声音、视频等文件7Flash基本操作输出动画执行“文件”/“导出”/“导出影片”命令，可以把作品输出成.swf格式的动画文件8计算机图形图像处理技术数字化图像数据在计算机中一般有两种存储方式：位图模式和矢量图模式。这两种方式的最大区别在于记录的形式。位图模式采用点阵方式来记录，从图像左上角第一个点开始，到右下角最后一个点结束，记录所有像素的颜色值。该存储模式比较适合于内容复杂的图像和真实的照片，但图像在放大和缩小的过程中会失真，占用磁盘空间也较大。矢量图模式是存储图像内容的轮廓部分。例如，一个圆形图案只要存储圆心的坐标位置和半径长度，以及圆形边线和内部的颜色。优点是图像的缩放不会引起图像失真，图像的存储空间比位图方式要少得多，而且便于修改。9位图图像位图图像由像素组成，每个像素都被分配一个特定位置和颜色值。数码相机拍摄的照片、扫描仪扫描的稿件以及绝大多数的图片都属于点阵图位图图像与分辨率有关，即在一定面积的图像上包含有固定数量的像素。因此，如果在屏幕上以较大的倍数放大显示图像，或以过低的分辨率打印，位图图像会出现锯齿边缘10矢量图像矢量图形由称为矢量的数学对象定义的线条和曲线组成，矢量根据图像的几何特性描绘图像矢量图形与分辨率无关矢量图形是表现标志图形的最佳选择11Flash基本绘图绘制线条•线条工具绘制各种类型线段12Flash基本绘图绘制线条•钢笔工具绘制精确的路径、直线或曲线，可调节直线的角度和长度，修改曲线的弧度•铅笔工具可随意绘制各种线条和形状，有三种模式可供选择13Flash基本绘图绘制图形•椭圆工具绘制椭圆或圆•矩形工具绘制矩形或正方型•多角星型工具绘制多边型或星型笔触颜色填充颜色透明14Flash基本绘图设置图形颜色•墨水瓶工具填充或改变图形的轮廓线颜色•颜料桶工具可以为图形填充颜色15Flash基本绘图编辑图形•任意变形工具用于移动、旋转、缩放和变形对象•填充变形工具用于变换具有渐变填充的效果16Flash基本绘图编辑图形•选择工具用于选中对象和改变对象的边线•部分选择工具用于修改图形大小、形状和路径17对象的组合与分离对象的组合执行“修改”/“组合”命令，可以将多个对象组合为一个整体，对这个整体进行单独的编辑。对象的分离执行“修改”/“分离”命令，可以将整体的图形对象打散，将打散的图作为一个可编辑的元素进行编辑18Flash基本绘图新建文档绘制图形对象为图形对象填充渐变颜色复制图形对象图形对象的变形操作多个图形对象的组合操作保存文件19输入文字与编辑文字形状文本工具•文本变形可使用任意变形工具使文本变形•文本分离为普通图形“修改”/“分离”（ctrl+B），文本分离为独立文字，再次分离，成为普通图形20文字-例制作空心字A文本添加轮廓线空心字符图形制作阴影文字“修改/形状/柔化填充边缘”21元件元件是指在Flash中创建的，可以在动画中反复使用的元素。使用元件使得动画制作更为简单，动画文件尺寸明显减小，播放速度显著提高。影片剪辑元件是可以反复取出使用的一段小动画，可独立于主动画播放。按钮元件是用于创建动画交互控制的按钮，以响应鼠标事件。图形元件是可以反复取出使用的图片，用于构建动画主时间轴上的内容，一般是只含一帧的静止图片。22元件库、实例一个Flash动画中创建的元件都存放在元件库中，我们只要把元件库中的元件拖放到场景中，就可以创建一个相应的实例。元件库中的对象可在动画中多次重复使用。23时间轴Flash采用时间轴的方式设计和安排每一个对象（演员）的出场顺序和表现方式。它相当于电影导演使用的摄影表，即在什么时间，哪位演员上场、说什么台词、做什么动作。0t动作演员场景…12345624时间轴面板顶区：切换和场景名称。用来在动画文件间切换、编辑场景和编辑元件间切换图层区：每个图层都包含一些舞台中的动画元素，上面层中的元素遮盖下面图层中的元素时间帧区：Flash影片将播放时间分解为帧，用来设置动画运动的方式、播放的顺序和时间等状态栏：指示所选帧编号、当前帧频以及到当前帧为止的运动时间25帧与关键帧时间轴以“帧”（Frame）为单位，生成的动画以“每秒n帧”（fps）的速度进行播放。“关键帧”（KeyFrame）是指在动画表演过程中，此关键帧的表演内容与先前的一些普通帧内容大不相同，而呈现出关键性的动作或内容的变化（只有关键帧中的内容才能够被选取和编辑）。26图层图层（Layer）就是在画面上规划出的虚拟层级。在这些不同的层级上放进各自的对象，这些对象除非经由特殊设置，否则不会互相产生影响。上面图层的对象将挡住所有在它下面图层的对象27声音的导入导入声音•执行“文件”/“导入”/“导入到库”命令，把声音文件导入到库•新建一个图层。•选中要添加声音的层，选择声音开始的帧，将声音直接从库窗口拖动到舞台上（用户可以为声音创建任意多的层，每个层所起的作用就好像声音通道，在播放时，所有层中的声音组合在一起）“数据流”类型可控制声音与动画同步，将声音分配到每个帧中，与动画同时停止“开始”在其开始的关键帧显示时播放28声音的获取Flash编辑声音的功能较弱，不能录音，在实际应用中，通常使用其他的软件获得和编辑声音，然后再导入到Flash中为动画配音。Windows附带的录音机：可实现用电脑的声卡录音、和对声音进行简单编辑共享软件GoldWave:可实现用电脑的声卡录音、截取VCD、CD光碟中的声音、声音剪辑、制作各种特效音等29使用Flash制作动画动画是由一幅幅静止的图像，按照一定的速度连续播放形成的画面。Flash中可以制作三种动画：逐帧动画创建每帧动画的内容，然后逐帧播放动作补间动画指同一个对象不同状态的变化，其变化效果是由Flash控制的，常用于制作对象的位移、尺寸缩放、旋转、颜色渐变等效果形状补间动画指两个图形对象的变换，其变化效果是由Flash控制的，其动画效果是从一个图形转换为另一个图形30创建动作补间动画动作补间动画是在两个关键帧中创建出来的，两个关键必须是同一个对象的两个不同状态，通过动作补间将两个关键帧中不同状态的对象补间出来。动作补间可以使实例、组合或文本产生位移、变形、旋转、颜色渐变，是Flash中应用最广泛的动画。31动作补间-文字动画1位置移动Hay层中的文字从舞台上方移动到舞台中间（从第1帧到第10帧，整个长度延长到第15帧）Look层中的文字从舞台左边移动到舞台右边（从第5帧开始至第10帧-第一次位移），然后从舞台右边移到舞台中间（从第10帧开始至第15帧-第二次位移）。32动作补间-文字动画11.新建文件：尺寸400*200，背景色桔黄色。2.在图层1上输入文字Hay，大小54，黑色。3.把文字转换为元件，调整文字位置至舞台左上方。4.修改图层名称为hay。5.在Hay层中的第10帧插入关键帧，将文字的位置移动到舞台中间。6.选择Hay层中的第1帧，创建动作补间动画，把动画延长到15帧。7.新建一个图层，输入文字LOOK!，大小54，黑色。采用上述方法创建look图层的动画。Look层中的文字从舞台左边移动到舞台右边（从第5帧开始至第10帧-第一次位移），然后从舞台右边移到舞台中间（从第10帧开始至第15帧-第二次位移）。33动作补间-文字动画2透明和缩放效果第一层创建文字，转换为库文件，延长到20帧第二层在第10帧插入关键帧，将库文件拖入，第20帧插入关键帧，把实例放大，透明，在第10帧创建补间动画34动作补间-文字动画21.新建文件：尺寸300*100，背景色白色。2.在图层1上输入文字Macromedia，文字的风格是ArialBlack，大小30，红色。3.选取文字，把文字转换为元件,元件名称为title。4.新建图层，在该层的第10帧上插入关键帧。按F11键打开元件库面板，从中选择title元件并将它拖到舞台上。4.在该层的第20帧上插入关键帧，将实例用自由变形工具拉大，通过属性面板的颜色列表改变成透明色（即alpha=0）。5.在该层的第10帧创建补间动画6.把图层1延长到20帧,在第10帧上对齐两个层上实例的中心点35动作补间-旋转风车旋转和颜色变化制作风车外型，转换为库文件第30帧、60帧各插入一个关键帧第30帧改变颜色和缩小风车外观第1帧和30帧创建补间动画36动作补间-旋转风车1.制作风车外形：①绘制一个无描边的黄色矩形②利用空心鼠标工具把矩形的左下角删除,左上角往下移③用实心鼠标工具选取矩形进行组合操作④选取组合后的矩形，利用任意变形工具调整中心点到底端⑤选择“窗口”/“设计面板”/“变形”命令，弹出“变形”对话框，在旋转文本框中输入45度，单击该对话框右下角的“拷贝并应用变形”按钮就可完成风车外形的绘制。2.将风车转化为库文件3.在第30帧和60帧各插入一个关键帧4.在第30帧改变风车的颜色为红色,60%,缩小风车的大小5.在第1帧和第30帧创建补间动画，旋转是顺时针1次。37动作补间-文字变形1.新建400*300文档2.将图层1命名为“背景”(1).执行“文件”/“导入”/“导入到舞台”命令,导入“国画.jpg”图像文字变形，文字分散到图层38动作补间-文字变形(2).在信息面板上调整导入图像的大小和舞台相同,位置重合3.插入新图层,默认为图层2(1)使用文本工具输入“花好月圆”,设置64号,隶书,红色(2)将文字放在右侧,执行“修改”/“分离”命令,将这四个字分离成单独的文字(3)将分离的文字全部选中,执行“修改”/“时间轴”/“分散到图层”命令,将四个字分散到四个图层(4)删除图层239动作补间-文字变形4.选择“花”文字,转换为图形元件,名称为“花”,注册点在中心5.和4同样的方法，把“好”、“月”、“圆”分别转换为图形元件6.选中“花”图层的第15帧,按住shift键选“圆”图层的第15帧,这样选中了四个文字图层的15帧,插入关键帧7.在背景图层的第15帧处插入帧,使背景延长到15帧40动作补间-文字变形8.将播放指针拖到第1帧,选“花”图形元件实例,水平翻转,在变形面板上设置缩小为20%9.用8同样的方法设置其它三个文字图层10.为四个文字图层创建补间动画11.选中“好”图层的所有帧,拖动鼠标把起始帧拖到第10帧,同样方法把“月”“圆”图层的起始帧拖到第30帧12.选择所有图层的第60帧,插入帧.13.保存文件41动作补间-图像切换使用alpha通道制作图像淡入淡出的效果42动作补间-图像切换1.新建400*300,帧频24文档2.执行“文件”/“导入”/“导入到舞