【毕业设计】动漫宣传网站设计_第1页
【毕业设计】动漫宣传网站设计_第2页
【毕业设计】动漫宣传网站设计_第3页
【毕业设计】动漫宣传网站设计_第4页
【毕业设计】动漫宣传网站设计_第5页
已阅读5页,还剩24页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

毕业设计题目动漫宣传网站设计院系计算机科学与工程系专业计算机科学与技术2014年2月21日目录1研究概述111动漫宣传网站概述112FLASH网站建设概述113FLASH网站建设技术114FLASH网站的优势215课题研究现状与意义32系统概述421总体目标和要求4211目标4212要求422设计及演示环境5221ADOBEFLASHCS6简介5222ADOBEPHOTOSHOPCS4简介5223ACTIONSCRIPT30简介5224XML简介6225CSS简介63网站设计631对网站建设进行分析732建设网站素材的收集733创建网站的目录结构8331模块结构分析8332模块的功能8333目录结构分析9334网页之间的关系934网站引导动画设计(IDENXSWF)1035网页预加载动画设计(MAINSWF)1136网页主体页面动画设计(PAGESWF)1337网页图片切换动画设计14371简单的图片切换153723D动画切换16372触屏动画切换1738网页视频、音乐动画设计18381音乐播发器动画设计18382视频播发动画设计1839文字动画设计204总结20致谢22动漫宣传网站设计谭文斌摘要我国动漫产业正处于飞速的发展的状态,但是却不能走出国门,主要原因是缺少宣传。宣传的途径很多,其中网络传播是宣传最快的途径。多媒体网站就是网络宣传的一种手段,也是最能吸引人们关注的。多媒体网站的建设不是一般的静态的网站,而且需要各种动画、图片相互组成,有着很好的交互行为。FLASH网站就是建设多媒体网站最合适的建设工具。FLASH网站建设技术是计算机科学与技术的一项重要的技术应用领域,易学难精,包含了很多技术领域,如编写脚本、动画制作技术、图片处理及合成技术、互动技术等知识。在这个时代,科学在进步,人们的硬件设施和软件设施也快速发展,使用原来的技术建设的宣传网站已不能满足人们是需求,故要合理运用现在有的新技术打造全新的多媒体网站,是一个必然的趋势,也是动漫宣传网站的发展趋势。论文是以茗记动画作为宣传网站建设的实例,以探讨建设多媒体宣传网站为目的,更好的发挥FLASH建设网站效果。关键词FLASH;网站建设;动漫;多媒体网站ANIMEPROMOTIONALWEBSITEDESIGNBYTANWENBINFEB,2014ABSTRACTTHEANIMATIONINDUSTRYINOURCOUNTRYISINTHERAPIDDEVELOPMENT,BUTITSTILLCANTGOABROADFORTHEMAINREASONTHATLACKINGADVERTISEMENTTHEREAREMANYWAYSTOADVERTISEINWHICHSPREADTHROUGHSOCIALNETWORKISTHEFASTESTWAYMULTIMEDIAWEBSITEISAWAY,ANDALSOISTHEMOSTATTRACTIVEONETHECONSTRUCTIONOFWEBSITEISNOTANORDINARYSTATICWEBSITE,ITCOMBINESOFALLKINDSOFANIMATIONSANDPICTURESWHICHHASGOODINTERACTIONFLASHWEBDESIGNISTHEMOSTAPPROPRIATEMULTIMEDIAWEBSITEFLASHWEBSITECONSTRUCTIONISANIMPORTANTTECHNOLOGYAPPLICATION,ITISEASYTOLEARNBUTDIFFICULTTOMASTER,ITINCLUDEA论文题目字体楷体,字号小一论文题目字体楷体,字号小一VARIETYOFFIELDSOFTECHNOLOGY,SUCHASSCRIPTING,ANIMATIONTECHNOLOGY,IMAGEPROCESSINGANDSYNTHESISTECHNOLOGY,INTERACTIVETECHNICALKNOWLEDGEINTHISERA,SCIENCEISDEVELOPMENTANDPEOPLESHARDWAREANDSOFTWAREAREALSODEVELOPINGTHEPRIMARYWEBSITEWITHOUTDATEDTECHNOLOGYCANTMEETTHENEEDOFTODAYSPEOPLE,SOITISANINEVITABLETRENDTOBUILDNEWMULTIMEDIAWEBSITEANDITISALSOADEVELOPMENTTRENDOFANIMATIONADVERTISINGWEBSITESTHEPAPERUSE“MINGJI”ASANEXAMPLE,FORTHEPURPOSEOFEXPLORINGTHECONSTRUCTIONOFMULTIMEDIAPROMOTIONALWEBSITEKEYWORDSFLASHWEBSITEBUILDINGANIMEPROMOTIONALWEBSITEMULTIMEDIAWEBSITE1研究概述11动漫宣传网站概述动漫宣传网站是通过相关的动画、漫画、动漫周边宣传动漫,以达到推广动漫文化的一种网络宣传途径。动漫宣传网站建设通常是与该动漫相关元素为主,打造与动漫本想相符宣传网站,在网站中主要有动漫作者介绍、动漫周边、动漫海报、动漫视频、动漫主题曲以及动漫游戏,更有的网站还提供了动画和漫画不断更新和下载该动漫的相关的歌曲、视频。通常一部动漫有了重大的活动时,都会第一时间在自己动漫宣传网站发布,以提高动漫的知名度和热播度。动漫宣传网站是人们了解动漫文化的途径之一,也是动漫走进人们视线的途径之一,也是动漫走向世界的平台的途径之一。12FLASH网站建设概述FLASH网站建设是计算机科学与技术的一个技术应用领域,多数以动漫动画为主要表现形式,故FLASH网站美观、动感十足,能大量吸引网民的眼球。同样的,FLASH网站还拥有很强的交互的能力,很多企业喜欢通过FLASH技术制作网站以体现企业与众不同的想法给用户带来高端的感受体验,同时客户也能在交互的过程中了解企业文化。从视觉观感上来说,企业通过FLASH技术制作网站往往能给人们留下深刻的印象,从而促使人们想更进一步的了解企业文化,企业也能从中挖掘出更多的潜在的客户。13FLASH网站建设技术1计算机图片技术许多绚丽的图片都是通过PHOTOSHOP等软件绘制和合成而来,而要建设网站,如果没有绚丽的图片来衬托,建设出来的网站是平凡无味;相对的,会大力提升计算机图片技术水平以及建设网站人员的创作水平;2互动技术互动是人与机器沟通的一种方式。长久以来,人们都是通过鼠标和键盘与计算机互动,而当下出现了新的互动方式触屏技术。传统的网站都是用鼠标和键盘来进行互动,而研究新的网站互动模式,触屏技术与鼠论文题目字体楷体,字号小一标键盘相互结合的模式,能大大的推进建设网站技术的发展,打破传统的互动方式;3脚本技术使用FLASH自带的ACTIONSCRIPT30脚本来进行脚本编写,该脚本语法和结构比较简单、学习和使用也比较简单,通过脚本的编写,大大的缩短了网站建设中所使用的代码,加快了网站建设的速度,带动了脚本技术的发展。4计算机动画制作技术大多数的网络上的动画都是通过3DMAX、FLASH、MAYA等动画制作软件绘制、编辑、后期处理而成,但是应用与网站的动画却有所不同,网站动画的文件小,内容清晰,大多数的动画制作软件制作的动画不能满足这些要求,但FLASH软件制作的动画却能符合要求。FLASH软件制作的动画都是矢量动画,使得网站的动画能最快的打开,大大提高的网站的美观。14FLASH网站的优势使用FLASH建设的网站和使用传统的网站建设模式有什么优势从以下几个方面可以看出FLASH建设网站的优势1FLASH网站能够制作简洁的网页动画,甚至是网页游戏。而同样的动画效果和游戏开发,如果使用JAVASCRIPT等语言来编写,将会非常复杂且代码庞大。JQUERY等组件虽然也能便捷地制作动画,但动画效果不如FLASH动画丰富;2传统网页在切换页面时,需要刷新整个页面,造成屏幕暂时性的空白,而FLASH网站弥补了这个不足。在载入新数据时,FLASH不用刷新整体的页面。同时可以精确的显示下载进度,而在使用上更加友好。此外,目前流行的JAVASCRIPT等技术虽然能实现页面局部刷新,但其开发的难易程度,以及加载的自定义能力远远不如FLASH;3FLASHPLAYER的安装已经得到了普及,大多数用户的游览器都支持FLASH播发。最近微软官方更宣布,在最新的WINDOWS8IE10中内置了FLASH功能;4FLASH在播放视频和音频方面的变现胜过了许多其他的主流媒体播放器。即便与当下热门的HTML5的视频播放相比较,FLASH在WINDOWS平台上各种游览器下的视频播放表现都优于HTML5,仅在MAC平台上有一定的劣势;5在传统网页中,我们只能使用系统自带的字体作为网页的文字字体,而不能使用非系统自带字体。然而,在FLASH中可以嵌入字体。这样,设计师就可以在FLASH网站设计中使用一些美观的字体,而不用顾及用户是否安装了它们;6由于FLASH可以方便的侦测游览器窗口的大小变化、获取舞台的尺寸,因此可以制作美观的自适应屏幕窗口大小的全屏网站1。15课题研究现状与意义动漫产业是我国最有潜力的新兴产业之一,是我国软实力的重要组成部分。在我国出台了一系列的政策与大力扶持动漫产业的发展下,动漫产业逐渐的成长。2004年,我国的动漫产业的总产值是117亿人民币,而2005年我国动漫产业总产值增长到了180亿人民币;2012年,我国动漫产业的规模达到了320亿人民币,衍生产品同样达到了220亿人民币2。虽然我国动漫产业在飞速的发展,但是相对与美国和日本,我国还是处于弱势地位。故而,动漫产业在我国还有很大的提升空间。动漫产业在我国面临着政策有力推动、市场强力拉动、“互动效应”十分突出的形式。目前,动漫产业在我国面临现实的危机和机遇同时存在,而发展则正在挑战停滞与跨越的阻隔。我国动漫产业还面临着外来动漫文化的挑战,如日本、美国等发达国家。宣传我国优秀的动漫文化是必然的趋势,但是我国在这方面是薄弱的。现我国宣传动漫的主要途径有电视媒体、报刊和期刊,而网络传播也是在近几年才发展起来的。在中国,拥有59亿的网民和网络飞速的发展下,网络传播正在成为新的一代传播途径3。国外的动漫宣传网站建设比国内的宣传网站早,而且还有专业的团队来建设和维护这些动漫宣传网站。比如日本的动漫宣传网站,已经融入了他们的生活当中,他们的宣传网站可以在线观看自己喜爱的动漫视频、海报,动漫产业的规模十分的大,而且已经成为日本经济增长的一个重要经济增长点,同样也带动了其他行业的发展。现在,日本的动漫网页已经出现了专题网站,一个动漫就一个宣传的网站,把该动漫的作者信息、内容信息部分视频等发到网站,大大宣传了本国的动漫。在国外的动漫宣传网页中,应用了大量的矢量动画,使网页更加的吸引人们。并且每个网页的风格都是根据动漫本身来设计的,从而出现了各种各样的网页,更是能提起人们的兴趣。国内的动漫宣传网站建设还是刚刚起步,没有太多的专题的宣传网站,大多是介绍国外和国内的动漫的综合性网页,并且国外的动漫占了很大部分,而国内的动漫却很少。这种状况对我国的动漫传播带了很大的阻碍,同样也让国内的优秀动漫得不到宣传。国内的动漫宣传网页都大多是使用DREAMWEAVER软件开发的静态或者动态的网页,其中,无关商业广告多、无关链接多、无关信息也很多。致使国内动漫宣传网页很难吸引人们的兴趣。而且国内的网页大多是一个摸样的,没有自己的个性所在,导致人们会有视觉疲劳的现象。现在,国内的出台了大量的政策,也出现了优秀的动漫宣传网页,如腾讯动漫等,但是,这些网页还是综合性的宣传网页。所以国内的动漫宣传网页是缓慢发展的。网络传播主要的手段是就是网站宣传。传统的网站建设都是使用是PHP、ASP、HTML语言来建设,缺少很多的互动的环节以及绚丽多彩的动画,因此,使用DREAMWEAVER等软件来建设地网站,往往需要配合FLASH动画和相关视频,来增强网站的吸引性。而使用FLASH建设网站却是全多媒体网站,相对其他制作网站更具有吸引力。FLASH网站建设技术是计算机科学与技术的一项重要的技术应用领域,易学难精,包含了很多技术领域,如编写脚本、动画制作技术、图片处理及合成技术、互动技术等知识。2系统概述本动漫宣传网站从功能上主要有图片的切换、播发视频、播放音乐。系统主要通过鼠标点击或者触屏进行演示,通过对图片之间的切换、视频的播放、播放音乐来进行学习动漫宣传网站建设。21总体目标和要求211目标为了更好的宣传国内优秀动漫,了解掌握多媒体网站的建设过程、了解掌握脚本的编写与使用以及了解掌握鼠标键盘交互与触屏手势交互模式的切换。使用ADOBEFLASHCS6进行网页的建设,通过INTERNET游览器来展示该网页。212要求设计一个能实现鼠标键盘交互与触屏手势交互模式的切换且都能实现图片的切花、播发视频、播放音乐,界面要求精美并且符合该动漫的宣传网站。22设计及演示环境本系统使用ADOBEFLASHCS6和ADOBEPHOTOSHOPCS4软件,语言采用脚本语言ACTIONSCRIPT30、可扩展标记语言XML和超文本标记语言HTML。221ADOBEFLASHCS6简介FLASHCS6是美国ADOBE公司最新推出的矢量动画制作软件,是当今最为流行的网络多媒体制作工具。它在多媒体设计领域中占据着不可代替的地位,在继承以前版本所有的优点的基础上有增加了许多新的功能,使用更加便捷,被广泛应用于动画设计、多媒体设计、WEB设计等领域4。FLASHCS6也是目前广为流行的二维交互式矢量动画制作软件。222ADOBEPHOTOSHOPCS4简介ADOBEPHOTOSHOPCS4是美国ADOBE公司在2008年发布的一款图像处理软件,是目前广泛使用图形图像处理的软件之一。ADOBEPHOTOSHOPCS4继承了上一代的ADOBEPHOTOSHOPCS3软件的所有的功能,还添加了新的功能,如3D、视频流、动画等,还支持CPU加速,让图片处理更有效率。该软件分两个版本,ADOBEPHOTOSHOPCS4和ADOBEPHOTOSHOPCS4EXTENDED。223ACTIONSCRIPT30简介ACTIONSCRIPT30是针对FLASHPLAYER运行环境的编程语言,拥有处理各种人机交互、数据交互等功能。ACTIONSCRIPT30是一种强大的面向对象编程语言,是一种基于ECMASCRIPT的编程语言,用来编写ADOBEFLASH电影和应用程序。ACTIONSCRIPT30符合ECMASCRIPTLANGUAGESPECIFICATION第三版。它还包含基于ECMASCRIPTEDITION4的功能,比如类、包和名称空间,可选的静态类型、生成器和迭代器等4。224XML简介XML指可扩展标记语言(EXTENSIBLEMARKUPLANGUAGE),是以纯文本的形式来描述数据和存储数据的具有结构性的标记语言。XML是万维网联盟(WORLDWIDEWEBCONSORTIUM,W3C)组织制定的一个跨平台的、独立于软硬件的信息存储和信息传输工具,非常适合WEB传输。XML为程序之间的交换数据提供了一种通用的解决方案,已逐渐成为各领域内信息存储方式的标准。XML这种标记语言没有预定义的标签,用户可以根据需要自定义标记。XML是设计用来传送及携带数据信息的4。225CSS简介CSS又称级联样式表(CASCADINGSTYLESHEET),它是一种用来表项XML和HTML等文件样式的计算机语言。目前最新的版本是CSS3。CSS支持几乎所有的字体字号样式,拥有对网页对象的样式编辑的能力,并能够进行初步的交互设计,是目前基于文本展示最优秀的表现计算机语言。1)硬件环境处理器INTELPENTIUM166MX或更高内存1G以上硬盘空间100G以上显卡512MB显存以上2)软件环境操作系统WINDOWSXP/WINDOWS73网站设计由于网站的内容比较全面,大多数是FLASH设计的SWF动画。建设网站的性质为多媒体网站,由FLASH软件设计并建设的网站,故建设的流程有以下12个部分1对网站建设进行分析2建设网站素材的收集3创建网站的目录结构4网站引导动画设计(IDENXSWF)5网页预加载动画设计(MAINSWF)6网页主体页面动画设计(PAGESWF)7网页图片切换动画设计8网页视频、音乐动画设计9文字动画设计10生成网站并调整网站11进行网站的最后修改12最终生成网站31对网站建设进行分析要完成网站的建设,需要对网站要进行分析,对网站建设有一个充分的了解。建设一个宣传网站要进行对此次宣传动画有一个了解,有以下几点分析结果(1)网站整体的色调为灰色和白色,理由是该动画故事讲述的是一个普通中学生萌动的感情历程;(2)网站内容有图片、视频、音乐和文字,理由是为宣传该动画,应该从静到动,让人能充分的了解这部动画以及创作人的艰辛;(3)网站的图片采用网络上已有的海报作为素材;(4)网站的视频使用该动画的视频;(5)网站的音乐使用该动画的主题音乐并应用与网站的背景音乐;(6)网站的文字内容,主要介绍该动画的创作团队、创作的艰辛、获奖荣誉以及后续作品;(7)网站给内容的形式图片为切换、视频为播发、音乐为播发、文字为滚动;(8)网站首页是由三个部分组成,分别为引导动画INDEX,预加载动画MAIN以及主体动画PAGE。32建设网站素材的收集在建设网站开始前,还要对网站所需要的素材进行收集,并对这些素材进行处理和整理。素材的收集主要是通过网络收集,收集的素材会是五花八门,需要对其进行分析和处理,而处理则需要使用PHOTOSHOP等图像处理软件进行图片的处理。有些素材是在网络上收集不到的,则使用PHOTOSHOP等图像处理软件来进行设计。最终收集到的素材有图片(封面图片有10张、产品图片有10张),视频有3部,音乐1首,动漫相关信息文字1份。而需要设计的素材则要等需要的时候才进行设计处理。33创建网站的目录结构331模块结构分析要建设一个好的宣传网站,需要对网站的目录进行分析。网站中的网页所用到的图片、视频、音乐等源文件,需要有一个模块来规划资源,通过超链接实现对其他网页或网站的关联和跳转,而该网站所规划的模块有首页、茗记之图、茗记之视、茗记之声、茗记之路、茗记周边。故如图31所示茗记网站需求模块首页茗记之图茗记之视茗记之声茗记之路茗记周边图31模块结构332模块的功能首页主要简单介绍动漫的大致的内容、相关的信息以及一些重要的信息,同时也播发一些于之相关的动漫宣传海报等图片;茗记之图主要播发图片动画,并与用户进行一些简单的切换互动,如左右滑动图片,放大图片等互动;茗记之视主要播放与动漫相关的动漫视频,并有相应的内容简介和相关宣传视频;茗记之声主要播放动漫中主题曲,以及在播放音乐中同样播放图片;茗记之路主要介绍制作团队在制作该动漫的路程以及获得的奖项;茗记周边主要介绍已在世面上市的动漫周边产品以及动漫周边销售的相关店铺和网址。333目录结构分析建设一个FLASH网站,通常是由SWF文件、相关文本文件、图片文件、视频文件、脚本文件、样式文件组成。根据前面网站模版需求分析,网站目录结构的设计有INDEXHTM、IMAGES、SWF、TXT、XML、CSS、ACTION文件。以下是对文件的说明INDEXHTM主要由INDEXSWF、MAINSWF、PAGESWF组成;IMAGES主要存放图片文件和页面所需要调动的图片;(根据实际需求放置)SWF主要存放SWF影片以及页面所需要调用的SWF影片(根据实际需求放置);TXT主要存放文本文件以及及页面所需要调用的TXT文件;(根据实际需求放置)XML主要存放XML文件以及页面所需要调用的XML文件;(根据实际需求放置)CSS主要存放页面所需要调用样式;(根据实际需求放置)ACTION主要存放页面所需要调用SWF的脚本文件(根据实际需求放置)。334网页之间的关系建设网站还需要对网站中各个页面的关系理顺,以方便以后的网站建设以及页面的设计。整个网站是由3个大页面以及6个镶嵌页面组成,打开网站的流程是大致如图32INDEXHTMLMAINSWFPAGESWF茗记之图首页茗记之视茗记之声茗记之路茗记周边图32网页流程34网站引导动画设计(IDENXSWF)引导动画主要的实现功能是预加载MAINSWF文件的功能。在这文件内主要有个影片剪辑元件,一个是进度条和一个进度条01。采用了FLASH自带了LOADER类,节省了网站建设的时间,如果采用其他的控制方法,需要调用大量的函数,从而影响了用户的游览页面的进度,大大降低了游览网页的兴趣。其实现功能代码如图33图33关键代码代码实现了加载MAINSWF文件,并且使用进度条和显示数字的方法来表示加载的状况以及加载完毕后消失的功能。35网页预加载动画设计(MAINSWF)预加载动画主要功能是实现预加载PAGESWF文件,从引导动画进入跳转至主体动画页面的功能,文件中包含了4个影片元件、3个图形资源、2个图形元件、1个按钮元件个以及在制作过程中产生的补间动画。在WENZI2剪辑的中使用了图层遮掩动画来制作动画,在遮掩图层上方建立一个ACTION图层,在该图层的第40帧添加关键帧,输入代码STOPDISPATCHEVENTNEWEVENT“MINGJI“代码的功能是等待播放完毕停止并会抛出一个事件MINGJI。最后效果如图34;图34效果图建立动画后在进度条图层上建立一个ACTION图层,并在第21、41、42帧添加关键帧。在21帧处输入代码,为MINGJI影片剪辑添加一个事件,其代码如下STOPMINGJIADDEVENTLISTENER“MINGJI“,GOTOFUNCTIONGOTOEVTEVENTVOIDGOTOANDPLAY22代码主要的功能是等待MINGJI影片剪辑播发完毕后接收由MINGJI影片剪辑抛出的事件MINGJI并跳转到下一帧的功能。在41帧,输入代码,建立SKIPWORK函数和ANNUGENSUI函数,为SKIP添加鼠标点击事件,部分代码如图35图35关键代码代码主要实现了按钮SKIP的鼠标跟随和输出了SKIP的坐标,方便看出SKIP跟随鼠标的行踪,了解其工作的原来并且跳转到42帧进行播放。在42帧,输入代码如图36图36部分代码代码主要实现了加载PAGESWF文件以及进度条的控制,实现了进度条的出现和消失。36网页主体页面动画设计(PAGESWF)主体页面的动画设计是网站建设的重要主要部分,这部分是网站的价值体现。而这部分由许多的SWF动画、文字和动画组成。实现加载外部SWF动画、加载文字、页面转场特效、局部刷新等功能。页面框架设计如图37图37框架设计图主体页面包含了图片LOGO、按钮区、功能实现区、版权说明等元素。通过按钮区的按钮来切换功能实现区中的不同功能,其中代码格式如下MAINGOTOANDSTOP“ONE“NAVIGATIONPAGE1ADDEVENTLISTENERMOUSEEVENTCLICK,SHOUYEFUNCTIONSHOUYEEVENTMOUSEEVENTVOIDMAINGOTOANDSTOP“ONE“其中NAVIGATIONPAGE1是指按钮区的第一个按钮,通过修改其中的数字选择不同的按钮;函数SHOUYE实现跳转到MAIN中标记ONE的帧并停止的功能。MAIN是功能实现区的一个重要的影片剪辑元件,是用于加载各个页面功能动画的载体。MAIN是由6个影片剪辑元件构成,为了更好的配合功能实现区的大小,对6个元件的大小位置设置是一致,只有内容不一样,并为其标识标签,如图38图38帧标签在功能实现区中首页影片剪辑的代码中“SYSTEMUSECODEPAGETRUE”解决了在加载外部文件时,对其文本进行编码格式判断,以确保文字显示正常而不会出现乱码。如图39图39实现代码功能区主要采用了外部加载的方式,减少了在一个网页的加载量,并且实现了局部的刷新功能,从而在切换到其他功能区时,不会出现普通网页所出现的空白页面,也减少了在建设网站时所产生的混乱,明确的建设网站的步骤。同时每个页面都是分开独立设计,无需在同一个文件内设计,减少了文件的存储量和脚本量,加快了建设网站的速度以及用户能快速的打开网页。独立设计各个页面避免了在以后修改时带来的困难与花费时间去寻找其页面,如某页面出现问题,便能在第一时间内处理这个页面,不会影响到其他的页面,降低了游览网站的影响。37网页图片切换动画设计网页图片的切换在这设计中主要有三种,一种是简单的图片切换,一种是3D动画切换和触屏切换。而这三种动画分别用应用在首页、图片、音乐和周边的模块中。371简单的图片切换该动画实现了图片的来回的切换并且能自动切换图片,为了提高在网页上的传输速率,采用了外部加载图片的方法,存储的方式为XML。采用了容器的方法来加载图片并通过脚本来实现图片大小的限制。该动画包含了两个影片剪辑,分别为SMALLPIC和BIGPIC,这两个影片剪辑主要实现了加载图片。建立函数BIGPICSHOW来实现图片切换的特效以及设置图片自动切换的时间,代码“FLAGSETTIMEOUTBIGPICSHOW,5000,I”修改其中的数值,可以改变图片自动切换的时间长短。建立函数SHOWSMALLPIC和SHOWBIGPIC实现在舞台建立两个容器并约束SMALLPIC和BIGPIC两个影片剪辑在这两个容器内的显示。其中函数SHOWSMALLPIC中部分的代码如下FUNCTIONSHOWSMALLPICVOIDSPADDEVENTLISTENERMOUSEEVENTMOUSE_OVER,SPOVERSPADDEVENTLISTENERMOUSEEVENTMOUSE_OUT,SPOUT通过给小图添加了两个鼠标监听,来解决小图在显示的过程中改变起透明度的大小。在SHOWBIGPIC函数中,通过建立TWEEN方法来实现大图的切换方式,并且通过FOR循环语句,来建立与显示小图之间的关系,从而实现了在点击小图时,能切换到相应的大图,避免了错误的显示或者显示不完整等现象。最终的效果如图310图310最终效果3723D动画切换3D动画切换主要是通过调用外部的类来实现图片的3D切换效果,这些类是通过FLASHCS5动画设计经典100例光盘下载,类名分别为CAMERA3DAS、MATRIX3X3AS、VECTOR3DAS,然后通过导入该类对图片进行调用。而图片的加载是外部加载,存储也是通过XML来存储。图片的切换可以通过键盘上的“”T、“G”、“A”、“D”来控制上下左右以及键盘上的“S”和“W”来控制显示图片的大小,也可以通过鼠标左右移动来切换图片以及滚动鼠标的中键来缩放图片的大小。要实现键盘功能,需要建立键盘函数INTKEY,其部分代码如图311图311部分代码建立此函数的目的是为了在使用键盘来对图片切换放大时,网页能收到相应的数字,能调用相应的函数,来进行对图片的互动。函数内包含了26个字母,而且实际用到的字母很少,但是为了方便以后增添功能,故把26个字母输入此函数。建立INITKEYBOARDEVENT函数,主要是获取到键盘上的信息,方便调用KEYDOWNHANDLER和KEYUPHANDLER函数,实现在键盘上控制图片的操作。建立键盘和鼠标后,建立一个START3DENGINE函数,部分代码如图312,该函数对互动行为进行判断,能实现键盘、鼠标之间无缝的切换,并且方便以后添加新的互动行为。图312切换之间部分代码372触屏动画切换该互动模式是最新的人机互动模式。动画才用了一个AS30的类,名称为HTOUCHSCROLLAS,该类部分代码如图313图313部分代码该类主要解决触屏时的一个监听工作,虽然没有用到FLASH自带TOUCH类,而采用鼠标事件来代替TOUCH事件,但是能很好的完成触屏的互动。该类主要添加了鼠标点击和按钮事件。使用鼠标事件来代替TOUCH事件,能满足在不是触屏的环境下也能很好的做到切换图片工作;在触屏的环境下,使用人的手来代替鼠标的点击拖图,来完成手势的监听和图片的切换。如果使用TOUCH类来进行图片切换,脚本会很多,从而加大了工作量。该动画最终的效果如图314图314最终效果38网页视频、音乐动画设计381音乐播发器动画设计音乐播发器主要有播发、暂停、静音基本的功能,为了更好的配合该动漫的宣传网站设计,播发器采用了与该动漫相关的元素,效果如图313图313播发器在PAGESWF中是采用外部加载,白色的播放器与页面的色调产生较大的反差,让用户有一种视觉的冲突感。并且在PAGESWF其页面中,还配搭了图片的自动切换,降低了因页面只有一个播放器而带来的枯燥。在设计中,如以后需要添加其他曲目,可以仿照其视频播放动画。382视频播发动画设计视频播放的设计主要有四大部分,分别是视频标题、视频列表、视频简介以及视频播放,而视频标题和视频简介采用了外部加载,采用了XML、HMTL技术来实现。而视频播放的实现主要是通过FLV的外部载入。制作视频播放的元素大多采用FLASH中的组件功能来实现,节省了许多绘制时间,大大提高了制作视频播放页面设计的速度。其中,视频在播放过程中可以任意拖动滑块来控制视频的播发位置和视频的音量,可以通过按钮来实现视频的暂停等基本功能,同样可以通过视频列表来切换所播发视频的内容,主要的实现代码如图314图314功能实现代码该代码主要实现了用户在点击播放列表时,相应的播放区域和视屏简介的更新,使用IF判断语句,通过建立两个元件并与播发区域和视频简介区域的元件联系,进行更新。在视频动画设计过程中,考虑到网上流行的FLV播放的页面,如优酷、土豆网页,其网页都能实现点播的功能。在该动画设计中,才用了HTML和XML的技术,来实现了视频点播的列表和视频名称的存储信息,在点击相应的视频后能自动跳转到加载该视频。而视频的相关信息介绍,则是才用XML技术来存储文本信息,并与视频列表和视频播发器挂钩,三者通过FOR循环和IF循环的镶嵌,使其相互勾连,实现了在点播视频时不会出现视频名称不对、视频介绍不对的相关错误信息。39文字动画设计文字动画采用外部加载TXT文件来读取文字,方便以后的添加文字,其代码VARMYLOADERURLLOADERNEWURLLOADERVARURLURLREQUESTNEWURLREQUEST“TXT/TXT2TXT“MYLOADERLOADURLMYLOADERADDEVENTLISTENEREVENTCOMPLETE,ONCOMPLETEFUNCTIONONCOMPLETEEVTEVENTVOIDWENBEN_TXTTEXTEVTTARGETDATA该代码很好的导入了TXT文档中的内容。考虑到加载文本时出现了乱码,需要添加以下代码SYSTEMUSECODEPAGETRUE4总结本论文主要是通过使用FLASH来建设网站,在建设的过程中,让学习这科的学生更好的理解FLASH网站建设的基本过程以及FLASH制作动画的相关基础知识。网站主要展示了FLASH动画中的基础知识以及相关的技术,如PHOTOSHOP图片处理技术、XML技术、ACTIONSCRIPT30技术、HTML技术等,也同样让学生看到了FLASH网站建设的发展方向,大大的提高了学生的继续加深学习兴趣。在制作的过程中遇到了许多的困难,如在图片切换的设计中,由于不能很好的无缝切换图片,导致效果不佳,最后通过老师的分析与讲解,修改了元件内的脚本中部分常数和图层脚本的参数,解决了该问题。同样通过FLASH网站建设过程中,也收获了不小的知识,如视频的播放设计,通过课本与网上搜索的学习与探究,学习了使用HTML、XML、CSS与FLASH相互结合,制作了目前视频网站比较流行的点播方式页面;如3D图片切换动画设计,该设计是通过课本的学习过程中得到了启发,该动画使用了很多网上已有的类,大大减少了制作

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论