FlashCS6动画制作项目教程.docx

资源描述

FlashCS6动画制作项目教程.docx

《FlashCS6动画制作项目教程.docx》由会员分享，可在线阅读，更多相关《FlashCS6动画制作项目教程.docx（57页珍藏版）》请在冰豆网上搜索。

FlashCS6动画制作项目教程.docx

FlashCS6动画制作项目教程

项目1图形的绘制与编辑

Flash是美国Macromedia公司于1999年6月推出的一款矢量动画设计软件，现已被Adobe公司收购。

它可以将音乐、声效、动画以及富有创意的界面融合在一起，制作出高品质的交互式动画效果。

任务1.1绘制米奇图案

任务描述

在动画的制作过程中，会运用到大量的矢量图形，利用自身的矢量绘图工FlashFlash具能够方便、快捷地绘制出各类简单的矢量图。

本任务将通过绘制如图所示的米奇图1-1案,介绍中基本绘图工具的使用方法。

Flash

1-1图米奇图案最终效果图

任务目标，

,初步了解。

1FlashCS6

掌握创建、保存和导出文件的方法。

2Flash

FlashCS6?

动画制作项目教程

掌握绘图的基本操作方法。

3FlashCS6

1项目图形的绘制与编辑？

相关知识

1.1.1Flash动画特点

Flash动画具有如下特点。

Flash,矢量动画：

属于二维矢量动画，所创建的元素是用矢量来描述的，不仅文件占用空间小，而且任意缩放尺寸都不会影响图形

的质量。

Flash,动画短小：

动画一般比较短小，但借助于画面和情节上的夸张起伏，可以在较短时间内传达较丰富的内容。

Flash,交互性强：

动画的强交互性优

势，是传统动画所无法比拟的。

用户可以通过诸如单击等鼠标操作来决定动画的

运行轨迹。

Flash，传播广泛:

动画采用流式技术播放，传输速度快，可以边下载边播放，具有广泛的传播性。

1.1.2FlashCS6功能简介

FlashCS6是Adobe公司推出的一款二维动画制作软件，提供了创建动画和多媒体内容

的强大创作平台，具有非凡的动效编辑能力，可以让设计者的创作意图得以完美地展现。

FlashCS6的主要功能1.

下面介绍FlashCS6的一些主要功能。

非凡的动效编辑能力：

用时间轴和动画编辑器来创建补间动效，用反向运动工具

/、

来开发自然、流畅的角色关节动画。

直接将动画赋予元件而不依赖于关键帧，

曲线工具控制动效和独立动画属性。

AdobeFlashBuilder4.6Adobe,与开发套装整合：

与紧密结合，可将位图往

返编辑于

PhotoshopCS6。

装饰画笔:

装饰画笔配备了高级动画特效，可绘制云、雨等动态粒子效果，可用

多个对象绘制风格化的线条或图案。

滤镜、混合特效：

可给文本、按钮、影片剪辑增加各种视觉效果，增强动画的感

染力。

PNG导出序列文件：

使用此功能可以生成图像文件，在库中或舞台上选择单个

PNG影片剪辑、按钮或图形元件并右击，在弹出的快捷菜单中选择【导出序列

PNG文件】命令，可以导出序列文件。

xyz,三维变换:

通过三维平移和旋转工具，可以沿、、轴赋予平面元件三维动

画

效果。

骨骼工具:

具有弹簧属性的骨骼工具将缓动和弹性带入了骨骼系统，通过强大的

反向动力关节引擎可制作出栩栩如生的真实动作。

FlashCS6?

动画制作项目教程

Adobe,便捷的视频集成：

可轻松地将视频植入到任务中，并可使用内置媒体转

器转成各种视频格式;借助可视化视频编辑器可大幅简化视频嵌入和编码过程，

FLV可直接在场景上操作视频控制条。

2.新增功能

与之前的软件版本相比，FlashCS6新增了如下功能。

SpriteSprite,生成表单:

导出元件和动画序列，以快速生成表单，协助改善游戏体验、工作流程和性能。

HTMLFlashProfessional,发布支持:

基于动画和绘图工具，利用新的扩展功能（单HTMLJavaScriptCreateJS独提供）创建交互式内容，导出来针对开源架构进行开发。

AdobeFlashPlayerAIR,广泛的平台和设备支持:

支持最新的和运行，另外用户能AndroidiOS针对和平台进行设计。

AdobeAIRAdobeAIRcaptive,创建预先封装的应用程序:

使用预先封装的，运行

时可创建和发布应用程序。

同时，简化了应用程序的测试流程，终端用户无需

额

外下载即可运行动画内容。

AdobeAIR,移动设备模拟:

模拟屏幕方向、触控手势和加速计等常用的移动设备

应用互动来加速测试流程。

