Flash动画短片设计与制作-论文

第一章绪论
第一章绪论
Flash网站有着着更高的界面维护能力和你的整站的架构能力。

但它带来的好处也异常明显：全面的控制；无缝的导向跳转；更丰富的媒体内容；更体
贴用户的流畅交互；以及跨平台和小巧客户端的支持以及与你的其它flash应用方案的无缝连接集成。

Flash网站是指利用Flash工具设计网站框架、与其他通过HTML、PHP或者Java等技术制作的网站不同，Flash网站在视觉效果、互动效果等多方面具
有很强的优势。

被广泛的应用在房地产行业、汽车行业和奢侈品行业高端行业等。

1.1设计的目的与意义
Flash网站多以动漫动画为主要表现形式，在视觉效果上和互动效果上与普通网站比显得更加美观动感，能够获得较高的用户体验。

Flash网站的出现使网站页面脱离了HTML网页那种死板的条条框框，让网页变得更加生动有去。

网站追求视觉冲剂和时尚感受，它能够表达企业鲜明形象，展示精品产品。

它是针对企业开发设计，融合企业形象，利用前沿的Flash技术，配合2D、3D动画表达一定设计理念的设计制作方式。

Flash在游戏网站、营销网站、艺术网
站、个人网站等有需要丰富视觉效果、强烈感染力、动态演示的网站开发方面有这得天独厚的优势。

Flash是一种交互式矢量多媒体技术，创建漂亮的、可改变尺寸的、以及
1
Flash动画短片设计与制作
极其紧密的导航界面、技术说明、以及其他奇特的效果。

同时它有很强的可移
植性。

Flash是集动画、声音、图片为一体的，所以可以结合Photoshop等软
件进行技术实现，以增强课件的艺术效果。

它的特点是设计思想好，界面美观、
和谐，有较高的欣赏性，适合它所面向的对象，同时有交互性，操作简单、快捷。

1.2国内外现状研究
关于 Flash 和网站在现今科技发展飞快的时代，网络以其压倒性的优势急速发展，大规模的侵蚀着各种传统媒体。

其主要表现载体——网页，也伴随着
茁壮成长起来。

随着网络带宽的提高，网页中开始应用各式各样的Flash动画，大大增强了网页的可观性。

但是，目前国内Flash软件基本上只是担当着矢量
动画大师的角色，伴随着Action Script的发展，也为Flash的未来发展铺设
道路。

国外的著名大公司，例如Sony、Nike、可口可乐等都是以Flash web的形式来制作网站主页的。

早在八九十年代，HTML静态页面网站就已盛行，但大多数都是一些文字和
图像形式表现，随着互联网技术的发展flash也得到了很好的发展，网站的设
计者开始寻求了更为美观的设计，flash设计慢慢的融进了网页设计中，也使
HTML网站开始更为美观、生动、形象起来。

在2000年以后全球网站设计者开
始用flash设计。

flash与HTML静态页面网站相比，Flash网站更具有亲和力
和交互性等多媒体特性。

网站是企业的窗口，flash网站更能很好的了解企业
的文化和产品，同时还能收集客户的需求和反馈信息，通过分析这些数据信息
并能很好的了解客户的需求，并及时调整策略以达到利润的最大化。

2
第一章绪论
3
Flash动画短片设计与制作
第二章开发环境
2.1 Flash介绍
Flash是由macromedia公司推出的交互式矢量图和Web 动画的标准，由Adobe公司收购。

网页设计者使用Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。

Flash的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。

1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。

后
又被Adobe公司收购。

Flash通常也指Macromedia Flash Player(现Adobe Flash Player)。

Flash特点：(1)使用矢量图形和流式播放技术。

与位图图形不同的是，矢
量图形可以任意缩放尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦急等待的情绪。

(2)通过使用关键帧使得所产生的动画(.swf)文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页
更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。

(3)把音乐、动画、音效、交互方式融合在一起，越来越多的人已经把Flash作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画
(电影)效果。

而且在Flash4.0的版本中已经可以支持MP3的音乐格式，这使得加入音乐的动画文件也能保持小巧的“身材”。

