这一篇告诉我们怎么播放一个简单的动画，其实，这个动画是通常意义上的逐帧动画，逐帧动画的优点是运行效率高，但缺点是，如果动画多，素材会相当大。但如果我们把它做成骨骼动画，素材就会小很多，而且可以动态换肤。

还是以那个僵尸为例，我们来教大家怎么做一个骨骼动画。点选僵尸，工具栏选择【转为Flax元件】，在弹出框中选择【一般容器】，素材ID保持不变。

这个时候，我们看元件库，所有僵尸部件都被自动命名了(链接名也就是class名)，凡是被命名的库元件都将被Flax导出。zombieWalk的class名也变为mc.ZombieWalk，mc表示一个容器动画，我们也可以叫骨骼动画，任何场景或者UI都是这个类型，容器本身不会被输出素材，而是输出子元素。

为了实现动态换肤，我们需要给相应的部件实例名，如下图，我们将head层，所有关键帧上的头命名为head,这个head可以在程序中被访问和控制。Flax有命令来实现这个，选中head层，运行 命令->flax->Name Children in Layer，输入head就会把这层所有的头命名为head。

ctr+enter发布，flax自动转换，然后我们看到素材变得很小了。注意戴帽子的僵尸头，是美术创作的另外一个僵尸头anotherHead，用来在程序中动态替换head实例。

代码和以前一样，运行效果一样，只是这是骨骼动画。

点击一下僵尸，你会有惊奇哦，是不是僵尸的头变成了有帽子的了？这是骨骼动画的动态换肤，代码如下：

var SimpleScene = cc.Scene.extend({
    onEnter:function(){
        this._super();
        var zombie = flax.assetsManager.createDisplay(res.zombie, "ZombieWalk", {parent: this, x: 200, y: 50, fps:60});
        zombie.play();
        //监听zombie的鼠标事件
        flax.inputManager.addListener(zombie, function(touch, event){
            //将zombie的脑袋（head）替换成戴帽子的脑袋（anotherHead)
            zombie.replaceChild("head","anotherHead");
        },InputType.click);
    }
});

素材下载