Flash动画短片设计与制作论文docx.docx
《Flash动画短片设计与制作论文docx.docx》由会员分享，可在线阅读，更多相关《Flash动画短片设计与制作论文docx.docx（25页珍藏版）》请在冰豆网上搜索。
Flash动画短片设计与制作论文docx
第一章绪论
Flash网站有着着更高的界面维护能力和你的整站的架构能力。
但它带来的好处也异常明显：
全面的控制；无缝的导向跳转；更丰富的媒体内容；更体贴用户的流畅交互；以及跨平台和小巧客户端的支持以及与你的其它flash应用方案的无缝连接集成。
Flash网站是指利用Flash工具设计网站框架、与其他通过HTML、PHP或者Java等技术制作的网站不同，Flash网站在视觉效果、互动效果等多方面具有很强的优势。
被广泛的应用在房地产行业、汽车行业和奢侈品行业高端行业等。
1.1设计的目的与意义
Flash网站多以动漫动画为主要表现形式，在视觉效果上和互动效果上与普通网站比显得更加美观动感，能够获得较高的用户体验。
Flash网站的出现使网站页面脱离了HTML网页那种死板的条条框框，让网页变得更加生动有去。
网站追求视觉冲剂和时尚感受，它能够表达企业鲜明形象，展示精品产品。
它是针对企业开发设计，融合企业形象，利用前沿的Flash技术，配合2D、3D动画表达一定设计理念的设计制作方式。
Flash在游戏网站、营销网站、艺术网站、个人网站等有需要丰富视觉效果、强烈感染力、动态演示的网站开发方面有这得天独厚的优势。
Flash是一种交互式矢量多媒体技术，创建漂亮的、可改变尺寸的、以及极其紧密的导航界面、技术说明、以及其他奇特的效果。
同时它有很强的可移植性。
Flash是集动画、声音、图片为一体的，所以可以结合Photoshop等软件进行技术实现，以增强课件的艺术效果。
它的特点是设计思想好，界面美观、和谐，有较高的欣赏性，适合它所面向的对象，同时有交互性，操作简单、快捷。
1.2国内外现状研究
关于Flash和网站在现今科技发展飞快的时代，网络以其压倒性的优势急速发展，大规模的侵蚀着各种传统媒体。
其主要表现载体——网页，也伴随着茁壮成长起来。
随着网络带宽的提高，网页中开始应用各式各样的Flash动画，大大增强了网页的可观性。
但是，目前国内Flash软件基本上只是担当着矢量动画大师的角色，伴随着ActionScript的发展，也为Flash的未来发展铺设道路。
国外的著名大公司，例如Sony、Nike、可口可乐等都是以Flashweb的形式来制作网站主页的。
早在八九十年代，HTML静态页面网站就已盛行，但大多数都是一些文字和图像形式表现，随着互联网技术的发展flash也得到了很好的发展，网站的设计者开始寻求了更为美观的设计，flash设计慢慢的融进了网页设计中，也使HTML网站开始更为美观、生动、形象起来。
在2000年以后全球网站设计者开始用flash设计。
flash与HTML静态页面网站相比，Flash网站更具有亲和力和交互性等多媒体特性。
网站是企业的窗口，flash网站更能很好的了解企业的文化和产品，同时还能收集客户的需求和反馈信息，通过分析这些数据信息并能很好的了解客户的需求，并及时调整策略以达到利润的最大化。
第二章开发环境
2.1Flash介绍
Flash是由macromedia公司推出的交互式矢量图和Web动画的标准，由Adobe公司收购。
网页设计者使用Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。
Flash的前身是FutureWave公司的FutureSplash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。
1996年11月，美国Macromedia公司收购了FutureWave，并将其改名为Flash。
后又被Adobe公司收购。
Flash通常也指MacromediaFlashPlayer（现AdobeFlashPlayer）。
Flash特点：
（1）使用矢量图形和流式播放技术。
与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦急等待的情绪。
（2）通过使用关键帧使得所产生的动画（.swf）文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。
（3）把音乐、动画、音效、交互方式融合在一起，越来越多的人已经把Flash作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画（电影）效果。
而且在Flash4.0的版本中已经可以支持MP3的音乐格式，这使得加入音乐的动画文件也能保持小巧的“身材”。
（4）强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画，通过ACTION和FSCOMMAND可以实现交互性，使Flash具有更大的设计自由度。
在Flash中创作内容时，需要在Flash文档文件中工作。
Flash文档的文件扩展名为.fla（FLA）。
Flash文档有四个主要部分：
（1）舞台:
舞台是在回放过程中显示图形、视频、按钮等内容的位置。
在Flash基础中将对舞台做详细介绍。
（2）时间轴:
时间轴用来通知Flash显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。
位于较高图层中的图形显示在较低图层中的图形的上方。
（3）库面板:
库面板是Flash显示Flash文档中的媒体元素列表的位置。
（4）ActionScript:
可用来向文档中的媒体元素添加交互式内容。
例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用ActionScript向应用程序添加逻辑。
逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。
2.2ActionScript2.0介绍
ActionScript是Flash的脚本语言。
正是由于Flash中增加、完善了ActionScript，才使创作出来的动画具有很强的交互性。
在简单动画中，Flash按顺序播放动画中的场景和帧。
而在交互动画中，用户可以使用键盘或无懈可击与动画交互，大大增加了用户的参与感，同时也大大增加了Flash动画的魅力。
例如，用户可以单击动画中的按钮，然后使动画跳转到不同部分继续播放；可以移动动画中的对象，如移动手中的枪，使射出的子弹准确击中目标；可以在表单中输入信息，反馈对公司的意见等等。
总之，使用ActionScript可以控制Flash动画中的对象，创建导航元素和交互元素，扩展Flash交互动画和网络应用的能力[3]。
有了ActionScript，就可以通过设置动作来创建交互动画。
动作就是指用ActionScript（动作脚本）编写的、当特定事件发生时执行的一组指令。
触发动作的事件可以是播放头到达某帧，或用户单击一个按钮，或用户按下键盘上的键。
在Flash中，在动作面板中可以编写的有帧动作、按钮动用和影片剪辑动作。
使用NormalMode（标准模式）动作面板上的控件，无需编写任何动作脚本就可以插入动作。
如果已经熟悉ActionScript，也可以使用ExportMode（专家模式）动作面板编写自己的脚本。
指令的形式可以是一个动作（如指令动画停止播放），也可以是一系列动作（如首先计算条件，然后执行一个动作）。
很多动作的设置只要求读者具有少量的编程经验，而其他一些动作的应用则要求比较熟悉编程语言，用于高级开发。
ActionScript中的对象可以包含数据或作为影片剪辑以图像形式出现的编辑区中。
所有的影片剪辑都是预定义类MovieClip的实例。
每个影片剪辑实例均包含MovieClip类的所有属性（例如_height、_rotation、_totalframes）和所有方法设计Flash网站常用到的ActionScript2.0函数包括：
（1）gotoAndPlay（）:
将比方头转到场景中指定的帧并从该帧开始播放，如果未置顶场景，则播放头将赚到当前场景中的指定帧。
例如改写成“root.gotoAndPlay（）;”则将跳转到主场景的指定帧。
（2）gotoAndStop（）:
将比方头转到场景中指定的帧并停止播放，如果未置顶场景，则播放头将赚到当前场景中的指定帧。
例如改写成“root.gotoAndStop（）;”则将跳转到主场景的指定帧。
（3）loadMovie（）:
在播放原始swf文件的同时将swf文件或jpeg、mp3、mp4等文件加载到FlashPlayer中。
2.3Dreamweaver8简介
Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver8的发布，更坚定Dreamweaver在该领域的地位。
它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。
突出的特点主要有灵活的编写方式；可视化编辑界面；功能更多的CSS支持——CSS可视化设计、CSS检查工具；动态跨浏览器验证；强大的WEB站点管理功能；内建的图形编辑引擎；丰富的媒体支持能力等。
它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。
开发环境支持HTML、ASP、ASP.NET、JSP等，提供众多功能强大的可视化设计工具、应用开发环境以及代码编辑支持。
主要用于素材整理、排版以及后台程序的交互。
第三章系统设计
3.1可行性研究
关于Flash网站建设从设计艺术和人性化操作角度，确定网站整体创意风格，动画，版面编排，色彩搭配，图片处理方式等依据网站功能策划和技术实现方案，为企业量身定做最适合企业的网站建设，实现企业建设网站的商业目的，加大宣传力度，标志公司形象和企业文化，增加效益等预期效果。
我司科学的项目管理、严谨的质量管理体系，专业的网站建设团队，全方位的网络安全维护，保障企业网站安全运行，确保公司机密安全。
解决企业一切后顾之忧！
（1）主动与互动：
flash网站建设所面对不再是“被动”的读者,而是有目地的“主动”。
客户将透过Internet主动的找到企业网站，要求他们所需要的服务。
能给予使用者需求，甚至达到双向的沟通，这是一般传统媒体所做不到的。
（2）无限延伸：
容量不受限制，产品资讯、图片等任何您想要提供给客户的资料皆可输入。
随时提供服务。
它的地点不受限制。
（4）多功能：
flash网站在现代及未来的资讯社会将成为不可缺少的企业识别标志之一。
3.2系统需求分析
3.2.1总体设计规划
Flash网站的结构规划，一般来说Flash网站基本包括Logo、导航系统、网站主题、联系方式、及板块内容等元素。
Flash网站的层次结构规划。
Flash是由一个个影片或者影片剪辑组成，影片或影片剪辑是由时间轴、变量、数组、函数、元件等变量组成并通过信息元件沟通和交换。
3.2.2网站的功能模块
该网站为西电Flash网站，网站主页主要内容包括简介、西电动态、校园图片、联系方式和留言五大类，如图3.1所示。
•图3.1西电网站架图
3.2.3功能模块简介
（1）主页:
网站首页是网站的第一内容页，整个网站是网站访问者第一眼看到的地方，在美观上应该给访问者留下深刻的印象，主页应采用简洁的设计，以达到美观和谐统一；在制作上采用动态页面，使整个网站时时充满生机和活力。
（2）导航菜单:
主要是给浏览着引导，方便访问者更好的了解网站的内容。
西电简介：
介绍网站的的主要事物，让访问者更易查找了解。
西电动态：
向访问者介绍网站最新的信息，并让访问者更好的了解网站内容。
校园图片:
用图文的方式访问者了解信息。
联系栏目：
本栏目包括联系我们、友情链接栏目，发布基地的位置，联系方式等信息。
第四章详细设计
4.1加载设置
（1）新建一个Flash文档，文件名为main.fla，像素设置为1400x920px，帧频设置为30，背景颜色设置为：
#ECEDF0。
（2）导入素材到库中。
（3）新建影片剪辑为loading，设置实例名为mcLoad，该影片剪辑主要在加载页面时作为缓存页面内容，并新建文本设置实例名称为txtLoad，如图4.1所示。
图4.1加载影片剪辑图
在场景中第一帧中按F9中添加动作代码如下：
stop（）;
total=_root.getBytesTotal（）;//获取该flash文件的总字节数
mcLoad.onEnterFrame=function（）
{
loaded=_root.getBytesLoaded（）;//获取已下载的字节数
percent=int（loaded/total*100）;//求出下载数据的百分比。
即已下载字节数/字节总数，这个数字是一个小于1的数.
mcLoad.txtLoad.text=percent;
if（loaded==total）
{
gotoAndPlay
（2）;
deletethis.onEnterFrame;
}//endif
};
4.2导航栏设置
（1）新建影片剪辑mcmenu、mcbtmenu、mcbttxt、mc_btmenu、mc_btmenu1、mc_btmenu2、mc_btmenu3。
（2）在mcbttxt新建动态文本设置实例名为：
_txt。
（3）新建图形元件img_btmenu1、img_btmenu2、img_btmenu3并从库中导入相关的图片，并把图形元件导入到相应的影片剪辑中。
（4）设置影片剪辑mcbtmenu的动作按钮在ActionLayer的第一帧和最后一帧设置动作stop（）；在LabelLayer层的第2帧设置标记帧over，在26帧设置out标记帧，如图4.2所示。
图4.2mcbtmenu动作按钮图
图4.3导航按钮图
（5）设置导航按钮事件，flash网站80%的功能都是基于鼠标事件来完成的，所以按钮在网站中的地位不言而喻，新建mcmenu影片剪辑，设置按钮动作效果，设置导航如图4.3所示，在最后一帧设置stop（）事件，显示效果如图4.4，在第一帧设置代码如下。
_root.link=1;
_bg.setMask（_mask）;
varmy_array=newArray（）;
my_array[0]="西电简介";
my_array[1]="西电动态";
my_array[2]="校园图片";
my_array[3]="联系我们";
vari=0;
while（i<=6）
{
varbutNum=this["b"+i];
butNum.index=i;
butNum._mc1._txt.text=my_array[i-1];
butNum._mc2._txt.text=my_array[i-1];
butNum._mc3._txt.text=my_array[i-1];
butNum._mc4._txt.text=my_array[i-1];
butNum._mc5._txt.text=my_array[i-1];
butNum.onRollOver=function（）
{
if（this.index!
=_root.link）
{
this.gotoAndPlay（"over"）;
}//endif
};
butNum.onRollOut=butNum.onReleaseOutside=function（）
{
if（this.index!
=_root.link）
{
this.gotoAndPlay（"out"）;
}//endif
};
butNum.onRelease=function（）
{
if（this.index!
=_root.link&&_root.sel!
=true）
{
_root.MC_menu["b"+_root.link].gotoAndPlay（"out"）;
_root.link=this.index;
_root.MC_content.play（）;
}//endif
};
++i;
}//endwhile
图4.4导航效果图
4.3内页设置
新建mc_main、mc_index、mc_news、mc_images、mc_contact影片剪辑，在mc_main的第一帧至第四帧分别插入mc_index、mc_news、mc_images、mc_contact影片剪辑，在mc_main的第一帧中加入stop（）mc_main的框架图，如图4.5所示。
图4.5mc_main的框架图
4.4设置MC_INDEX影片剪辑
新建影片剪辑mc_jianjie_you、mc_tuwen，并分别设置影片剪辑的效果，
分别建立mc_xid、mc_sf、mc_sf1、mc_sf3，并分别设置影片剪辑的实例名称为mcContent、mcMask、mcDragField、mcDrager，导入到影片剪辑mc_jianjie_you，使用同样的方法建立mc_tuwen如图4.6所示。
图4.6剪辑mc_jianjie_you图
4.5设置Flash滚动条
设置一个遮罩元件，用来控制显示内容区域的大小，设置mc_sf影片剪辑的实例名mcMask，设置mc_sf影片剪辑的实例名mcDrager，设置mc_xid影片剪辑的实例名mcContent，代码如下，代码写在mc_jianjie_you的第一帧上面。
效果图4.7所示。
图4.7Flash滚动条图
functionrenewScroll（）
{
deletemcContent.onEnterFrame;
mcDragger._y=dragTopY;
mcContent._y=contentTopY;
_positionCont=dragTopY;
_ratio=（mcContent._height-mcMask._height）/draggingHeight;
contentBottY=-_ratio*draggingHeight;
if（mcContent._height{
mcDragger._visible=false;
mcDragField._visible=false;
}
else
{
mcDragger._visible=true;
mcDragField._visible=true;
scrollConent（）;
}//endelseif
}//Endofthefunction
functionscrollConent（）
{
mcContent.onEnterFrame=function（）
{
_distance=mcDragger._y-dragTopY;
_positionCont=-_ratio*_distance;
if（_positionCont>contentTopY）
{
_positionCont=contentTopY;
mcDragger._y=dragTopY;
}//endif
if（_positionCont{
_positionCont=contentBottY;
mcDragger._y=dragBottY;
}//endif
this._y=this._y+（_positionCont-this._y）/_deceleration;
if（Math.abs（_positionCont-this._y）<1）
{
this._y=_positionCont;
}//endif
};
}//Endofthefunction
mcContent.setMask（mcMask）;
vardragX=mcDragger._x;
vardraggingHeight=mcDragField._height-mcDragger._height;
vardragTopY=mcDragger._y;
vardragBottY=Math.ceil（mcDragField._y+draggingHeight）;
varcontentTopY=mcContent._y;
varcontentBottY;
var_ratio;
var_distance;
var_positionCont=dragTopY;
var_deceleration=6;
var_factor=2;
var_step=10;
renewScroll（）;
mcDragger.onPress=function（）
{
this.startDrag（false,dragX,dragTopY,dragX,dragBottY）;
};
mcDragger.onRelease=mcDragger.onReleaseOutside=function（）
{
this.stopDrag（）;
};
varmouseListener=newObject（）;
mouseListener.onMouseWheel=function（_delta）
{
if（hitTest（_root._xmouse,_root._ymouse,false））
{
mcDragger._y=mcDragger._y-_delta*_factor;
}//endif
};
Mouse.addListener（mouseListener）;
btnTop.onPress=function（）
{
onEnterFrame=function（）
{
var_loc1=mcDragger._y-_step;
if（_loc1>dragTopY）
{
mcDragger._y=mcDragger._y-_step;
}
else
{
mcDragger._y=dragTopY;
}//endelseif
};
};
btnBott.onPress=function（）
{
onEnterFrame=function（）
{
var_loc1=mcDragger._y+_step;
if（_loc1{
mcDragger._y=mcDragger._y+_step;
}
else
{
mcDragger._y=dragBottY;
}//endels
升级会员 