4
第二章开发环境
(4)强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画，通过ACTION和FS COMMAND可以实现交互性，使Flash具有更大的设计自由度。

在Flash中创作内容时，需要在Flash文档文件中工作。

Flash文档的文
件扩展名为.fla（FLA）。

Flash文档有四个主要部分：
(1)舞台:舞台是在回放过程中显示图形、视频、按钮等内容的位置。

在Flash基础中将对舞台做详细介绍。

(2)时间轴:时间轴用来通知Flash显示图形和其它项目元素的时间，也可
以使用时间轴指定舞台上各图形的分层顺序。

位于较高图层中的图形显示在较低图层中的图形的上方。

(3)库面板:库面板是Flash显示Flash文档中的媒体元素列表的位置。

(4)ActionScript:可用来向文档中的媒体元素添加交互式内容。

例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用
ActionScript向应用程序添加逻辑。

逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。

2.2 ActionScript2.0介绍
ActionScript是Flash的脚本语言。

正是由于Flash中增加、完善了ActionScript，才使创作出来的动画具有很强的交互性。

在简单动画中，Flash 按顺序播放动画中的场景和帧。

而在交互动画中，用户可以使用键盘或无懈可击与动画交互，大大增加了用户的参与感，同时也大大增加了Flash动画的魅力。

例如，用户可以单击动画中的按钮，然后使动画跳转到不同部分继续播放；
5
Flash动画短片设计与制作
可以移动动画中的对象，如移动手中的枪，使射出的子弹准确击中目标；可以在表单中输入信息，反馈对公司的意见等等。

总之，使用ActionScript可以控制Flash动画中的对象，创建导航元素和交互元素，扩展Flash交互动画和网络应用的能
[3]。

力
有了ActionScript，就可以通过设置动作来创建交互动画。

动作就是指用ActionScript（动作脚本）编写的、当特定事件发生时执行的一组指令。

触发动作的事件可以是播放头到达某帧，或用户单击一个按钮，或用户按下键盘上的键。

在Flash中，在动作面板中可以编写的有帧动作、按钮动用和影片剪辑动作。

使用Normal Mode(标准模式)动作面板上的控件，无需编写任何动作脚本就可以插入动作。

如果已经熟悉ActionScript，也可以使用Export Mode(专家模式)动作面板编写自己的脚本。

指令的形式可以是一个动作（如指令动画停止播放），也可以是一系列动作（如首先计算条件，然后执行一个动作）。

很多动作的设置只要求读者具有少量的编程经验，而其他一些动作的应用则要求比较熟悉编程语言，用于高级开发。

ActionScript中的对象可以包含数据或作为影片剪辑以图像形式出现的编辑区中。

所有的影片剪辑都是预定义类MovieClip的实例。

每个影片剪辑实例均包含MovieClip类的所有属性（例如_height、_rotation、_totalframes）和所有方法设计Flash网站常用到的ActionScript2.0函数包括：
(1)gotoAndPlay():将比方头转到场景中指定的帧并从该帧开始播放，如果未置顶场景，则播放头将赚到当前场景中的指定帧。

例如改写成“root. gotoAndPlay();”则将跳转到主场景的指定帧。

6
第二章开发环境
(2)gotoAndStop():将比方头转到场景中指定的帧并停止播放，如果未置顶
场景，则播放头将赚到当前场景中的指定帧。

例如改写成“root. gotoAndStop();”则将跳转到主场景的指定帧。

(3)loadMovie():在播放原始swf文件的同时将swf文件或
jpeg、mp3、mp4等文件加载到Flash Player中。

2.3 Dreamweaver8 简介
Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强
大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。

它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和
跨浏览器的特性，是目前网站设计、开发、制作的首选工具。

突出的特点主要
有灵活的编写方式；可视化编辑界面；功能更多的CSS支持——CSS可视化设
计、CSS检查工具；动态跨浏览器验证；强大的WEB站点管理功能；内建的图
形编辑引擎；丰富的媒体支持能力等。

它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功
能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基
于标准的网站和应用程序。

开发人员可以使用Dreamweaver及所选择的服务器
技术来创建功能强大的 Internet 应用程序，从而使用户能连接到数据库、Web
服务和旧式系统。

