EN中文
开发者社区 > 程序

使用传统swf的方式制作starling UI->StarlingSwf扩展UI

发表于2015-07-31
评论0 1.9k浏览

该扩展是建立在StarlingSwf的基础之上进行编写，能够使你在Starling中开发UI变成简单并且高效，能够将你的注意力全部集中在程序逻辑当中.

目前我所做的项目已经使用了StarlingSwf以及该扩展，开发效率很高，针对复杂的UI也能轻松实现

该扩展的优势

         该扩展主要针对手机开发，当然做页游也可以。

         没有使用过传统swf做UI的可以忽略此处，大家刚开始使用starling的时候通常都是swf+starling进行开发，而这个时候你的UI好多功能在手机上的效果那就不是一个惨字能表示的~比如拖拽，随便拖一下就把你的帧数降到20帧以下，更不要提现在手机上流行的滚动拖拽页面了，而本工具以及StarlingSwf就针对这部分人群，相信已经玩的很转的swf做UI的你们接触应该不会很难，StarlingSwf将你熟悉的Swf以Starling的方式展现给你，而该扩展将在你熟悉的基础上给你更简单方便的UI制作。


       内存方面：大家都知道手机的内存有限，很多时候UI不会进行缓存，然而UI使用完毕之后的销毁将会是一个头疼的问题，使用传统的swf做UI的话，swf文件有时候哪怕你存在了一个引用都不会进行销毁，而其他的场景有可能就差这么点内存就蹦了。该扩展销毁资源的时候采用强制销毁模式，销毁的是你加载的资源，哪怕你正在使用也会销毁。销毁方式：那个类调用了setAssetSource就调用哪个类的dispose();

    销毁特性：通过组件进行引用的成员无需手动"XX=null"与无需手动"dispose()"，组件内部会在销毁的时候自动销毁已同步的成员。


使用之前的准备步骤：

         首先呢，你需要了解StarlingSwf工具的基本使用。

你需要使用StarlingSwf将你的swf来进行导出，导出的3个文件建议放到一个文件夹下，例如：
          111.png 

在程序中使用：

         在使用该扩展之前你需要初始化两个地方：


  1. Swf.init(stage); //只有初始化该信息才能使用SwfMovieClip
  2.         JISConfig.windowStage = starling.display.DisplayObjectContainer; //只有设置该值才能使用JISWindow
复制代码


建立第一个Window

    比如我们第一个Window命名为JISMainUIWindow
  1.        //我们需要在构造函数中调用父类构造
  2.         super(“spr_TestWindow”,”test”);
  3.         //然后设置窗口资源
  4.         setAssetSource(File.applicationDirectory.resolvePath("assets/ui/test/"));
  5.         //调用show();
  6.         show();
复制代码

    这样window就开始加载并且在加载完毕之后显示了。
    其中super的两个参数第一个为window的导出链接名字
          222.png 
    第二个参数为文件的名字
          
           setAssetSource可以设置一个File，如果是文件夹的话，会扫描文件夹下所有文件，如果你的是web资源的话，你可以设置一个Url数组：
  1. [“../assets/ui/test/test.bytes”, “../assets/ui/test/test.png”, “../assets/ui/test/test.xml”]
复制代码

    如此，我们的第一个Window就创建好并能够显示了。

管理Window中的组件：

         我们的window中有个组件名字为_BtnList,如图：
       333.png 

    这个组件内部为4个按钮，命名分别为：_Btn_1、_Btn_2、_Btn_3、_Btn_4

         按钮是一个mc，导出的也是mc，如图：
       444.png 

    我们可以使用JISCuttingButtonGroup进行管理我们的btn列表，如下代码：


  1. public var _BtnList:JISCuttingButtonGroup;
  2. public function JISMainUIWindow()
  3. {
  4.         _BtnList = new JISCuttingButtonGroup("_Btn_",JISButton);
  5.         super("spr_TestWindow", "test");
  6. setAssetSource(File.applicationDirectory.resolvePath("assets/ui/test/"));
  7. }
复制代码

      _BtnList必须为public类型，并且必须在setAssetSource之前实例化

JISCuttingButtonGroup的第一个参数为需要管理的组件的共有特征命名，第二个参数是设置组件有哪个类进行管理，初始化的时候会new该类，并将按钮显示对象通过setCurrDisplay传入进去。