3D2DStarling,锁定场景:

使用直接模式作用于针对硬件加速的内容的开源Framework，从而增强渲染效果。

3.FlashCS6的系统配置要求

下面简单介绍FlashCS6的系统配置要求。

Windows7。

2GB,内存：

以上。

3.5GB,硬盘：

以上可用硬盘空间。

1024X7681280X800,显示器：

显示器（推荐）。

另外，要实现FlashCS6的多媒体功能，还需要用到QuickTime7.6.6软件。

1.1.3FlashCS6的工作界面

安装并启动FlashCS6后，首先进入的是初始界面，如图1-2所示。

如果需要新建一个文件，可以在【新建】栏中选择，也可以选择【从模板创建】，从模板中创建Flash文件。

选择初始界面中【新建】栏下的ActionScript3.0选项，新建一个Flash文

件，进入工作界面。

该界面包括菜单栏、主工具栏、工具箱、时间轴、舞台、面板组等，如图1-3

所示。

1项目图形的绘制与编辑？

■事耳4Hd啬■ii吋电

jAijvi、■

«W.4-MlTtgqrr^iin>•

MK”.t*.

1-2FlashCS6图初始界面

"r-—

■ifcjl

王"U

1-3FlashCS6图工作界面

1.菜单栏

菜单栏中包括“文件”、“编辑”、“视图”、“插入”、“修改”、“文本”、“命

令”、“控制”、“调试”、“窗口”和“帮助”11个菜单，如图1-4所示

FlashCS6中

的所有命令都包含在菜单栏的相应菜单中

FI.--Li■疔和Q空『I.Tffll；-77IT-.■-rm*■*J：

击二1“岬"IH

1-4FlashCS6图菜单栏

2.主工具栏

FlashCS6将一些常用命令以按钮的形式组织在一起，并放置在主工具栏中,

如图1-5所示。

下面具体介绍主工具栏各工具的功能

FlashCS6?

动画制作项目教程

1-5FlashCS6图主工具栏

Bridg,（转到）:

用于打开文件浏览窗口，从中可以对文件进行浏览和选择。

（贴紧至对象）:

激活该按钮，可以在绘图时准确定位对象的位置，在设置动画路径时能自动粘连。

（平滑）：

用于使曲线或图形的外观更光滑。

，，（伸直）：

用于使曲线或图形的外观更平直。

（旋转与倾斜）：

用于改变舞台对象的旋转角度和倾斜度。

（缩放）：

用于改变舞台对象的大小。

（对齐）：

用于调整舞台中多个选中对象的对齐方式。

mm:

那：

3.工具箱

工具箱提供了图形绘制和编辑过程中要用到的各种工具。

FlashCS6的默认工

具箱如图1-6所示。

由于工具很多，一些工具被隐藏起来。

如果某工具按钮右下角带有黑色小箭头，则表示该工具还有其他被隐藏的工具。

1-6FlashCS6图工具箱

1.1.4FlashCS6动画制作的一般过程

Flash动画制作的一般过程包括创建Flash文档、设置文档属性、保存文档、制作动画以及测试与发布影片。

1项目图形的绘制与编辑？

1.创建Flash文档

选择【文件】？

【新建】命令（或按快捷键Ctrl+N），弹出【新建文档】对话

框，在

【常规】选项卡中选择ActionScript3.0选项，并在右侧对文档的尺寸、背

景颜色、标尺单

位和帧频属性进行设置，如图1-7所示，然后单击【确定】按钮，打开如图1-3所示的Flash

CS6工作界面，在其中即可进行Flash动画的设计与制作

1-7图【新建文档】对话框

2.保存文档

为了避免出现意外时丢失文档，在文档属性设置完毕后一定要及时保存文档。

保存文

档的具体操作步骤为：

选择菜单中的【文件】？

【保存】命令（或按快捷键

Ctrl+S），在

弹出的如图1-8所示的对话框中选择要保存文档的文件夹，在“文件名”文本框中输入文件

名称，保存类型设为“FlashCS6文档（*fla）”，然后单击【保存】按钮即可。

在后面的动

画制作过程中，通过单击主工具栏中（保存）按钮，可对工作内容进行随时保存。

FlashCS6?

动画制作项目教程

1-8图“另存为”对话框

3.打开文档

后缀为.fla的Flash文件称为源文件，用户可以打开源文件对其进行修改。

打开文档的具体操作步骤为：

选择菜单中的【文件】？

【打开】命令（或按快捷键Ctrl+O），在弹出的【打开】对话框中选择要打开文件的位置和文件名称，如图1-9所示，单击【打开】按钮，或直接双击文件，即可打开选择的动画文件。

1-9图【打开】对话框

4.导出Flash动画

动画制作过程中需要反复测试，查看动画效果是否与预期效果相同。

