[feather]StarlingUi框架——初识feather、界面启动及Ui加载

这个星期六星期天，一是完结上周遗留下来的事情，也就是用feather来做一个应用；二是将这周的3D知识好好的记录和汇总一下。

feather初识：

这是一个基于Starling的Ui框架集，Starling的效率让人毋庸置疑很适合移动平台，并且现在Starling的官方包也都默认整合feather的包下载，wiki百科上也能看到一些信息和教程。但是富于案例性质的整合案例没有，只有基本的组件代码示例，并且有些资料还都在给的example的源代码里面，以及最近汇总的很零散的别人的博客空间里面，官方教程上也没有很好的更新。上一周做了一个应用，涉及到了List,ScrollContainer,tabBar,Screen,ScreenNavigator,这些常用组件的使用，并且不可避免的得应用到渲染器，所以将这一个项目碰到的一些知识点，好好的总结一下，以备后用。

feather知识点：

最近总结下来，发现如果在学习一套新的Ui框架，有几个点是回避不了得，这是我自己总结的方面。希望能被多发现一些问题，以待后面补充学习。

1、界面启动及资源加载

2、Screen及Panel

3、组件库使用及渲染器

4、事件机制

5、自定义组件

6、自定义皮肤

feather界面启动及资源加载：（详参官方压缩包里面自带的example,与官方命名规则略有不同）

因为feather是基于Starling的，所以最初初始化参数信息做屏幕自适应等都与Starling一致，但是由于资源加载以及本身的机制造成MVC的脱离，有自己的一套结构。

由于Starling在启动的时候，得等到资源全部加载完毕才会进入相应的界面。这一段加载资源的空白，是不能够留给用户的，所以在Main.as的启动时，就应当异步加载资源，先放一个默认界面。

1、Main.as

//欢迎页面背景
[Embed(source="res/welcome.jpg")] public static var WelcomePic:Class;
        
public function Main()
{
            
    //调整对齐方式
    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
            //初始化宽高
    Constant.STAGE_WIDTH = stage.fullScreenWidth;
    Constant.STAGE_HEIGHT = stage.fullScreenHeight;
            //设置资源管理
    var assetsManager:AssetManager = new AssetManager();    

    //EmbeddedAsstes为所有图片资源通过Embed加载资源集合类 
    assetsManager.enqueue(EmbeddedAsstes);            
    var s:Starling = new Starling(Assets,stage);
    //设置长宽
    s.stage.stageWidth = Constant.STAGE_WIDTH;
    s.stage.stageHeight = Constant.STAGE_HEIGHT;   
    //关闭多点触控
    s.simulateMultitouch = false;
    //Stage3D渲染方法是否报告发生错误
    s.enableErrorChecking = false;
    //抗锯齿1~16 差别不大
    s.antiAliasing = 1;
    //显示FPS
    s.showStats = true;
    //调整帧率
    stage.frameRate = 60;
            
    var background:Bitmap = new WelcomePic();
    background.width  = Constant.STAGE_WIDTH;
    background.height = Constant.STAGE_HEIGHT;
    background.smoothing = true;
    addChild(background);
            
    //启动Assets类加载资源，在启动前先放一个默认页面background
    s.addEventListener(starling.events.Event.ROOT_CREATED, 
            function onRootCreated(event:Object, app:Assets):void
            {
                //将监听移除，并将默认页面移除，并置空
                s.removeEventListener(starling.events.Event.ROOT_CREATED, onRootCreated);
                removeChild(background);
                background = null;
                    
                var bgTexture:Texture = Texture.fromEmbeddedAsset(WelcomePic);
                    
                app.start(bgTexture,assetsManager);
                    
                s.start();
            });
    }

显示资源加载过程当中的默认页面，并且异步启动Assets资源加载代码如下，当完成资源加载之后再跳转到其他的界面。

2、Assets.as

private static var _mAssets:AssetManager;
        
private var mActiveScene:Sprite;
        
public function Assets(){}

public function start(background:Texture,tassets:AssetManager):void{
            
    _mAssets = tassets;
            
    var image:Image = new Image(background);
    image.width = Constant.STAGE_WIDTH;
    image.height = Constant.STAGE_HEIGHT;
    this.addChild(image);
            
    tassets.loadQueue(function onProgress(ratio:Number):void
    {    
                
        if (ratio == 1)
            Starling.juggler.delayCall(function():void{
                    image.removeFromParent(true);
                    showScene(Controller);
                        
                    // 官方例子推荐，最佳清理时间!

                       System.pauseForGCIfCollectionImminent(0);
                    System.gc();
            }, 3);//后一个参数3，为该函数执行的延迟时间也就是什么时候欢迎页结束
    });
}
//用于屏幕切换
private function showScene(screen:Class):void
{
    if (mActiveScene) mActiveScene.removeFromParent(true);
    mActiveScene = new screen();
    this.addChild(mActiveScene);
}

//获取mAssets,因为是静态的
public static function get mAssets():AssetManager
{
    return _mAssets;
}

如果你看到这一个函数了，那么欢迎页的代码算是完成了，并且资源也就加载完毕了，至于欢迎页结束进入的Controller.as这个类，则是我们的整个控制层，负责哪一个页面的展现和调配，一会儿再总结吧。

上面并不是将自己的资源管理器定义为公开的静态函数，因为start方法，我们需要调用但是又不想将此函数静态的公开访问，通过get方法来在start函数中使用，这样也是一种有效的保护。感觉挺使用的一种方式。