开发环境支持HTML、ASP、、JSP等，提供众多功能
强大的可视化设计工具、应用开发环境以及代码编辑支持。

主要用于素材整理、排版以及后台程序的交互。

7
Flash动画短片设计与制作
第三章系统设计
3.1 可行性研究
关于Flash网站建设从设计艺术和人性化操作角度，确定网站整体创意风格，动画，版面编排，色彩搭配，图片处理方式等依据网站功能策划和技术实现方案，为企业量身定做最适合企业的网站建设，实现企业建设网站的商业目的，加大宣传力度，标志公司形象和企业文化，增加效益等预期效果。

我司科学的项目管理、严谨的质量管理体系，专业的网站建设团队，全方位的网络安全维护，保障企业网站安全运行，确保公司机密安全。

解决企业一切后顾之忧！
（1）主动与互动：flash网站建设所面对不再是“被动”的读者, 而是有目地的“主动”。

客户将透过Internet主动的找到企业网站，要求他们所需要
的服务。

能给予使用者需求，甚至达到双向的沟通，这是一般传统媒体所做不到的。

（2）无限延伸：容量不受限制，产品资讯、图片等任何您想要提供给客户的资料皆可输入。

随时提供服务。

它的地点不受限制。

（4）多功能：flash网站在现代及未来的资讯社会将成为不可缺少的企业识别标志之一。

3.2 系统需求分析
3.2.1总体设计规划
Flash网站的结构规划，一般来说Flash网站基本包括Logo、导航系统、
网站主题、联系方式、及板块内容等元素。

8
第三章系统设计
Flash网站的层次结构规划。

Flash是由一个个影片或者影片剪辑组成，影
片或影片剪辑是由时间轴、变量、数组、函数、元件等变量组成并通过信息元件沟通和交换。

3.2.2 网站的功能模块
该网站为西电Flash网站，网站主页主要内容包括简介、西电动态、校园图片、联系方式和留言五大类，如图3.1所示。

•图3.1西电网站架图
3.2.3功能模块简介
(1)主页: 网站首页是网站的第一内容页，整个网站是网站访问者第一眼看到的地方，在美观上应该给访问者留下深刻的印象，主页应采用简洁的设计，
以达到美观和谐统一；在制作上采用动态页面，使整个网站时时充满生机和活力。

(2)导航菜单:主要是给浏览着引导，方便访问者更好的了解网站的内容。

9
Flash动画短片设计与制作
西电简介：介绍网站的的主要事物，让访问者更易查找了解。

西电动态：向访问者介绍网站最新的信息，并让访问者更好的了解网站内容。

校园图片:用图文的方式访问者了解信息。

联系栏目：本栏目包括联系我们、友情链接栏目，发布基地的位置，联系方式等信息。

10
第四章详细设计
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);
delete this.onEnterFrame;
} // end if
};
4.2导航栏设置
（1）新建影片剪辑
mcmenu、mcbtmenu、mcbttxt、mc_btmenu、mc_btmenu1、mc_btmenu2、mc_btme nu3。

（2）在mcbttxt新建动态文本设置实例名为：_txt。

（3）新建图形元件img_btmenu1、img_btmenu2、img_btmenu3并从库中导入相关的图片，并把图形元件导入到相应的影片剪辑中。

（4）设置影片剪辑mcbtmenu的动作按钮在Action Layer的第一帧和最后
一帧设置动作stop（）；在Label Layer层的第2帧设置标记帧over，在26帧设置out标记帧，如图4.2所示。

图4.2 mcbtmenu动作按钮图
图4.3导航按钮图
（5）设置导航按钮事件，flash网站80%的功能都是基于鼠标事件来完成的，所以按钮在网站中的地位不言而喻，新建mcmenu影片剪辑，设置按钮动作效果，
设置导航如图4.3所示，在最后一帧设置stop（）事件，显示效果如图4.4，
在第一帧设置代码如下。

