基于Flash的城市风景动画设计论文

1、 PAGE23 / NUMPAGES23基于Flash的城市风景动画设计阮成庆 数学与计算机科学学院摘 要：近年来，随着网络的飞速发展，flash动画技术以其容量小，制作成本低，视觉冲击力等优势走进了社会大众的生活中，主要应用于商业宣传，故事表现，网络游戏，教学过程模拟等不同行业的展示活动中。 越来越多的城市开始注重打造城市名片，积极宣传城市文化，主要以宣传风景为主，以提升城市的知名度和带动旅游业，谋取更快地发展，其中flash动画是其中主要手段之一。 本文利用Flash工具对城市建设进行交互式动画设计，便于人们了解城市文化，其中伴有PS图像处理和CoolEdit声音处理。关键词：flash，

2、ActionScript,交互式动画，声音处理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

3、 propaganda, the story 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 t

4、o improve the citys 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 ima

5、ge processing and voice 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 素材收集与图像处理 选择几有关于城市风景的精美图片，并用phot

10、oshop对其进行适当的处理。3.2导入图像 打开flash mx 2004，将处理过的图片导入库中，移至新文件夹中，命名为位图。3.3时尚按钮的制作 用文本工具制作按钮文本 将设置好的按钮文本转化为图形元件 将按钮图形转化为按钮元件 利用工具栏的矩形工具制作按钮的感应区 为各个按钮的各个动作进行设计3.4对导入库的图像素材进行设计3.5遮幕层的应用3.6舞台的设计与为按钮加入ActionScript3.7动画的发布与测试详细设计与制作4.1素材收集与图像处理素材收集与图像处理过程如下。收集6城市风景的精彩图片利用Adobe Photoshop进行图片处理以符合同样的大小；图像大小的设置，宽度

11、为600像素，高度为250像素利用Adobeshop的渐变工具，对原图片的色调加以渐变打开Flash MX 2004,选择修改菜单下的文档选项，在弹出的“文档属性”对话框，设置场景尺寸为800*250，“背景颜色”为蓝色，“帧频”为“120”，“标尺单位”为”像素”4.2导入图像导入图像的过程如下将利用Photoshop处理过的六图片导入到库中。方法是选择文件菜单下的导入子菜单中的导入到库选项在弹出的“导入到库”对话框中，选择6已经处理好的图片，单击打开按钮，完成导入到库选择窗口菜单下的库选项，库中已经有了处理好的6图片，为了库中的文件管理，将6图片移至新文件夹，方法是选择0106位图，单击鼠

12、标右键，在弹出的快捷菜单中选择移至新文件夹选项，在弹出的对话框中输入“位图”字样单击确定按钮，完成文件夹的建立。双击文件夹图标即可关闭文件夹，再双击文件夹图标即可打开文件夹4.3时尚按钮制作时尚按钮的制作过程如下。制作城市风景动画的二级按钮。选择工具栏中的文本工具，在场景中输入“SUBMENU_01”字样，在属性栏中设置文字大小为8，字间间距为0.5，其他为默认值将设置好的按钮文本转化为元件。单击鼠标右键，在弹出快捷菜单中选择转化为元件选项，在弹出的对话框中，设置“行为”为“图形”模式，在“名称”文本框中输入“SUB01”，单击确定按钮，完成设置选择场景中的文件元件，在属性栏中设置颜色为Alp

13、ha,将Alpha值设置为50%，其他为默认值用同样的方法再新建SUBMENU_02，SUBMENU_03，SUBMENU_04，MENU_01，MENU_02，MENU_03，MENU_04，MENU_05，MENU_06的元件图形，然后将它们移至新文件夹。选择10个元件图形，单击鼠标右键，在弹出的快捷菜单中选择移至新文件夹选项，在弹出的对话框中输入“按钮图形”字样下面利用前面做好的文本图形制作按钮。选择插入菜单下的新建元件选项，在弹出的对话框中将“行为”设置为“按钮”模式，在“名称”文本框中输入“SUBMENU_01”,单击确定按钮，完成设置双击“库”中新建的SUBMENU_01按钮，这时

14、场景中弹出SUBMENU_01的编辑窗口和时间轴，在时间线上选择“弹起”选项，然后将库中的“SUB01”拖动到场景中，注意将SUB01的中心与SUBMENU场景中的中心对齐；在属性栏中设置X的位置为-31.3，Y的位置为-6.6，设置颜色为Alpha，将Alpha值设置为50%，其他为默认值在时间线上的”指针经过“，”按下“处插入关键帧，然后用鼠标左键单击”指针经过“，将库中的”SUB01“拖动到场景中，注意使SUB01的中心与SUBMENU_1场景中的中心对齐；在属性栏中设置X的位置为-31.4，Y的位置为-6.5，设置颜色为Alpha，将Alpha值设置为75%，其他为默认值利用工具栏中的