选择【控制】？

【测试影片】？

【测试】命令或按Ctrl+Enter快捷键，可把当前文档以后缀名.swf导出并打开影片测试窗口。

对测试效果满意后，就可以导出影片了。

通过导出动画操作，可以创建能在其他应用程序中进行编辑的内容，并将影片直接导出为特定的格式。

一般情况下，导出操作是通过菜单中的【文件】？

【导出】中的【导出图像】、【导出所选内容】和【导出影片】3个命令来实现的，如图1-10所示。

下面主要讲解【导出图像】和【导出影片】两种导出方式。

•丨

「辛岀犹内需咼”临

寻比盘片甲"■++S

1-10图【导出】命令

【导出图像】命令可将当前帧的内容或当前所选的图像导出为静止的图像格式

或单帧动画。

选择菜单中的【文件】？

【导出】？

【导出图像】命令，弹出【导出图像】对话框，在【保存类型】下拉列表中可以选择多种图像文件格式，如图1-11

所示。

设置完毕导出图像格式和文件位置后，单击【保存】按钮，即可将图像文件保存到指定位置。

1项目图形的绘制与编辑？

1-11图【导出图像】对话框

【导出影片】命令可以将制作好的Flash文件导出为Flash动画或者是静帧的图像序列，

还可以将动画中的声音导出为WAX文件。

选择菜单中的【文件】？

【导出】？

【导出影

片】命令，在弹出的【导出影片】对话框的【保存类型】下拉列表中包括多种影片文件的

格式，如图1-12所示。

设置完毕后，单击【保存】按钮，即可将影片文件保

存到指定

位置。

1-12图【导出影片】对话框

导出格式一般选择“SWF影片（*swf）”。

SWF是Flash的专用格式，是一种支

持矢量和点阵图形的动画文件格式，在网页设计、动画制作等领域应用广泛。

SWF

文件通常也被称为Flash文件，这种格式可以播放所有在编辑时设置的动画效果和

交互效果，而且容

FlashCS6?

动画制作项目教程

量小。

此外，发布为SWF文件时，还可以对其设置保护。

设计过程一一绘制米奇图案

（1）选择【文件】？

【新建】命令，弹出【新建文档】对话框，选择【常规】选项卡

中的ActionScript3.0选项，设置尺寸为300像素（宽度）X400像素（高度），

背景颜色

⑵选择工具箱中的椭圆工具，在如图1-13所示的椭圆工具的【属性】面板中，将

（笔触颜色）设为白色，粗细为2，（填充颜色）设为红色，在舞台中按住Shift键，绘

制一个正圆。

框选正圆的一小部分，将填充色改为黑色，如图1-14所示。

1-131-14图椭圆工具【属性】面板图用黑色填充选区

（3）将笔触颜色设为白色，填充色设为黑色，绘制两个大小相等的小正圆（可以

先绘制一个，再用复制的方法得到另一个），将这两个小正圆分别放到大正圆的左上角和右上

效果如图1-15所示。

角，作为米奇的耳朵，得到的

（4）用选择工具单击圆与圆相交处的边框线，按Delete键将其删除。

选择椭圆

工具，将笔触颜色设为黑色，粗细设为2，填充颜色设为黄色，绘制出两个小椭

圆，并适当调整其位置，作为米奇的眼睛，得到的效果如图1-16所示。

1-151-16图绘制耳朵图绘制眼睛

（5）框选整个米奇头像，用工具（任意变形工具）适当旋转一定角度，将其移到舞台的右下角，得到的效果如图1-17所示。

（6）选择多角星形工具，将笔触颜色设为无，填充颜色设为黄色，并单击多角星形【属性】面板中的【选项】按钮，在弹出的【工具设置】对话框中进行设置，如图1-18所示。

10?

1项目图形的绘制与编辑？

（7）用设置好的多角星形工具在米奇头像周围随机绘制出若干个大小不一的星形，得到的效果如图1-19所示。

1-181-19图设置多角星形工具属性图绘制五角星

（8）选择【文件】？

【保存】命令，将其保存为“米奇.fla”。

另外，再选择

［文

件】？

【导出】？

【导出图像】命令，将其导出为“米奇.jpg”。

强化练习一一绘制红绿灯

结合本节所学的知识，利用Flash基本工具绘制如图1-20所示的红绿灯

1-20图红绿灯效果图

11?

FlashCS6?

动画制作项目教程

【制作步骤】

（1）选择【文件】？

【新建】命令，在弹出的对话框中选择【常规】选项卡中的

ActionScript3.0选项，设置尺寸为400像素（宽度）X400像素（高度），背景

颜色设为白

色，单击【确定】按钮，创建一个Flash文档。

□

2）选择工具箱中的矩形工具，将笔触颜色设为无，填充颜色设为黑色，在舞台

