Tools
分类目录
文章归档
标签
   

StarlingSwf 快速入门指南

Swf数据导出工具,像传统Flash AS3开发一样在Starling上开发!

很多同学使用过程用遇到了问题。我开了一个QQ群。有问题的同学可以进来问一下群号是168436154。StarlingSwf

 

目录

  1. StarlingSwf是什么
  2. 功能与特色
  3. 下载与安装
  4. 教程一:资源命名规则
  5. 教程二:针对设计师
  6. 教程三:针对程序
  7. 教程四:MovieClip自动停止播放
  8. 教程五:获取界面上的元素
  9. 教程六:ATF批量导出工具如何使用
  10. 视频教程
  11. 自定义组件
  12. 粒子集成
  13. 成功案例
  14. 捐助StarlingSwf
  15. as3-0基础StarlingSwf移动开发教学(基础差的同学可以看这里)

StarlingSwf是什么

StarlingSwf是一套2D动画+布局框架和工具,它包含了基于Swf的数据导出工具以及AsctionScript框架。

它可以让开发者运用熟悉的Flash Pro元件及时间轴编辑方式,快速创建2D动画+布局,并运用到Starling或其他技术的应用中。

 

功能与特色

  1. 一键导出Swf数据到Starling中。
  2. 在Starling中还原Swf中元件的层级关系、动画、原件属性。
  3. 操作界面元素方便。UI制作成本大大降低。
  4. 支持原件嵌套,动画嵌套。
  5. 支持粒子绑定,方便制作粒子动画,粒子组合。
  6. MovieClip基本还原了传统Flash的MovieClip。
  7. 使用了类似骨骼动画的思想,内存占用低、运行效率高。
  8. 自动合并纹理,并且可以自动单独导出大图。
  9. 自定义组件系统,组件一次封装重复使用。
  10. 支持部分滤镜

下载与安装(点我)

 

教程一:资源命名规则

既然是Swf那么资源的编辑肯定还是用Flash Pro了,但是资源的命名规则大家需要注意下(
是AS链接名称噢
)

  • img 开始会被识别为starling.display.Image(
    这个必须是元件。不能直接用图片
    ,导出之后该原件会直接被映射为一张图片)
  • s9 开头会被识别为feathers.display.Scale9Image。(元件需要启用9宫格参考线)
  • btn 开头会被识别为lzm.starling.display.Button。(这个按钮不是传统flash中的按钮)
  • mc 开头会被识别为lzm.starling.swf.display.SwfMovieClip
  • spr 开头会被识别为starling.display.Sprite
  • TextField 直接写就行,最后会被识别为starling.text.TextField
  • shapeImg 开头会被识别为lzm.starling.swf.display.ShapeImage,使用纹理填充的图片(会自动使用初始化的Texture填充)。
  • comp 开头会被识别为带特殊功能的组件。
  • particle 开头会被识别为粒子。
img是StarlingSwf中的最小显示元素
sprbtnmc这个3个类是容器类。可以嵌套其他任意控件。

 

教程二:针对设计师

  •  作为设计师,你只需要准备好需要展示的图片,在Flash Pro中将他们有序的组装起来。并且为需要导出的原件设置链接就可以了搞定一切,如下图:
  • 相关资源编辑好之后导出Swf。
  • 打开StarlingSwf导出工具,选择刚刚导出的swf。选择相应的控件,这里会以fla中的AS连接作为索引,预览在Swf内部的元件在Starling中是什么样子,如图:
  • 点击导出按钮。导出之后会在导出目录下,以选择的Swf名字,创建一个文件,文件夹内部存放了Swf导出之后的数据,如图:

 

教程三:针对程序

  • 建立一个Actionscript工程。(demo中是手机工程)
  • 导入资源
  • 导入依赖库

  • 关键代码:
//初始化Swf
  1. Swf.init(Starling的根容器);
  2.  
  3. //创建一个Swf(`test`对应生成`.bytes`文件的名字)
  4. var swf:Swf = new Swf(assets.getByteArray("test"),assets);
  5.  
  6. //根据as连接名称创建 显示对象
  7. swf.createSprite("spr_1");
  8. swf.createMovieClip("mc_test1");
  9. swf.createImage("img_test1");
  10. swf.createButton("btn_test1");
  11. swf.createS9Image("s9_test1");
  •  demo中的主要代码:
package
  1. {
  2.  import flash.filesystem.File;
  3.  
  4.  import lzm.starling.STLConstant;
  5.  import lzm.starling.STLMainClass;
  6.  import lzm.starling.swf.Swf;
  7.  import lzm.starling.swf.SwfAssetManager;
  8.  
  9.  import starling.display.Sprite;
  10.  import starling.text.TextField;
  11.  import starling.utils.formatString;
  12.  
  13.  public class TestMainClass extends STLMainClass
  14.  {
  15.  
  16.   private var textfield:TextField;
  17.   private var assets:SwfAssetManager;
  18.  
  19.   public function TestMainClass()
  20.   {
  21.    super();
  22.  
  23.    Swf.init(this);//初始化Swf
  24.  
  25.    textfield = new TextField(200,100,"loading….");
  26.    textfield.x = (STLConstant.StageWidthtextfield.width)/2;
  27.    textfield.y = (STLConstant.StageHeighttextfield.height)/2;
  28.    addChild(textfield);
  29.  
  30.    assets = new SwfAssetManager(STLConstant.scale,STLConstant.useMipMaps);
  31.    assets.verbose = true;
  32.    var file:File = File.applicationDirectory;
  33.    //加载相关资源
  34.    assets.enqueue("test",[file.resolvePath(formatString("assets/{0}x/test/",STLConstant.scale))],60);
  35.    assets.loadQueue(function(ratio:Number):void{
  36.     textfield.text = "loading…." + int(ratio*100)+"%";
  37.     if(ratio == 1){
  38.      textfield.removeFromParent(true);
  39.  
  40.      test1();
  41. //     test2();
  42.     }
  43.    });
  44.   }
  45.  
  46.   private function test1():void{
  47.    var sprite:Sprite = assets.createSprite("spr_1");
  48.    addChild(sprite);
  49.   }
  50.  
  51.   private function test2():void{
  52.    var sprite:Sprite = assets.createSprite("spr_particle");
  53.    addChild(sprite);
  54.   }
  55.  }
  56. }

  • 运行效果

 

教程四:MovieClip自动停止播放

很多时候需要让动画播放完毕之后自动停止在最后一帧,在工具中也可以很简单的实现

  • 导入swf
  • 从MovieClip列表中 选中需要自动停止的MC
  • 取消
    是否循环

 

教程五:获取界面上的元素

很简单,首先给元素命名

 然后使用
getChildByName
获取

教程六:ATF批量导出工具如何使用(点我)

 

自定义组件(点我)

 

粒子集成(点我)

 

成功案例

 

捐助StarlingSwf(点我)

 

11 Comments

Post A Comment