[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函数中使用，这样也是一种有效的保护。感觉挺使用的一种方式。