_root.link=1;
_bg.setMask(_mask);
var my_array=new Array();
my_array[0]="西电简介";
my_array[1]="西电动态";
my_array[2]="校园图片";
my_array[3]="联系我们";
var i = 0;
while (i <=6)
{
var butNum= 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");
} // end if
};
butNum.onRollOut= butNum.onReleaseOutside = function() {
if (this.index!=_root.link)
{
this.gotoAndPlay("out");
} // end if
};
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();
} // end if
};
++i;
} // end while
图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.5 mc_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所示。

剪辑mc_jianjie_you图
图4.6
4.5设置Flash滚动条
设置一个遮罩元件，用来控制显示内容区域的大小，设置mc_sf影片剪辑的实例名mcMask，设置mc_sf影片剪辑的实例名mcDrager，设置mc_xid影片剪辑的实例名mcContent，代码如下，代码写在mc_jianjie_you的第一帧上面。

效
果图4.7所示。

图4.7 Flash滚动条图
function renewScroll()
{
delete mcContent.onEnterFrame;
mcDragger._y=dragTopY;
mcContent._y=contentTopY;
_positionCont=dragTopY;
_ratio = (mcContent._height-mcMask._height)/ draggingHeight;
contentBottY=-_ratio * draggingHeight;
if (mcContent._height< mcMask._height)
{
mcDragger._visible= false;
mcDragField._visible= false;
}
else
{
mcDragger._visible= true;
mcDragField._visible=true;
scrollConent();
} // end else if
} // End of the function
function scrollConent()
{
mcContent.onEnterFrame = function ()
{
_distance=mcDragger._y - dragTopY;
_positionCont=-_ratio * _distance;
if (_positionCont > contentTopY)
{
_positionCont=contentTopY;
mcDragger._y=dragTopY;
} // end if
if (_positionCont < contentBottY)
{
_positionCont=contentBottY;
mcDragger._y=dragBottY;
} // end if
this._y =this._y +(_positionCont - this._y) /_deceleration;
if (Math.abs(_positionCont - this._y)< 1)
{
this._y =_positionCont;
} // end if
};
} // End of the function
mcContent.setMask(mcMask);
var dragX=mcDragger._x;
var draggingHeight = mcDragField._height- mcDragger._height;
var dragTopY=mcDragger._y;
var dragBottY=Math.ceil(mcDragField._y+ draggingHeight);
var contentTopY= mcContent._y;
var contentBottY;
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();
};
var mouseListener = new Object();
mouseListener.onMouseWheel = function (_delta)
{
if (hitTest(_root._xmouse, _root._ymouse, false))
{
mcDragger._y=mcDragger._y - _delta* _factor;
} // end if
};
Mouse.addListener(mouseListener);
btnTop.onPress= function ()
{
onEnterFrame= function ()
{
var _loc1=mcDragger._y - _step;
if (_loc1>dragTopY)
21
Flash动画短片设计与制作
{
mcDragger._y=mcDragger._y - _step;} else
{
mcDragger._y=dragTopY;
} // end else if
};
};
btnBott.onPress= function()
{
onEnterFrame= function ()
{
var _loc1=mcDragger._y + _step;
if (_loc1<dragBottY)
{
mcDragger._y=mcDragger._y + _step;} else
{
mcDragger._y=dragBottY;
} // end else if
};
};
btnTop.onRelease= btnBott.onRelease= function() {
delete onEnterFrame;
};
22
第四章详细设计
4.6设置在线留言栏目
新建影片剪辑mc_lxwm_luyan，选择文本工具建立文本，设置文本属性宽
高、字体和实例名。

实例名设置txtFied1，以同样的方法设置其他的如图4.8 所示。

设置clear和send按钮事件设置clear按钮的实例名为
btnClear，send按钮的实例名为btnSubmit，在mc_lxwm_luyan影片剪辑的第一帧加入如下代码，整体效果图如4.9所示。

