《基于Flash的城市风景动画设计毕业论文.doc》由会员分享，可在线阅读，更多相关《基于Flash的城市风景动画设计毕业论文.doc（23页珍藏版）》请在三一办公上搜索。
1、基于Flash的城市风景动画设计阮成庆 数学与计算机科学学院摘 要：近年来，随着网络的飞速发展，flash动画技术以其容量小，制作成本低，视觉冲击力等优势走进了社会大众的生活中，主要应用于商业宣传，故事表现，网络游戏，教学过程模拟等不同行业的展示活动中。 越来越多的城市开始注重打造城市名片，积极宣传城市文化，主要以宣传风景为主，以提升城市的知名度和带动旅游业，谋取更快地发展，其中flash动画是其中主要手段之一。 本文利用Flash工具对城市建设进行交互式动画设计，便于人们了解城市文化，其中伴有PS图像处理和CoolEdit声音处理。关键词：flash，ActionScript,交互式动画，声
2、音处理 The design of city landscape animation based on FlashAbstract: in recent years, with the rapid development of network, flash animation technology for its small volume, low manufacturing cost, the visual impact of advantage into the social public life, mainly used in commercial propaganda, the st
3、ory of the performance, the network game, showing the activities of teaching process simulation in different industries.More and more of the city began to pay attention to build the city card, actively promoting the city culture, mainly in the propaganda of the scenery, in order to improve the citys
4、 visibility and promote tourism, for faster development, in which the flash animation is oneof the methods.In this paper, by means of Flash interactive animation design for city construction, is convenient for people to know the city culture, which accompanied with PS CoolEdit image processing and v
5、oice processing.Keywords: flash, ActionScript, interactive animation, sound processing 第一章 绪论1.1引言 FLASH是由美国Macromedia公司于1996年6月推出的用于矢量图编辑和动画创作的专业软件。网页设计者可以利用flash软件制作出既美观又可以改变大小的导航画面及其它奇特的效果 。被广泛的应用于多媒体领域 ，如 动画游戏制作，网络构件，学习课件，网站广告设计及全flash网站，工控界面等交互式软件和产品展示。主要优点是制作起来方便，通用性强，文件体积小，支持交互，涉及的领域多，制作出的东西效
6、果都可以做到很棒，不依赖于任何媒体播放器。缺点在于有些效果需要别的软件辅助制作，不是所有效果都能制作出来。（比如图片处理，flash就很难做到，只能通过做到剪裁和渲染） Flash是一种交互式矢量多媒体技术，他的前身是Futureplash，早期网上流行的矢量动画插件。后来由于Macromedia公司收购了FutureSplash以后便将其改名为Flash2，到现在最新的flashcs3。现在网上已经有成千上万个Flash站点，著名的如Macromedia专门ShockRave站点，全部采用了ShockwaveFlash和Director。可以说Flash已经渐渐成为交互式知量的标准，未来网页
7、的一大主流。 本文主要用制作一个具有交互性的城市风景展示，其中伴有处理图片和处理声音。该设计主要有两部分组成交互式动画和音频，用Flash软件做出的动画作品，其最大的特点是它能够把一些位图和按钮、文字做成交互性很强的动画，不仅具有视觉和听觉的双重感受，使其更具有趣味性和创造性。. 的相关概念. .什么是动画动画是将静止的画面变为动态的艺术，实现了由静止到动态，主要是靠人眼的视觉残留效应利用人的这种视觉生理特性可制作出具有高度想象力和表现力的动画影片。动画以人类视觉的原理为基础。 如果快速查看一系列相关的静态图像，那么我们会感觉到这是一个连续的运动。 每一个单独图像称之为帧。帧是动画中的单个图像
8、。. .什么是交互式动画所谓Flash交互式动画是指通过Flash完成的动画作品，在播放的同时能够接受来自外部的实时控制，其可以是播放人员，同样也可以是动画的观众。具体来看，就是观众能够通过鼠标，以及键盘等控制动画的播放，这样的全新设计就可以让普通的观众演变身份，可以从被动转为主动，这是传统动画所不具备的，在Flash中却能轻松实现 。另外其实时传播接收的信息效果更加良好，其反应信息会更加的快速和直接。 1.2.3 关于actionsciptActionscript 是Flash MX 2004的脚本语言。用脚本语言编写的程序嵌入到Flash动画后可以控制影片的播放（即向影片片断发送命令、指定
9、动画执行的内容、分析用户操作、显示反馈信息等），这种双向交流可生成交互动画。1.2.4交互式动画原理交互式动画是由触发动作的事件、事件的目标和触发事件的动作3个因素组成的，例如单击按钮后，影片开始播放这一事件。其中，单击是触发动作的事件，按钮是事件的目标，影片开始播放是触发事件的动作。换句话说，事件、目标和动作构成了一个交互式动画。在Flash中，事件包括鼠标事件、键盘事件和帧事件三种。目标包括时间轴、按钮元件和影片剪辑元件三种。而动作就是指控制影片的一系列脚本语言，所以说脚本语言的编写也就是各种动作的编写 。第三章 概要设计3.1 素材收集及图像处理 选择几张有关于城市风景的精美图片，并用p
10、hotoshop对其进行适当的处理。3.2导入图像 打开flash mx 2004，将处理过的图片导入库中，移至新文件夹中，命名为位图。3.3时尚按钮的制作 用文本工具制作按钮文本 将设置好的按钮文本转化为图形元件 将按钮图形转化为按钮元件 利用工具栏的矩形工具制作按钮的感应区 为各个按钮的各个动作进行设计3.4对导入库的图像素材进行设计3.5遮幕层的应用3.6舞台的设计及为按钮加入ActionScript3.7动画的发布与测试第四章 详细设计与制作4.1素材收集及图像处理素材收集及图像处理过程如下。（1) 收集6张城市风景的精彩图片（2) 利用Adobe Photoshop进行图片处理以符合
11、同样的大小；图像大小的设置，宽度为600像素，高度为250像素（3) 利用Adobeshop的渐变工具，对原图片的色调加以渐变（4) 打开Flash MX 2004,选择【修改】菜单下的【文档】选项，在弹出的“文档属性”对话框内，设置场景尺寸为800*250，“背景颜色”为蓝色，“帧频”为“120”，“标尺单位”为”像素”4.2导入图像导入图像的过程如下（1） 将利用Photoshop处理过的六张图片导入到库中。方法是选择【文件】菜单下的【导入】子菜单中的【导入到库】选项（2） 在弹出的“导入到库”对话框中，选择6张已经处理好的图片，单击【打开】按钮，完成导入到库（3） 选择【窗口】菜单下的【
12、库】选项，库中已经有了处理好的6张图片，为了库中的文件管理，将6张图片移至新文件夹，方法是选择0106张位图，单击鼠标右键，在弹出的快捷菜单中选择【移至新文件夹】选项，在弹出的对话框中输入“位图”字样（4） 单击【确定】按钮，完成文件夹的建立。双击文件夹图标即可关闭文件夹，再双击文件夹图标即可打开文件夹4.3时尚按钮制作时尚按钮的制作过程如下。（1） 制作城市风景动画的二级按钮。选择工具栏中的文本工具，在场景中输入“SUBMENU_01”字样，在属性栏中设置文字大小为8，字间间距为0.5，其他为默认值（2） 将设置好的按钮文本转化为元件。单击鼠标右键，在弹出快捷菜单中选择【转化为元件】选项，在
13、弹出的对话框中，设置“行为”为“图形”模式，在“名称”文本框中输入“SUB01”，单击【确定】按钮，完成设置（3） 选择场景中的文件元件，在属性栏中设置颜色为Alpha,将Alpha值设置为50%，其他为默认值（4） 用同样的方法再新建SUBMENU_02，SUBMENU_03，SUBMENU_04，MENU_01，MENU_02，MENU_03，MENU_04，MENU_05，MENU_06的元件图形，然后将它们移至新文件夹。选择10个元件图形，单击鼠标右键，在弹出的快捷菜单中选择【移至新文件夹】选项，在弹出的对话框中输入“按钮图形”字样（5） 下面利用前面做好的文本图形制作按钮。选择【插入
14、】菜单下的【新建元件】选项，在弹出的对话框中将“行为”设置为“按钮”模式，在“名称”文本框中输入“SUBMENU_01”,单击【确定】按钮，完成设置（6） 双击“库”中新建的SUBMENU_01按钮，这时场景中弹出SUBMENU_01的编辑窗口和时间轴，在时间线上选择“弹起”选项，然后将库中的“SUB01”拖动到场景中，注意将SUB01的中心与SUBMENU场景中的中心对齐；在属性栏中设置X的位置为-31.3，Y的位置为-6.6，设置颜色为Alpha，将Alpha值设置为50%，其他为默认值（7） 在时间线上的”指针经过“，”按下“处插入关键帧，然后用鼠标左键单击”指针经过“，将库中的”SUB
15、01“拖动到场景中，注意使SUB01的中心与SUBMENU_1场景中的中心对齐；在属性栏中设置X的位置为-31.4，Y的位置为-6.5，设置颜色为Alpha，将Alpha值设置为75%，其他为默认值（8） 利用工具栏中的矩形工具制作按钮的感应区。在”点击“的选项的场景中绘制长方形，在属性栏中设置宽为67.3，高为15.6，位置X为-33.7，Y为-7.6，颜色为蓝色（9） 关闭按钮SUBMENU_1，用同样的方法制作SUBMENU_1，SUBMENU_2,SUBMENU_3,SUBMENU_4按钮（10） 建立首页面的主按钮button_1,选择【插入】菜单下的【新建元件】选项，在弹出的对话框
16、中将“行为”设置为“按钮”模式，在“名称”文本框中输入“button_1”，单击【确定】按钮，完成设置； 双击“库”中的新建的button_1按钮，这时场景中弹出button_1的编辑窗口和时间轴，分别在“弹起”，“指针经过”，“按下”，“点击”处按【F6】键插入关键帧，在时间轴上选择“弹起”选项，然后将“库”中的“MENU_01”拖动到场景中，在属性栏中设置宽为49.2，高为14.3，X的位置为-55.0，Y的位置为-9.6，颜色为“#F5F295“（11） 在时间轴上分别选择”指针经过“，”按下“，然后将“MENU_01”的颜色设置为”#C31294“（12） 在时间轴上单击【插入图层】按
17、钮，在时间轴上就多了一层”图层2“，然后再”点击“处按【F6】键插入关键帧，在”指针经过“处也插入关键帧；在”弹起“的场景中用工具栏中的矩形工具绘制长方形，在属性栏中设置宽为130.0，高为30.0，位置X为-65.0，Y为-14.9，颜色为”白色“（13） 将绘制的长方形的颜色设置为Alpha，在混色器中将Alpha值设置为5%（14） 选择”指针经过“场景中的长方形，在属性栏中设置宽为130.0，高为30.0，位置X为-65.0，Y为-14.9，颜色为”黑色“（15） 将设置好的长方形的颜色设置为Alpha，在混色器中将Alpha值设置为5%（16） 调整一下图层1和图层2的位置，将图层1
18、置于图层2的上面（17） 利用相同的方法制作menu_02，menu_03,menu_04,menu_05,menu_06主要按钮，在”弹起“处将颜色全部设置为”#F5F295“，将”指针经过“和”按下“处的颜色分别设置为#5241FF，#F5723C，#309494，#A5F20C和#F59213，选择【窗口】菜单下的【库】选项4.4将导入的图像素材进行设计设计导入的图像素材的过程如下：（1） 回到场景1中，选择【插入】菜单下的【新建元件】选项，在弹出的对话框中，设置”行为“为”图形“模式，在”名称”文本框中输入“1”，单击【确定】按钮完成设置（2） 打开“库”中的位图文件夹，拖动位图01到
19、元件图形1中，选择场景中的位图，下面的属性栏中设置宽为670.0，高为230.0，位置X为0.0，Y为0.1（3） 选择“库”中的按钮submenu_1,submenu_2,submenu_3,把它们分别拖到元件图形1中，根据构图进行排列设计（4） 在时间轴上插入新的图层2，在图层2上选择工具栏中文字工具，在场景中的适当位置绘制出“come on”的字样（5） 在时间轴上插入新的图层，在新图层上选择工具栏中的文本工具，在场景中的输入公司名称或其他广告语，在属性栏中设置文字的格式以及位置等（6） 对整体画面进行细微的调整（7） 利用上述方法制作出另外5张城市风景的画面效果（8） 制作上面6张图片
20、的组合图形元件，选择【插入】菜单下【新建元件】选项，在弹出的对话框中设置“行为”为“图形”模式，在“名称”文本框中输入“六个”字样，单击【确定】按钮完成设置（9） 在新建的“六个”图形场景中，选择【窗口】菜单下的【库】选项，在弹出的对画框中选择“图形1”拖动到新的场景中，然后在下面的属性栏中设置宽为670.0，高为230.0，位置X为0.0，Y为0.1，其他为默认值（10） 选择【窗口】菜单下【库】选项，在弹出的对话框中选择“图形2”拖动到新的场景中，然后在下面的属性栏中设置宽为670.0，高为230.0，位置X为0.0，Y为230.1，其他为默认值（11） 选择【窗口】菜单下的【库】选项，在
21、弹出对话框中选择“图形3”拖动到新的场景中，然后在下面的属性栏中设置宽为670.0，高为230.0，位置X为0.1,Y为460.0，其他为默认值（12） 选择【窗口】菜单下的【库】选项，在弹出的对话框中选择“图形4”拖动到新的场景中，然后在下面的属性栏中设置宽为670.0，高为230.0，位置X为670.0，Y为0.1，其他设置默认值（13） 选择【窗口】菜单下的【库】选项，在弹出的对话框中选择“图形5”拖动到新的场景中，然后在下面的属性栏中设置宽为670.0，高为230.0，位置X为670.0，Y为230.0.其他为默认值（14） 选择【窗口】菜单下的【库】选项，在弹出的对话框选择“图形6”
22、拖动到新的场景中，然后在下面的属性栏中设置宽为670.0，高为230.0，位置X为670.0，Y为460.0，其他为默认值（15） 制作6个图片的影片剪辑。选择【插入】菜单下【新建元件】选项，在弹出的对话框中设置“行为”为“影片剪辑”模式，在“名称“文本框中输入”script“单击【确定】按钮完成设置（16） 在新建的script的影片剪辑的场景中，选择【窗口】菜单下的【库】选项，在弹出的对话框中选择”六个”图形拖动到新的场景中，然后再下面的属性栏中设置宽为1340.0，高为690.0，位置X为0.0，Y为0.0，其他为默认值（17） 单击【场景1】按钮回到场景1，把系统默认的图层1命名为”s
23、trip“；选择【窗口】菜单下的【库】选项，在弹出的对话框中选择影片剪辑”strip“拖动场景1的图层”strip“中，然后在下面的属性栏中设置宽为1340.0，高为690.0，位置X为130.0，Y为0.0，其他为默认值（18） 单击【插入图层】按钮，把新建的图层命名为”strip2“;选择【窗口】菜单下的【库】选项，在弹出的对话框中选择影片剪辑”strip“拖动到场景1的图层”strip“中，然后在下面的属性栏中设置宽为1340.0，高为690.0，位置X为130.0，Y为0.0，其他为默认值（19） 单击【插入图层】按钮，把新建的图层命名为”strip3“；选择【窗口】菜单下【库】选项，
24、在弹出的对话框中选择影片剪辑”strip“拖动到场景1的图层”strip3“中，然后在下面的属性栏中设置宽为1340.0，高为690.0，位置X为130.0，Y为0.1，其他为默认值4.5遮罩层的应用遮罩层的应用步骤如下：（1） 单击【插入图层】按钮，把新建的图层命名为”遮罩层1”；选择工具栏中的椭圆工具在场景中绘制出两组椭圆作为遮罩层之用（2） 单击【插入图层】按钮，把新建的图层命名为“遮罩层2”；选择工具栏中的椭圆工具在场景中描绘出两组椭圆，这里的两组椭圆要与遮罩层1中椭圆形状相组合，作为遮罩层用（3） 单击【插入图层】按钮，把新建的图形命名为“按钮层”选择工具栏中矩形工具在场景中绘制长方
25、形然后在属性栏中设置宽为130.0，高为230.0，位置X为0.1，Y为0.0，其他为默认值4.6舞台的设计及为按钮加入ActionScript舞台的设计过程如下：（1） 单击【插入图层】按钮，把新建的图层命名为“按钮层2”，选择【窗口】菜单下的【库】选项，在弹出的对话框中选择button_1,button_2,button_3,button_4,button_5,button_6,拖动到“按钮层2”的场景中（2） 单击【插入图层】按钮，把新建的图层命名为“文字层”，选择工具栏的文本工具，在场景中输入文字或者公司名称，然后在下面的属性栏设置文字的格式，（3） 建立一个影片剪辑。选择【插入】菜单
26、下的【新建元件】选项，在弹出的对话框中设置“行为”为“影片剪辑”模式，在“名称”文本框输入“script”，单击【确认】按钮完成设置（4） 在script的时间轴的图层1上，用鼠标单击第5帧，再打开“动作帧”对话框，在对话框中输入以下动作语句：If(_root.strip._xtargetx)diffrence=_root.strip._x-targetx;Rate=difference/baseRate;_root.strip._x=_root.strip._x-rate;If(_root.strip2._xtqrgetx)difference=_root.strip2._x-targetx
27、;rate=difference/(baseRate*2);_root.strip2._x=_root.strip2._x-rate;If(_root.strip3._xtargetx)difference=_root.strip3._x-targetx;rate=difference/(baseRate*3);_root.strip3._x=_root.strip3._x-rate;/less than xIf(_root.strip._xtargetx)diffrence=targetx_root.strip._x ;Rate=difference/baseRate;_root.strip
28、._x=_root.strip._x+rate;If(_root.strip2._xtargetx)difference=targetx_root.strip2._x;rate=difference/(baseRate*2);_root.strip2._x=_root.strip2._x+rate;If(_root.strip3._xtargety)diffrence=_root.strip._y-targety;Rate=difference/baseRate;_root.strip._y=_root.strip._y-rate;If(_root.strip2._ytargety)diffe
29、rence=_root.strip2._y-targety;rate=difference/(baseRate*2);_root.strip2._y=_root.strip2._y-rate;If(_root.strip3._ytargety)difference=_root.strip3._y-targety;rate=difference/(baseRate*3);_root.strip3._y=_root.strip3._y-rate;/less than yIf(_root.strip._ytargety)diffrence=targety-root.strip._y ;Rate=di
30、fference/baseRate;_root.strip._y=_root.strip._y+rate;If(_root.strip2._ytargety)difference=targety-root.strip2._yrate=difference/(baseRate*2);_root.strip2._y=_root.strip2._y+rate;If(_root.strip3._ytargety)difference=_root.strip3._y-targety;rate=difference/(baseRate*3);_root.strip3._y=_root.strip3._y+
31、rate;(6) 在script的时间轴的图层1上，用鼠标单击第6帧，再打开“动作-帧”对话框，双击左边的“全局函数”下“时间轴控制”里的“gotoAndPlay”选项，然后在括号内输入5，或直接输入“gotoAndPlay(5);”语句(7) 回到场景1中，单击script的第一帧，再打“动作-帧”对话框，双击左边的“全局函数”下的“时间轴控制”里的“stop”选项或者输入“stop();”语句(8) 在script被激活的情况下，选择【窗口】菜单下的【库】选项，在弹出的对话框中，选择影片剪辑script拖动到场景1的图层stript中，然后在下面的属性栏中设置宽为0.0，高为0.0，位置X
32、为-127.2，Y为0.0，在影片剪辑下面的文本框内输入“script”名称，其他为默认值(9) 将strip2拖动到“遮罩层1”的下面，在“遮罩层1”上面单击鼠标右键，在弹出的快捷菜单中选择【遮罩层】选项，让遮罩层1的圆圈形成遮罩效果(10) 将strip2拖动到“遮罩层2”的下面，在“遮罩层2“上面单击鼠标右键，在弹出快捷菜单中选择【遮罩层】选项，让遮罩层2的圆圈形成遮罩效果(11) 打开“按钮栏2”中的按钮，单击button_1，在“动作-按钮”对话框中输入以下语句: on(rollOver)script.targetx=130;script.targety=0;script.baseR
33、ate=2;script.gotoAndPlay(5);(12)打开“按钮栏2”中的按钮，单击button_2，在“动作-按钮”对话框中输入以下语句: on(rollOver)script.targetx=-540;script.targety=0;script.baseRate=2;script.gotoAndPlay(5);(13)打开“按钮栏2”中的按钮，单击button_3，在“动作-按钮”对话框中输入以下语句: on(rollOver)script.targetx=130;script.targety=-230;script.baseRate=2;script.gotoAndPlay
34、(5);(14)打开“按钮栏2”中的按钮，单击button_4，在“动作-按钮”对话框中输入以下语句: on(rollOver)script.targetx=-540;script.targety=-230;script.baseRate=2;script.gotoAndPlay(5);(15)打开“按钮栏2”中的按钮，单击button_5，在“动作-按钮”对话框中输入以下语句: on(rollOver)script.targetx=130;script.targety=-460;script.baseRate=2;script.gotoAndPlay(5);(16)打开“按钮栏2”中的按钮，
35、单击button_6，在“动作-按钮”对话框中输入以下语句: on(rollOver)script.targetx=-540;script.targety=-230;script.baseRate=2;script.gotoAndPlay(5);4.6动画的发布与测试动画的发布与测试过程如下（1） 在属性栏中设置发布格式，单击属性栏中的【设置】按钮（2） 在弹出的“发布设置”中设置“版本”为“FlashPlayer5”，然后单击【确定】按钮，完成发布设置（3） 选择【控制】菜单下的【播放】选项，或者选择【测试影片】选项第五章 总结通过这一个月的实习，我对FLASH MX软件有了更深一步的了解。
36、开拓了眼界，加深了认识，使我知道FLASH不但可以在视觉上给人一种全新享受外，还可以在享受全新的视觉的同时，还可以听到优美的音乐。总之，通过这次FLASH的实习，使我深深地感觉到了自己在专业认识上的欠缺和不足，自己的很多地方都急需挖掘和深化，今后我aa一定注重培养自己的审美情操，加强审美观的培养，多加开拓自己的视野，使自己的创新意识不断的得到加强，对FLASH更是要继续不断的深化学习。FLASH是一个功能强大的动画创作工具，仅仅掌握一些表面知识是远远不够的，只有在实践中不断探索和总结，并且不断激发自己的想像力和创意，才能逐步提高自己的创作水平，进而制作优秀的作品。通过实习我不仅领会了基本的思考
37、方式，掌握了很多的通用方法，而且还明白了许多道理。这次作品的完成是由我和我的指导老师共同完成的,这就需要很多人的共同努力, 发挥各自的优势,发挥丰富的想象力与创新意识. 在设计过程中我们相互讨论，相互弥补不足，这样不仅增强了我们的个人能力，而且使我们认识到团队精神的重要性,为我们以后进入公司工作培养这种精神打下良好的基础。参考文献1.黄冈 于林 主编，Macromedia Flash MX 标准教程，北京希望电子出版社。本版号：ISBN 7900118411 . 2004,6:67672.黄汗兵 主编，Show good 创作宝典之FLASH MX教学课件与互动游戏，人民邮电出版社。本版号：ISBN 7115107413120. 2005,18(2):5050 3.FLASH MX实例创作教学宝典，金版电子出版公司