15、矩形工具制作按钮的感应区。在”点击“的选项的场景中绘制长方形，在属性栏中设置宽为67.3，高为15.6，位置X为-33.7，Y为-7.6，颜色为蓝色关闭按钮SUBMENU_1，用同样的方法制作SUBMENU_1，SUBMENU_2,SUBMENU_3,SUBMENU_4按钮建立首页面的主按钮button_1,选择插入菜单下的新建元件选项，在弹出的对话框中将“行为”设置为“按钮”模式，在“名称”文本框中输入“button_1”，单击确定按钮，完成设置； 双击“库”中的新建的button_1按钮，这时场景中弹出button_1的编辑窗口和时间轴，分别在“弹起”，“指针经过”，“按下”，“点击”处按

16、F6键插入关键帧，在时间轴上选择“弹起”选项，然后将“库”中的“MENU_01”拖动到场景中，在属性栏中设置宽为49.2，高为14.3，X的位置为-55.0，Y的位置为-9.6，颜色为“#F5F295“在时间轴上分别选择”指针经过“，”按下“，然后将“MENU_01”的颜色设置为”#C31294“在时间轴上单击插入图层按钮，在时间轴上就多了一层”图层2“，然后再”点击“处按F6键插入关键帧，在”指针经过“处也插入关键帧；在”弹起“的场景中用工具栏中的矩形工具绘制长方形，在属性栏中设置宽为130.0，高为30.0，位置X为-65.0，Y为-14.9，颜色为”白色“将绘制的长方形的颜色设置为Alp

17、ha，在混色器中将Alpha值设置为5%选择”指针经过“场景中的长方形，在属性栏中设置宽为130.0，高为30.0，位置X为-65.0，Y为-14.9，颜色为”黑色“将设置好的长方形的颜色设置为Alpha，在混色器中将Alpha值设置为5%调整一下图层1和图层2的位置，将图层1置于图层2的上面利用一样的方法制作menu_02，menu_03,menu_04,menu_05,menu_06主要按钮，在”弹起“处将颜色全部设置为”#F5F295“，将”指针经过“和”按下“处的颜色分别设置为#5241FF，#F5723C，#309494，#A5F20C和#F59213，选择窗口菜单下的库选项4.4将

18、导入的图像素材进行设计设计导入的图像素材的过程如下：回到场景1中，选择插入菜单下的新建元件选项，在弹出的对话框中，设置”行为“为”图形“模式，在”名称”文本框中输入“1”，单击确定按钮完成设置打开“库”中的位图文件夹，拖动位图01到元件图形1中，选择场景中的位图，下面的属性栏中设置宽为670.0，高为230.0，位置X为0.0，Y为0.1选择“库”中的按钮submenu_1,submenu_2,submenu_3,把它们分别拖到元件图形1中，根据构图进行排列设计在时间轴上插入新的图层2，在图层2上选择工具栏中文字工具，在场景中的适当位置绘制出“come on”的字样在时间轴上插入新的图层，在新

19、图层上选择工具栏中的文本工具，在场景中的输入公司名称或其他广告语，在属性栏中设置文字的格式以与位置等对整体画面进行细微的调整利用上述方法制作出另外5城市风景的画面效果制作上面6图片的组合图形元件，选择插入菜单下新建元件选项，在弹出的对话框中设置“行为”为“图形”模式，在“名称”文本框中输入“六个”字样，单击确定按钮完成设置在新建的“六个”图形场景中，选择窗口菜单下的库选项，在弹出的对画框中选择“图形1”拖动到新的场景中，然后在下面的属性栏中设置宽为670.0，高为230.0，位置X为0.0，Y为0.1，其他为默认值选择窗口菜单下库选项，在弹出的对话框中选择“图形2”拖动到新的场景中，然后在下面

20、的属性栏中设置宽为670.0，高为230.0，位置X为0.0，Y为230.1，其他为默认值选择窗口菜单下的库选项，在弹出对话框中选择“图形3”拖动到新的场景中，然后在下面的属性栏中设置宽为670.0，高为230.0，位置X为0.1,Y为460.0，其他为默认值选择窗口菜单下的库选项，在弹出的对话框中选择“图形4”拖动到新的场景中，然后在下面的属性栏中设置宽为670.0，高为230.0，位置X为670.0，Y为0.1，其他设置默认值选择窗口菜单下的库选项，在弹出的对话框中选择“图形5”拖动到新的场景中，然后在下面的属性栏中设置宽为670.0，高为230.0，位置X为670.0，Y为230.0.其