function clearField()
{
txtField1.text= label1;
txtField2.text= label2;
txtField3.text= label3;
txtField4.text= label4;
Selection.setFocus("_focus");
} // End of the function
label1 = "Your name*:";
label2 = "E-mail*:";
label3 = "Phone:";
label4 = "Message*:";
btnClear.onRollOver= function()
{
23
Flash动画短片设计与制作
this.gotoAndPlay("over");
};
btnClear.onRollOut= btnClear.onReleaseOutside =function ()
{
this.gotoAndPlay("out");
};
btnClear.onRelease= function()
{
clearField();
};
btnSubmit.onRollOver=function ()
{
this.gotoAndPlay("over");
};
btnSubmit.onRollOut= btnSubmit.onReleaseOutside = function()
{
this.gotoAndPlay("out");
};
btnSubmit.onRelease= function()
{
if (txtField1.text == label1 || txtField2.text== label2 || txtField4.text==label4)
{
gotoAndStop(3);
}
else
{
_parent.contactform.loadVariables("email.html", "POST");
gotoAndStop(2);
24
第四章详细设计
} // end else if
};
图4.8 文本框属性图
图4.9 在线留言图
4.7网站实现
用Dreamweaver 8新建页面index.html并插入xidian.swf文件，显
25
Flash动画短片设计与制作
示效果如图4.10所示，网站编写代码如下。

<div align="center" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/pub/shockwave/cabs/flash/swf lash.cab#version=7,0,19,0" width="1400" height="920">
<param name="movie"value="./xidian/xidian.swf" />
<param name="quality" value="high" />
<embed src="xidian/xidian.swf"quality="high" pluginspage="/go/getflashplayer"
type="application/x-shockwave-flash" width="1400" height="920"></embed>
</object>
</div>
26
第四章
详细设计
27
Flash动画短片设计与制作28
第五章结论
第五章结论
5.1 论文小结
Flash网站必然是今后网站发展的潮流，通过这次毕业设计，我基本了解和掌握了设计一个完整的Flash网站的全部过程。

虽然Flash课只是勉强拿到了及格，但是既然选择了这份课题，就必须把它完成好。

多亏了当今网络的普及和发达，我从中获取素材，获取知识，一点一点学会如何去制作一个Flash 网站。

这是我包括其它软件在内做出的最好的一份作品，在最开始的空白文档上，完全靠自己的双手创造出来的网站。

只是该网站还有着许多粗糙不足的地
方，没有打到我多期望的那么好，但通过这次课题，我可以将下一个网站做得更好。

此次制作Flash网站使我受益匪浅，进一步了解和应用了Flash软件的强大功能。

从中也发现了自己的不足，设计网站要细心认真，稍有疏忽就可能造成网站不能顺畅运行，要及时和同学、老师研究遇到的问题，虚心接收解决的
方法。

最重要的是要认真地学习涉及到的技术，从书中找到自己需要的知识运用到实践中去，养成自学的好习惯。

29
Flash动画短片设计与制作30
致谢
致谢
自从毕业之后，在工作期间，自己深感自身计算机理论基础薄弱，因此想通过学习的方法来提高，在西安电子科技大学网络学院这两年半的时间我通过网络学到了很多计算机专业知识，也非常感谢西安电子科技大学网络学院为我
提供了一个良好的学习环境，感谢学院的领导和未曾谋面老师们！他们无微不至的关怀、精心的培养使我到了很多的知识，终生受益！
再次感谢我的母校和老师们。

31
Flash动画短片设计与制作32
[1]
参考文献
参考文献
网冠科技，Flash MX 特效时尚创作百例.第二版，北京：机械工业出版社,2002年：89页。

[2] 杨格编著. Flash 8中文版全程自学手册，北京：电子工业出版社,
2007年
[3] [美]Dan Margulis Photoshop修色圣典（第5版）北京：人民邮电出版
社 2009年：56页。

[4]李金明
2012
李金荣中文版Photoshop完全自学教程北京：人民邮电出版社
[5] 危锋，李茂林网页设计与制作北京：人民邮电出版社 2014
[6]刘涛.网页制作[M].北京:北京希望电子出版社 2001:45-78.
[7]陶晓欣.Photoshop CS2图形图象处理基础北京：海洋出版社2007
[8]张锦祥.Web网站设计[M].北京:北京科学出版社2003.
[9]李捷闵林.Flash ActionScript 2.0编程北京：电子工业出版社 2006 .
33。