浅谈flash web的结构

记得我刚接触FLASH那会儿，应该是FLASH6末期吧，国内的flash web还是很少的，牛X的更是屈指可数，而且这个时候所谓的牛X，一般都是指效果很酷，技术强的基本没有。其实这是必然，国内早期的flash web开发者大都是由FLASH动画制作者或是网页设计师转变而来。他们非常热衷于片头和过渡效果，为此不惜牺牲浏览者的等待时间并吃掉浏览者的CPU。这就是为什么现在好多人一谈起flash web就觉得它体积大，效率低的根源了。当然如果是真对个人网站，这也无可厚非，个人网站信息量小，大多都是一次性浏览的网站，酷眩的效果可以让人过目不忘，尤其是在那个年代，还能让人耳目一新，这是普通HTML网页所不能企及的。印象中最深刻的应该是那款绿色版的龙城闪客，黑客帝国似的特效和动画把我彻底征服。

可是后来MM公司对FLASH的连续两次升级都把重点放在了AS上，AS内置类快速膨胀，功能急速扩展，AS2.0更是趋向标准的面向对象语言。这时候一大批程序员又被吸引进来了，尤其是那些有C或者JAVA背景的牛人们。可惜的是，他们总喜欢用程序员的思维去评判flash web，他们甚至用软件开发的标准去往flash web开发上硬套。结果是必然的，他们失望了，可这时候大部分人不是从自己找原因，他们非常武断的就把责任推给了FLASH：“flash web结构混乱，基于时间轴的AS写法奇怪，flash web不适合大规模的商业应用开发！”。就这样flash web的前途被宣判了死刑。

由于上述flash web在中国的特殊发展历程，造成现在一个非常有意思的现象：很多以前动画很牛的前辈们，都去职业搞动画片制作了，并为FLASH动画的产业化和商业化勇敢探索着，有些已经取得了辉煌成就；而FLASH7之后进来的程序牛人们，直接从事FLASH游戏开发和FLASH RIA应用开发了，他们更习惯基于事件的编程和面向对象的开发模式，时间轴对他们的意义已经不再重要。这样以来flash web开发成为一个中间断档带，也是人才最稀缺的地带。很多目前从事flash web开发的人员应该都是从HTML网页制作人员简单学了一些FLASH后过渡过来的，他们即非动画高手也非程序高手，更多的是网页设计高手。然而这些设计高手又总爱拿FLASH跟PS比，结果flash web开发又没得到好的口碑。flash web现在只好和一群半道出家的非专业人士一起沦落在FLASH业内的最底层——呜呼悲哉！

好在还有火山和像火山一样的少部分理想主义者，并不是把钱当做全部人生追求。至少我现在还是天真的坚持：我要为我的爱好而活，然后用我的爱好赚一点吃饭的钱就可以了，反正我短期内是绝对不会为了赚更多的钱而改变自己的目标的！我从最开始学习FLASH就是以做网站为目的，这两年多来，我所学的一切都是以flash web开发和应用为核心，我几乎尝试了所有常见的flash web结构形式，我时时刻刻的都在考虑如何在保存FLASH优势的情况下，又能开发出有实际应用价值的高效率的商业作品，最终将flash web开发模式化，快速化。

 那么flash web的优势在那里呢？对于展示性的网站，当然是FLASH酷眩的效果，这点已经被大多数人所共识。但对于包含大量信息，需要经常更新的flash web，它的最大优势就不再可能是效果，因为flash的效率实在不敢恭维，大量的效果会影响人们对信息的查询效率，现在网络带宽也不容乐观，大量的动画必将造成SWF体积膨胀，影响浏览速度。那么大中型信息类flash web的优势到底是什么呢？在火山看来，最大优势只有两点而已，一是界面布局灵活，二是数据的无刷新更新。还记得我们以前在DW中拉表格的痛苦吗？还会为了网站布局工整写一堆CSS和JS吗？还用得着每次更新数据就打开一个新页面吗？flash web的两大优势使这些历史的痛苦都成为了过去。而且，这两点如果处理恰当的话，就已经足够给普通的浏览者带来全新的用户体验了。

我的爱好是flash web开发，而这块儿又是人才断档地带，正好适合我这种程序和设计两边都不靠的人生存，天时地利人和，看来flash web开发对我来说真的是天命所归，我还有什么道理不继续坚持下去呢！但毕竟我这两年来一直也都是处在学习和探索阶段，还不是真正的理论研究阶段，两年时间太短了！我的很多想法和理论还很不成熟，甚至是幼稚的。我现在拿出来和大家分享，不求说服谁或者证明什么，只求能给后来人一些启发，同时自己也好好总结一下。下面就粗浅的谈谈我目前对flash web尤其是flash web结构的认识吧。

 

打开68design这类酷站收藏站，我们不难发现现在的flash web真是百花齐放、百家争鸣。形形色色、奇奇怪怪的flash web使人应接不暇、扑朔迷离。自由灵活是flash web的生命力所在，但这也正flash web商业化的主要瓶颈之一。商业最看重的是效率，而无规则便无效率可言。那么flash web是不是真的就一点规律都没有呢？非也！纵观现在所有的flash web（FLASH RIA应用程序除外，比如FLASH涂鸦板、地图等等），不管它们技术怎么牛，效果怎么酷眩，都不能逃脱以下四层结构：

