A Useful Script if you use Adobe fireworks CS4 (maybe cs3)

Target Platforms Mobile
1

I find it a bit of a pain working out x,y,w,h of ‘button areas’ on my ipod menus and such. so I wrote a little script which works in Adobe Fireworks (you need to save it as a .jsf file in the command directory of your adobe fireworks installation)

step 1 create UnityHotSpotScripter.jsf in the command directory on your machine.
step 2 load in the 480x320 or 320 x 480 image which your graphics guru has created for you that has the buttons shown on it, into fireworks
step 3 define fireworks ‘Hotspot slices’ for each button giving it a name in the property inspector.
step 4 run the script by selecting it from the bottom of the commands menu in fireworks.

The script then creates a unity JS script snippet into the clipboard which you can then past into your unity JS file.

Have fun

Feel free to post any improvements / comments etc

var fwd=fw.getDocumentDOM();
var idx;

var hdr="class HotBox{\u000D"
hdr +="var zone : Rect;\u000D"
hdr +="var name : String;\u000D"
hdr +="\u000D"
hdr +="function HotBox(tZone : Rect, myName :String){\u000D"
hdr +="zone=tZone;\u000D"
hdr +="name=myName;\u000D"
hdr +="}\u000D"
hdr +="}\u000D"
hdr +="\u000D"
hdr +="var hZones :Array =new Array();\u000D"
hdr +="\u000D"
hdr +="//Generated by FW\u000D"
hdr +="\u000Dfunction initHotZones(){"
var body=hdr;

fwd.selectAll()
//if landscape  top left = 0,0
//if portrait top left =0,480


for (idx=0;idx<fw.selection.length;idx++){
ele=fw.selection[idx];
var r;
//Fixed this bit
if (fwd.width==480)r="("+ele.left+","+ (320.0-(ele.height+ele.top)) +","+ele.width+","+ele.height+")";
if (fwd.width==320)r="("+ele.left+","+ (480-ele.top) +","+ele.width+","+ele.height+")";



var line="hZones.Add( new HotBox(Rect"+r+",\u0022"+ele.name+"\u0022));\u000D";
body+=line;
}
body+="}";
fw.getDocumentDOM().clipCopyJsToExecute(body);
2

Awesome! I use FW CS4, I like it better than PS for making GUI stuff. I’ve been working out all the touch/button hotspot coords by hand, thanx for giving me a chance to get out of the Neolithic! I’m having one of those “Duh” moments; I used to extend Flash 8 quite a bit but it didn’t even come to mind to do that w/ FW. I’m glad you had your thinking cap on, I sure didn’t. I’ll try the script out tuesday when I get back to work. Thanx again!

3

Argh,
got a slight problem with the orientation (not calculating the xywh positioning correctly, haven’t had a chance to fix but will post a revised script asap.

Sorry

4

Ok so I’ve fixed the above code segment, one thing to be careful about is if you load in a 320x 480 image rotate the actual whole canvas then it seems to mess with the x y orientation.
I resolved by expanding the canvas out rotating the individual image then trimming it down.

Oh and make sure you lock all the layers apart from the web layer otherwise it will use all the objects available to make the zones
(I couldn’t figure out how to do that in script form)

5

I guess I’m missing something… what does this do? And in what way is it used with Unity?

6

It creates the javascript to handle things like menus screens and such
so that you just have to past it into your unity scripts.

you also need to make sure you call the initialization function iniHotZones so that the array gets populated, then all you need to do is check each element in the array to see if it contains the mouse or touch coords. and execute the appropriate code.

7

I’ve just uploaded a YouTube demo of how to use the script