多媒体技术应用5计算机动画技术Flash CS4(陈永强)

1,多媒体技术应用,数学与计算机学院陈永强chenyqwh,2013-2014-2,2,第五章计算机动画制作技术,5.1计算机动画概述5.1.1计算机动画概念5.1.2计算机动画应用5.1.3计算机动画的发展及趋势5.1.4计算机动画的常用格式5.2计算机动画制作流程与软件5.2.1二维动画制作流程5.2.2三维动画制作流程5.2.3计算机动画制作软件5.3常用计算机动画制作软件5.3.1Flash5.3.23DStudioMax,3,第五章计算机动画制作技术,5.3常用计算机动画制作软件5.3.1Flash5.3.23DStudioMax,4,5.3.1Flash1.功能介绍2.编辑环境3.基本操作4.操作实例,5,版本演变,2013，FlashCC2012，FlashCS62011，FlashCS5.52010，FlashCS52008，FlashCS42007，FlashCS32005，Adobe公司收购Macromedia，Flash82003，FlashMXPro1996，美国Macromedia公司收购了FutureWave，并将FutureSplash其改名为Flash1,6,5.3.1Flash1.功能介绍Adobe公司的Flash是一款优秀的交互式矢量动画软件，由于它的市场地位等原因，已经渐渐成为交互式矢量动画的事实标准。,7,5.3.1Flash1.功能介绍Flash是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其他允许用户交互的内容。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序，以及介于它们之间的任何内容。通常，使用Flash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序。所以，它既是二维动画的制作软件，也是多媒体创作的有力工具。,8,5.3.1Flash1.功能介绍Flash是基于矢量图形动画，结合脚本语言（ActionScript）交互的时序类多媒体创作工具。其主要优点在于：Flash图形和动画都是矢量的，尺寸比点阵图要小得多，声音基于MP3压缩，也是高压缩比的。Flash特别适用于创建通过Internet提供的内容，因为它的文件非常小。Flash动画的播放支持“数据流式”技术，既不必等待数据完全下载完即可播放。Flash制作动画比较简单，灵活性大。,9,5.3.1Flash1.功能介绍FlashCS4的新功能：编程方面的增强音频、视频方面的增强动画方面的增强绘画方面的增强改进的用户界面,10,5.3.1Flash2.编辑环境,11,5.3.1Flash2.编辑环境（1）菜单栏（2）舞台（3）时间轴（4）动画编辑器（5）面板组（6）工具面板（7）工作场所切换器,12,5.3.1Flash2.编辑环境（1）菜单栏包含软件的大部分命令，实现大部分功能。文件，编辑，视图，插入，修改，文本，命令，控制，调试，窗口，帮助,13,5.3.1Flash2.编辑环境（2）舞台显示当前编辑的Flash文档。舞台大小可缩放。在用户发布或导出项目后，舞台范围决定用户的可见区域。,14,5.3.1Flash2.编辑环境（3）时间轴组织和控制一定时间内的图层、帧、播放帧等元素，是制作动画最常用的面板之一。时间轴主要由图层区、播放头、时间轴标尺、时间轴状态栏以及帧组成。图层区用来创建和管理图层；播放头是时间轴上方的一条红色垂直线；帧是构成动画的最基本的单位。,15,5.3.1Flash2.编辑环境（4）动画编辑器对关键帧属性进行独立控制。,16,5.3.1Flash2.编辑环境（5）面板组可选择或关闭面板。,17,5.3.1Flash2.编辑环境（6）工具面板包含各种选择工具、绘图工具、文本工具、填充工具、视图工具，以及对应于不同工具的相关选项。,18,5.3.1Flash2.编辑环境（7）工作场所切换器用于选择合适的工作区布局方式。,19,5.3.1Flash3.基本操作（1）Flash文档处理（2）项目管理（3）元件、实例的使用（4）库资源的使用（5）颜色的使用（6）文本的使用（7）图形绘制,（8）创建动画（9）编辑动画（10）使用视频（11）处理声音（12）发布（13）导出,20,5.3.1Flash3.基本操作（1）Flash文档处理1）创建Flash文档2）从模板创建新文档3）打开现有文档4）设置新文档或现有文档的属性5）使用“命令”菜单自动处理任务6）用“属性”检查器更改文档属性7）使用“查找和替换”功能8）保存Flash文档,21,5.3.1Flash3.基本操作（2）项目管理使用“项目”面板来创建和管理项目。1）创建新项目2）打开现有项目3）添加文件4）创建文件夹5）移动文件或文件夹,6）删除某个文件或文件夹7）重命名项目或文件夹8）测试项目9）发布项目10）关闭项目,22,5.3.1Flash3.基本操作（3）元件、实例的使用元件是在Flash中创建的图形、按钮或影片剪辑。元件可在整个文档或其它文档中重复使用。实例是指位于舞台上或嵌套在另一个元件内的元件副本。元件的具体表现形式就叫实例。Flash有三类元件：图形元件、按钮元件以及影片剪辑元件。,23,5.3.1Flash3.基本操作（3）元件、实例的使用1）创建元件2）编辑元件3）创建实例4）编辑实例,24,5.3.1Flash3.基本操作（4）库资源的使用共享库资源允许在多个目标文档中使用源文档的资源。可使用两种不同的方法共享库资源。1）运行时的共享资源2）使用共享库资源,25,5.3.1Flash3.基本操作（5）颜色的使用提供了多种应用、创建和修改颜色的方法。使用默认调色板或自己创建的调色板，可以选择应用于要创建的对象或舞台中已有对象的笔触或填充的颜色。将笔触颜色应用于形状将会用这种颜色对形状的轮廓涂色，将填充颜色应用于形状将会用这种颜色对形状的内部涂色。,26,5.3.1Flash3.基本操作（6）文本的使用1）创建文本2）设置文本属性3）编辑文本,27,5.3.1Flash3.基本操作（7）图形绘制1）绘制直线、椭圆和矩形2）绘制多边形和星形3）使用钢笔工具,28,5.3.1Flash3.基本操作（8）创建动画1）使用时间轴特效2）创建关键帧3）创建逐帧动画逐帧动画是将每一帧的画面组织好，然后逐帧播放。4）创建补间动画补间动画是通过为一个对象的某一帧指定属性值并为该对象的另一个帧指定一个相关属性的不同值。Flash自动计算这两个帧之间其它属性的值。示例：逐帧动画，补间动画，形状补间动画，传统补间动画。,29,5.3.1Flash3.基本操作（9）编辑动画1）在时间轴中插入帧2）删除或修改帧或关键帧,30,5.3.1Flash3.基本操作（10）使用视频“视频导入”向导为视频导入到Flash文档提供了简洁的界面。通过此向导，可以选择将视频剪辑导入为流式文件、渐进式下载文件、嵌入文件或链接文件。而且根据文件的位置，“视频导入”向导为不同的部署提供一系列选项。,31,5.3.1Flash3.基本操作（11）处理声音1）导入声音2）向文档中添加声音3）使用声音编辑控件,32,5.3.1Flash3.基本操作（12）发布要发布Flash文档，可以使用“发布设置”对话框选择发布文件格式和文件格式设置，然后用“发布”命令发布Flash文档。在“发布设置”对话框中指定的发布配置将随文档一起保存。也可以创建并命名发布配置文件，以便可以随时使用已建立的发布设置。,33,5.3.1Flash3.基本操作（13）导出1）导出文件格式2）导出Flash内容和图像,34,5.3.1Flash3.操作实例（1）内容（2）步骤,35,5.3.1Flash3.操作实例（1）内容通过一个蝴蝶在花丛中翻飞的例子，学习Flash图层、引导线运动、帧与补间动画等技术。,36,5.3.1Flash3.操作实例（2）步骤启动Flash，新建Flash文档，550400像素，如图5-16所示。,37,5.3.1Flash3.操作实例（2）步骤在图层1分别导入背景图和四个透明背景蝴蝶。选择菜单“文件”“导入”“导入到库”。导入素材后的效果如图5-17所示。,38,5.3.1Flash3.操作实例（2）步骤选择菜单“窗口”“库”，打开库。把库里的背景图“蓝花花”拖进舞台并调整为和舞台一样大小，如图5-18所示。,39,5.3.1Flash3.操作实例（2）步骤选择“窗口”“对齐”，调出“对齐”面板，选择“相对于舞台”，水平对齐，垂直对齐，如图5-19所示。,40,5.3.1Flash3.操作实例（2）步骤在时间轴第100帧插入帧，锁定图层1，如图5-20所示。,41,5.3.1Flash3.操作实例（2）步骤新建图层2，把“蝴蝶1”从库拖进舞台，右击蝴蝶1，然后从弹出菜单中选择“转换为元件”（影片剪辑），元件名为“蝶1”，如图5-21所示。,42,5.3.1Flash3.操作实例（2）步骤右击蝴蝶1，然后从弹出菜单中选择“编辑”，进入元件编辑区。右击蝴蝶1，并从弹出菜单中选择“分离”，打散蝴蝶图片，如图5-22所示。,43,5.3.1Flash3.操作实例（2）步骤选用“任意变形工具”，蝶1图片四周出现8个小方框，把鼠标放在右下角的小方框上，待鼠标指针变为一个圆形箭头时轻轻向左一拖，把蝴蝶转个方向，如图5-23所示。,44,5.3.1Flash3.操作实例（2）步骤移动蝴蝶，使蝴蝶的头部正好在舞台的正中央，右键单击时间轴上的第3帧，插入关键帧，如图5-24所示。,45,5.3.1Flash3.操作实例（2）步骤在第3帧，用“箭头”工具框选蝴蝶的一个翅膀，如图5-25所示。,46,5.3.1Flash3.操作实例（2）步骤再用“任意变形工具”，把翅膀压扁，如图5-26所示。,47,5.3.1Flash3.操作实例（2）步骤用同样的方法做好另一个蝴蝶翅膀。单击第1帧，选择“修改”“组合”；单击第3帧，选择“修改”“组合”，如图5-27所示。,48,5.3.1Flash3.操作实例（2）步骤单击场景1，返回场景1。为了方便操作，我们把舞台调整为50%，如图5-28所示。,49,5.3.1Flash3.操作实例（2）步骤在场景1的第2层，分别在40、60、100帧插入关键帧，并分别在140、4160、61100帧三个区间分别创建补间动画。锁住图层2，插入引导层，如图5-29所示。,50,5.3.1Flash3.操作实例（2）步骤在引导层的第1帧，选用铅笔工具，选择“平滑”，画出蝴蝶飞行的轨迹(引导线)，用橡皮擦工具在引导线上，在想要蝴蝶停留的位置上擦出一个小缺口，锁定引导层，打开图层2的锁，如图5-30所示。,51,5.3.1Flash3.操作实例（2）步骤17在图层2的第1帧，用箭头工具将蝶1元件拖到引导线的最左端，蝶1的中心点一定要压在引导线上，如图5-31所示。,52,5.3.1Flash3.操作实例（2）步骤18在图层2的第40帧，用箭头工具将蝶1元件拖到缺口的左端，蝶1的中心点一定要压在引导线上，如图5-32所示。,53,5.3.1Flash3.操作实例（2）步骤19同第18步一样，在图层2的第60帧，用箭头工具将蝶1元件拖到缺口的右端，蝶1的中心点一定要压在引导线上。20在图层2的第100帧，用箭头工具将蝶1元件拖到引导线的最右端，蝶1的中心点一定要压在引导线上，如图5-33所示。,54,5.3.1Flash3.操作实例（2）步骤现在一只蝴蝶已经做好了，可以测试影片了。但这只是单个蝴蝶恋花的做法，如果要三对蝴蝶飞舞在花丛中，还需要如下的工作。21把图层2和引导层锁好，增加图层3，如图5-34所示。,55,5.3.1Flash3.操作实例（2）步骤22为了方便操作，单击图层2和引导层的眼睛样的按钮，使图层2和引导层不可见，把蝴蝶2从库里拖入舞台。重复步得到元件蝶2。23在场景1的第3层，分别在35、55、100帧插入关键帧，并分别在135、3655、56100帧三个区间分别创建补间动画。锁住图层3，插入引导层，单击引导层上眼睛样的按钮，使引导层可见，如图5-35所示。,56,5.3.1Flash3.操作实例（2）步骤24操作方法同第16步。在引导层的第1帧，选用铅笔工具，选择“平滑”，画出蝴蝶2飞行的轨迹(第二条引导线)，用橡皮擦工具在引导线上，在想要蝴蝶停留的位置上擦出一个小缺口，锁定引导层，打开图层3的锁(只要操作正确，引导线画好，蝴蝶元件会自动跑上引导线)，如图5-36所示。,57,5.3.1Flash3.操作实例（2）步骤25这步操作方法与17、18、19、20步相同。在图层3的第1帧，用箭头工具将蝶2元件拖到引导线的最左端，蝶2的中心点一定要压在引导线上。在图层3的第35帧，用箭头工具将蝶2元件拖到缺口的左端，蝶2的中心点一定要压在引导线上。在图层3的第55帧，用箭头工具将蝶2元件拖到缺口的右端，蝶2的中心点一定要压在引导线上。在图层3的第100帧，用箭头工具将蝶2元件拖到引导线的最左端，蝶2的中心点一定要压在引导线上。注意：不管做多少层，最后一帧一定要对齐，否则会全部变乱。到现在为止，第2个蝴蝶也做好了，可以再测试一下。,58,5.3.