中（

绘制一个黑色矩形。

再将填充颜色设为黄色，在黑色矩形下方绘制一个细长的矩形，如

图1-21所示。

（3）选择工具箱中的椭圆工具，将笔触颜色设为无，填充颜色设为红色，按住

Shift

键，在舞台中绘制一个正圆。

将该圆拖放到黑色矩形中，如果大小不合适，可以选择工

具（任意变形工具）进行调整。

这里要注意，在移动和改变该圆大小的过程中，要保证该

圆一直处于选中状态，一旦取消选区，该圆就会和黑色矩形融合在一起。

4）单击红色圆，按Ctrl+C快捷键复制该圆，再按Ctrl+V快捷键粘贴该圆，然后选（

中复制的圆，将其填充色改为绿色，移到红色圆的下方。

用同样的方法，再复制一个圆，将其填充颜色改为黄色，移到绿色圆的下方，得到的效果如图1-22所

示。

（5）绘制一个黑色椭圆，用选择工具框选椭圆的下半部分，按Delete键将其删

除。

再将剩下的半个椭圆拖放到黑色矩形的上方，适当调整其大小和宽度，得到如图1-23所示的效果。

1-211-221-23图绘制矩形图绘制圆形图绘制半椭圆

（6）再绘制一个黑色椭圆，用选择工具框选椭圆的上半部分，按Delete键将其

删除，再框选椭圆的右半部分，按Delete键将其删除，得到如图1-24所示的1/4椭圆。

1-241/4图绘制椭圆

（7）将1/4椭圆移到红色圆的左侧，并适当调整其大小，得到如图1-25所示的效果。

框选该1/4椭圆，按Ctrl+C快捷键复制，再按Ctrl+V快捷键粘贴，然后将复制的1/4椭圆移到绿色圆的左侧。

用同样的方法，再复制一个1/4椭圆，并将其移到黄色圆的左侧，得12?

1项目图形的绘制与编辑？

到如图1-26所示的效果。

1-251/41-26图调整椭圆位置图复制并调整椭圆位置

（8）框选这3个1/4椭圆，按Ctrl+C快捷键进行复制，再按Ctrl+V快捷键进

行粘贴，

接着选择【修改】？

【变形】？

【水平翻转】命令，即可得到对称的3个1/4椭

圆，将其

移到右侧对称位置放好，即可得到红绿灯的最终效果，如图1-20所示

（9）选择【文件】？

【保存】命令，将文件命名为“红绿灯”，保存类型为

“FlashCS6

文档（*fla）”，保存在D盘上。

以后若想再次修改该文件，可以直接双击

“红绿灯.fla”

文件进行操作。

这里也可将红绿灯以图片的形式导出，选择【文件】？

【导

出】？

【导出

图像】命令，即可将其导出为jpg、gif、png等图片格式。

拓展练习一一绘制机器猫头像

结合任务1.1中所学的知识，应用FlashCS6中的基本绘图工具绘制如图1-27

1-27图机器猫头像

步骤提示：

（1）绘制一个填充色为蓝色、笔触颜色为黑色、笔触大小为8的椭

圆。

右击椭圆的边框线，在弹出的快捷菜单中选择“复制”命令，然后再右击，在弹出的快捷菜单中选择【粘贴】命令，将复制得到的椭圆边框移动到椭圆以外的区域，此时的效果如图1-28所示。

1-28图椭圆和椭圆边框

13?

FlashCS6?

动画制作项目教程

（2）绘制一个填充色为白色、笔触颜色为黑色、笔触大小为4的椭圆，并将该

白色椭

圆移到图1-28中的蓝色椭圆上，如图1-29所示。

再将图1-28中的椭圆边框线移到图1-29

中，与蓝色椭圆的边框线重合，得到的效果如图1-30所示。

去除机器猫头部

以外的区域，

1-291-301-31图重叠椭圆图重叠蓝色椭圆的轮廓图头部形状效果

（3）用椭圆工具、线条工具绘制机器猫的眼睛、鼻子和铃铛，即可得到如图1-

27所示的最终效果图。

任务1.2绘制网站Logo任务描述

使用钢笔工具可以绘制精确的路径，如平滑、流畅的曲线或者直线，并可调整曲线段的斜率以及直线段的角度和长度。

另外，绘制了路径后，还可为闭合路径设置缤纷多彩的颜色，从而创建出绚丽的图形效果。

本任务将钢笔工具和颜色填充工具进行巧妙结合,绘制如图所示的网站。

1-32Logo

卡其亘鞋

1-32Logo图网站最终效果图

任务目标，

,掌握钢笔工具的操作方法和技巧。

,掌握颜色填充工具的操作方法。

14?

1项目图形的绘制与编辑？