进行管理之前我们的btn是不断闪烁的，管理之后我们的btn会有一个为选中状态，其他为正常状态

管理window中的对象：

         我们的示例文件中有一个空的影片剪辑和一个按钮，如图：
       555.png 
       666.png 
      

    由于我们的_ScrollTable是Sprite类型，为系统组件，所以不用提前new出来，我们的_AddTableCellBtn是自定义组件，所以需要事先new出来，代码如下：

  1. public var _ScrollTable:Sprite;
  2. public var _AddTableCellBtn:JISButton;
  3. public function JISMainUIWindow()
  4. {
  5.         _AddTableCellBtn = new JISButton();
  6.         super("spr_TestWindow", "test");
  7.         setAssetSource(File.applicationDirectory.resolvePath("assets/ui/test/"));
  8. }
  9. 现在我们创建一个JISScrollTable添加到_ScrollTable中，

  11. /** init会在资源加载完毕并且建立引用之后调用 */
  12. protected override function init():void
  13. {
  14.         tableScroll = new JISScrollTable();
  15.         _ScrollTable.addChild(tableScroll);
  16.         tableScroll.getTable().setCellInstanceClass(JISTableTestCell);//设置Table创建个显示对象类型
  17.         tableScroll.getTable().setPreferredWidth(100);//设置Table最大宽度
  18.         tableScroll.getTable().setPreferredCellWidth(48);//设置每个格子宽度，默认为JISTableTestCell#getDisplay()的宽度
  19.         tableScroll.getTable().setPreferredCellHeight(35);//设置每个格子高度，默认为JISTableTestCell#getDisplay()的高度
  20.         //tableScroll.getTable().setIsRow(true);//设置表格布局方式，true横向布局,false竖向布局
  21.         var cellList:Array = [];
  22.         for(;btnIndex<100;btnIndex++) cellList.push(btnIndex);
  23.         tableScroll.width = 100;//设置滚动区域的宽度
  24.         tableScroll.height = 200;//设置滚动区域的高度
  25.         tableScroll.getTable().setCellDatas(cellList,this.getSourceSwf());//创建格子内容
  26.         //按钮点击事件                                        _AddTableCellBtn.addEventListener(JISButton.BOTTON_CLICK,onBtnClickHandler);
  27. }
  28. private function onBtnClickHandler(e:Event):void
  29. {
  30.         tableScroll.getTable().addCellData(btnIndex++,this.getSourceSwf());//添加新的格子
  31. }
复制代码
      

      JISTableTestCell的代码：

  1. package
  2. {
  3.         import jis.ui.JISUISprite;
  4.         import jis.ui.component.JISITableCell;
  5.         
  6.         import lzm.starling.swf.Swf;
  7.         
  8.         import starling.display.DisplayObject;
  9.         import starling.text.TextField;
  10.         
  11.         
  12.         /**
  13.          * 
  14.          * @author jiessie 2013-11-27
  15.          */
  16.         public class JISTableTestCell extends JISUISprite implements JISITableCell
  17.         {
  18.                 public var _Text:TextField;
  19.                 public function JISTableTestCell(swf:Swf)
  20.                 {
  21.                         super("","");
  22.                         setCurrDisplay(swf.createSprite("spr_TableCell"));
  23.                 }
  24.                 
  25.                 public function setValue(value:*):void
  26.                 {
  27.                         _Text.text = value;
  28.                 }
  29.                 
  30.                 public override function getDisplay():DisplayObject
  31.                 {
  32.                         return this;
  33.                 }
  34.                 
  35.                 public function selected(select:Boolean=false):void
  36.                 {
  37.                 }
  38.                 
  39.                 public function getValue():*
  40.                 {
  41.                         return _Text.text;
  42.                 }
  43.                 
  44.                 public override function dispose():void
  45.                 {
  46.                 }
  47.         }
  48. }
复制代码

      我们可以看到JISTableTestCell中的构造函数需要一个Swf对象，而创建格子的参数中

  1. tableScroll.getTable().setCellDatas(cellList,this.getSourceSwf());//创建格子内容
  2. tableScroll.getTable().addCellData(btnIndex++,this.getSourceSwf());//添加新的格子
