Flash整站项目Gaia框架总结(1)AS3部分

在Disney项目用了些新技术，主要用的是kevinCao整编的Flash网站框架——Gaia+RobertLegs+FDT。其他的还有JQuery。这里只是Gaia部分的总结。
首先得说一下，由于网站是改版，是把以前有的Flash游戏加上新的游戏，整合在一起，拼装起来。游戏有的是用AS2写的，有的是AS3。项目的关键是兼容，为了多快好省完成任务，采用取其精华去其糟粕的做法：
1 首页+各场景，用Flash做，用Gaia框架，AS3
2 游戏+提示框，用div浮层做，本来用JQuery，由于其Flash组件不兼容，就自己写JS了。
看上去就是大杂烩。

跳转游戏是打开div浮层子页有的是AS3，有的是AS2。所以AS2只有回调部分用到了Gaia，但一回调就调出了问题。

先来狠的，下面这些地雷在用Gaia时要死死记住：
1 AS2不能用getURL来调用js，必须用ExternalInterface.call("myMethod");
这是SWFAdress的bug，因为Gaia内置SWFAdress，所以乍眼一看，是Gaia的bug。这个bug很经典。详情见此。
2 如果做好全站测试时，遇到火狐浏览器的标题栏不变的问题，不用考虑解决了，这是火狐的本身bug
我用的firefox版本是3.6.18。这个版本在网页跳转新窗口时，不会改变标题栏的内容。网页尚且如此，Gaia也难以挽救。
下面这些问题比较简单，属于基础的基础，熟读API就可以知道，但是有些事不是因为简单就不去做，记下来是怕以后忘记：

1  控制父级页面内容

要在子页控制父级页面内容，比如跳到子页A，要让导航条的按钮A高亮。就要获取页面，分支作参数。

Gaia.api.getPage("index/nav");

当然，也可以用自定义事件的方式做，不过自定义事件要注意删除事件。这个直接调用，就不存在删除事件这一步了。

2   在浏览器标题栏显示中文

要让浏览器的标题跟着Flash内容变。比如跳到子页A，浏览器地址栏显示http://website.com/#/pageA，标题栏显示“子页A”。
如果是老外，只管英文，那很简单，什么都不用动，用title就行了。但我们用中文标题，用title会让浏览器转跳失效。所以用route代替。Gaia没有提供获取当前route的方法，得绕一圈来获取当前route

    var branch:String=Gaia.api.getCurrentBranch();
    var route:String=Gaia.api.getPage(branch).route;
    Gaia.api.setTitle(Gaia.api.getSiteTitle()+route);
    Gaia.api.goto(branch);

3   调JS是用Tracking类还是ExternalInterface

 Gaia调用JS，用Gaia的工具类，比如调用JS的Alert方法：

    Tracking.track("alert", route);
    直接这样用会报错，因为AS3不支持在Flash里直接调用JS，只能在浏览器环境下调用JS。所以，想要单单在Flash测试而不报错，就要多做一步，加个判断：

    if(ExternalInterface.available){//只有ExternalInterface可用时才执行JS调用。
        Tracking.track("alert", route);
    } 

4     Flash的seo优化，实际就是指一个page.swf对一个html页面。Gaia也不例外。提供给搜索引擎搜索的文本写在html的copy节点下面。
    在AS里可以用page类的copy属性取html的copy值。
    直接在Page类里写this.copy是取不到值的，会得到null，只有site.xml的page节点的seo="true"，才可以取到值。

            for (var myCopy:String in this.copy)
            {
                trace(this.copy[myCopy]);
            }     

    如果设置seo为true，而有没有这个html，Gaia会在内部报错，会反映在，Firebug里。但不影响AS执行。    

5 Gaia的Page类的assets属性，会报错说assets没有属性，其实意思就是assets=null，这个时候，用hasOwnProperty都是失效的，因为根本就没有这个值，这是编译时刻报的错，不要管他。只用改成引号数组取值，即原来是assets.panel，改成assets["panel"]。编译后，就可以正常执行。

6 AS2时代，调试用FireFox的trace插件。AS3时代，调试用monstaer，不要用自定义的调试面板来调试，不管是Gaia项目，还是别的框架，这样给自己很大的负担，做无用功。这样路径会很麻烦。

7 放在Page上的assets，有2种做法：
1）用Flash软件生成swf，作为Assets加载。像disney项目的logo，开场动画。它不用在FDT里执行复杂操作。的发布设置。我觉得这种形式用在没有交互的情况，比如FLV影片。
2）用FDT编译swf，分2步，先在Flash软件做好Flash动画，发布成SWC，再用FDT直接导入SWC，编写代码时能够直接找到这个类。像Disney的各个场景，各个面板模块。这样一来，就可以用RobotLegs来编写AS。在代码工整和维护上进步不少。
补充：assets可以继承Page，Kevincao的代码是支持的。
注意：作为Assets直接加载在Page的SWF资源，如果只有一帧，如果是动画，要在第一帧写Stop(),或者确保回到第一帧。

下面这些地方，有问题：
8     Gaia的JS控制浏览器地址栏转跳，可以分解成这样几步：
1 我调用Gaia.api.goto(branch)
2 Gaia调用swfAddress
3 swfAddress的JS改href参数
4 浏览器解释JS，改变地址栏
如果是单个Flash，这个功能没有问题。
但我遇到的情况是，FlashA调用JS，JS调用FlashB，FlashB执行地址栏转跳，就有问题了。
我输出，没有得到地址栏，这怎么解释？

应该是浏览器在解释JS上出了问题。像这种死在胡同的事，真让人抓狂。
Disney项目充分的说明了不要把宝押在JS上，JS很不稳定，在浏览器的兼容上。

9 单帧

10 Gaia的asset再读XML的时候，已经使用了随机参数，就是说，你每访问一次这个页面下的asset，他就能重新加载。这就不用自己写XML加载解析代码了。

此外，还存在下面问题：
1
Disney HAL项目的功能小结
这些都是可以单独拎出来的各个独立的功能模块。
1 深度链接（deeplink）
2 site.xml结构
    这次用Gaia的结构是默认的main/home/nav，其实，nav和home可以合在一起。deeplink的跳转写在nav的里面。
    onDeeplink。
Less is More,文件越小，结构越小，越不会犯错。这要看我自己的取舍了。
3     JS加载条
    JS加载条有2种做法。一是用GIF图片，二是用Flash。
    GIF动画，我测试过，GIF动画要要针对背景颜色，因为GIF的透明图片边缘有锯齿，锯齿的颜色必须和背景色一样，比如Adobe的下载Flex时，会弹出一个下载框，其实就是调用了一张GIF图片，注意这个GIF的周围是有白色马赛克的。单独制作，我尝试过在Flash里做动画，再用软件转成GIF，但没有得到完美的GIF，所以HAL用的仍旧是Flash。，使用工具是。
这一次就是的。

附录

官网

范例1 在单个swf中切换深度链接，