第10章 Flash MX动画制作基础.ppt

第10章FlashMX,本章要点FlashMX创建矢量图形编辑及辅助工具,10.1FlashMX简介,10.1.1FlashMX图形格式,Flash能够识别的图形格式有两种：位图模式（点阵法：体积大，灵活性差）矢量模式（以线条和色块为主）图形不逼真，体积小、灵活性高，适合于网络动画的制作。,10.1.2FlashMX的引用文件,可以引入文件类型有三种图像文件JPG，GIF，PNG和BMP等，如果系统安装了QuickTime4和DirectX7，还可以使用PSD，TGA和TIFF等格式的文件。视频文件MOV，AVI和MPG/MPEG等，它们最终将以SWF或MOV格式进行发布。音频文件WAV，MP3，AIFF和AU等几种格式。,10.1.3FlashMX操作界面,10.1.4常用工具栏,常用工具栏如图所示：,10.1.5工具箱,如图所示。默认情况下，工具箱位于操作界面的左侧，如果需要可以将其拖动到屏幕的其他位置，或者将其浮动于屏幕之上。,10.1.6时间轴面板,又称时间轴窗口，是FlashMX中进行动画制作和内容编排的主要场所。如图所示。,10.1.7场景和舞台,场景是指在当前动画编辑窗口中，编辑动画内容的整个区域，如图所示。,10.1.8属性面板,属性（Properties）面板默认情况下位于操作界面的下方，如图所示。当选中舞台中的某个对象后，属性面板就会显示该对象的各项属性。,10.1.9动作面板和其他浮动面板,在操作界面的右侧，显示的是各个浮动面板的组合，如图所示，面板用来设置不能在属性面板中设置的功能。,10.2创建矢量图形,直线工具椭圆工具部分选取工具,10.2.1直线工具,使用方法：用鼠标从工具箱中单击【直线工具】，然后将鼠标移到舞台中，按下鼠标左键并从起点拖动到终点，此时会随鼠标的移动出现一条直线，如图所示。,设置选项：1.笔触颜色2.笔触高度3.笔触样式,10.2.2铅笔工具,作用：用于绘制线条，【铅笔工具】绘制的线条可以是直线，也可以是曲线。,【伸直（Straighten）】【平滑（Smooth）】【墨水（Ink）】,三个属性设置选项,10.2.3椭圆工具,从工具箱中选择【椭圆工具】，颜色区中的【笔触颜色】和【填充颜色（FillStrokeColor）】两个按钮分别用于设置椭圆的笔触颜色和填充颜色，如图所示。,使用椭圆工具绘制图形,按前面介绍过的方法设置好笔触样式、笔触颜色及填充颜色后，在起点处按下鼠标左键并拖动到终点，即可绘制出一个椭圆。如图所示是几个设置了不同颜色、笔触样式后的椭圆。,10.2.4矩形工具,当从工具箱中选择了【矩形工具】后，其工具属性面板如图所示。,如图所示，其中的三个图形分别是设置了不同的圆角半径的矩形效果。,10.2.5画笔工具,与用铅笔画出的效果区别：用【画笔工具】绘制的线条的颜色是通过【填充颜色】按钮设置的，而【铅笔工具】绘制的线条的颜色则是通过【笔触颜色】按钮设置的。,当选择了【画笔工具】后，工具箱下方的选项区如图所示，其中有4个选项，用于设置画笔的不同属性。,10.2.6文本工具,10.2.7钢笔工具,【钢笔工具】与前面各种图形绘制工具最大的区别在于：用【钢笔工具】绘制出的图形可以随时调整其形状（直线的角度、长度，曲线的弧度），而其他绘图工具则不具备该功能。,10.2.8部分选取工具,【部分选取工具】的使用方法：绘制一个空心路径，如图所示。结合【部分选取工具】将其调整为一个由光滑曲线组成的图形：,10.3编辑及辅助工具,编辑工具色彩编辑辅助工具图形排列,10.3.1箭头工具,在工具箱中选择了【箭头工具（ArrowTool）】后，其选项区如图所示。,选项区中三个按钮的功能：吸附按钮平滑按钮伸直按钮,10.3.1.1选择对象,其具体的操作如下所述：1、新建一个文件，然后利用椭圆及矩形工具制作如图所示的图形。,10.3.1.2移动、删除、复制对象,执行这三种操作的前提是先选中目标对象。移动对象的方法为：选中对象后，用鼠标移动对象到其他位置即可，如图所示。,10.3.1.3编辑对象,具体操作如下所述：以前面制作的图形为例。选择【箭头工具】，将鼠标移到椭圆形的线条附近，等鼠标变成弧形时，用鼠标拖动线条即可改变椭圆的形状，如图所示。,10.3.2套索工具,在工具箱中选择【套索工具】后，其选项区如图所示。,各选项的功能如下所述：【魔术棒（MagicWand）】按钮：【魔术棒属性（MagicWandProperties）】按钮：【多边形模式（PolygonMode）】按钮：,10.3.3填充变形工具,FlashMX提供了两种形式的渐变方式：放射状渐变线性渐变,10.3.4墨水瓶工具,在工具箱中选中【墨水瓶工具】后，其属性面板如图所示。其设置方法与【线条工具】的设置方法基本相同。,10.3.5吸取属性,填充区域颜色,吸取线条属性,10.3.5吸取属性,吸取文字属性,吸取位图图案,10.4动画制作基础,时间轴介绍帧制作补间动画,10.4.1时间轴和帧,时间轴：由帧组成的动画是通过【时间轴】面板实现的。面板主要由帧、层和播放指针组成。帧：一系列的单幅画面称为帧，动画的制作就是改变连续帧内容的过程。,10.4.1时间轴概述,【时间轴】面板包括两个方面的内容：时间深度,10.4.2帧,帧可分为以下两种：关键帧普通帧,10.4.2帧,例子制作闪烁字母,具体操作如下：1、新建一个文件，将背景色设置为深蓝色。2、选择【文本工具】，将线条颜色设置为黄色，然后在舞台上输入字母f。3、用【箭头工具】选择文字，将文字打散，使其变成Flash可以处理的矢量图形。,4、执行【修改】【形状（Shape）】【柔化填充边缘（SoftenFillEdges）】命令，打开【柔化填充边缘】对话框，按图所示进行设置。效果如下图所示：,5、选择时间轴上的第5帧，插入关键帧，此时该帧中的内容与第1帧保持相同的内容。6、选择第6帧，插入空白关键帧。再选择第8帧插入普通帧，时间轴如图所示。,7、将1至8帧选中，复制选中的帧。8、右击第9帧，粘贴所复制的帧。,9、选择【箭头工具】，单击舞台上文字的中心部分，然后拖动鼠标至右侧，如图所示，释放鼠标。,10、选择第13帧文字的描边部分，再按【Delete】键删除选取部分。最后效果如图所示。,11、右击第17帧，从弹出的快捷菜单中选择【粘贴帧】命令。12、将第9帧至第16帧选中，对帧进行复制，然后在第25帧处进行帧的粘贴，完成后的【时间轴】面板如图所示。,13、将所有帧选中，然后拖动鼠标到第10帧处，移动帧及其结果如图所示。,14、执行【控制】【测试影片（TestMovie）】命令测试动画效果。,10.4.3逐帧动画,下面通过现有图片素材来介绍创建逐帧动画的制作方法，具体操作步骤如下：1、新建一个文件，此时的时间轴上的第一帧是个空白关键帧。2、在其他图片处理程序（如Photoshop）中将准备好的图片素材打开，选中后按【Ctrl+C】组合键进行复制。,3、在Flash中，选择第1帧，按【Ctrl+V】组合键进行粘贴，如图所示。,4、用步骤2中同样的方法复制素材的第2幅图片。5、在第2帧处插入一个关键帧，然后将复制的图片粘贴到第2帧中，如图所示。,6、选择【预览（Preview）】模式，在时间轴上显示每一帧的动画内容，如图所示。,7、执行【控制】【测试影片】命令测试动画效果。,10.4.4运动补间动画,补间动画是相对于逐帧动画而言的，它通过定义动画某一部分的起点和终点的内容，然后由Flash自动生成两端点间各帧（一般称这些帧为补间帧）的内容。,在Flash中可以建立两种补间动画形状补间（ShapeTween）和运动补间（MotionTween），每种都有其自己的特性。本节我们先介绍运动补间动画的制作。,10.4.4.1创建运动补间动画,下面先通过一个例子来说明创建运动补间的方法，具体操作步骤如下：,1、新建一个文件，然后利用工具箱的工具制作一幅图片，如图所示。,2、新建一个图层【图层2】。3、用【画笔工具】在舞台上绘制一面红旗，将颜色设置为红色，如图所示。,4、选择图层1中的第15帧，插入普通帧。5、选择图层2，在第1帧上将红旗拖到旗杆的下方，按【Ctrl+G】组合键使其成组。,6、选择第15帧，插入关键帧，将红旗拖至旗杆上方，如图所示，然后释放鼠标。,7、用鼠标右击图层2的第1帧，从弹出的快捷菜单中选择【创建补间动画（CreateMotionTween）】命令，此时的【时间轴】面板如图所示。,8、下面来制作降旗的动画。在图层1的第60帧处插入普通帧。9、在图层2的第45帧处插入关键帧，然后选中第1帧到第15帧，复制选中的帧。10、用鼠标右击第46帧，将复制的帧粘贴到此处。,11、选择第46至60帧，翻转动画帧，使升旗过程变为降旗过程。此时的【时间轴】面板及画面如下图所示。,10.4.4.2设置运动补间属性,当选中【时间轴】面板中的某帧（尚未创建补间动画的帧）后，属性面板即显示为帧属性面板，如图所示。,该面板中各选项功能如下所述：帧：补间：,当在时间轴上选择设置了运动补间的帧，帧属性面板会有所变化，如图示。,运动补间属性面板中各选项的使用具体操作步骤如下：1、接上例中的文件，新建图层3。,2、选择新建的图层3的第1帧，按【Ctrl+R】组合键导入一幅图片，如图所示。3、按【Ctrl+B】组合键将导入的图形打散。,4、从工具箱中选择【套索工具】，从其选项区中选择【魔术棒】工具，单击导入图片的白色背景部分，将其选中，按【Delete】键删除，效果如图所示。,5、将图层3的第1帧中的内容全部选中，按【Ctrl+G】组合键使所有图像成组，成组后的对象会被蓝框框住。将成组后的对象移到舞台的右上角。,6、在第60帧处插入关键帧，并将图像移到舞台的左下角，如图所示。,7、选择第1帧，然后在帧属性面板中进行如图所示的设置。8、按【Ctrl+Enter】组合键测试动画效果。,10.4.5形状补间动画,形状补间动画是指形状逐渐发生变化的动画，一般称为变形动画。,10.4.5.1形状补间的创建,建立变形动画的般步骤如下：1、新建一个文件，将该文件背景设置为深蓝色。2、用【直线工具】在舞台的左侧绘制一个长方体轮廓，用填充工具为长方体三个面填充上不同的颜色，如图所示。,3、在第40帧处插入关键帧，然后将该帧的长方体删除。4、选择【椭圆工具】，将填充颜色设置为渐变填充色，如图所示。,5、在舞台的右侧绘制一个圆形，用【填充变形】调整渐变填充，结果如图所示。,6、在【时间轴】面板中的第80帧处插入关键帧，将该帧中的圆球删除，选择【矩形工具】，将【笔触颜色】设置为无色，【填充颜色】设置如上图所示，只是将【填充样式】设置为【线性】，绘制一个矩形。接下来在舞台左侧绘制一个矩形。,7、用【箭头工具】将矩形变形为图所示的箭头形状。,8、单击第1帧，将【补间】设置为【形状】，如图所示。,在形状补间的【属性】面板中还可设置如下选项：【简易】：【混合（Blend）】：,9、用同样的方法将第40帧处的【补间】设置为【形状】，此时的时间轴及舞台如下图所示。,10、按【Ctrl+Enter】组合键，测试动画效果，图所示为变形动画中的两个画面。,10.4.5.2形状提示,形状提示是一个有颜色的实心小圆，上面写着一个英文字母，表示物体部位的名称，最多可以用26个英文字母来代表图形上的部位。,利用形状提示来制作开门变形动画的具体操作步骤：1、新建一个文件，导入一幅图片，用【任意变形工具】将导入图片的大小调整为合适大小，如下图所示。,2、新建【图层2】和【图层3】。选择【矩形工具】，将【笔触颜色】设置为无色，【填充颜色】设置为红色，在舞台中绘制一个矩形块，如下图所示。,3、在第60帧处插入关键帧，选择【任意变形工具】，将矩形向左压缩，如图所示。,4、选择第1帧，接着将【属性】面板中的【补间】设置为【形状】。5、选择第1帧，执行【修改】【形状】【添加形状提示（AddShapeHint）】命令，添加形状提示，在舞台上会出现一个写着字母a的红色形状提示。,6、按【Ctrl+Shift+H】组合键再多添加三个图形提示，然后用鼠标将形状提示移动到矩形的四个角上，如图所示。,7、选择渐变的结束帧。将上面的提示移动到变形后的目的位置，此时效果如图所示。,8、选择红色矩形块，复制到【图层3】，并将其移动到背景图片的右侧。9、在图层3的第60帧处插入关键帧，将图层2第60帧中的图片复制到图层3的第60帧。,10、选择图层3的第1帧，在其属性面板中将【补间】设置为【形状】，然后采用步骤5和步骤6中的方法为该层中的对象添加形状提示。图下页所示为在第60帧处的形状提示。,11、再新建一个层，用【矩形工具】在舞台上绘制两个长条矩形，并用渐变色进行填充，形成立体的门柱。在第60帧处插入关键帧，如图所示。,12、执行菜单命令【控制】【播放】播放影片，查看变形效果。,10.4.6绘图纸模式,FlashMX中提供的绘图纸模式按钮有4个，如图所示。当单击【时间轴】面板下方的前三个绘图纸按钮中的任意一个时，“绘图纸标记”会出现在时间轴上，如图所示。,实践练习1、体会逐帧动画与补间动画的区别。2、体会运动补间与形状补间的区别。3、创建一个立体彩球沿直线滚动的动画。,习题测试,1、下面软件中，可以制作矢量图的有（）。A.FlashMXB.PhotoshopC.FreeHandD.Fireworks,ACD,2、使用（）工具可以绘制更加精确、光滑的贝塞尔曲线，并且可以使用（）工具调整曲线的弯曲度等。A.铅笔B.钢笔C.箭头D.次选,B,D,3、在FlashMX中进行动画制作和内容编排的主要场所是（）。A.舞台B.场景C.时间轴面