Fireworks to Lua Exporter

Hi guys,

As I use Adobe Fireworks for most of my projects, I was wondering how many of us are using it to create mockups and visuals for your apps. According the number of users, I am planning to create a Fireworks to Lua export (it is not going to be our dreamed Corona Editor, but could speed up the development process). My current plans are:

  • Export all buttons and rollover states (with positioning and function handles)
  • Export the background and other single images (with positioning)
  • Export text as labels (with positioning)

Let me know your thoughts. Again, if it will be usefull to many, I will postpone my next app to develop it. If it is something just for me, I can keep coding/exporting it manually.

Thanks,
Alex [import]uid: 4883 topic_id: 1145 reply_id: 301145[/import]

Hi Alex,

I am using Inkscape, but I am sure that there will be developers who would be happy about your tool.

Keep posting about your progress.

Michael [import]uid: 5712 topic_id: 1145 reply_id: 2966[/import]

Well I am using FireWorks (very old version) for some Web-Design work I did in the past and still need to modify from time to time. Today I let a designer create that stuff and he is using Photoshop usually.

Maybe I use FireWorks for some GUI design in games in the future… just because I have it around. But I usually prefer programmatic graphics (which seems to be not possible to a large extend yet in corona).

So it may become relevant but I doubt that I would need this kind of export of “whole” designs. I did never use that for websites either… I like to have control about the implementation details. But then… I am using other GUI designers like wxGlade from time to time for rapid prototyping. [import]uid: 6928 topic_id: 1145 reply_id: 2973[/import]

I use Fireworks and I really dont see the need for an exporter outside of its own, which does a fine job, especially CS5 where you can setup pages and states.

The Fireworks coordinates system is the same as Coronas so using the slice tools is enough and naming the slices helps with the export process.

I would wait for the sprite support and then code a Fireworks Slices > Lua Sprite Sheet Co-ordinates Table [import]uid: 5354 topic_id: 1145 reply_id: 2974[/import]

I think I wasn’t very clear (sorry). I am not planning to create a new image exporter for Fireworks. My idea is to read Fireworks canvas and export a “main.lua” file according all elements found. For example: 1) consider you have an image, in a layer called “back”, as background.
2) Over this image you have a text “Hello World”, in bold, at position 30,20 (layer name myText).
3) At position 0,50, you have a blue rectangle with size of 320x50 (layer name myRect).
4) A little below, at coordinates 250, 50, a button (layer name button).
5) After that, an image (layer name myPicture), with opacity of .60, at position 300,250.
6) Lastly, a text “See more”, aligned to right, at 420,200 (layer name seeMore):

With the Fireworks to Corona exporter, a main.lua file will be created with the following code:

local ui = require("ui"); --because found button and label in the code  
local background = display newImage("back.png   
local buttonPress = function( event )  
 --your code here  
end  
  
local buttonRelease = function( event )  
 --your code here  
end  
  
local myText = display.newText("Hello World", 30, 20, native.systemFontBold, 18)  
myText:setTextColor(255,255,255)  
  
local myRect = display.newRect(0,50,320,50)  
myRect:setFillColor(0,51,204)  
  
local button = ui.newButton{  
 -- (if applicable) name = "button"..i;  
 default="button.png",  
 rollover="button\_roll.png",  
 onPress=buttonPress,  
 onRelease=buttonRelease,  
 x = 250,  
 y = 50   
};  
local myPicture = display newImage("myPicture.png")  
myPicture.alpha = 0.6  
myPicture.x = 300  
myPicture.y = 250  
  
local seeMore = ui.newLabel {  
 text = "See More",  
 textColor = {255, 255, 255, 255},  
 size = 14,  
 align = "right",  
 bounds = {420, 200, 100, 40},  
};  
  

will it speed up your development process?
Alex [import]uid: 4883 topic_id: 1145 reply_id: 2978[/import]

Well for some applications I can imagine a speed up… esp. if you add support for stages / groups / modules and make it so that you can change the layout and filled in code will retain. It could go a long way… [import]uid: 6928 topic_id: 1145 reply_id: 2982[/import]

For an easy setup I can see it being helpful.

But in complex cases where groups need to be assigned, sprites created etc… it could be problematic.

I would say the sprite sheet exporter would be much more helpful as an automated setup for that will be many times more useful [import]uid: 5354 topic_id: 1145 reply_id: 2983[/import]

Point taken on the sprite sheet (let’s wait the final implementation from Ansca to see what can be done here). Regarding the exporter, in fact I could start it yesterday and the progresses are good at this moment. My first sample (not including group yet, but I will do that), with 9 elements on the interface (button, rectangles, paths, text and image), auto generate a main.lua with almost 40 lines of code. Not that bad for one click only.

I will keep you posted.
Alex [import]uid: 4883 topic_id: 1145 reply_id: 2991[/import]

More I think about this the more I think im wrong.

Its better to get the code into lua and then edit the result as you are doing. If you are taking the names of the slices as the image names and adding those names as comments in the lua code I would think it should be easy to pull the lua apart to suit the individuals setup.

Where I can see your importer would save a bunch of time would be in importing a font as images. We could even setup a default fireworks template to turn a font into a sprite and have your code do all the setup. Now that would be time saving. [import]uid: 5354 topic_id: 1145 reply_id: 2992[/import]

Keep sending ideas. I am finishing the first build (hope tomorrow) and I will share the results with you, if you are interested.

Thanks for the feedback,
Alex [import]uid: 4883 topic_id: 1145 reply_id: 3010[/import]

I just finished v1 and submitted to Adobe Fireworks Extensions site (in a few days it will be available for download directly from Extensions Manager). If you would like to try and help to improve it now, just send me an email: alexandres at hotmail dot com.

What does it does today:

  • Script all visible layers (names, sizes, positioning, font names, etc) to a main.lua file, available in the same directory of your original png file;
  • Groups layers are scripted as images;
  • Button script can be done just writing ‘but’ or ‘button’ in the button’s layer;
  • Background can be scripted just writing ‘back’ or ‘background’ in the background layer;
  • Rectangles are scripted using Corona newRect or newRoundedRect function;

No matter the number of elements in my comps, it has saving me time doing the basic scripting for me. let me know your findings. I will evaluate your suggestions (mostly about sprite exporting) later.

Alex [import]uid: 4883 topic_id: 1145 reply_id: 3088[/import]

Hi,

Be keen to play with this when it is available. Could you provide a URL once Adobe OKs it?

Cheers. [import]uid: 5637 topic_id: 1145 reply_id: 3274[/import]

I can’t remember the full link but you can find it at my last blog posting at www.asouza.com/blog
let me know if you find bugs or have some other ideas for improvement.
Thanks,
Alex [import]uid: 4883 topic_id: 1145 reply_id: 3275[/import]

Yeah I stumbled across that one on your blog. But it won’t install, something about a missing .jsf file or some such.

Cheers. [import]uid: 5637 topic_id: 1145 reply_id: 3276[/import]

Can you try again and let me know if it worked now?
sorry about that.
Alex [import]uid: 4883 topic_id: 1145 reply_id: 3278[/import]

Yep that version installs fine! Thanks.

BTW this is the URL for others, as I noticed the URL in the blog post isn’t the full url required to download.

http://www.asouza.com/files/exporter.zip

Cheers. [import]uid: 5637 topic_id: 1145 reply_id: 3279[/import]

I update it to the full url, just seconds after your posting. thanks! [import]uid: 4883 topic_id: 1145 reply_id: 3280[/import]

If you are using the Fireworks to Corona Exporter extension, I suggest you to download the new update (fixes some small issues and add support for Sprite Sheet animation), available here.
To generate the Sprite Sheet tags, simply create an image layer and name it with the string “sprite”. For example, you layer can be:
•mySprite
•myAnimation sprite
•space for sprite

I am working on a Sprite Sheet Exporter for Fireworks too (similar to the one I created for Photoshop).

If you miss any announce, follow me on Twitter (@alexandres) or via my blog at http://www.asouza.com/blog [import]uid: 4883 topic_id: 1145 reply_id: 7248[/import]

Hello Alex (or anybody following this thread about the “Fireworks Corona Exporter”…

I installed this and it appears to be a very useful tool! Unfortunately I’m not getting enough “detail” from the Exporter, and I’m not sure if this is how it’s designed, or if I’m doing something wrong.

At this point, I get the X and Y position of elements in a Fireworks document. I also get “alpha”.

What I don’t get is “width” and “height” of the objects from Fireworks. Do I need to convert them to bitmaps or something? Is this information even possible to extract using the Exporter?

I definitely need width and height information to use this as a design assistant tool for my game. I would like to use this Exporter along with the “newImageRect” API, which requires a width and height setting for the image.

To summarize, I could really use a tool which gives me the following from a Fireworks document:

  1. X position on canvas (functional)
  2. Y position on canvas (functional)
  3. image width (?)
  4. image height (?)
  5. image/layer rotation (probably not possible, but I can live without that)

So can Alex’s Corona Exporter accomplish the first 4 things? If not, can anybody point out another tool or similar Fireworks extension which can provide this? It doesn’t necessarily need to be in Lua/Corona format… just plain text would be fine, since I will be parsing the information into my own game system (text files with level information).

Thanks!
Brent Sorrentino [import]uid: 9747 topic_id: 1145 reply_id: 42338[/import]