您的位置: 首页 >> 新闻中心 >> 计算机 >> 设计制作
设计解析:Flash Web结构之背景层浅析
精英教育阅读提示:Flash模式:所谓Flash模式,就是直接在Flash中完成网站主体框架的绘制,并利用Flash完成框架修饰内容的填充。这种模式比较适合界面简单,色彩单一,高效实用的Flash web。它充分利用简单矢量图形体积小的优势,同样一个画面,它的体积将比位图小很多。所以这样的网站如果处理恰当的话,完全可以比同种样式的常规HTML网页体积更小。同时由于它直接在Flash中绘制,非常便于修改以及同其它层结合。
■ 最新课程推荐更多课程>>
学校培训课程开课时间上课地点精英价报名
北 师 大 平面设计创意全科班电话预约北京师范大学¥1300
理工文化 平面设计取证班电话预约理工大学教学¥1078
金 同 方 CAD绘图全天班电话预约人大总部¥568
金 同 方 苹果平面设计全天班电话预约人大总部¥960
理工文化 平面设计提高班电话预约理工大学教学¥2891

  背景层,顾名思义就是Flash网站的背景,看上去很容易理解也很简单,其实它蕴涵着很多知识和技巧,如果处理不善,将直接影响Flash web的用户体验。

  我在这里把背景层分为以下三种模式:

  1 Flash模式

  2 PS模式

  3 混合模式

  Flash模式:所谓Flash模式,就是直接在Flash中完成网站主体框架的绘制,并利用Flash完成框架修饰内容的填充。这种模式比较适合界面简单,色彩单一,高效实用的Flash web。它充分利用简单矢量图形体积小的优势,同样一个画面,它的体积将比位图小很多。所以这样的网站如果处理恰当的话,完全可以比同种样式的常规HTML网页体积更小。同时由于它直接在Flash中绘制,非常便于修改以及同其它层结合。

  PS模式:这种模式我们可以和传统的网页制作进行类比。传统网页都是先用PS绘制界面,然后切片导出为网页,再在DW中进行编辑。Flash web开发一样可以采用这一流程,利用PS强大的位图处理功能弥补Flash绘图方面的不足。但是在切图的时候,它和HTML网页切图思想不同,在Flash web中经常要把动画因素和各元件之间的遮挡关系考虑进去,所以我一般都是把每个栏目切成一个JPG位图,涉及动画和层级关系的元素则独立导出为PNG透明图象。这样虽然方便了在Flash中的后期制作,但造成网站体积会一定程度的加大。为了优化下载和用户体验,我们可以利用Flash流媒体的特性,把体积较小或者独立性比较好的栏目放在开始的帧先显示出来,相互联系紧密的主功能栏目放中间,体积较大独立性也较好的栏目放最后显示。当然不要忘记用一个loading条时刻提醒浏览者各栏目加载状态,不至于使他们失去继续看下去的信心。这种模式一般适合网站各栏目独立性较好,网站色彩丰富且含有大量动画效果,元件层级复杂的网站。另外,在我写这篇文章的时候,从黑羽那里得到消息,最新版的Flash真的可以支持PSD了,而且还能保留原始图层,再加上以后网速越来越快,PS模式在将来很有可能会大行其道。

  混合模式:混合模式就是综合利用PHOTOSHOP和Flash,取长补短,相得益彰。先用PS设计好网站背景图,并把内容显示部分留空,就像设计HTML网页一样。然后不需切图直接导出为JPG,并导入Flash。再在这张大背景图片上新建一层,用制作动画常用的钢笔勾边上色技术把网站主框架描一边,这就涉及到我后面要讲的“数据显示层”,数据显示层主要由与背景色相似的工整的矢量色块组成,当然像笔者一样喜欢偷懒的人也可以适当添加位图,但数据显示层体积最好控制在30K以内。数据显示层成型后,一定要记得把背景位图放在数据显示层之后的帧上。现在大家应该差不多能猜出这种模式的优势在那里了吧!?对,我们可以利用Flash流媒体的特性,无须等到整个SWF都下载完毕后再显示网站,Flash web的loading时代该过去了!伟大的流式时代就要来临了!我们完全可以先把数据显示层显示出来,让浏览者以最快的速度得到他们想要的信息,与此同时,悄悄的下载背景层,由于我们的数据显示层和背景层的颜色和布局都相似,甚至是完全匹配的,所以背景层下载完成并显示出来的一刹那也不会给浏览者带来太大的跳跃感。当然这样无疑加大了工程量,要求设计师的PS和Flash都不能弱。所谓鱼和熊掌不能兼得,我们必须根据具体的项目进行取舍,看是否真的有必要采用这种模式。笔者个人门户V3主站中,由于背景图片体积过大,我便采用了这种模式,据大部分人反映,用户体验还是很好的:)

  三种模式可谓各有优缺点,如何取舍还是要根据具体项目决定,当然,团队和个人能力也是重要因素。一般来说,程序员出身的可能比较喜欢Flash模式;传统网页设计师出身的一般比较喜欢PS模式;半道出家,什么都懂点的家伙们看了笔者这篇文章后,估计就要开始尝试混合模式了。

本新闻共2页,当前在第1页  1  2

  影视动画培训   北大BEC培训官方报名网站   2008美国夏令营启航官方指定报名网站   2008留学第一站!  
  北师大 火星时代
共举影视动画培训之鼎
  北大BEC培训官方报名网站
现在报名独享93折!
  2008美国夏令营启航!
美之旅官方报名网站
  2008留学第一站
留学资讯尽在精英留学站!
 
上一篇:Flash Web设计如何进行团队协作
下一篇:浅析插画艺术及插画艺术家作品
 相关新闻
·题库:网络设计师训练实战测试试题·位图转矢量图有哪些方法和技巧?
·Flash对联广告及关闭按钮的制作·用Fireworks也能为照片做精美边框
·透明的flash是这样制作出来的·只有八行代码的动态自适应文本框
·玩转 Dreamweaver8.0:速记 CSS 属性·玩转Dreamweaver8:CSS层叠样式表
·DreamweaverASP实现分页技术·Dreamweaver网页制作技巧:使用模板
·Flash技巧代码:播放进度控制·Photoshop常用快捷键大放送
·Photoshop辅助线与标尺应用技巧·Photoshop概念命令总体说明
·Adobe正式停止开发FreeHand 19年寿命终结·Adobe ColdFusion 8 Beta 公开发布
 
◇ 重点栏目导航
◇ 精英服务承诺
教育顾问:010-51660910
QQ交流:138660910
相关资料
·用Photoshop制作逼真自然背景
·PhotoShop帮助Maya巧建模
·道字桌面的仿书法制造
·用Coreldraw绘制美丽国画荷花
·如何配色?无论新手老手,读下这篇文章相
·天使翅膀的制作
·Photoshop制作无缝贴图:Action动作集总
·photoshop学习方法总结
·学好平面设计的好方法
·[艺术设计专题]企业VI系统的简介和工作步
相关试题
·CEAC平面设计师考证之Photoshop考试试题
·你会吗 Adobe Photoshop 认证试题一
·武汉理工大学2003年艺术设计学院平面设计
·你会吗 Adobe Photoshop 认证试题三
·你会吗 Adobe Photoshop 认证试题二
相关热贴
·想学设计课啊,哪位帮我推荐一下~~
·制作个人简历九大标准
·给年轻设计师的十大忠告
·平面设计人员必读 (速读版)
·oracle下导出某用户所有表的方法
·计算机个人简历(英语)
·浅谈计算机课件制作
·一张图透彻讲解Photoshop蒙版
·Delphi中数据的自动录入
·Java与C和C++的比较