21、他为默认值选择窗口菜单下的库选项，在弹出的对话框选择“图形6”拖动到新的场景中，然后在下面的属性栏中设置宽为670.0，高为230.0，位置X为670.0，Y为460.0，其他为默认值制作6个图片的影片剪辑。选择插入菜单下新建元件选项，在弹出的对话框中设置“行为”为“影片剪辑”模式，在“名称“文本框中输入”script“单击确定按钮完成设置在新建的script的影片剪辑的场景中，选择窗口菜单下的库选项，在弹出的对话框中选择”六个”图形拖动到新的场景中，然后再下面的属性栏中设置宽为1340.0，高为690.0，位置X为0.0，Y为0.0，其他为默认值单击场景1按钮回到场景1，把系统默认的图层1命

22、名为”strip“；选择窗口菜单下的库选项，在弹出的对话框中选择影片剪辑”strip“拖动场景1的图层”strip“中，然后在下面的属性栏中设置宽为1340.0，高为690.0，位置X为130.0，Y为0.0，其他为默认值单击插入图层按钮，把新建的图层命名为”strip2“;选择窗口菜单下的库选项，在弹出的对话框中选择影片剪辑”strip“拖动到场景1的图层”strip“中，然后在下面的属性栏中设置宽为1340.0，高为690.0，位置X为130.0，Y为0.0，其他为默认值单击插入图层按钮，把新建的图层命名为”strip3“；选择窗口菜单下库选项，在弹出的对话框中选择影片剪辑”strip“拖

23、动到场景1的图层”strip3“中，然后在下面的属性栏中设置宽为1340.0，高为690.0，位置X为130.0，Y为0.1，其他为默认值4.5遮罩层的应用遮罩层的应用步骤如下：单击插入图层按钮，把新建的图层命名为”遮罩层1”；选择工具栏中的椭圆工具在场景中绘制出两组椭圆作为遮罩层之用单击插入图层按钮，把新建的图层命名为“遮罩层2”；选择工具栏中的椭圆工具在场景中描绘出两组椭圆，这里的两组椭圆要与遮罩层1中椭圆形状相组合，作为遮罩层用单击插入图层按钮，把新建的图形命名为“按钮层”选择工具栏中矩形工具在场景中绘制长方形然后在属性栏中设置宽为130.0，高为230.0，位置X为0.1，Y为0.0，

24、其他为默认值4.6舞台的设计与为按钮加入ActionScript舞台的设计过程如下：单击插入图层按钮，把新建的图层命名为“按钮层2”，选择窗口菜单下的库选项，在弹出的对话框中选择button_1,button_2,button_3,button_4,button_5,button_6,拖动到“按钮层2”的场景中单击插入图层按钮，把新建的图层命名为“文字层”，选择工具栏的文本工具，在场景中输入文字或者公司名称，然后在下面的属性栏设置文字的格式，建立一个影片剪辑。选择插入菜单下的新建元件选项，在弹出的对话框中设置“行为”为“影片剪辑”模式，在“名称”文本框输入“script”，单击确认按钮完成设置

25、在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;rate=difference/(baseRate*2);_root.strip2._x=_root.strip2._x-rate;If(

26、_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._x=_root.strip._x+rate;If(_root.strip2._xtargetx)difference=targetx_r

27、oot.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)difference=_root.strip2._y-targety;rate=difference/(baseRate*2);_root.strip

28、2._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=difference/baseRate;_root.strip._y=_root.strip._y+rate;If(_root.strip2._

29、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+rate;在script的时间轴的图层1上，用鼠标单击第6帧，再打开“动作-帧”对话框，双击左边的“全局函数”下“时间轴控制”里的“goto

30、AndPlay”选项，然后在括号输入5，或直接输入“gotoAndPlay(5);”语句回到场景1中，单击script的第一帧，再打“动作-帧”对话框，双击左边的“全局函数”下的“时间轴控制”里的“stop”选项或者输入“stop();”语句在script被激活的情况下，选择窗口菜单下的库选项，在弹出的对话框中，选择影片剪辑script拖动到场景1的图层stript中，然后在下面的属性栏中设置宽为0.0，高为0.0，位置X为-127.2，Y为0.0，在影片剪辑下面的文本框输入“script”名称，其他为默认值将strip2拖动到“遮罩层1”的下面，在“遮罩层1”上面单击鼠标右键，在弹出的快捷菜

31、单中选择遮罩层选项，让遮罩层1的圆圈形成遮罩效果将strip2拖动到“遮罩层2”的下面，在“遮罩层2“上面单击鼠标右键，在弹出快捷菜单中选择遮罩层选项，让遮罩层2的圆圈形成遮罩效果打开“按钮栏2”中的按钮，单击button_1，在“动作-按钮”对话框中输入以下语句: on(rollOver)script.targetx=130;script.targety=0;script.baseRate=2;script.gotoAndPlay(5);(12)打开“按钮栏2”中的按钮，单击button_2，在“动作-按钮”对话框中输入以下语句: on(rollOver)script.targetx=-54

32、0;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(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