Flash广告动画的设计与研究.docx
《Flash广告动画的设计与研究.docx》由会员分享，可在线阅读，更多相关《Flash广告动画的设计与研究.docx（21页珍藏版）》请在冰豆网上搜索。
Flash广告动画的设计与研究
毕业设计（论文）
论文题目Flash广告动画的设计与研究
教学点：
平凉教学点
专业：
计算机信息管理
届别:
2008届
学号：
092706302018
姓名：
曹云龙
指导教师（职称）：
黎玉琴
论文开始时间：
2010年5月1日
论文完成时间：
2010年10月30日
兰州理工大学继续教育学院
毕业设计（论文）教师指导意见
学生姓名：
曹云龙专业班级：
计算机信息管理校内、教学点：
平凉教学点
第
一
次
论文题目：
Flash广告动画的设计与研究
1、论文选题符合专业培养目标，能够达到综合训练目标，题目适中。
2、查阅文献资料太少，需更全面地收集有关Flash的资料，给出一个具体的实例进行全面分析，继续完善论文内容，调整层次结构。
2010年8月20日
第
二
次
1、能较好地运用所学理论与专业有关的知识，联系实际，分析问题较正确、全面。
2、文题相符，中心明确，内容较为完整，层次结构安排合理，但缺乏个人见解。
3、文章篇幅和格式均符合学校规定和相关的规范要求。
2010年10月20日
评阅结果及成绩
本论文能理论联系实际，对Flash软件及其使用作了较全面的分析和叙述，并给出了《一声问候》的Flash实例，对Flash的初学者有一定的参考作用。
文章结构合理，条理分明，论据较充分，语句通顺。
成绩：
78指导教师签字：
黎玉琴2010年12月10日
摘要
Flash是美国的Macromedia公司推出的优秀软件。
它是一种交互式动画设计工具，用它可以将音乐，声效，动画以及富有新意的界面融合在一起，以制作出高品质的动态效果。
Flash使用矢量图形和流式播放技术。
与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦急等待的情绪，使所出作品最大程度支持网络传输。
Flash通过使用关键帧和图符使得所生成的动画（.swf）文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，用在课件设计上不仅可以使课件更加生动，而且小巧玲珑，上传、下载迅速，使得课件便于网上交流。
Flash把音乐，动画，声效，交互方式融合在一起，越来越多的人已经把Flash作为课件动画设计的主要工具，并且创作出了许多令人叹为观止的动画课件（电影）效果。
而且在Flash8.0的版本中早已经可以支持MP3的音乐格式，这使得加入音乐的动画文件也能保持小巧的‘身材’。
Flash8.0的出现更是使Flash在面向对象开发方面达到了一个前所未有的令人唏嘘的高度。
类、包、继承、封装、丰富的组件、项目管理、版本控制，这些以往只能在专业的面向对象的应用程序集成快速开发环境中才能见到的东西已经统统的在Flash中得到了贯彻。
本文介绍了Flash动画制作中最基础的知识以及在Flash8.0软件环境下制作FLASH的应用方法，并通过制作FLASH动画《一声问候》向大家展示出FLASH动画的特色。
关键字:
Flash软件；动画；场景；Flash场景动画
目录
摘要1
第1章系统概述3
1.1Flash动画阶段3
1.1.1Flash现状3
1.1.2Flash发展趋势3
1.1.3制作目的3
第2章Flash动画制作中最基础的知识5
2.1动画的基本理论5
2.2Flash8.0的工作环境5
2.2.1工作区域5
2.2.2舞台6
2.2.3场景6
2.2.4时间轴窗口6
2.3工具面板7
2.4符号和实体7
第3章Flash广告动画的设计制作过程8
3.1开头动画设计思路8
第4章软件测试20
4.1软件测试的目的及意义20
4.1.1软件测试的目的20
4.2软件通过的测试发现的问题20
4.3解决软件测试发现的问题21
4.4测试结论22
参考文献23
致谢23
第1章系统概述
1.1Flash动画阶段
1.1.1Flash现状
广告市场对商业插画的需求逐渐扩大，促进和刺激Flash动画的多元化、商业化、网络动画的画面简陋、节奏冗长的缺点，逐渐被效果精美、节奏快速的插画和影视广告所影响，直至取代。
Flash动画及市场发展分析:
第一代注重技巧，第二代注重美术，第三带注重形式，第四代注重市场；只有适应市场、引导市场，第四代Flash动画才能在以后的发展中立足并立业。
传统动画和网络动画的对比:
传统动画：
注重动画节奏、故事内容、造型和背景，美术风格。
网络动画：
注重创意形式、人文情感、叛逆和笑料、音乐和动效，制作手法：
一个注重团队合作，一个注重个人风格。
第四代Flash动画的职业特点:
完备的专业技能、敏锐的商业意识、自由的宽松的工作环境、快乐富有的生活质量。
商业插画打造第四代Flash动画:
在修养、沟通、理解、协作、技能五大方面进行完整训练，打造第四代Flash动画！
1.1.2Flash发展趋势
论前景的话，目前中国广大Flash爱好者主要把精力集中在了网页的导航栏，Flash全站，游戏制作，动画制作等等上面比较多，其实国外已经很多地方用到了工业，生产等各个方面，因为Flash的自由性非常高，往往可以把界面，按钮等制作的非常动感，这也是大家有目共睹的，所以Flash的前景是只有想不到，没有做不到的。
1.1.3制作目的
综合运用在学期间所学理论知识和技能，设计使用Flash动画知识制作一个小短片。
此题目主要涉及FLASH动画制作方面的知识，另外对学生的想象力有一定的要求。
通过此设计可使学生在事例分析、策划以及实际制作等方面得到综合训练和提高。
第2章Flash动画制作中最基础的知识
2.1动画的基本理论
在学习动画设计之前．首先要解决一个向题，也就是动画到底是什么？
事实上，一系列静态的画面连续快速播放就构成了动画。
动画与电影一样都是利用人眼的视觉暂留来产生动态的感觉。
在Flash中通常把动画叫做电影（movies），二者的概念是相似的，也就不作区分了。
动画中每一张静态的画面被称为“帧”（Frame）。
动画播放的速率正是由每秒播放多少帧来决定的，也就是fps（FramePerSecond帧／秒）。
在计算机上常见的动画速率一般使用8-12帧／秒，尤其在网络上播放的动画更不要把帧速设定得太高。
如果设得太高，会造成网络频率来不及配合输送足够的影音数据，电影的播放将时断时续。
Flash动画是许多帧按顺序排列而成的。
Flash利用了计算机强大的计算功能，采用了一种叫做“关键帧”（keyframe）的技术，大大减少了动画设计的工作量。
下面就来谈谈这个重要的概念—关键帧。
所谓关键帧也就是该影帧中的内容与先前影帧中的有很大的区别，因而它呈现出关键性的动作及内容的变化。
比如，在某一帧以前没有任何物体，而到了这一帧，动画中突然出现了A物体，就应该把这一帧指定为关键帧。
如果设计中要求用10帧来表现A物体从出现的地方挪到另一处地方的过程，就需要再在第10帧后加入一个关键帧，指示它最后所在的位置，中间的帧相对于关键帧来说就是普通的帧，通过很简单的操作就可以让计算机利用内插法自动计算得出各影帧中的内容，而无需一笔一笔地把它们逐一画出来。
2.2Flash8.0的工作环境
2.2.1工作区域
工作区域就是Flash的工作平台，它是一个比较大的区域，实际上涵盖了下面要说的舞台以及画图和编辑动画的工作对象，可以把它看作是后台和舞台的结合。
2.2.2舞台
舞台是Flash动画中各个元素的表演平台，舞台将显示当前选择的帧的内容。
与工作区域不同的是：
动画发布后只有在舞台上的内容才能被看到，而舞台之外的工作区域中的内容就如同在后台的演员和工作人员一样不会被观众看见。
2.2.3场景
就像戏剧可以有几幕一样，舞台上也可以放下几个场景。
注意在舞台的右上部分，有两个小按钮，其中的第一个就是场景切换的按钮。
可以通过不同的场景之间的交互性，来创作出非常复杂的动画。
2.2.4时间轴窗口
时间轴窗口用于对Flash的两个基本元素层和帧进行操作。
在系统缺省设置下，时间轴窗口以编辑栏的形式出现在舞台的上面，紧靠上边框。
使用者可以根据需要或爱好，用鼠标拖动该编辑栏到Flash界面的其它位置，甚至将其拖出边框，使之成为可自由移动的浮动窗口。
时间轴控制窗口分为左右两个区域，它们分别是层控制区和时间轴控制区。
Flash的层与Photoshop中的层的概念是差不多的，它们都是透明的，只不过在Photoshop中是指图层，而在Flash中是指动画层。
使用层可以设定动画中各元素的上下叠放次序。
层控制区位于时间轴窗口的左边，是进行层显示和操作的主要区域，由几个层功能操作示意列和按钮组成。
当前舞台中正在编辑作品的所有层的名称、类型、状态都会按照层的放置顺序排列在层示意列中。
在层控制区中，不但可以显示当前作品的层及所属信息，还可以对某一个或部分层进行操作，如新增层、删除层、改变层的放置顺序等。
有关层的操作请参见层的操作。
这里要提醒大家的是，层的使用不会增加文件的规模，相反，合理地使用层可以在设计时使各个层层次清晰且易于编辑，所以最好在初学的时候就养成使用层的习惯。
时间轴窗口的右半部分是时间轴控制区域，该区域主要由若干行与左边层示意列对应的帧序列、示意列、时间轴标尺、信息提示栏以及一些用于控制动画显示和操作的工具按钮组成。
它用于对各帧的播放和放置进行有效的控制.
利用时间轴窗口安排好素材的空间位置和时间位置能够制作出比较好的动画效果。
2.3工具面板
如果没有看见工具面板，可选菜单Windows->Toolbar。
在 弹出的对话框里选Drawing就可以了。
Flash的工具面板包括Flash所有选择工具和绘图工具。
工具栏包括两个区域：
一个是选择区，它在工具面板的上半部，用于选择所需要的工具；另一个是属性区，是用于对所选工具进行一些属性的设定。
2.4符号和实体
对于大多数刚刚接触Flash的人来说，符号（Symbol）和实体（Instance）是一对比较特别的概念，但是它们并不难理解。
简而言之，符号是可以重复利用的图像（Graph）、按钮（Button）或是动画（MovieClip）；实体则是符号在舞台上的具体体现。
如果先创建了一个动画符号，把它放在舞台上，那么舞台上的这个动画就叫做实体。
引人符号的概念对于动画的设计人员是大有好处的。
首先，在处理大量元素时，不会手忙脚乱。
如果电影中有大量的重复元素， 而要对它们进行修改时，就不再需要对每一个实体进行修改，只要改变符号就可以了，因此，编辑工作大大简化了。
此外，符号的使用可以显著减小文件的规模，保存经常使用的符号所需要的空间要比保存所有数据的小得多。
比如，多个场景中使用了同一个背景符号，就不需要保存全部场景中的背景图像，而只要保存几个引用信息就可以了。
使用符号对在网络上播放的动画来说还有一个好处就是在用户观看时，符号下载到用户端只要一次，而不用重复下载多个同样的元素，这样可以大大加快动画的播放速度。
第3章Flash广告动画的设计制作过程
3.1开头动画设计思路
在学习动画设计之前有必要对多媒体动画设计的步骤进行简单介绍。
可以不夸张地说，多媒体动画设计是个相当复杂的系统过程，尤其在作品比较大、比较重要的时候。
设计人员必须胜任整个过程，要先制订一个总体计划，否则设计工作必然是又费力气又费时间。
在学习动画设计的时候必须要先制订全盘计划再动手设计。
制作多媒体动画时，随着质量要求及内容的多少，所付出的精力和时间有所不同。
根据经验，制作多媒体动画的过程大体可分为三个阶段：
第一个阶段是整个制作过程中最为重要的一个部分，设计人员应首先考虑动画产品的目的、投人、内容、制作时间等，同时也要考虑动画的使用方式、用后效果、交互方式等等，做好这些前期工作，对以后的制作将十分有利。
第二阶段，就是按照第一阶段的设计规划收集所需的素材并进行加工，例如编写文档、录音、制作动画等等。
在收集素材时应注意严格要求以保证质量。
第三阶段，用Flash将收集的素材集成并测试；在这个过程中应不断地进行测试，对发现的问题及时加以修改以保证精心制作的多媒体动画问世。
制作多媒体动画时，如果有多人分工合作，要注意相互协调每个人的工作。
亲身体验制作过程，每一位参与者一定能够积累一些经验，对多媒体的制作有更深刻的体会。
由上而下滑出手机，进入舞台后，停止手机元件的动画，然后用闪亮的星星滑过手机边缘，体现出手机的美感。
接着过淡出手机功能的文字，完整的展现手机有哪些功能及优点。
待功能介绍完毕之后，接下来在介绍手机的各种款式和不同颜色的手机。
到这一步的时候，实际上手机的特点还是没有展现出来。
我们再通过诺基亚这一款手机的拍照功能，利用动画将拍照的效果制作出来。
3.2Flash广告动画的详细制作过程
3.2.1Flash动画影片黑边的制作
（1）新建FLASH文档
新建一个文件，在[文档属性]中，将尺寸设为640*480像素，单位为像素，背景颜色设置为白色，并将帧频设置为12.0fps.
图3.2.1黑边的制作
（2）拖出长条形黑色矩形
制作影片黑色边框，由于采用的是影片的形式来制作动画，所以需要先做个影片边框。
按“CTRL+F8”键新建一个图形元件并命名为‘‘黑边”,在“图层1”上，使用工具栏中的[矩形工具]并将[填充色]设制为黑色。
拖动出一个长条形的黑色矩形。
大小为551*57像素。
图3.2.1制作影片黑色边框
（3）元件“黑边”的制作
然后使用[文本工具]，在黑色矩形中单击，输入“诺基亚5160”。
然后单击[属性面板]将文字进行调整，元件“黑边”即制作完成了。
图3.2.1元件“黑边”的制作
回到主场景，将“图层”改名为“黑边”直接将元件“黑边”拖入到舞台中，然后将它的X和Y的坐标值均设为0。
再拖入一次，将X和Y坐标值设为0和350。
图3.2.1元件“黑边”的制作
3.2.2手机移动
（1）将“手机”转换为图形元件，并设置“手机”的坐标值
单击[文件—导入—导入到[库]]，将“手机”和“星星”的图片导入到[库]。
回到“场景1”中，新建一层并命名为“手机”。
直接将“手机”图片拖入到“手机”层中，按“F8”键将其转换为图形元件。
在第1帧将它拖出，将X和Y的坐标值设为100和-250。
图3.2.2手机移动
图3.2.2手机移动
（2）手机的移动动画
在第25帧处按F6键插入关键帧，将X和Y的坐标值设为100和-128。
然后在时间轴两帧中间鼠标右击创建补间动画。
这样手机的移动动画就完成了。
图3.2.2手机移动
（3）将“星星”转换为图形元件
首先在“场景1”中插入一个新层，命名为“发光星星”，在第31帧处插入关键帧，将图片“星星”拖入其中转换为图形元件。
为了看到明显的星星，把背景色调暗一点！
图3.2.2星星围绕手机移动动画的制作
接下来插入一个“引导层”，并在第31帧处插入关键帧。
使用[线条工具]沿手机边缘绘制一条路径，然后在60帧处按F6键插入关键帧以用来延长帧。
图3.2.2星星围绕手机移动动画的制作
（4）在线段上的“星星”
首先单击“引导层”的第31帧，拖动“星星”将其至于线段的一个端点。
然后再单击“引导层”的第60帧，再拖动星星将其放在线段的另一个端点。
然后再单击“引导层”的第60帧，再的拖动星星将其放在线段的另一个端点。
如下图所示。
然后在“星星”层中第60帧处插入关键帧，并创建间动画。
这样一来，“星星”就会沿着线段进行运动了。
图3.2.2星星围绕手机移动动画的制作
3.2.3手机的动画制作
（1）手机移动动画制作1
在这里要插入原来的手机，制作手机从右下角移动到舞台当中。
插入一图层命名为“手机3”并在该层221帧入插入关键帧，把手机拖入舞台当中。
设位置为：
X：
504.3；Y：
477.9；宽：
67.1；高：
160.4。
图3.2.3手机移动动画制作
（1）手机移动动画制作2
刚刚已入插入手机，现在开始制作手机移动动画，在“手机3”图层224帧插入关键帧，并将手机位置移动到位置：
X：
417.5；Y：
46.0；高宽不变。
然后，再在228帧处插入关键帧，并将“手机”相关参数设置为：
X：
335.5；Y：
8.0；宽：
96.8；高：
231.2。
并相继在233、238插入关键帧，调整大小、位置等。
图3.2.3手机移动动画制作
在这一过程中，模糊图层中元件，也将进行相关的制作移动操作。
接2.2.4滤镜模糊效果制作中，在模糊图层中223帧、228帧、233帧、238帧插入关键帧，并调整元件的大小、位置，创建补间动画。
最后，将模糊图、手机3图层中的元件移动出舞台中。
图3.2.3手机移动动画制做
3.2.4手机拍照效果的制作
（1）手机移动动画
新建元件，自动生成元件名为“无件8”，将已准备好的图片导入库中，并拉入元件8中。
然后，插入3个图层，分别命名为“有手手机”、“白色闪光”、“320”。
在图层“有手手机”图层中，248帧处插入空白关键帧，将元件8拉入舞台，调整好位置、高宽，相关参数为：
X：
-507.1Y：
52.3；宽：
523.0高：
400。
图3.2.4手机拍照效果制作
（2）拍照“闪光”效果制作
在272帧、279帧处插入关键帧，在279帧处调出“元件8”属性，颜色选“Alpha”,数值为4%，这样在272帧至279帧处就完成了“有手手机”元件的淡出效果。
同时，在“白色闪光”图层中的260帧处插入空白关键帧，将准备好的闪光元件拖入舞台，调整好位置，在264帧处插入帧，这样拍照闪光效果就制作完成了。
图3.2.4手机拍照效果制作
“320”图层，是用于“320万像素照相机自动对焦双闪灯光”文字说明，模糊效果的制作，制作过程和2.2.4制作过程一样。
图3.2.4手机拍照效果制作
3.2.5遮罩效果的制作
（1）属性，并在图层2中绘制矩形
首先新建一个[影片剪辑]，命名为“元件13”，在这一层中使用[文本工具]，输入“诺基亚”，并将[属性]改为69号字、红色、粗体。
在第100帧处插入帧，以延长帧。
新建一层，使用[矩形工具]拖动出一个长条形的矩形，然后在第20帧处插入关键帧，并[创建补间动画]。
在20帧把矩形横向右方拖，将文字遮住。
然后在这层上击右键[遮罩层]，将其改为遮罩层。
图3.2.8遮罩效果制作
（2）“元件14”的设置
再新建一个[影片剪辑]，命名为“元件14，在这一层中使用[文本工具]，输入“音乐手机5160”，并将[属性]改为69号字，白色，粗体。
图3.2.8遮罩效果制作
（3）新建“遮罩文字1”和“遮罩文字2”两层
回到“场景1”中，再新建两个新层分别命名为“文字9”和“文字10”。
图3.2.8遮罩效果制作
（4）在“遮罩文字1”图层中拖入元件“元件13”
在“遮罩文字1”图层中,第361帧插入关键帧，将元件“元件13”拖入，并调整其位置。
图3.2.8遮罩效果制作
（5）在“遮罩文字2”图层中拖入元件“元件14”
在“遮罩文字2”图层中,第374帧插入关键帧，将元件“元件14”拖入，并调整其位置。
图3.2.8遮罩效果制作
第4章软件测试
4.1软件测试的目的及意义
4.1.1软件测试的目的
（1）发现错误
（2）解决错误
（3）有效定义和实现软件成分由低层到高层过程
（4）验证软件是否满足任务书和技术要求
4.2软件通过的测试发现的问题
（1）在3.2.8遮罩效果制作过程中，遮罩无法正常显示
在3.2.8测试过程中，发现遮罩无法正常显示，出现应该出现的字体被遮盖。
图4．2遮罩无法正常显示截图
（2）返回到场景中，寻找问题
返回到场景中，找到元件13，发现元件13中的遮罩图层的补间动画是间断的而并非连续的。
这样就导致了图4．2遮罩无法正常显示的情况，如图。
图4．2遮罩图层补间动画非连续
4.3解决软件测试发现的问题
（1）重新编辑，创建连续补间动画
选中元件13中的图层2，点击第1帧与20帧之间，删补间动画，再创建补间动画.
图4．3遮罩图层创建补间动画
（2）重新测试软件
元件14与元件13的情况一样，同样编辑将遮罩图层创建连续补间动画。
再次测试软件，结果测试成功，没有发现问题。
图4．3测试成功图
4.4测试结论
导致这样一问题的，原因很有可能是操作是不小心按错键盘，打散了补间图形。
在以后的制作当中应当，做完一个动画应锁定相关图层，以免导致类似的问题.
参考文献
[1]黄刚.FLASHMX标准教程[M]北京：
中国宇航出版社，2006.50~60.
[2]（美）ShamBhangal,JenDehaan FLASHMX教程[M]上海：
上海交通大学出版社，2007.25~32
致谢
在本广告动画的设计制作过程中，由于本人是初次制作，在知识和经验方面都存在着不足，另外时间也比较仓促，因此存在着很多方面的缺陷和不足。
因为以前只有初略学过这方面的知识，对FLASH制作过程的不熟练，因而可能远远达不到老师的要求，请老师见谅。
在本次毕业设计的制作过程中，指导老师黎老师给我的帮助，在细节上的关键性问题都会及时清楚的帮我解答，在大的方面上整个毕业设计的思路和设计方向上都及时的纠正许多我不清楚的地方，通过这次毕业设计我从指导老师和书籍上学到了很多以前课本上没学到的东西，极大的充实了我的知识量，为日后步入社会又增加了一条路，在此，特别感谢指导老师老的耐心辅导以及各位同学对我的帮助。
最后我特别感谢我的爸爸妈妈，对我的支持和鼓励，我相信有了父母、老师和同学的关心和支持我能在以后的学习和工作道路上，走的更好、更稳、更远。
升级会员 