复制代码
         都会传入一个Swf对象，这就可以看出setCellDatas和addCellData会在创建JISTableTestCell的时候将swf传入。
             JISTableTestCell继承JISUISprite说明JISTableTestCell可以使用该扩展进行管理UI，其中的setCurrDisplay(swf.createSprite("spr_TableCell"));为从资源库中创建一个sprite赋值给当前类，然后当前类会进行管理其中的内容，我们可以看下资源：

          777.png


        而我们的JISTableTestCell中也有个_Text属性。

         JISTableTestCell中的setValue()可以输出通过setCellDatas和addCellData中设置的值。如此一个支持触控滑动的滚动界面就完毕了，跟手机上绚丽的滑动效果一样哦。


自定义组件管理：

         如我们的演示资源中有个进度条面板，其中有_ProgressText、_RowProgress、_AddBtn、_DecBtn

         其中_RowProgress是一个mc，其中存在一个背景和一个前景，前景我们命名为_Center，因为扩展提供的JISUIProgressManager需要进度条的名字为_Center，如图：

         888.png 
         该组件在window中的名字为_ProgressTest，如图：
      999.png 
        我们建立对应_ProgressTest的类，
     
  1. package
  2. {
  3.         import jis.ui.JISUIManager;
  4.         import jis.ui.component.JISButton;
  5.         import jis.ui.component.JISUIProgressManager;
  6.         
  7.         import starling.events.Event;
  8.         import starling.text.TextField;
  9.         
  10.         
  11.         /**
  12.          * 
  13.          * @author jiessie 2013-11-27
  14.          */
  15.         public class JISProgressTestUIManager extends JISUIManager
  16.         {
  17.                 public var _RowProgress:JISUIProgressManager;
  18.                 public var _AddBtn:JISButton;
  19.                 public var _DecBtn:JISButton;
  20.                 public var _ProgressText:TextField;
  21.                 
  22.                 private var currProgress:int = 0;
  23.                 
  24.                 public function JISProgressTestUIManager()
  25.                 {
  26.                         _RowProgress = new JISUIProgressManager();
  27.                         _AddBtn = new JISButton();
  28.                         _DecBtn = new JISButton();
  29.                         super();
  30.                 }
  31.                 
  32.                 protected override function init():void
  33.                 {
  34.                         _AddBtn.addEventListener(JISButton.BOTTON_CLICK,noxssAddHandler);
  35.                         _DecBtn.addEventListener(JISButton.BOTTON_CLICK,noxssDecHandler);
  36.                         updateProgress();
  37.                 }
  38.                 
  39.                 private function noxssAddHandler(e:Event):void
  40.                 {
  41.                         if(currProgress < 100)
  42.                         {
  43.                                 currProgress ++;
  44.                                 updateProgress();
  45.                         }
  46.                 }
  47.                 
  48.                 private function noxssDecHandler(e:Event):void
  49.                 {
  50.                         if(currProgress > 0)
  51.                         {
  52.                                 currProgress --;
  53.                                 updateProgress();
  54.                         }
  55.                 }
  56.                 
  57.                 private function updateProgress():void
  58.                 {
  59.                         _RowProgress.setProgress(currProgress,100);
  60.                         _ProgressText.text = currProgress+"/100";
  61.                 }
  62.         }
  63. }
复制代码
        你可以看到JISProgressTestUIManager是继承的JISUIManager，代表他只是管理UI，不会进行addChild操作

         JISProgressTestUIManager中的成员与mc中的成员命名一模一样，层级结构也很类似，只不过一个是代码的层级结构(对象包含属性)，一个是显示对象的层级结构(mc包含mc、TextField)


