AS3 Flixel - Building UI externally

Question

I use a ton of XML in my game. This was partly influenced by my time spent modding an old PC game called Dungeon Siege, which used skrit files like external instructions for the game engine to parse.

I have been able to get extremely basic UIs/ menus from this approach, but manually entering each value for each component is getting to be a pain with little payoff. I have been looking into different UI approaches that still satisfy my need for external "instruction" files. The most attractive to me is Adobe Photoshop to HTML. something like this -> http://www.psdtoweb.de/ .

It organizes all elements in a PSD into html and image files - exactly what I need... If only I could access it within my code. I downloaded HTMLWrapper, http://www.as3gamegears.com/misc/htmlwrapper/, but have no idea how to use it with local files.

I would just like a visual UI building program that exports to an AS3 usable format. Any suggestions?

If you're curious about my existing code/approach here's some code and XML:

package com.MenuFactory.Objects 
{
import flash.geom.Point;
import com.MenuFactory.Utils.FlxGroupXY;
import org.flixel.FlxSprite;
import org.flixel.FlxG;
import org.flixel.FlxText;

/**
 * ...
 * @author PHaZerous
 */
public class MenuLayer extends FlxGroupXY
{
    public var layerXML:XML;
    private var layerNum:int;

    public var mItems:Vector.<MenuItem> = new Vector.<MenuItem>;
    private var positions:Vector.<Point> = new Vector.<Point>;
    private var boxSizes:Vector.<Point> = new Vector.<Point>;

    private var titleLabel:FlxText;
    public var descriptionText:FlxText;
    public var currentItem:MenuItem;
    public var previousItem:MenuItem;
    public var highlightColor:uint;
    private var background:FlxSprite;

    public function MenuLayer(_layerXML:XML) 
    {
        layerXML = _layerXML;

        importObjects();

        // Set up defaults.
        layerNum = layerXML.meta.layerNum;
        currentItem = mItems[layerXML.meta.currentItem];
        currentItem.highlight(highlightColor);

        displayObjects();
    }

    private function importObjects():void
    {
        //////////////////////////////////////////////////////
        // Background
        background = new FlxSprite(0, 0);
        background.makeGraphic(FlxG.width, FlxG.height, layerXML.meta.backgroundColor);
        add(background);

        //////////////////////////////////////////////////////
        // IMPORT POSITIONS
        var tempPoint:Point;
        for (var j:int = 0; j < layerXML.positions.children().length(); j++)
        {
            tempPoint = new Point(layerXML.positions.children()[j].@x, 
                                  layerXML.positions.children()[j].@y);
            positions.push(tempPoint);
        }

        //////////////////////////////////////////////////////
        // IMPORT BUTTON SIZES
        var tempPoint2:Point;
        for (var k:int = 0; k < layerXML.boxSizes.children().length(); k++)
        {
            tempPoint2 = new Point(layerXML.boxSizes.children()[k].@width, 
                                  layerXML.boxSizes.children()[k].@height);
            boxSizes.push(tempPoint2);
        }

        //////////////////////////////////////////////////////
        // IMPORT MENU ITEMS
        var loopNum:int = layerXML.mItem.length();
        for (var i:int = 0; i < loopNum; i++)
        {
            var item:MenuItem = new MenuItem(0, 0, layerXML.mItem[i].label, true);
            item.description = layerXML.mItem[i].description;
            item.position = layerXML.mItem[i].buttonFormat.@position;
            item.arrayPosition = i;
            item.link = layerXML.mItem[i].link;
            item.borderWidth = boxSizes[layerXML.mItem[i].buttonFormat.@size].x;
            item.borderHeight = boxSizes[layerXML.mItem[i].buttonFormat.@size].y;
            item.borderColor = layerXML.mItem[i].buttonFormat.@color;
            item.textSize = layerXML.mItem[i].textFormat.@size;
            item.textColor = layerXML.mItem[i].textFormat.@color;
            item.buildButton();
            mItems.push(item);
        }

        //////////////////////////////////////////////////////
        // IMPORT META
        titleLabel = new FlxText(layerXML.meta.title.@x, 
                                 layerXML.meta.title.@y, 1000, layerXML.meta.title);
        titleLabel.size = layerXML.meta.title.@size;
        titleLabel.color = layerXML.meta.title.@color;

        highlightColor = layerXML.meta.highlightColor;

        descriptionText = new FlxText(layerXML.meta.desciption.@x, 
                                      layerXML.meta.description.@y, 1000, "Default");
        descriptionText.size = layerXML.meta.description.@size;
        descriptionText.color = layerXML.meta.description.@color;
    }

    private function displayObjects():void
    {
        if (mItems.length > positions.length)
        {
            for (var i:int = 0; i < positions.length; i++)
            {
                mItems[i].x = positions[i].x;
                mItems[i].y = positions[i].y;
                add(mItems[i]);
            }
        }

        else if (mItems.length <= positions.length)
        {
            for (var j:int = 0; j < mItems.length; j++)
            {
                mItems[j].x = positions[j].x;
                mItems[j].y = positions[j].y;
                add(mItems[j]);
            }
        }

        add(titleLabel);
        add(descriptionText);
    }
}

}

