FLASH动画知识制作商业广告动画毕业论文.doc

2009 届毕业设计说明书 FLASH动画知识制作商业广告动画 系 、 部： 计算机科学系 学生姓名： 指导教师： 专 业： 计算机应用技术 班 级： 完成时间： 摘 要Flash是美国的Macromedia公司推出的优秀软件。它是一种交互式动画设计工具，用sh strong place.This text introduced the Flash animation manufacture in the most basal knowledge and process and some related applied methodses of the creation FLASH field view animation under 8.0 software environments of the flash 8.0, and pass to create one FLASH field view animation toward everyone to display the special features of a FLASH animation.Keywords： Software of Flash; Animation; Orange perfame; A view目 录1系统概述11.1Flash动画阶段11.1.1Flash 现状114.3解决软件测试发现的问题254.4测试结论26参考文献26.致谢27附录281 系统概述1.1Flash动画阶段1.1.1Flash 2 Flash动画制作中最基础的知识2.1 动画的基本理论    在学习动画设计之前首先要解决一个向题，也就是动画到底是什么？事实上，一系列静态的画面连续快速播放就构成了动画。动画与电影一样都是利用人眼的视觉暂留来产生动态的感觉。在Flash中通常把动画叫做电影(movies)，二者的概念是相似的，也就不作区分了。    动画中每一张静态的画面被称为“帧”(Frame)。动画播放的速率正是由每秒播放多少帧来决定的，也就是fps (Frame Per Second帧秒）。在计算机上常见的动画速率一般使用8-12帧秒，尤其在网络上播放的动画更不要把帧速设定得太高。如果设得太高，会造成网络频率来不及配合输送足够的影音数据，电影的播放将时断时续。Flash动画是许多帧按顺序排列而成的。Flash利用了计算机强大的计算功能，采用了一种叫做“关键帧”(key frame）的技术，大大减少了动画设计的工作量。   下面就来谈谈这个重要的概念关键帧。所谓关键帧也就是该影帧中的内容与先前影帧中的有很大的区别，因而它呈现出关键性的动作及内容的变化。比如，在某一帧以前没有任何物体，而到了这一帧，动画中突然出现了A物体，就应该把这一帧指定为关键帧。如果设计中要求用10帧来表现A物体从出现的地方挪到另一处地方的过程，就需要再在第10帧后加入一个关键帧，指示它最后所在的位置，中间的帧相对于关键帧来    舞台是Flash动画中各个元素的表演平台，舞台将显示当前选择的帧的内容。与工作区域不同的是：动画发布后只有在舞台上的内容才能被看到，而舞台之外的工作区域中的内容就如同在后台的演员和工作人员一样不会被观众看见。2.2.3 置顺序等。有关层的操作请参见层的操作。这里要提醒大家的是，层的使用不会增加文件的规模，相反，合理地使用层可以在设计时使各个层层次清晰且易于编辑，所以最好在初学的时候就养成使用层的习惯。时间轴窗口的右半部分是时间轴控制区域，该区域主要由若干行与左边层示意列对应的帧序列、示意列、时间轴标尺、信息提示栏以及一些用于控制动画显示和操作的工具按钮组成。它用于对各帧的播放和放置进行有效的控制.    利用时间轴窗口安排好素材的空间位置和时间位置能够制作出比较好的动画效果。2.3 工具面板    如果没有看见工具面板，可选菜单Windows-> Toolbar。在 弹出的对话框里选Drawing就可以了。Flash的工具面板包括Flash所有选择工具和绘图工具。工具栏包括两个区域：一个是选择区，它在工具面板的上半部，用于选择所需要的工具；另一个是属性区，是用于对所选工具进行一些属性的设定。2.4 符号和实体     对于大多数刚刚接触Flash的人来说，符号（Symbol）和实体(Instance）是一对比较特别的概念，但是它们并不难理解。简而言之，符号是可以重复利用的图像（Graph)、按钮（Button）或是动画(Movie Clip)；实体则是符号在舞台上的具体体现。如果先创建了一个动画符号，把它放在舞台上，那么舞台上的这个动画就叫做实体。    引人符号的概念对于动画的设计人员是大有好处的。首先，在处理大量元素时，不会手忙脚乱。如果电影中有大量的重复元素， 而要对它们进行修改时，就不再需要对每一个实体进行修改，只要改变符号就可以了，因此，编辑工作大大简化了。此外，符号的使用可以显著减小文件的规模，保存经常使用的符号所需要的空间要比保存所有数据的小得多。比如，多个场景中使用了同一个背景符号，就不需要保存全部场景中的背景图像，而只要保存几个引用信息就可以了。使用符号对在网络上播放的动画来说还有一个好处就是在用户观看时，符号下载到用户端只要一次，而不用重复下载多个同样的元素，这样可以大大加快动画的播放速度。3 Flash广告动画的设计制作过程3.1开头动画设计思路  在学习动画设计之前有必要对多媒体动画设计的步骤进行简单介绍。可以不夸张地说，多媒体动画设计是个相当复杂的系统过程，尤其在作品比较大、比较重要的时候。设计人员必须胜任整个过程，要先制订一个总体计划，否则设计工作必然是又费力气又费时间。在学习动画设计的时候必须要先制订全盘计划再动手设计。    制作多媒体动画时，随着质量要求及内容的多少，所付出的精力和时间有所不同。根据经验，制作多媒体动画的过程大体可分为三个阶段：    第一个阶段是整个制作过程中最为重要的一个部分，设计人员应首先考虑动画产品的目的、投人、内容、制作时间等，同时也要考虑动画的使用方式、用后效果、交互方式等等，做好这些前期工作，对以后的制作将十分有利。    第二阶段，就是按照第一阶段的设计规划收集所需的素材并进行加工，例如编写文档、录音、制作动画等等。在收集素材时应注意严格要求以保证质量。    第三阶段，用Flash将收集的素材集成并测试；在这个过程中应不断地进行测试，对发现的问题及时加以修改以保证精心制作的多媒体动画问世。    制作多媒体动画时，如果有多人分工合作，要注意相互协调每个人的工作。亲身体验制作过程，每一位参与者一定能够积累一些经验，对多媒体的制作有更深刻的体会。 由上而下滑出手机，进入舞台后，停止手机元件的动画，然后用闪亮的星星滑过手机边缘，体现出手机的美感。接着过淡出手机功能的文字，完整的展现手机有哪些功能及优点。待功能介绍完毕之后，接下来再介绍手机的各种款式和不同颜色的手机。到这一步的时候，实际上手机的特点还是没有展现出来。我们再通过诺基亚这一款手机的拍照功能，利用动画将拍照的效果制做出来。接着再用淡入淡出体现这一款手机为“诺基亚5160音乐手机”让看广告的人知道这一款机的名称。最后，我们再用手机的背面做为广告的结束，用遮罩做出“诺基亚5160音乐手机”。3.2 flash广告动画的详细制作过程3.2.1 flash动画影片黑边的制作（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”的坐标分别创建7个“元件”，每个元件分别用来装一串字。 “元件1”中文字为“支持网络调频收音机”，设置属性为18号字、黑体、加粗。回到“场景1”，新建一层命名为“文字1”，在这一层第65帧处插入关键帧，将“元件1”直接拖入到舞台，将其X和Y坐标设置为485和82。图3.2.3 文字的淡入淡出效果制作（2）完成文字淡入淡出效果 下面添加淡出效果，在文字层的第65帧处单击，然后在场景1中选中“元件1”，在属性栏中颜色的右侧下拉菜单中，将“Alpha”值设为0，然后单击第75帧，将它的值设为100。这样就完成了文字从无到有的全过程。图3.2.3 文字的淡入淡出效果制作（3）元件1至7的最终效果 接下来就是完成其他的5个元件，分别将5个元件命名为“元件2”到“元件6”。并在每个元件内输入一串字，然后在这5个元件内分别输入“内置Flash Lite播放器”、“ 立体声蓝牙耳机功能”、“ 1600万色彩屏”，“ VGA照相机，自动变焦功能”、“ 内置免提扬声器”。在场景中新建5个文字层，分别为“文字2”层到“文字5”层。然后用以上同样的方法来对它们做淡入淡出的进入效果。图3.2.3 文字的淡入淡出效果制作3.2.4 滤镜模糊效果制作（1）在203帧插入关键帧 首先在把另一手机画面导入库中，命名为“手机2”。然后新建元件把“手机2”拖入新建元件中，并把刚新建元件更名为“手机2元件”图3.2.4 滤镜模糊效果制作（2）完成模糊效果在210帧处插入关键帧，并将元件拉大，移动位置至如图所示，在203帧与210帧中间创建补间动画。然后，点击210帧处，再点击元件，调出属性，创建滤镜增加模糊效果，X=50，Y=10 。图3.2.4 滤镜模糊效果制作（3）“模糊效果”的重复在模糊层，215帧插入关键帧，216帧插入关键帧，217帧插入关键帧，并在216帧入加入模糊效果，如下图所示：图3.2.4 滤镜模糊效果制作在滤镜中加入模糊效果，并将相关参数设置为：模糊X：50 ；模糊Y：50品质设置为低。图3.2.4 滤镜模糊效果制作3.2.5手机移动动画制作(1)手机移动动画制作 1在这里要插入原来的手机，制作手机从右下角移动到舞台当中。插入一图层命名为“手机3”并在该层221帧入插入关键帧，把手机拖入舞台当中。设位置为：X：504.3； Y：477.9； 宽：67.1；高：160.4。图3.2.5 手机移动动画制作(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.5 手机移动动画制作在这一过程中，模糊图层中元件，也将进行相关的制作移动操作。接2.2.4 滤镜模糊效果制作中，在模糊图层中223帧、228帧、233帧、238帧插入关键帧，并调整元件的大小、位置，创建补间动画。最后，将模糊图、手机3图层中的元件移动出舞台中。图3.2.5 手机移动动画制作3.2.6 手机拍照效果制作(1)手机移动动画新建元件，自动生成元件名为“无件8”，将已准备好的图片导入库中，并拉入元件8中。然后，插入3个图层，分别命名为“有手手机” 、“白色闪光” 、“320”。在图层“有手手机”图层中，248帧处插入空白关键帧，将元件8拉入舞台，调整好位置、高宽，相关参数为：X：-507.1 Y：52.3；宽：523.0 高：400 。图3.2.6 手机拍照效果制作在图层“有手手机”中，256帧中插入关键帧，将元件“元件8”相关参数设置为如下图所示。图3.2.6 手机拍照效果制作(2)拍照“闪光”效果制作在272帧、279帧处插入关键帧，在279帧处调出“元件8”属性，颜色选“Alpha”,数值为4%，这样在272帧至279帧处就完成了“有手手机”元件的淡出效果。同时，在“白色闪光”图层中的260帧处插入空白关键帧，将准备好的闪光元件拖入舞台，调整好位置，在264帧处插入帧，这样拍照闪光效果就制作完成了。图3.2.6 手机拍照效果制作“320” 图层，是用于“320万像素 照相机自动对焦 双闪灯光”文字说明，模糊效果的制作，制作过程和2.2.4 制作过程一样。图3.2.6 手机拍照效果制作3.2.7 黑屏效果以及元件、文字若隐若现效果制作(1)“黑幕”的设置先新建一个图形元件，自动命名为“元件10”，将填充色设制为黑色，然后使用矩形工具拖动出一个矩形，大小为648*540像素。点击“场景1”，新建一层命名为“黑幕”，在第279帧处插入关键帧，将元件“元件10”拖入场景中。将X和Y坐标分别设为-2.1和-3.1。在288帧处插入关键帧，然后为其创建补间动画。将279帧处元件的颜色设为白色、82% 。 图3.2.7 黑屏效果以及文字、元件若隐若现效果制作(2)文字若隐若现动画新建元件，自动生成元件名“元件11”，在元件中输入“Nokia 5160 音乐手机沟通没有距离! ”并调整位置、颜色。在场景中，再插一图层命名为“文字2”，在290帧处插入关键帧，将刚建好的元件拖入舞台中，然后在296、316、333帧处插入关键帧，为其创建补间动画。选中290帧，打开属性滤镜模糊，X、Y值均为：14.1666，再选中333帧，属性颜色Alpha3% 图3.2.7 黑屏效果以及文字、元件若隐若现效果制作(3)淡出最终手机图片 导入一张图片，图片名为“手机3”。然后在“场景1”中再插入一图层命名为“最终手机”，选中刚新建的图层，在第333帧处插入关键帧，拖入“手机3”，转换元件，位置居中。然后在第360帧再插入关键帧,选中333帧，将元件属性，颜色选择“Alpha”为8%，对333帧至360帧创建补间动画。图3.2.7 黑屏效果以及文字、元件若隐若现效果制作3.2.8 遮罩效果制作(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 遮罩效果制作(6)诺基亚5160广告动画制作就完成了，最后导出Flash影片。图3.2.8 遮罩效果制作4 软件测试4.1软件测试的目的及意义4.1.1软件测试的目的（1）发现错误（2）解决错误（3）有效定义和实现软件成分由低层到高层过程（4）验证软件是否满足任务书和技术要求4.2软件通过的测试发现的问题 (1)在3.2.8 遮罩效果制作过程中，遮罩无法正常显示在3.2.8 测试过程中，发现遮罩无法正常显示，出现应该出现的字体被遮盖。图42 遮罩无法正常显示截图 (2)返回到场景中，寻找问题返回到场景中，找到元件13，发现元件13中的遮罩图层的补间动画是间断的而并非连续的。这样就导致了图42 遮罩无法正常显示的情况，如图。图42 遮罩图层补间动画非连续4.3解决软件测试发现的问题(1)重新编辑，创建连续补间动画选中元件13中的图层2，点击第1帧与20帧之间，删补间动画，再创建补间动画.图43 遮罩图层创建补间动画(2)重新测试软件 元件14与元件13的情况一样，同样编辑将遮罩图层创建连续补间动画。再次测试软件，结果测试成功，没有发现问题。图43 测试成功图4.4测试结论 导致这样一问题的，原因很有可能是操作是不小心按错键盘，打散了补间图形。在以后的制作当中应当，做完一个动画应锁定相关图层，以免导致类似的问题.参考文献1黄刚.FLASH MX 标准教程M 北京：中国宇航出版社，2006. 5060. 2 图灵.新编中文FLASH MX教程M 上海：上海交通大学出版社，2007.2532致谢在本广告动画的设计制作过程中，由于本人是初次制作，在知识和经验方面都存在着不足，另外时间也比较仓促，因此存在着很多方面的缺陷和不足。因为以前只有初略学过这方面的知识，对FLASH制作过程的不熟练，因而可能远远达不到老师的要求，请老师见谅。在本次毕业设计的制作过程中，指导老师 给了我很大的帮助，在细节上的关键性问题都会及时清楚的帮我解答，在大的方面上整个毕业设计的思路和设计方向上都及时的纠正许多我不清楚的地方，通过这次毕业设计我从指导老师和书籍上学到了很多以前课本上没学到的东西，极大的充实了我的知识量，为日后步入社会又增加了一条路，在此，特别感谢指导老师 的耐心辅导。附 录