Tools
分类目录
文章归档
标签
ActionScript Android ATF IOS java linux MySql nginx php SmartFoxServer
 
   
09 十一 2013
17

StarlingSwf 快速入门指南

By zmLiu In 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中的最小显示元素
spr，btn，mc这个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.StageWidth – textfield.width)/2;
  27.    textfield.y = (STLConstant.StageHeight – textfield.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