1. 动画层（Movie）
2. 背景层（Background）
3. 数据显示层（Display）
4. 数据层（Data）

这些概念其实都不新颖，看到这些我自创的名词，一些有经验的开发者们肯定立刻都能猜出一二来。但由于这些概念以前并没有权威的提法，至少我没见过，为了以后论述方便，我今天在这里正式恬不知耻的给这种结构起个名字：火山FLASHWEB四层结构式，或者火山MBDD结构式，以下简称MBDD式。如果由于我的孤陋寡闻导致和某些官方或者前辈的提法相似的话，我在这里提前说声：如有雷同纯熟巧合：）

我以下的所有讨论都将紧紧围绕这四层结构进行，因为在我看来，flash web的灵魂就是它的结构，一个flash web的技术含量不是看它某些特效多眩，更不是看这个WEB中有个什么新颖的、牛X的技术应用，关键是要看它通过什么手段有效的把各种元素统一起来的！如果你曾经试图想把flash web做大的话，我相信你在这方面的体会肯定不会比火山少。

最后我要提前说明的一点是，MBDD式是对所有flash web的概述，很多flash web根据其功能不同可能缺失其中某些层，下面我会仔细讲解。

至于flash web涉及的其它方面，我都略过，毕竟我这篇是总结性的文章，不是教程。flash web也不是我一篇文章就能写全面的。

 

早期的flash web大都含有丰富的过渡动画，比较典型的是：龙城闪客和梵天。最新版的龙城闪客还给每个子栏目的过渡也添加了绚丽的动画效果。总的来说动画层可以分为三种：

1. 开场动画
2. 栏目过渡动画
3. 点缀动画

先来谈谈开场动画。开场动画时间一般比较长，反映在时间轴上就是好长好复杂的一段帧结构。第一帧一般是loading画面，最后一帧一般是网站的主框架。这里就存在一个如何安排帧的问题。记得以前见有人在论坛上发帖说flash web最好不要分场景，其实他的说法是片面的，对于没有过渡动画的flash web来说，完全可以这么做，可对于大量过渡动画的flash web就另当别论。如果你不分场景，必然造成代码和动画混杂在一起。而一般来说，控制网站主要功能的代码都在过渡动画之后的帧上，在后续的代码编写过程中，你每次可能都要把时间轴拉到几百甚至是上千帧之后，这也非常的麻烦。火山的建议是：把过渡动画做在一个场景中，然后复制过渡动画最后一帧的网站框架帧到第二个场景中，主要的功能代码也都将集中在这个场景，这样就有效的把动画和代码进行了分离，编写代码时时间轴看上去也舒服些。还有一种比较常见的做法是，给过渡动画加上一个skip按钮，如果浏览者点击了这个按钮，马上就会loadMovieNum(main.swf,0)进一个新的main.swf，而这个main.swf就网站的主框架了。这种做法与前一种其实类似，只不过它把动画和主框架从分在两个场景变成了分在两个SWF，而且还能让浏览者自己选择是否观看过渡动画，有更大的灵活性。

再来谈谈栏目过渡动画。栏目过渡动画主要指在你点击一个导航按钮打开一个新的栏目时所显示的一段动画，还拿最新版龙城闪客举例，它在打开一个新的子栏目时会先把上一个栏目变成很多小方块，然后飞到左边的神秘空间中，这时又从神秘空间里发出一道神秘的光线，并在这道光线的沐浴中出现新栏目的加载画面。我没有破解过最新版的龙城闪客，不知道他到底是怎么安排这个动画的，但我有自己的想法。如果这个过渡动画是集成到主框架的，那过渡动画中最好不要写代码，而是在主场景中通过侦测过渡动画的当前帧和总帧数来确定何时加载子栏目SWF；如果每个子栏目的过渡动画效果不同，那最好把每个子栏目SWF处理成一个独立的网站，其结构应该遵循在“开场动画”中提到的规则。

点缀动画没什么好说的，你把它想象成在HTML网页中起美化作用的GIF动画就好了，当然它比GIF动画更生动，使用也更灵活，还可以具有交互性。

总之我的主要思想就是尽量把动画和代码分开，以便自己以后方便查找和修改代码。同时保证网站结构工整。

 

背景层，顾名思义就是网站的背景，看上去很容易理解也很简单，其实它蕴涵着很多知识和技巧，如果处理不善，将直接影响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模式；半道出家，什么都懂点的家伙们看了火山这篇文章后，估计就要开始尝试混合模式了。

 

前面讲背景层的时候已经提到了数据显示层。由于火山基本不使用组件，所以对火山来说，数据显示层主要是指TextField，或者用MC简单包装的TextField。它们是网站信息的主体部分，一般都是动态的调用外部信息。当然，由于我用MC进行了包装，它们也可以作为按钮使用，比较常见的就是标题列表，比如我主站上三个子站最新发布列表。

就像我前面说过的，数据显示层要尽量的精简体积，它是一个flash web浏览效率的关键，不适合做大量的效果，尤其是位图效果。而它的结构也要尽量清晰且工整，便于代码控制。对于FLASH模式的网站可以考虑直接将TextField放到_root上；而对于PS模式和混合模式，则最好还是用MC对TextField进行包装，以保证网站各栏目的独立性。