flash动画设计与制作项目教程 项目一.docx
《flash动画设计与制作项目教程 项目一.docx》由会员分享，可在线阅读，更多相关《flash动画设计与制作项目教程 项目一.docx（22页珍藏版）》请在冰豆网上搜索。
flash动画设计与制作项目教程项目一
项目一、认识设计环境
教学目标
1.了解Flash的发展、应用领域、制作流程及相关知识
2.了解FlashCS3的工作界面
3.了解FlashCS3一些常用术语
4.掌握FlashCS3的基本操作
任务1、绘制水果
训练目标
1.了解Flash的发展历史及动画的设计原则
2.了解Flash动画的应用领域及制作流程
3.绘制水果效果如下图所示
知识链接
1.Flash概述
Flash是美国Adobe公司推出的一款多媒体动画制作软件。
它是一种交互式动画设计工具，可以把音乐、音效、动画以及多种元素融合到一起，制作出高品质的动态效果。
Flash动画有别于GIF动画，它在很大程度上减小了文件的大小，提升了网络传输的效率,Flash已经成为一个跨平台的多媒体标准。
2.FLASH特点
1）使用矢量图形和流式播放技术。
与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质量，画面永远保持清晰，不会出现类似位图的锯齿现象；流式播放技术使得动画可以边播放边下载，从而避免网页浏览者的长时间等待。
2）高超的压缩性能。
通过使用关键帧和图符使得所生成的动画（.swf）文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放，非常适合在网络上进行传播与播放。
3）把音乐，动画，声效，交互方式融合在一起，越来越多的人已经把Flash作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画（电影）效果。
而且在Flash4.0的版本中已经可以支持MP3的音乐格式，这使得加入音乐的动画文件也能保持小巧的“身材”。
4）多样的文件导入导出格式：
Flash支持多样的文件导入导出，不仅可以输出.fla动画格式，还可以.avi、.gif、.html、.mov、.smil、和可执行文件的.exe等多种文件格式输出。
即便用户不会使用这些相关软件的制作也一样可以用Flash解决。
大部份的位图图像格式和矢量图文件格式都可以在Flash中导入，Flash也支持大部分视频音频格式的导入和输出。
能够制作影音俱佳的多媒体动画。
5）优秀的交互功能：
通过ACTION和FSCOMMAND可以实现强大的交互功能，真正的实现了人机对话。
另外，它与当今最流行的网页设计工具DreamWeaver配合默契，可以直接嵌入到网页的任意位置，非常方便。
3.FLASH的应用领域
在现阶段，FLASH应用的领域主要有以下几个方面：
1）娱乐短片
这是当前国内最火爆，也是广大FLASH爱好者最热衷应用的一个领域，就是利用FLASH制作动画短片，以供大家娱乐。
是一个发展潜力很大的领域。
其中最典型的代表如“小破孩”、“大话三国”和“小小作品”等，如图所示。
2）网站片头
使用Flash制作的动画片头相对于传统的图片和GIF动画，可以实现视觉冲击力更强的表现效果。
网站以片头作为过渡页面，在片头中播放一段简短精美的动画，就如同电视的栏目片头一样，可以在很短的时间内把自己的整体信息传播给访问者，增强访问者的印象。
如图所示。
3）网站广告
这是最近两年开始流行的一种形式。
有了FLASH，广告在网络上发布才成为了可能。
而且根据调查资料显示，国外的很多企业愿意采用FLASH制作广告，因为它既可以在网络上发布，同时也可以存成视频格式在传统的电视台播放。
一次制作，多平台发布，所以必将会越来越得到更多企业的青睐。
如图所示。
4）MTV
这也是一种应用比较广泛的形式。
在一些FLASH制作的网站，如“闪客帝国”等，几乎每周都有新的MTV作品产生。
在国内，用FLASH制作MTV也开始有了商业应用，如图所示。
5）Flash导航条和Flash整站点
FLASH按钮功能非常强大，是制作菜单的首选。
通过鼠标的各种动作，可以实现动画、声音等多媒体效果。
有很多网站都采用Flash技术搭建，给用户以全新的体验，如图所示。
6）小游戏
利用FLASH开发“迷你”小游戏，把网络广告和网络游戏结合起来，让受众参与其中，大大增强广告效果，如图所示。
7）产品展示
由于FLASH有强大的交互功能，所以一些大公司，如Dell、三星等，都喜欢利用它来展示产品。
可以通过方向键选择产品，再控制观看产品的功能、外观等，互动的展示比传统的展示方式更胜一筹，如图所示。
8）应用程序开发的界面
传统的应用程序的界面都是静止的图片，由于任何支持ActiveX的程序设计系统都可以使用FLASH动画，所以越来越多的应用程序界面应用了FLASH动画，如金山词霸和瑞星杀毒软件的安装界面，如图所示。
9）开发网络应用程序
目前FLASH已经大大增强了网络功能，可以直接通过XML读取数据，又加强与ColdFusion、ASP、JSP和Generator的整合，所以用FLASH开发网络应用程序肯定会越来越广泛的被应用，如图所示。
4.新建文件
制作Flash动画之前必须新建一个Flash文件，这也是制作动画的第一步，通常新建Flash文件有以下3种方法：
（1）启动FlashCS3后，出现“开始页”界面，在“新建”栏中单击“Flash文件（ActionScript3.0）”选项即可新建一个Flash文件。
（2）单击“主工具栏”中的“新建”按钮，也即可创建一个Flash文件。
（3）选择“文件”→“新建”命令或按【Ctrl+N】键，打开“新建文档”对话框中选择“Flash文件（ActionScript3.0）”选项，单击“确定”按钮即可。
在“新建文档”对话框中单击“模板”标签，在其中选择相应的模板类型，这里选择“广告”下的“468×60（横幅）”，单击“确定”按钮即可新建一个基于模板的Flash文件。
5.保存文件
对于制作过程中的Falsh文件，要不间断地进行保存，便于当软件或计算机出现异常时Flash文件的数据不丢失。
制作完Flash文件，也应将其保存起来，便于以后使用。
保存Flash文件常用有以下两种方法：
（1）选择“文件”→“保存”命令或按【Ctrl+S】键即可。
如果用户之前并未保存过此文档，那么将打开“另存为”对话框，选择保存的位置，为文档命名并选择保存类型后，单击“保存”按钮即可。
（2）单击“主工具栏”中的“保存”按钮即可。
具体保存方法与“保存”命令相同。
在FlashCS3中，为什么选择的是“保存”命令，而弹出的是“另存为”对话框？
因为这是软件自身的设置，在Flash软件中首次保存文档都显示“另存为”对话框，不是用户的失误操作。
6.关闭文件
当不需要使用当前的动画文件时，需要将其关闭，关闭Flash有“关闭当前文档”和“关闭软件”两方面。
具体操作说明如下：
（1）关闭当前文档
选择“文件”→“关闭”命令或按【Ctrl+W】键或单击文档窗口右上角的按钮将其关闭。
如果此文档没有保存，将打开“AdobeFlashCS3”对话框让用户确认是否需要保存当前文档，用户可以根据情况单击相应的按钮。
（2）关闭软件
选择“文件”→“退出”命令或按【Ctrl+Q】键或单击软件窗口右上角的按钮将退出软件程序。
如果此文档没有保存，将打开“AdobeFlashCS3”对话框让用户确认是否需要保存当前文档，用户可以根据情况单击相应的按钮。
7.打开文件
如果要编辑或查看一个已有的Flash文件，只需要打开此Flash文件即可。
打开Flash文件常用有以下两种方法：
（1）选择“文件”→“打开”命令或按【Ctrl+O】键，打开“打开”对话框，然后在“查找范围”下拉列表框中选择要打开的文档所在的位置，再在“文件名”下拉列表框中输入要打开文档的文件名，或直接在列表中选中要打开的文件图标，最后单击“打开”按钮即可。
（2）单击“主工具栏”中的“打开”按钮，具体操作方法与“打开”命令相同。
8.测试影片
在Flash动画制作过程或完成动画制作后，要对动画进行效果测试，这就是通常所说的发布动画。
对于动画文件的测试，最简单的方法就是按【Ctrl+Enter】键或选择“控制”→“测试影片”命令，即可测试并浏览动画效果。
按【Ctrl+Enter】键或选择“控制”→“测试影片”命令后，除了测试动画文件的效果外，还将在保存源文件的目的文件夹下生成一个扩展名为.SWF的文件。
操作步骤及要求
1．绘制大鸭梨
1）新建一个Flash文档，按【Ctrl+S】组合键另存为“绘制水果”。
2）选择“椭圆工具”在舞台上绘制一个椭圆，然后再用“选择工具”调整椭圆形状，再用“铅笔工具”绘制一条曲线，如下图所示。
3）选择“颜料桶工具”为鸭梨填充颜色为：
#FFCC00，然后用“铅笔工具”绘制一些小点，如下图所示。
2．绘制樱桃
1）新建图层2，选择“椭圆工具”在舞台上绘制两个正圆，再用“铅笔工具”绘制两条曲线，如下图所示。
2）选择“颜料桶工具”为樱桃填充颜色为：
#FF3300。
效果如下图所示。
3．绘制西瓜
1）新建图层3，选择“椭圆工具”，将笔触颜色设置为：
黑色，高度设置为：
2，填充设置为：
无，在舞台上绘制一个正圆；再选择“铅笔工具”，将笔触颜色设置为：
#666600，高度设置为：
5，绘制一条曲线，如下图所示。
2）选择“颜料桶工具”为西瓜填充颜色：
#669900。
然后选择“刷子工具”，设置刷子大小，再设置填充颜色为：
#99CC00,在填充区域内绘制西瓜纹，效果如下图所示。
4．绘制西瓜瓤
1）新建图层4，选择“直线工具”，将笔触颜色设置为：
黑色，高度设置为：
2，在舞台上绘制下图所示形状。
2）选择“颜料桶工具”为西瓜瓤填充颜色：
#FF3265，然后设置颜色：
#99CC00，为瓜皮填充颜色。
然后选择“刷子工具”，设置刷子大小和形状，再设置填充颜色为黑色,在填充区域内绘制西瓜仔，效果如下图所示。
评价标准
序号
评价内容
评价标准
分值
1
大鸭梨
形状逼真，颜色适当。
20
2
樱桃
形状逼真，颜色适当。
25
3
西瓜
形状逼真，颜色适当。
30
4
西瓜瓤
形状逼真，颜色适当。
25
作业布置
1．上机练习Flash文档的新建、保存、打开与关闭操作。
2．绘制下图所示图像效果。
任务2、奔跑的豹子
训练目标
1．了解FlashCS3的工具界面组成
2．熟悉各部分面板的功能作用
3．掌握各种flash术语的含义及作用
4．掌握在Flash中制作简单动画的基本方法
5．创建如图所示豹子奔跑的动画
知识链接
Flash工作界面
运行AdobeFlashCS3以后，会出现AdobeFlashCS3界面，如图所示。
AdobeFlashCS3的工作环境包括标题栏、菜单栏、主工具栏（第一次运行时需要手动设置显示出来，单击菜单栏中【窗口】│【工具栏】│【主工具栏】）、时间轴、舞台工作区、工具箱、状态栏和其他各种对话框等，如图所示。
接下来对界面上的不同组件做进一步的介绍。
标题栏
用过windows其他程序的用户都会知道，任何一个windows应用程序窗口或文档窗口的最上方都有标题栏，标题栏的主要作用就是显示当前运行的主要应用程序和文档名，flash也是一样。
在标题栏的最左侧有一个flash标志，用鼠标单击，会出现应用程序窗口控制菜单，可以对应用程序窗口的尺寸、位置及打开关闭操作进行控制。
1.菜单栏
菜单栏位于标题栏的下方。
每个菜单下面都有子菜单，有的菜单下还包括三级、四级子菜单。
用鼠标单击菜单名，就可以打开下拉式菜单，从中选择相应的选项来完成各种操作。
主工具栏
FlashCS3的主工具栏提供了一些常用的工具，它由一组带有通用的象形示意的按钮组成，形象直观地表现出各个图标的功能，如图所示。
工具箱
FlashCS3的工具箱的功能非常强大，在默认状态下工具箱位于窗口左侧单列竖排放置。
用户可通过鼠标拖动，将它放在桌面任何位置。
通过工具箱上一系列按钮，用户可完成对象选择、图形绘制，文本录入与编辑、对象控制与操作等工作。
单击颜色填充区域
，会弹出一个颜色选取框。
时间轴
时间轴用来显示编辑图层和帧。
用于组织和控制影片内容在一定时间内播放的层数和帧数。
与胶片一样，Flash影片的长度由它的帧决定。
图层就像层叠在一起的幻灯胶片一样，每个图层都包含一个显示在舞台中的不同图像。
时间轴状态显示在时间轴的底部，它指示所选的帧编号、当前帧、当前帧频以及到当前帧为止运行的时间。
舞台工作区
舞台工作区就是FlashCS3的主要工作窗口。
在舞台上，我们可以对flash的内容进行编辑，舞台也是flash影片播放的区域，其中灰色区域的内容，在影片发布以后是不可见的。
面板和属性检查器
默认工作界面的右侧和下侧是浮动面板区域和属性检查器，它们功能强大并且在工作中最为常用。
Flash中有很多面板，可以在主菜单中把它们打开或关闭，Flash可以根据需要自定义工作区，如图所示。
使用面板和属性检查器，可以查看、组合和更改资源及其属性。
可以显示、隐藏面板和调整面板的大小，也可以组合面板并保存自定义的面板设置，从而能更容易地管理工作区。
属性检查器在操作时实时显示结果，以反映正在使用的工具和资源，从而能够快速访问常用功能，使操作更具有交互性。
对Flash的操作界面有了初步的认识后，在真正动手做动画之前，先了解一下Flash的常用术语，好对Flash有一个概念性的了解。
2.对象
在Flash中创建的各种线条、图案、声音元素统称为对象。
帧（Frame）
我们知道一段动画（电影）是由一幅幅的静态的连续的图片所组成的，在这里称每一幅的静态图片为“帧”。
一个个连续的“帧”快速切换就形成了一段动画，帧是Flash中最小的时间单位。
根据帧的作用区分，可以将帧分为普通帧（包括普通帧和空帧）、关键帧（包括关键帧和空白关键帧）、过渡帧（包括形状过渡帧和运动过渡帧）三类，如图所示。
图层（Layer）
图层可以看成是叠放在一起的透明的胶片，如果层上没有任何东西的话，就可以透过它直接看到下一层，所以可以根据需要，在不同层上编辑不同的动画而互不影响，并在放映时得到合成的效果。
在Flash中打开图层属性面板，如图所示，可以看到图层有普通层、遮罩/被遮罩、引导/被引导层这五类。
场景（Scene）
电影需要很多场景，并且每个场景的对象可能都是不同的。
与拍电影一样，Flash可以将多个场景中的动作组合成一个连贯的电影。
场景的数量是没有限制的，可以通过场景（Scene）面板来完成对场景的添加/删除操作，并可以拖拽其中各场景的排列顺序来改变播放的先后次序，如图所示。
元件（symbol）
元件又称作符号，是指电影里的每一个独立的元素，可以是文字、图形、按钮、电影片段等，就象电影里的演员、道具一样。
一般来说，建立一个flash动画之前，先要规划和建立好需要调用的元件，然后在实际制作过程中随时可以使用，如图所示。
实例（Instance）
当把一个元件放到舞台或另一个元件中时，就创建了一个该图符的实例，也就是说实例是元件的实际应用。
元件的运用可以缩小文档的尺寸，这是因为不管创建了多少个实例，Flash在文档中只保存一份副本。
同样，运用元件可以加快动画播放的速度。
动作脚本（ActionScript）
ActionScript是Flash的脚本语言，与JavaScript相似，ActionScript是一种面向对象编程语言。
Flash使用ActionScript给电影添加交互性。
在简单电影中，Flash按顺序播放电影中的场景和帧，而在交互电影中，用户可以使用键盘或鼠标与电影交互。
操作步骤及要求
1．新建一个Flash文档，按【Ctrl+S】组合键另存为“奔跑的豹子”。
2．导入动画所需要的草原背景，执行菜单“文件→导入→导入到舞台”命令，将素材文件“草原.jpg”导入到场景中。
用选择工具调整图片在舞台上的位置，使其居于舞台的中央，选择第50帧，按【F5】键，添加普通帧。
3．创建豹子的影片剪辑元件。
执行菜单“插入→新建元件”命令，在打开的“创建新元件”对话框中输入名称“豹子”，在选择类型“影片剪辑”，如下图所示：
4．在影片剪辑“豹子”的编辑状态下，执行菜单“文件→导入→导入到舞台”命令，从相应的路径下找到图片“豹子.fif”执行导入操作，这样在库中就建立了一个豹子原地跑动的影片剪辑元件，如下图所示：
5．单击插入图层按钮，新建一个图层，从库面板中将名称为“豹子”的元件拖放到舞台上，并放置在舞台的左侧。
6．选中豹子所在层的第50帧，按【F6】键插入一个关键帧，并把该帧的“豹子”实例移动到舞台的右侧，并将尺寸适当缩小一点。
7．用鼠标右键单击图层2的第1帧，从弹出的快捷菜单中选择“创建补间动画”命令，如下图所示，这样豹子奔跑的动画就创建好了。
评价标准
序号
评价内容
评价标准
分值
1
草原背景
导入草原背景并设置大小与位置
20
2
豹子影片剪辑元件
导入豹子图片并创建为影片剪辑元件
30
3
将豹子动画制作
在舞台上完成豹子由左向右奔跑的动画
50
作业布置
制作如图所示“森林中的小兔”动画效果。
知识拓展
3.使用标尺
在Flash中，若要显示标尺，可以执行菜单“视图→标尺”命令，此时可以将标尺显示出来，如左下图所示。
默认情况下，标尺的度量单位为像素，用户可以对其进行更改。
执行菜单“修改→文档”命令，打开“文档属性”对话框，在标尺单位下拉列表中选择一种合适单位即可，如右下图所示。
使用网格
执行菜单“视图→网格→显示网格”命令，可以显示或隐藏网格线，如左下图所示。
另外，用户还可以根据需要对网格的颜色和大小进行修改，还可以设置贴紧至网格及贴紧精确度。
执行菜单“视图→网格→编辑网格”命令，在弹出的“网格”对话框中进行相应的设置即可，如右下图所示。
使用辅助线
如果显示了标尺，在垂直标尺或水平标尺上按住鼠标左键并拖动到舞台上，辅助线就被绘制出来了，它的默认颜色为绿色，如左下图所示。
通过执行菜单“视图→辅助线→编辑辅助线”命令，可以修改辅助线的颜色等如右下图所示。
升级会员 