I am a hard user of Fireworks. My mockups and final interfaces are done there. I simply love it. Having coding for Corona a lot these days, I decided to create a Fireworks extension to Corona.
Basically what it does is to read all layers from the Fireworks file, getting data like positioning, sizes, fonts used, etc, generating automatically a main.lua file, helping me to start new code. Some people told me in the Corona forum that it may not be necessary but my tests show a really gain of time using the extension.
Here a practical example, using the final interface of A Temple A Day, my first app published:
The final interface above was done with the following list of layers from Fireworks:
With just a 2 clicks: Command->Corona Exporter, check the results below. 102 lines of code created in less than 5 seconds. Pretty fast interesting, no?
1: --Code auto generated by Fireworks to Corona Exporter
2: --Copyright: Alex Souza. www.asouza.com
3: --6/11/2010
4:
5: local ui = require("ui");
6:
7: local background = display.newImage("background.png")
8:
9: local butcallPress = function(event)
10: --your code goes here
11: end
12:
13: local butcallRelease = function(event)
14: --your code goes here
15: end
16:
17: local butmapPress = function(event)
18: --your code goes here
19: end
20:
21: local butmapRelease = function(event)
22: --your code goes here
23: end
24:
25: local butsharePress = function(event)
26: --your code goes here
27: end
28:
29: local butshareRelease = function(event)
30: --your code goes here
31: end
32:
33: local butmorePress = function(event)
34: --your code goes here
35: end
36:
37: local butmoreRelease = function(event)
38: --your code goes here
39: end
40:
41: local butmore = ui.newButton{
42: default="butmore.png",
43: rollover="butmore_roll.png",
44: onPress=butmorePress,
45: onRelease=butmoreRelease,
46: x=281,
47: y=62
48: };
49:
50: local txt_templena = display.newText("A Temple Day", 4, 22, "Arial-BoldMT", 24)
51: txt_templena:setTextColor(102, 102, 102)
52:
53: local txt_addr1 = display.newText("123 45th St.", 5, 49, "ArialMT", 10)
54: txt_addr1:setTextColor(102, 102, 102)
55:
56: local txt_addr2 = display.newText("Arizona, - United States", 4, 63, "ArialMT", 10)
57: txt_addr2:setTextColor(102, 102, 102)
58:
59: local txt_phone = display.newText("Phone: +1 888 888 88881", 5, 75, "ArialMT", 10)
60: txt_phone:setTextColor(102, 102, 102)
61:
62: local txt_dedicati = display.newText("Dedication: 1/23/2008, by John Doe", 5, 89, "ArialMT", 10)
63: txt_dedicati:setTextColor(102, 102, 102)
64:
65: local topback = display.newRect(0, 0, 320, 104)
66: topback:setFillColor(236, 236, 236)
67:
68: local title_atempl = ui.newLabel(bounds ={99, 110, 100, 23 }, text="A Temple Day", font="Arial-BoldMT", size=14, align= "center", textColor={255, 255, 255})
69:
70: local bluebar = display.newImage("bluebar.png", 0, 104)
71: local mainphoto = display.newRect(0, 105, 320, 335)
72: mainphoto:setFillColor(255, 255, 255)
73:
74: local butcopyright = display.newRect(297, 413, 17, 17)
75: butcopyright:setFillColor(0, 0, 0)
76:
77: local butshare = ui.newButton{
78: default="butshare.png",
79: rollover="butshare_roll.png",
80: onPress=butsharePress,
81: onRelease=butshareRelease,
82: x=256,
83: y=449
84: };
85:
86: local butmap = ui.newButton{
87: default="butmap.png",
88: rollover="butmap_roll.png",
89: onPress=butmapPress,
90: onRelease=butmapRelease,
91: x=149,
92: y=449
93: };
94:
95: local butcall = ui.newButton{
96: default="butcall.png",
97: rollover="butcall_roll.png",
98: onPress=butcallPress,
99: onRelease=butcallRelease,
100: x=42,
101: y=449
102: };
I submitted it to Adobe Extensions. In a few days it will be available publicly. Meanwhile, if you want to test it right now, download it from here.
Current version feature list:
– 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;
I have no words to thank Aaron Beall, Fireworks guru, for very important tips. Really appreciate his support.
See you all soon!
Alex