<data>
<meta>
    <name>Pause_Menu</name>
    <refClass>com.Actors.BasicActor</refClass>
    <keys up="UP" down="DOWN" left="LEFT" right="RIGHT" select="SPACE" />
    <size width="" height=""></size>
</meta>
<layer>
    <meta>
        <name>Pause_Base_Menu</name>
        <layerNum>0</layerNum>
        <title font="" size="14" color="0x88CC88" x="10" y="10">Current Location</title>
        <description font="" size="20" color="0x004400" x="10" y="500">Main Menu</description>
        <highlightColor>0x88CC88</highlightColor>
        <currentItem>1</currentItem>
        <backgroundColor>0xFF7C151D</backgroundColor>
    </meta>

    <positions>
        <0 x="10" y="100" />
        <1 x="100" y="150" />
        <2 x="100" y="200" />
        <3 x="100" y="250" />
    </positions>

    <boxSizes>
        <0 width="100" height="30" />
        <1 width="200" height="30" />
        <2 width="300" height="30" />
    </boxSizes>

    <mItem>
        <buttonFormat position="0" size="0" color="0xFFFFFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>EXIT</label>
        <description>Exit the menu.</description>
        <link>%%kill</link>
    </mItem>

    <mItem>
        <buttonFormat position="1" size="0" color="0xFFFFFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>Inventory</label>
        <description>The items in your bag.</description>
        <link>%%swapLayer@@1</link>
    </mItem>

    <mItem>
        <buttonFormat position="2" size="0" color="0xFFFFFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>Teleport</label>
        <description>Zap yourself somewhere else.</description>
        <link>%%swapLayer@@2</link>
    </mItem>
</layer>

<layer>
    <meta>
        <name>Inventory_Menu</name>
        <layerNum>1</layerNum>
        <title font="" size="14" color="0x88CC88" x="10" y="10">Inventory</title>
        <textFormat font="" size="16" color="0x55AA55" />
        <description font="" size="20" color="0x004400" x="10" y="500">2nd Menu</description>
        <highlightColor>0xFFCC00</highlightColor>
        <currentItem>0</currentItem>
        <backgroundColor>0xAA668899</backgroundColor>
    </meta>

    <positions>
        <0 x="10" y="100" />
        <1 x="100" y="150" />
        <2 x="100" y="200" />
        <3 x="100" y="250" />
    </positions>

    <boxSizes>
        <0 width="100" height="30" />
        <1 width="200" height="60" />
        <2 width="50" height="150" />
    </boxSizes>

    <mItem>
        <buttonFormat position="0" size="0" color="0xFFAAFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>Back</label>
        <description>Return to previous menu.</description>
        <link>%%swapLayer@@previousLayer</link>
    </mItem>
</layer>

<layer>
    <meta>
        <name>Teleport_Menu</name>
        <layerNum>2</layerNum>
        <title font="" size="14" color="0x88CC88" x="10" y="10">Teleport</title>
        <textFormat font="" size="16" color="0x55AA55" />
        <description font="" size="20" color="0x004400" x="10" y="500">3rd Menu</description>
        <highlightColor>0x00BB00</highlightColor>
        <currentItem>0</currentItem>
        <backgroundColor>0x88CCDA99</backgroundColor>
    </meta>

    <positions>
        <0 x="10" y="100" />
        <1 x="100" y="150" />
        <2 x="100" y="200" />
        <3 x="100" y="250" />
    </positions>

    <boxSizes>
        <0 width="100" height="30" />
        <1 width="200" height="60" />
        <2 width="50" height="150" />
    </boxSizes>

    <mItem>
        <buttonFormat position="0" size="0" color="0xFFAAFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>BACK</label>
        <description>Return to previous menu.</description>
        <link>%%swapLayer@@previousLayer</link>
    </mItem>

    <mItem>
        <buttonFormat position="1" size="0" color="0xFFAAFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>BR Corner</label>
        <description>Jump to the bottom-right corner of the map.</description>
        <link>%%swapLayer@@previousLayer</link>
    </mItem>

    <mItem>
        <buttonFormat position="2" size="1" color="0xFFAAFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>Center</label>
        <description>Jump to the center of the map.</description>
        <link>%%swapLayer@@previousLayer</link>
    </mItem>
</layer>