基于flash的网页设计.doc

基于flash的网页设计内容摘要：Flash动画已经成为越来越多的人们所关注的一种动画发展的趋势。可以说，通过进行网页设计并建设网站，开创了多媒体效果的网页或整个多媒体网站的新潮流，本文对Flash动画在网页制作中的应用及发展做了探讨。关键词：Flash，网页设计Flash based website designAbstract：Flash has become a trend of more and more people animation concern development. It can be said, by website design and build the site, creating a new wave of multimedia effects or entire multimedia web site, the paper making Flash animations in web application development done and discussed.Key Words：Flash,website design.I目 录导 语1一、网页制作与Flash1二、Flash 动画应用于网页制作2（一）、在网页中启动Flash动画21、插入Flash 动画22、插入Flash按钮33、插入Flash文本3（二）、Flash动画对网站页面的优化41、网站中的动画声音42、网站中的动画色彩53、网站中的鼠标动画54、网站中的动画导航系统5（三） 、Flash动画在网络广告中的设计应用71、主题的确定72、字体的选择73、排版的设计84、交互按钮的设计85、运动轨迹的设计8三、Flash应用于网页制作的优点8四、 FLASH在网页制作中的延伸发展9结 语10参考文献11II计算机与信息科学学院2014届双学位毕业论文 基于Flash的网页设计1导 语计算机在国内推广初期，大部分企业已开始根据经营实况设计网页，但基本上都是集中于“静态”模式。静态网页在市场上推广一段时间之后，用户开始发现其存在的诸多弊端，如：页面重点不突出、产品信息不明显、视觉效果不鲜明、流量数量不充足等等。这些都是由于静态页面固有的模式让消费者及客户失去了关注的兴趣，无法带动消费者参与购买的兴趣。新时期Flash 技术逐渐推广，在此基础上设计的网页具有多方面的优势。1网页制作与Flash网络的呈现方式网页，就必须要足够地体现互动特征。但要以如何的面目呈现给浏览者呢? 不但网页的实用性要好，而且艺术设计也成为吸引和留住浏览者的一把钥匙，而构成这一设计的关键因素就是Flash 动画，它是在艺术形态上的互动，内容上的交流。1因此，网站中Flash动画设计的形式，可以是全部的静态页面，也可以是在静态页面中嵌入部分动画设计或是全部的动画设计。Flash 是美国的MACROMEDIA 公司于1999 年6月推出的优秀网页动画设计软件。它是一种交互式动画设计工具, 用它可以将音乐、声效、动画以及富有新意的界面融合在一起, 以制作出高品质的网页动态效果。它采用了矢量图形编辑制作, 使得Flash 输出的电影动画具有文件小、效果好、图像细腻、对网络带宽要求低以及可无损放大等诸多优点, 这一优秀的矢量动画编辑工具给我们带来了强有力的视觉冲击, 使我们能够轻易地将丰富的想象力可视化。现如今, Flash 动画以小巧、动感、富有交互性而风靡网络。在制作网页时, 将Flash 动画应用到网页中, 作出的网页模板也是栩栩如生, 更能吸引浏览者的眼球, 而且与浏览者的互动性也比较强。Flash 图片不会出现放大图片后出现马赛克的失真现象, 同时Flash 动画作出的视频其体积小便于在线观看, 也赢得了浏览者的关注。Flash 的发展离不开网页, 而Flash 的网络富媒体在网页上处理数据和制作网页游戏上也独具优势。2网页的生动性同样离不开Flash 动画, Flash 动画可以使浏览者摆脱枯燥的网页固定文字, Flash 动画制作的动态广告也可以抓住浏览者的眼球。作为网页三剑客之首的Flash 在网页设计中起着至关重要的作用, 网页的发展离不开Flash 动画, Flash 动画的发展也离不开网页这一当今潮流平台。2 Flash 动画应用于网页制作Flash 动画在网页应用中随处可见, 从简单的流动式动画到复杂交互式Web 动画, 都体现了Flash 动画的优势。3我们在大部分的网页中看到的Flash 只占网页一小部分内容, 通常只是起引导或宣传广告的作用, 此时如果用Flash 动画来完成网页制作, 整个设计过程就太繁琐, 而且占用的网页空间也大。所以在实际制作过程中会在Dreamw eaver 调用和控制Flash 动画, 将Flash 动画作为一个模块嵌入到网页中, 二者的结合既能让网页的制作过程更加便捷又能为网页增加动感。2.1在网页中启动Flash动画下面就介绍如何在网页中添加、控制Flash 动画以及如何通过网页来启动Flash 动画。在网页添加、控制Flash 动画首先在网页中插入Flash 交互对象, 可插入的对象包括: Flash 动画, Flash 按钮及Flash 文本。2.1.1 插入Flash 动画 插入flash动画前必须存在已作好的Flash 动画文件( 文件格式: . sw f ) 。通过点击网页制作软件中“插入Flash 动画”的按钮, 弹出对话框, 填写所需插入动画的名称和路径, 选择事先设计好的. sw f 格式的Flash 动画, 点击确定即可完成网页中插入Flash 动画。如图1所示：2.1.2 插入Flash按钮 通过打开插入Flash 按钮对话框可插入Flash按钮对象, Flash 按钮对象让您可以自定义并插入一套预先设计好的Flash 按钮。在插入Flash 按钮或文本对象之前必须保存文档。在对话框中可选择按钮类型, 可输入按钮上的文本、设置按钮上文字的字体、指定链接的地址或文档、指定下一个目标框架或者目标窗口、为此Flash 动画命名等。2.1.3 插入Flash文本 使用Flash 文本对象可以创建和插入一个Flash 电影, ( 包含文本动画效果) 。允许创建一个体积小、基于矢量图形的动画, 而且在动画中可以设置字体和文字的内容。其用法与Flash 按钮类似。然后，设置Flash 对象属性选中插入的Flash 对象,可以在属性面板中对该动画的属性进行设置。通过属性窗口可设置属性有: 动画的高度和宽带、保存路径、对齐方式、背景颜色、是否自动播放、是否循环播放、设置四周空白间距、播放的品质、比例等等。 另外，在网页中控制Flash 动画可利用Dreamw eaver 中的行为“Co nt ro l Shockw ave orFlash”来控制动画的播放、停止或转向某帧。在网页中启动Flash 动画网页。方法一: 只要浏览器内置了Flash 插件, 网页内容链接了有关Flash 动画, 打开网页时便可播放Flash 动画。方法二: 采用“打开浏览窗口”来实现启动网页点击链接时自动调用有Flash 动画的HT ML 网页。若设置行为时直接添加“打开浏览器窗口”行为, Flash 窗口便会随着主网页窗口的打开而打开。然后，用Flash 中的Action 脚本语言来控制网页。Act ionScript 是Flash 动画制作软件内置的脚本语言, 程序员通过编写Flash 脚本语言, 可以使f lash 影片以非线性的方式播放, 实现各种精彩的特效动画。Flash 动画的插入使网页充满活力, Flash 动画与HT ML 网页交互实现方式如图2 所示。2.2 Flash动画对网站页面的优化2.2.1 网站中的动画声音 如果能在五彩缤纷的网页动画中再加上美妙的声音，则会有锦上添花的效果。在网页中，声音部分有：鼠标点击的链接转入声、背景音乐、网页插入视频或网络电视声音、音乐、广播电台的现场播音等，网上流行的声音格式有：MIDI、WAV、MP3、RealAudio。MIDI 格式音乐的特点是占用空间小，但颜色单调；WAV 是无压缩声音文件，在所有带有声卡的电脑中都可以播放；MP3 压缩音乐文件，占用空间小得多，但是要先下载后收听；RealAudio，比WAV 和MP3音质稍差，但占用空间却小许多。可以一边下载一边播放。网页设计中的鼠标点击的链接转入声和背景音乐，在鼠标点击后，应该发出清脆的声音，来反映出转入链接的快速感，以给予浏览者充分得到回应后的心理满足感，以便充分调动起浏览者再继续浏览其他内容的积极性；而在背景音乐的设计上，可以按照网站的性质来选择音乐风格，选择时要用悦耳的音乐，要考虑到众多种爱好浏览者的接受程度。同时，最好把声音的控制按钮放于页面的一个位置，可以由浏览者来调节是开或者关，尊重浏览者的个人爱好，还有一点要注意，有很多浏览者会是在安静或办公、又或公共场合下浏览网页，会不希望一打开网页，就马上传出声音，而给其他人造成不便。因此，不能专注于光考虑网页和动画的效果，还得充分尊重到浏览者，背景音乐可以设置为默认关闭，但有可以由访问者亲自调节为“开”的声音控制按钮。2.2.2 网站中的动画色彩 运用不同的色彩，网站的外观风格有所不同，网站给人的感觉也不同。也就是说，色彩作为传达网站形象的首位视觉要素，会在访问过网站的使用者脑海中留下长久的印象。即使使用者无法清楚地记住自己访问过的网站的外形特征，至少能够容易地想起网站的色彩。也就是说，色彩作为最直接的视觉语言，色彩也一定要遵守一些规范。一般情况下，一个网站的形象展示动画，如同网站的LOGO 一般，色彩在设计时应遵循企业的CI 规范，按照标准色和辅助色来设计，或者采用网页主色。主要是要在浏览者面前形成统一的形象记忆。其他搭配色则可以依情况采用其他色，或直接插入企业形象产品等。除此以外，色彩的搭配上，要尽量醒目，与整个页面协调。2.2.3 网站中的鼠标动画 在鼠标做动画效果时，需要注意的色彩搭配，其实就是指鼠标移动轨迹的图案和色彩。这种色彩首先应该区别于页面色彩，使浏览者可以清晰的找到鼠标的位置，以利于用户更方便地浏览页面信息。而鼠标移动的轨迹不可以阻挡下边的页面信息，所以图形尽量要小，色彩除了脱出于页面外，可以设计为稍透明的感觉，并且鼠标的移动轨迹不宜太长。当然，鼠标动画的设计相对其他难度性大些，需要语言编程。2.2.4 网站中的动画导航系统 如今，丰富多样的动态效果逐渐出现。新媒体具有的网络双向互动特点极大地支持了新环境下的交互式设计环境。使用者虽然仍然是通过单纯的鼠标点击和键盘操作来浏览网页，但是使用者选择菜单的导航方式却已经丰富多样。交互式导航不仅仅是单纯的鼠标移上效果，它能够带给人新鲜感和愉快感，但更优越于其使用性的交互式导航功能，使用者的参与是交互式导航的必需条件，在这种情况下，必须要有诱导使用者互动的设计。交互式导航栏的设计必须是在实现其功能性的前提下来进行动画交互和视觉设计的。在功能性上，导航栏有着引导用户浏览信息的作用，设计时通常需要分出几个级别的导航栏，并在这几个级别的醒目程度上做出区分，特别是一级导航栏一般要突出其立体感和鲜明感。在色彩的运用上，可以选用亮丽、透明、清爽的色彩搭配，引导浏览者去点击、甚至享受这一过程的喜悦。同时，导航链接最好是设置成“打开新的页面”，这样有利于浏览者分别条理性地浏览每一个导航菜单下的内容。在具备以上条件的基础上，通过动画设计的导航栏，不但从视觉上达到美观特别，还充分体现出浏览者的点击快感，甚至可以配以清脆的声音。而在导航栏造型和动画效果的设计上，可以充分发挥想象力，充满特别的乐趣，使浏览者很欣喜地参与进去。除此以外，诸如网页中的“按钮”，按钮是网页的重要组成元素之一，在网页中发挥着十分重要的作用。要达到信息良好的交互传达，导航系统的设计十分重要，每一级导航都要有清晰明了的导航设置，并在其醒目的位置设置下一级页面信息的链接。尽量以明确而有条理的设计使浏览者按网页中设置的浏览主线访问每一个页面。动画导航系统不但可以获得浏览者的青睐，而且其交互性的设计使网页以强有力的信息交互作用留住大量的用户群。Flash 动画导航系统交互性的设计，通常需要调动它的脚本语言：Action script。它的基本语法接近于VBScript，中文可以直接译为“动作脚本”，它是Flash专用的一种程序语言，采用面向对象编程的思想，采用Flash 中的事件对程序进行驱动，以动画中的关键帧、按钮或电影片断作为对象来对脚本语言ActionScript 进了二定义和编写。例如，在Flash 软件中“舞台”上选定一个图形或按钮作为对象，然后通过关键帧里的脚本程序代码、电影剪辑符实例内的脚本代码或某个按钮内的脚本程序代码来对这个已选定的对象的各种属性进行控制，如位置、颜色、形状等。 另外，也可以通过一个按钮所产生的事件来控制某个对象，例如鼠标指针经过按钮事件、鼠标单击事件等。在浏览者松开鼠标和将鼠标移上按钮，甚至用鼠标点击时的反应都可以是不一样的，可以是按钮的颜色发生变化，也可以是其上显示的文字的变化，更可以是其形状大小的变化。这一个个动画效果，可以跟浏览者达成互动，让浏览者看到他的动作是有回应的，同时更能调动起浏览者的积极性。设计中，每个按钮甚至都可以设置出动画效果，只要我们在设计其显示效果时，尽量注意同时实施一种或两种左右的设计方案，以避免因动画设计的不统一使浏览者感到烦乱。Flash 动画作为网页设计元素中的重要组成部分，已经得到网站设计者的重视和应用。因此，要想更好地发挥网页设计中Flash 动画的特性，必须从各个方面来了解和分析，这是一个值得关注的问题。希望本研究在今后可以得到完善和运用，以启示我国网页设计及Flash 动画交互设计的爱好者们能够注意到这个问题，研究并设计出更杰出的作品来，同时来带动我国网页动画设计的整体水平，形成真正的交流传播平台。2.3 Flash动画在网络广告中的设计应用 网络广告的各种各样的表现形式其实总的归纳起来就分为两种：一种是静态的广告，另外一种是动态的广告。Flash以它本身所具有的动画制作优势，在网络广告众多的表现形式中很多的制作都由Flash来完成。4比如按钮和旗帜类的广告，游动式广告和弹出广告等一般都是利用Flash软件来制作。关于Flash动画广告的制作设计有以下几点思考和建议：2.3.1 主题的确定 投放在网络的广告动画需要在最短的时间内给用户传递出最关键的信息，这就要求我们在设计之前一定要和需求方充分沟通，明确活动主题、重点、一定要求对方提交宣传文案、商品图。一般情况下，产品的价格信号、打折标签都是需要重点突出的，所以要对数字进行强化处理。A href=2.3.2 字体的选择 在动画广告的设计中文字扮演着相当重要的角色，正确的选择字体是一个良好的开端。5首先要根据主题选择适合氛围的字体，例如轻松氛围的可以选择卡通、活泼一点的字体，中国传统节日可以选择书法字体等。建议最好不要选用过细的字体；选用小字体时要适当的扩大字体间距，方便用户快速浏览；选用大字体时要适当的减小字体间距。但是并非要求小字体的间距一定要大于大字体间距，只是相对而言。2.3.3 排版的设计 浏览者的视线一般是从左到右、从上到下,要让广告动画里的文字、图片排序符合用户的浏览顺序。6如果你没有更好的排放方式，把产品图放在动画的左侧一般不会出错，如果是人物图，尽量使人物的视线方向对着主题或关键词。2.3.4 交互按钮的设计 如果添加“立刻购买”、“查看详情”等按钮，尽量放在最右侧或者下面。2.3.5 运动轨迹的设计 Flash动画中，良好的排版是动画成功的一半，另一半就是流畅的动画节奏，这需要后期不断的调节。这里简单说一下在图片或文字的运动轨迹中需要注意的一些问题。一般情况下，物体在进入和离开场景时，要尽量选择较短的路线。特别是物体离开场景时，不要占用太多时间和空间，要干净迅速。另外物体进入和退出场景的运动方式应该采取同样的风格，例如物体以滑行方式进入场景，最好也以滑行方式退出场景。交互设计中有个对称性交互原则，说的大致就是这个意思。3 Flash应用于网页制作的优点 Flash 动画之所以被广泛应用于网页制作, 与其自身的特点密不可分。73.1 存储容量小，不影响画面。 从动画组成来看: Flash 动画主要由矢量图形组成, 矢量图形具有储存容量小, 并且在缩放时不会失真的优点。这就使得Flash 动画具有储存容量小, 而且在缩放播放窗口时不会影响画面清晰度的特点。3.2 便于网络传输 从动画发布来看: 在导出Flash 动画的过程中,程序会压缩、优化动画组成元素( 例如位图图像、音乐和视频等) , 这就进一步减少了动画的储存容量, 使其更加方便在网上传输。A href=3.3 便捷的播放模式 从动画播放来看: 发布后的. sw f 动画影片具有“流”媒体的特点, 在网上可以边下载边播放, 而不像GIF 动画那样要把整个文件下载完了才能播放。3.4 交互性的运用 从交互性来看: 可以通过为Flash 动画添加动作脚本使其具有交互性, 从而让观众成为动画的一部分。8这一点是传统动画无法比拟的。3.5 制作手法简单易学 从制作手法来看。Flash 动画的制作简单易学,容易上手, 一个爱好者通过自学也能制作出很不错的Flash 动画作品。3.6 制作成本低 从制作成本来看: 用Flash 软件制作动画可以大幅度降低制作成本。同时, 在制作时间上也比传统动画大大缩短。3.7 图形绘制功能强大 图形绘制。Flash 是一款极为优秀的网页设计软件，用其绘制各种图形可发挥出不同的视觉效果。如：企业在网页上设计logo 时，可利用Flash 动画技术绘制符合企业特色的商标。该技术可在原始图形编制阶段自动生成动态画面，塑造了不同的图形画面效果，吸引了大量用户的浏览。3.8 可用于图形编辑 除了对原始图形加工处理外，Flash 动画技术也能对现有的图形自动化编辑，达到改善图像视觉效果的目的。如：为了提高网页的宣传效果，企业会定期投资网页的更新制作，采用Flash 动画技术即可对原始图像综合处理，经过程序代码编辑后设计出具有动态效果的多元化页面。3.9 支持图形动画 Flash 动画技术的核心功能是“动态画面”，鉴于现有的计算机技术条件，动画图形不再局限于其运动的“状态”，而是把声音、视频、图形等三大元素整合到页面中。9一般情况下，企业会剪辑相关的视频、图像，再配备声音信息，从多方位对产品详细地介绍，让消费者有全面的了解。4 FLASH在网页制作中的延伸发展 目前随着人们精神文化水平的提高，人对艺术的追求也提升了一个高度，人们开始对交互式、影像化和视觉交流方式进行探索，更多的人则沉迷于虚拟空间寻找和塑造自我理想的角色和形象，我们已经不能再把设计理解为一个狭隘的概念，视觉设计也渐渐地超越了其原先的范畴，走向越来越广阔的领域。从FLASH 在网页制作的流行现象中透析视觉传达设计的发展趋势。从FLASH 的艺术特征我们可以看出FLASH 将对网页设计的发展起到一定的延伸作用。FLASH 动画的发展也使广告艺术设计由以往形态上的平面化、静态化开始逐渐向动态化、综合化方向转变。10在网络时代前一成不变的单调艺术设计方式受到了人们多元化需求的冲击。求新、求变的新生代人群从思想上为这一时期的设计发展提供了未曾有过的选择，造成了在传统设计基础上的各种新设计的萌发，提出了新的设计方向。总而言之，FLASH 动画技术的出现，不仅引领了网站建设和网络广告设计的理念，更对整个艺术设计界产生较大影响，它让广告媒体更加丰富多彩，推动了网络艺术媒体的普及和发展，FLASH 动画今后的发展也会逐渐渗透到广告、影视、文化、经济各个领域。结 语 随着互联网的发展，Flash 动画以它绚丽的视觉效果、小巧的文件及不用安装插件等优势迅速占领网络媒体的主导地位，处理好Flash在网页中的应用技术，则能够大大加大网页的吸引力及交互性，更加为Flash 动画添加了灵活的动态效果，为网页设计提供更多的创意空间。参考文献1王文军.浅谈Flash动画的应用与前景J.机械管理开发.2011(2).P203-P204.2成彪.浅谈Flash动画艺术特性及延伸发展J.艺术传媒.2009(2).P255.3冯丽苹.探讨Flash动画在网页制作中的应用及发展J.教研.2012(1).P74-75.4毛耀.基于Flash的动态网站新方案J.西南民族学院（自然科学版）.2001(8).P348.5刘斌.基于Flash的课件制作与应用J.科技广场.2012(7).P102-P103.6孙英.浅谈Flash动画广告设计J.电脑知识与技术.2015(5).P3711-3715.7莫仲心.浅谈Flash动画在网页设计中的应用J.信息通信.2012(1).P135-P136.8王海燕.浅谈Flash动画的制作J.赤峰学院学报（自然科学版）.2009(5).P31-P32.9袁宁.Flash动画在网页中的应用J.电脑学习.2005(6).P13-P14.10吴传学.Flash动画制作的优化研究J.学术探讨.P68-P70.目 录第一章 总 论 11.1项目概况 11.2研究依据及范围 31.3主要技术经济指标 41.4研究结论及建议 4第二章 项目建设的背景和必要性 62.1项目建设的背景 62.2项目建设的必要性 8第三章 项目服务需求分析 11第四章 项目选址与建设条件 134.1选址原则 134.2项目选址 134.3建设条件 144.4项目建设优势条件分析 15第五章 建设方案 185.1建设规模与内容 185.2总体规划设计 195.3建筑方案 245.4结构方案 265.5给水工程 275.6排水工程 295.7电气设计 315.8暖通设计 345.9项目实施进度 35第六章 节能措施 376.1设计依据 376.2节能措施 37第七章 环境影响分析 397.1 环境影响分析 397.2 环境保护措施及治理效果 40第八章 消防与安全卫生 428.1 消防 428.2 劳动安全 438.3 卫生防护 44第九章 组织机构与运作方式 459.1 组织机构 459.2组织管理 469.3劳动定员 46第十章 投资估算 4710.1编制依据 4710.2 投资估算 4710.3资金筹措 48第十一章 经济效益评价 4911.1 成本核算 4911.2 利润估算 5111.3经济风险分析 5211.4财务评价结论 54第十二章 结 论 55第 13 页 （共 11 页）