组件一览：

         
  1. JISButton  按钮，实际上就是包装了一个SwfMovieClip，每帧代表的含义参考静态DEFULT、GLIDE、CLICK、SELECTED、ENABLE所代表的帧数
  2.          
  3. JISButtonGroup JISButton集合管理，该集合管理的按钮同一时间只能选择一个 用法：初始化传入JISButton集合或者是通过setBtnList设置集合 当设置集合或者是选中按钮的时候会抛出CLICK_BTN事件和调用selectHandler函数，也可以当成组件来使用，会自动扫描子显示对象是否为SwfMovieClip，如果是则创建JISButton进行管理
  4.     
  5. JISCuttingButtonGroup 集成JISButtonGroup的JISDisplayCutting，会将切割的管理对象交由JISButtonGroup进行管理
  6.          
  7. JISDisplayCutting 切割显示对象管理，管理一个sprite中命名规则如：g1、g2、g3...这种以固定标识开头的显示对象 你可以通过初始化的时候传入标识字符和切割后进行管理的类，程序会在切割的时候自动创建对应的管理类，然后交由管理类来进行管理该显示对象 管理类必须为JISUIManager的子类 通过该类进行管理子对象的话，子对象必须实现JISIDisplayCuttingCell接口
  8.          
  9. JISIconManager 图标管理类,内部封装了JISImageSprite，使用该类的话Sprite中必须包含一个命名为_IconMovie的Sprite
  10.          
  11. JISIDisplayCuttingCell 只有实现该接口JISIDisplayCutting才能通过setSpliceMovieDatas、setSpliceMovieData、setSpliceMovieDatasForIndex、setSpliceForIndex、setSpliceForLast 进行动态添加内容
  12.          
  13. JISIDisplayCuttingCellData 数据实现该接口的话可以动态的将数据通过JISDisplayCutting进行赋值

  15.          JISImageSprite 图片容器，可以加载一个图片进行显示

  17.          JISISpriteManager 管理UI接口 通常情况下从swf中获取的显示对象是美术人员制作好的一整个UI，我们需要通过引用的方式来管理这些UI中零散的显示组件， 实现该接口的对象会由JISManagerSpriteUtil调用setCurrDisplay的方式设置一个显示对象， 如果你需要的只是简单的引用请不要addChild。 设置引用采用的为递归的方式，只要成员是实现该接口的类，就可以无限递归 规则： 1.子类属性名必须是public类型 2.子类属性名必须与显示对象name相同 3.如果不是系统组件的话需要在构造函数中new出来 示例: public var _Text:TextField; public var _Btn:JISButton; public function test() { _Btn = new JISButton(); } 对应swf的display display.getChildByName("_Text")为TextField
  18. display.getChildByName("_Btn")为SwfMovieClip
  19.          
  20. JISITableCell  添加表格中显示内容的话必须实现该接口
  21.          JISProgress 进度条，该进度条不为UI组件，如果想在UI中使用的话请使用JISUIProgressManager
  22.          JISScrollTable  能够滚动的Table,操作table内容的话请调用getTable()获取JISTable实例
  23.          JISSimpleLoaderSprite 加载模版，子类可以直接继承该类实现加载资源并显示的功能 使用方式：通过本类setAssetSource的方式设置加载内容，加载完毕之后会调用子类loadComplete方法
  24.          
  25. JISTable 表格
  26.          JISUIEffect 管理UI中的特效，目前只支持特效从xx帧播放到xx帧，每次调用start都会从指定起始帧开始播放
  27.          JISUIManager ui管理，该类管理的UI不会进行addChild操作，只会当作引用来进行管理
  28.          JISUIMovieClipManager 该类只是将管理的display转换为SwfMovieClip，方便使用
  29.          JISUIMovieClipSprite 该类只是将管理的display转换为SwfMovieClip，方便使用
  30.          JISUIProgressManager 管理UI中的进度条组件，UI需要具备命名为_Center的Display，当设置进度的时候会改变_Center的width或者height属性，建议_Center为Scale9Image 可选组建_Text类型为TextField，存在该组件的话，会在设置进度的时候赋值“当前进度/最大进度”
  31.          
  32. JISUISprite UI基础类,该类负责将swf中内容进行同步以及显示
  33.          JISUIWindow  窗口，可选按钮_Close，必须符合JISButton按钮标准，如果该按钮存在，那么点击该按钮会关闭窗口
  34.          JISUIWindowManager UI中管理窗口，比如设计UI的时候窗口中存在2级窗口，就可以使用该窗口进行管理，初始化的时候会关闭2级窗口 可选按钮_Close，必须符合JISButton按钮标准，如果该按钮存在，那么点击该按钮会关闭窗口
复制代码

通常情况下我们都是JISWindow或者是JISUISprite下包含一堆的JISUIManager以及子类，然后JISUIManager中再包含一堆的JISUIManager以及子类。

这么一种组件套组件下来就很简单的用程序管理一套复杂的UI了。

如社区发表内容存在侵权行为，您可以点击这里查看侵权投诉指引

标签：

flash游戏开发游戏视觉StarlingList大型多人在线