FlashCS6动画制作项目教程.docx
- 文档编号:7141389
- 上传时间:2023-01-21
- 格式:DOCX
- 页数:57
- 大小:2.07MB
FlashCS6动画制作项目教程.docx
《FlashCS6动画制作项目教程.docx》由会员分享,可在线阅读,更多相关《FlashCS6动画制作项目教程.docx(57页珍藏版)》请在冰豆网上搜索。
FlashCS6动画制作项目教程
FlashCS6动画制作项目教程
项目1图形的绘制与编辑
Flash是美国Macromedia公司于1999年6月推出的一款矢量动画设计软件,现已被Adobe公司收购。
它可以将音乐、声效、动画以及富有创意的界面融合在一起,制作出高品质的交互式动画效果。
任务1.1绘制米奇图案
任务描述
在动画的制作过程中,会运用到大量的矢量图形,利用自身的矢量绘图工FlashFlash具能够方便、快捷地绘制出各类简单的矢量图。
本任务将通过绘制如图所示的米奇图1-1案,介绍中基本绘图工具的使用方法。
Flash
1-1图米奇图案最终效果图
任务目标,
,初步了解。
1FlashCS6
掌握创建、保存和导出文件的方法。
2Flash
FlashCS6?
动画制作项目教程
掌握绘图的基本操作方法。
3FlashCS6
2?
?
1项目图形的绘制与编辑?
相关知识
1.1.1Flash动画特点
Flash动画具有如下特点。
Flash,矢量动画:
属于二维矢量动画,所创建的元素是用矢量来描述的,不仅文件占用空间小,而且任意缩放尺寸都不会影响图形
的质量。
Flash,动画短小:
动画一般比较短小,但借助于画面和情节上的夸张起伏,可以在较短时间内传达较丰富的内容。
Flash,交互性强:
动画的强交互性优
势,是传统动画所无法比拟的。
用户可以通过诸如单击等鼠标操作来决定动画的
运行轨迹。
Flash,传播广泛:
动画采用流式技术播放,传输速度快,可以边下载边播放,具有广泛的传播性。
1.1.2FlashCS6功能简介
FlashCS6是Adobe公司推出的一款二维动画制作软件,提供了创建动画和多媒体内容
的强大创作平台,具有非凡的动效编辑能力,可以让设计者的创作意图得以完美地展现。
FlashCS6的主要功能1.
下面介绍FlashCS6的一些主要功能。
非凡的动效编辑能力:
用时间轴和动画编辑器来创建补间动效,用反向运动工具
/、
来开发自然、流畅的角色关节动画。
直接将动画赋予元件而不依赖于关键帧,
曲线工具控制动效和独立动画属性。
AdobeFlashBuilder4.6Adobe,与开发套装整合:
与紧密结合,可将位图往
返编辑于
PhotoshopCS6。
装饰画笔:
装饰画笔配备了高级动画特效,可绘制云、雨等动态粒子效果,可用
多个对象绘制风格化的线条或图案。
滤镜、混合特效:
可给文本、按钮、影片剪辑增加各种视觉效果,增强动画的感
染力。
PNG导出序列文件:
使用此功能可以生成图像文件,在库中或舞台上选择单个
PNG影片剪辑、按钮或图形元件并右击,在弹出的快捷菜单中选择【导出序列
PNG文件】命令,可以导出序列文件。
xyz,三维变换:
通过三维平移和旋转工具,可以沿、、轴赋予平面元件三维动
画
效果。
骨骼工具:
具有弹簧属性的骨骼工具将缓动和弹性带入了骨骼系统,通过强大的
反向动力关节引擎可制作出栩栩如生的真实动作。
3?
?
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项目图形的绘制与编辑?
n
■事耳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所示。
下面具体介绍主工具栏各工具的功能
5?
?
FlashCS6?
动画制作项目教程
1-5FlashCS6图主工具栏
Bridg,(转到):
用于打开文件浏览窗口,从中可以对文件进行浏览和选择。
(贴紧至对象):
激活该按钮,可以在绘图时准确定位对象的位置,在设置动画路径时能自动粘连。
(平滑):
用于使曲线或图形的外观更光滑。
,,(伸直):
用于使曲线或图形的外观更平直。
(旋转与倾斜):
用于改变舞台对象的旋转角度和倾斜度。
(缩放):
用于改变舞台对象的大小。
(对齐):
用于调整舞台中多个选中对象的对齐方式。
mm:
那:
3.工具箱
工具箱提供了图形绘制和编辑过程中要用到的各种工具。
FlashCS6的默认工
具箱如图1-6所示。
由于工具很多,一些工具被隐藏起来。
如果某工具按钮右下角带有黑色小箭头,则表示该工具还有其他被隐藏的工具。
1-6FlashCS6图工具箱
1.1.4FlashCS6动画制作的一般过程
Flash动画制作的一般过程包括创建Flash文档、设置文档属性、保存文档、制作动画以及测试与发布影片。
6?
?
1项目图形的绘制与编辑?
1.创建Flash文档
选择【文件】?
【新建】命令(或按快捷键Ctrl+N),弹出【新建文档】对话
框,在
【常规】选项卡中选择ActionScript3.0选项,并在右侧对文档的尺寸、背
景颜色、标尺单
位和帧频属性进行设置,如图1-7所示,然后单击【确定】按钮,打开如图1-3所示的Flash
CS6工作界面,在其中即可进行Flash动画的设计与制作
1-7图【新建文档】对话框
2.保存文档
为了避免出现意外时丢失文档,在文档属性设置完毕后一定要及时保存文档。
保存文
档的具体操作步骤为:
选择菜单中的【文件】?
【保存】命令(或按快捷键
Ctrl+S),在
弹出的如图1-8所示的对话框中选择要保存文档的文件夹,在“文件名”文本框中输入文件
名称,保存类型设为“FlashCS6文档(*fla)”,然后单击【保存】按钮即可。
在后面的动
画制作过程中,通过单击主工具栏中(保存)按钮,可对工作内容进行随时保存。
7?
?
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
所示。
设置完毕导出图像格式和文件位置后,单击【保存】按钮,即可将图像文件保存到指定位置。
8?
?
1项目图形的绘制与编辑?
1-11图【导出图像】对话框
【导出影片】命令可以将制作好的Flash文件导出为Flash动画或者是静帧的图像序列,
还可以将动画中的声音导出为WAX文件。
选择菜单中的【文件】?
【导出】?
【导出影
片】命令,在弹出的【导出影片】对话框的【保存类型】下拉列表中包括多种影片文件的
格式,如图1-12所示。
设置完毕后,单击【保存】按钮,即可将影片文件保
存到指定
位置。
1-12图【导出影片】对话框
导出格式一般选择“SWF影片(*swf)”。
SWF是Flash的专用格式,是一种支
持矢量和点阵图形的动画文件格式,在网页设计、动画制作等领域应用广泛。
SWF
文件通常也被称为Flash文件,这种格式可以播放所有在编辑时设置的动画效果和
交互效果,而且容
9?
?
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所示。
O
(6)选择多角星形工具,将笔触颜色设为无,填充颜色设为黄色,并单击多角星形【属性】面板中的【选项】按钮,在弹出的【工具设置】对话框中进行设置,如图1-18所示。
10?
?
1项目图形的绘制与编辑?
(7)用设置好的多角星形工具在米奇头像周围随机绘制出若干个大小不一的星形,得到的效果如图1-19所示。
1-181-19图设置多角星形工具属性图绘制五角星
(8)选择【文件】?
【保存】命令,将其保存为“米奇.fla”。
另外,再选择
[文
件】?
【导出】?
【导出图像】命令,将其导出为“米奇.jpg”。
强化练习一一绘制红绿灯
结合本节所学的知识,利用Flash基本工具绘制如图1-20所示的红绿灯
5
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图网站最终效果图
任务目标,
,掌握钢笔工具的操作方法和技巧。
1
,掌握颜色填充工具的操作方法。
2
14?
?
1项目图形的绘制与编辑?
相关知识
1.2.1钢笔工具
1.使用钢笔工具绘制直线路径
A
选择工具箱中的钢笔工具,在舞台中单击,定位直线路径的起始锚点,在直线
路径
要结束的位置再次单击,创建第二个锚点,按照同样的办法,继续单击创建其他直线段,
-33所示。
如图1
提示:
按住Shift键进行单击,可以将线条限制为倾斜45?
的倍数。
2.使用钢笔工具绘制曲线路径
选择工具箱中的钢笔工具,在舞台中单击并拖动鼠标,定位曲线路径的起始锚
点,再在舞台中其他位置单击并拖动鼠标,得到如图1-34所示的曲线路径,同时
在各锚点处出现曲线的切线手柄。
3.调整锚点
绘制完直线和曲线路径后,可以根据需要在相应路径上移动、添加、删除和转换锚
点等。
移动锚点:
使用工具(部分选取工具)在路径上单击并移动锚点,可以更改锚点的位置,也可以调整切线手柄的长短和方向,从而改变曲线路径的方向,如
1-35图所示。
1-341-35图曲线路径图调整锚点位置和方向
■
添加锚点:
选择钢笔工具组中的工具(添加锚点工具),在路径上单击,可增加一个锚点。
删除锚点:
选择钢笔工具组中的工具(删除锚点工具),单击路径上的锚点,可将该锚点删除。
15?
?
FlashCS6?
动画制作项目教程
转换锚点:
路径上的锚点分为直线锚点和曲线锚点两种,两者之间可以互相转
换,
选择工具箱中的工具(转换锚点工具),将其放置到需要转换的锚点上,如
1-361-37图所示,单击即可将曲线锚点转换为直线锚点,如图所示。
如果要将
直线锚点转换为曲线锚点,则可以将(转换锚点工具)放置到直线锚点上进行拖拉。
1-361-37图单击需要转换的锚点图转换锚点后的效果
4.设置路径的端点和接合
端点指的是线段的两端,接合指的是线段的转折处,即拐角的地方,如图1-38
所示。
1-38图接合和端点
选中线段,在【属性】面板中可对该线段的端点和接合类型进行设置。
其中,端点类型包括“无”、“圆角”和“方形”3种,接合类型包括“尖角”、“圆角”和“斜角”3种。
既可以在绘制线段前设置好这些属性,也可以在绘制完以后重新修改线段的这些属性。
5.结束路径的绘制
要绘制不闭合路径,可在路径结束的位置双击,或者按住Ctrl键单击路径外
的任何地方。
要绘制闭合路径,可将钢笔工具指向第一个锚点处单击,如果定位准确,就会在靠近钢笔尖的地方出现一个小圆圈,单击或拖动即可闭合路径。
1.2.2颜色的填充
1.墨水瓶工具
使用墨水瓶工具可以改变矢量图形边线的颜色、线宽和样式等属性。
具体操作方法为:
选择工具箱中的工具,在其【属性】面板中设置笔触的颜色、大小和样式,然后单击要修改的矢量图形边线,即可将原来的边线属性替换为新设置的边线属性。
16?
?
—
1项目图形的绘制与编辑?
颜料桶工具是绘图过程中最常使用的填色工具,可以使用纯色、渐变色和图案
来填
1-39
充或更改封闭区域的颜色。
选择工具箱中的工具,其选项区中将显示如图所示的【空
隙大小】和【锁定填充】两种选项。
针对一些没有封闭的图形轮廓,可以在【空隙大小】选项组中选择各种不同的填充模
式,如图1-40所示。
1-391-40图颜料桶工具选项图空隙选项
不封闭空隙:
填充封闭的区域。
,封闭小空隙:
填充开口较小的区域。
,封闭中等空隙:
填充开口一般的区域。
,封闭大空隙:
填充开口较大的区域。
提示:
使用放大或缩小的方法可以改变图形的外观,但无法改变缺口的实际尺寸。
所以,
如果缺口比较大,就需要手动进行修复。
单击(锁定填充)按钮后,将不能再对图形的填充颜色进行修改,这样可以防止因错误操作导致填充色被改变的情况发生。
3.【颜色】面板
【颜色】面板提供了更改笔触和填充颜色以及创建多色渐变的选项。
利用【颜色】面板不仅可以创建和编辑纯色,还可以创建和编辑渐变色。
选择菜单中的
【窗口】?
【颜色】命令,可调出【颜色】面板,如图1-41所示。
1-41图【颜色】面板
17?
?
FlashCS6?
动画制作项目教程
,:
用于设置笔触的颜色蛋・
用于设置填充的颜色
,:
单击该按钮,可以恢复到默认的黑色笔触和白色填充。
,:
单击该按钮,可以将笔触或填充设置为无色。
,:
单击该按钮,可以交换笔触和填充的颜色。
【颜色】面板的【类型】下拉列表中包括“无”、“纯色”、“线性渐变”、“径向
渐变”和“位图填充”5个选项。
这5个选项既可以对填充颜色进行处理,也可以对笔触
颜色进行处理。
下面具体介绍渐变和图案填充的设置方法。
(1)线性渐变
在【颜色】面板的【类型】下拉列表中选择“线性渐变”选项,此时面板效果
如图1-42
所示。
将指针放置在滑动色带上,待其变为形状后,单击可以增加颜色控制
点。
如果要
删除控制点只需将控制点向色带下方拖曳即可。
在色带上方,可以设置新增加
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FlashCS6 动画 制作 项目 教程