基于Flash的城市风景动画设计毕业设计论文.docx
《基于Flash的城市风景动画设计毕业设计论文.docx》由会员分享，可在线阅读，更多相关《基于Flash的城市风景动画设计毕业设计论文.docx（13页珍藏版）》请在冰豆网上搜索。
基于Flash的城市风景动画设计毕业设计论文
（此文档为word格式，下载后您可任意编辑修改！
）
优秀论文归档资料
未经允许切勿外传
基于Flash的城市风景动画设计
阮成庆数学与计算机科学学院
摘要：
近年来，随着网络的飞速发展，flash动画技术以其容量小，制作成本低，视觉冲击力等优势走进了社会大众的生活中，主要应用于商业宣传，故事表现，网络游戏，教学过程模拟等不同行业的展示活动中。
越来越多的城市开始注重打造城市名片，积极宣传城市文化，主要以宣传风景为主，以提升城市的知名度和带动旅游业，谋取更快地发展，其中flash动画是其中主要手段之一。
本文利用Flash工具对城市建设进行交互式动画设计，便于人们了解城市文化，其中伴有PS图像处理和CoolEdit声音处理。
关键词：
flash，ActionScript,交互式动画，声音处理
ThedesignofcitylandscapeanimationbasedonFlash
Abstract:
inrecentyears,withtherapiddevelopmentofnetwork,flashanimationtechnologyforitssmallvolume,lowmanufacturingcost,thevisualimpactofadvantageintothesocialpubliclife,mainlyusedincommercialpropaganda,thestoryoftheperformance,thenetworkgame,showingtheactivitiesofteachingprocesssimulationindifferentindustries.
Moreandmoreofthecitybegantopayattentiontobuildthecitycard,activelypromotingthecityculture,mainlyinthepropagandaofthescenery,inordertoimprovethecity'svisibilityandpromotetourism,forfasterdevelopment,inwhichtheflashanimationisone
ofthemethods.
Inthispaper,bymeansofFlashinteractiveanimationdesignforcityconstruction,isconvenientforpeopletoknowthecityculture,whichaccompaniedwithPSCoolEditimageprocessingandvoiceprocessing.
Keywords:
flash,ActionScript,interactiveanimation,soundprocessing
第1章绪论
1.1引言
FLASH是由美国Macromedia公司于1996年6月推出的用于矢量图编辑和动画创作的专业软件。
网页设计者可以利用flash软件制作出既美观又可以改变大小的导航画面及其它奇特的效果。
Ｆｌａｓｈ被广泛的应用于多媒体领域，如动画游戏制作，网络构件，学习课件，网站广告设计及全flash网站，工控界面等交互式软件和产品展示。
ｆｌａｓｈ主要优点是制作起来方便，通用性强，文件体积小，支持交互，涉及的领域多，制作出的东西效果都可以做到很棒，不依赖于任何媒体播放器。
缺点在于有些效果需要别的软件辅助制作，不是所有效果都能制作出来。
（比如图片处理，flash就很难做到，只能通过ｐｈｏｔｏｓｈｏｐ做到剪裁和渲染）
Flash是一种交互式矢量多媒体技术，他的前身是Futureplash，早期网上流行的矢量动画插件。
后来由于Macromedia公司收购了Future Splash以后便将其改名为 Flash2，到现在最新的flashcs3。
现在网上已经有成千上万个Flash站点，著名的如Macromedia专门ShockRave站点，全部采用了Shockwave Flash 和Director。
可以说Flash已经渐渐成为交互式知量的标准，未来网页的一大主流。
本文主要用ｆｌａｓｈ ｍｘ２００４制作一个具有交互性的城市风景展示，其中伴有ｐｓ处理图片和ｃｏｏｌｅｄｉｔ处理声音。
该设计主要有两部分组成－－交互式动画和音频，
用Flash软件做出的动画作品，其最大的特点是它能够把一些位图和按钮、文字做成交互性很强的动画，不仅具有视觉和听觉的双重感受，使其更具有趣味性和创造性。
1.２ ｆｌａｓｈ的相关概念
1.２.１ 什么是ｆｌａｓｈ动画
动画是将静止的画面变为动态的艺术，实现了由静止到动态，主要是靠人眼的视觉残留效应．利用人的这种视觉生理特性可制作出具有高度想象力和表现力的动画影片。
动画以人类视觉的原理为基础。
如果快速查看一系列相关的静态图像，那么我们会感觉到这是一个连续的运动。
每一个单独图像称之为帧。
帧是动画中的单个图像。
1.２.２什么是ｆｌａｓｈ交互式动画
所谓Flash交互式动画是指通过Flash完成的动画作品，在播放的同时能够接受来自外部的实时控制，其可以是播放人员，同样也可以是动画的观众。
具体来看，就是观众能够通过鼠标，以及键盘等控制动画的播放，这样的全新设计就可以让普通的观众演变身份，可以从被动转为主动，这是传统动画所不具备的，在Flash中却能轻松实现。
另外其实时传播接收的信息效果更加良好，其反应信息会更加的快速和直接。
1.2.3关于actionscipt
Actionscript是FlashMX2004的脚本语言。
用脚本语言编写的程序嵌入到Flash动画后可以控制影片的播放（即向影片片断发送命令、指定动画执行的内容、分析用户操作、显示反馈信息等），这种双向交流可生成交互动画。
1.2.4交互式动画原理
交互式动画是由触发动作的事件、事件的目标和触发事件的动作3个因素组成的，例如单击按钮后，影片开始播放这一事件。
其中，单击是触发动作的事件，按钮是事件的目标，影片开始播放是触发事件的动作。
换句话说，事件、目标和动作构成了一个交互式动画。
在Flash中，事件包括鼠标事件、键盘事件和帧事件三种。
目标包括时间轴、按钮元件和影片剪辑元件三种。
而动作就是指控制影片的一系列脚本语言，所以说脚本语言的编写也就是各种动作的编写。
第3章概要设计
3.1素材收集及图像处理
选择几张有关于城市风景的精美图片，并用photoshop对其进行适当的处理。
3.2导入图像
打开flashmx2004，将处理过的图片导入库中，移至新文件夹中，命名为位图。
3.3时尚按钮的制作
用文本工具制作按钮文本
将设置好的按钮文本转化为图形元件
将按钮图形转化为按钮元件
利用工具栏的矩形工具制作按钮的感应区
为各个按钮的各个动作进行设计
3.4对导入库的图像素材进行设计
3.5遮幕层的应用
3.6舞台的设计及为按钮加入ActionScript
3.7动画的发布与测试
第4章详细设计与制作
4.1素材收集及图像处理
素材收集及图像处理过程如下。
（1）收集6张城市风景的精彩图片
（2）利用AdobePhotoshop进行图片处理以符合同样的大小；图像大小的设置，宽度为600像素，高度为250像素
（3）利用Adobeshop的渐变工具，对原图片的色调加以渐变
（4）打开FlashMX2004,选择【修改】菜单下的【文档】选项，在弹出的“文档属性”对话框内，设置场景尺寸为800*250，“背景颜色”为蓝色，“帧频”为“120”，“标尺单位”为”像素”
4.2导入图像
导入图像的过程如下
（1）将利用Photoshop处理过的六张图片导入到库中。
方法是选择【文件】菜单下的【导入】子菜单中的【导入到库】选项
（2）在弹出的“导入到库”对话框中，选择6张已经处理好的图片，单击【打开】按钮，完成导入到库
（3）选择【窗口】菜单下的【库】选项，库中已经有了处理好的6张图片，为了库中的文件管理，将6张图片移至新文件夹，方法是选择01~06张位图，单击鼠标右键，在弹出的快捷菜单中选择【移至新文件夹】选项，在弹出的对话框中输入“位图”字样
（4）单击【确定】按钮，完成文件夹的建立。
双击文件夹图标即可关闭文件夹，再双击文件夹图标即可打开文件夹
4.3时尚按钮制作
时尚按钮的制作过程如下。
（1）制作城市风景动画的二级按钮。
选择工具栏中的文本工具，在场景中输入“SUBMENU_01”字样，在属性栏中设置文字大小为8，字间间距为0.5，其他为默认值
（2）将设置好的按钮文本转化为元件。
单击鼠标右键，在弹出快捷菜单中选择【转化为元件】选项，在弹出的对话框中，设置“行为”为“图形”模式，在“名称”文本框中输入“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）下面利用前面做好的文本图形制作按钮。
选择【插入】菜单下的【新建元件】选项，在弹出的对话框中将“行为”设置为“按钮”模式，在“名称”文本框中输入“SUBMENU_01”,单击【确定】按钮，完成设置
（6）双击“库”中新建的SUBMENU_01按钮，这时场景中弹出SUBMENU_01的编辑窗口和时间轴，在时间线上选择“弹起”选项，然后将库中的“SUB01”拖动到场景中，注意将SUB01的中心与SUBMENU场景中的中心对齐；在属性栏中设置X的位置为-31.3，Y的位置为-6.6，设置颜色为Alpha，将Alpha值设置为50%，其他为默认值
（7）在时间线上的”指针经过“，”按下“处插入关键帧，然后用鼠标左键单击”指针经过“，将库中的”SUB01“拖动到场景中，注意使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,选择【插入】菜单下的【新建元件】选项，在弹出的对话框中将“行为”设置为“按钮”模式，在“名称”文本框中输入“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）在时间轴上单击【插入图层】按钮，在时间轴上就多了一层”图层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置于图层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到元件图形1中，选择场景中的位图，下面的属性栏中设置宽为670.0，高为230.0，位置X为0.0，Y为0.1
（3）选择“库”中的按钮submenu_1,submenu_2,submenu_3,把它们分别拖到元件图形1中，根据构图进行排列设计
（4）在时间轴上插入新的图层2，在图层2上选择工具栏中文字工具，在场景中的适当位置绘制出“comeon”的字样
（5）在时间轴上插入新的图层，在新图层上选择工具栏中的文本工具，在场景中的输入公司名称或其他广告语，在属性栏中设置文字的格式以及位置等
（6）对整体画面进行细微的调整
（7）利用上述方法制作出另外5张城市风景的画面效果
（8）制作上面6张图片的组合图形元件，选择【插入】菜单下【新建元件】选项，在弹出的对话框中设置“行为”为“图形”模式，在“名称”文本框中输入“六个”字样，单击【确定】按钮完成设置
（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）选择【窗口】菜单下的【库】选项，在弹出对话框中选择“图形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”拖动到新的场景中，然后在下面的属性栏中设置宽为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命名为”strip“；选择【窗口】菜单下的【库】选项，在弹出的对话框中选择影片剪辑”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“；选择【窗口】菜单下【库】选项，在弹出的对话框中选择影片剪辑”strip“拖动到场景1的图层”strip3“中，然后在下面的属性栏中设置宽为1340.0，高为690.0，位置X为130.0，Y为0.1，其他为默认值
4.5遮罩层的应用
遮罩层的应用步骤如下：
（1）单击【插入图层】按钮，把新建的图层命名为”遮罩层1”；选择工具栏中的椭圆工具在场景中绘制出两组椭圆作为遮罩层之用
（2）单击【插入图层】按钮，把新建的图层命名为“遮罩层2”；选择工具栏中的椭圆工具在场景中描绘出两组椭圆，这里的两组椭圆要与遮罩层1中椭圆形状相组合，作为遮罩层用
（3）单击【插入图层】按钮，把新建的图形命名为“按钮层”选择工具栏中矩形工具在场景中绘制长方形然后在属性栏中设置宽为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）建立一个影片剪辑。
选择【插入】菜单下的【新建元件】选项，在弹出的对话框中设置“行为”为“影片剪辑”模式，在“名称”文本框输入“script”，单击【确认】按钮完成设置
（4）在script的时间轴的图层1上，用鼠标单击第5帧，再打开“动作帧”对话框，在对话框中输入以下动作语句：
If（_root.strip._x>targetx）
{
diffrence=_root.strip._x-targetx;
Rate=differencebaseRate;
_root.strip._x=_root.strip._x-rate;
};
If（_root.strip2._x>tqrgetx）
{
difference=_root.strip2._x-targetx;
rate=difference（baseRate*2）;
_root.strip2._x=_root.strip2._x-rate;
};
If（_root.strip3._x>targetx）
{
difference=_root.strip3._x-targetx;
rate=difference（baseRate*3）;
_root.strip3._x=_root.strip3._x-rate;
};
lessthanx
If（_root.strip._x{
diffrence=targetx_root.strip._x;
Rate=differencebaseRate;
_root.strip._x=_root.strip._x+rate;
};
If（_root.strip2._x{
difference=targetx_root.strip2._x;
rate=difference（baseRate*2）;
_root.strip2._x=_root.strip2._x+rate;
};
If（_root.strip3._x{
difference=_root.strip3._x-targetx;
rate=difference（baseRate*3）;
_root.strip3._x=_root.strip3._x+rate;
};
If（_root.strip._y>targety）
{
diffrence=_root.strip._y-targety;
Rate=differencebaseRate;
_root.strip._y=_root.strip._y-rate;
};
If（_root.strip2._y>targety）
{
difference=_root.strip2._y-targety;
rate=difference（baseRate*2）;
_root.strip2._y=_root.strip2._y-rate;
};
If（_root.strip3._y>targety）
{
difference=_root.strip3._y-targety;
rate=difference（baseRate*3）;
_root.strip3._y=_root.strip3._y-rate;
};
lessthany
If（_root.strip._y{
diffrence=targety-root.strip._y;
Rate=differencebaseRate;
_root.strip._y=_root.strip._y+rate;
};
If（_root.strip2._y{
difference=targety-root.strip2._y
rate=difference（baseRate*2）;
_root.strip2._y=_root.strip2._y+rate;
};
If（_root.strip3._y{
difference=_root.strip3._y-targety;
rate=difference（baseRate*3）;
_root.strip3._y=_root.strip3._y+rate;
};
（6）在script的时间轴的图层1上，用鼠标单击第6帧，再打开“动作-帧”对话框，双击左边的“全局函数”下“时间轴控制”里的“gotoAndPlay”选项，然后在括号内输入5，或直接输入“gotoAndPlay（5）;”语句
（7）回到场景1中，单击script的第一帧，再打“动作-帧”对话框，双击左边的“全局函数”下的“时间轴控制”里的“stop”选项或者输入“stop（）;”语句
（8）在script被激活的情况下，选择【窗口】菜单下的【库】选项，在弹出的对话框中，选择影片剪辑script拖动到场景1的图层stript中，然后在下面的属性栏中设置宽为0.0，高为0.0，位置X为-127.2，Y为0.0，在影片剪辑下面的文本框内输入“script”名称，其他为默认值
（9）将strip2拖动到“遮罩层1”的下面，在“
升级会员 