Sunday, April 22, 2012

How to get scale9 images into Flex from Photoshop a little easier

Really getting into Flex skinning for the first time, and having been a Flash Professional guy for years, I'm  unenthused by what a cumbersome, non-visual process it is.

Case in point: the scale9 grid.

To use a scale9 grid on an embedded image you manually enter the pixel locations of the edges of the grid, like so:

<s:Image source="@Embed(source='embeds/myImage.png' scaleGridLeft='12', scaleGridTop='9', scaleGridRight='550', scaleGridBottom='63' )"/>

Much less convenient than the GUI that Flash Pro provides.  So I wrote a little extendScript to reduce the amount of time I spend measuring pixels in Photoshop.  It works like this:

1. Draw a selection box to define the area that should be the middle box in the scale9 grid.
2. Run the script.
3. Copy the text from the popup window and paste it into your Embed code

The code is below:

function getBounds(){} = function()
 var selBounds;
  selBounds = activeDocument.selection.bounds;
  alert("no selection");
 var left = selBounds[0];
 var top = selBounds[1];
 var right = selBounds[2];
 var bottom = selBounds[3];
 // Create the palette-type window (a modeless dialog)
 var win = new Window('dialog', 'getBounds');
 this.windowRef = win;
 win.bounds = [100,100,760,260];
 // Create a container panel for the components
 win.pnl = win.add("panel", [5,5,650,150]);

 win.pnl.txt = win.pnl.add('edittext', [15,15,630,65], "scaleGridLeft='"+left.value+"', scaleGridTop='"+top.value+"', scaleGridRight='"+right.value+"', scaleGridBottom='"+bottom.value+"'");

 win.pnl.okBtn = win.pnl.add("button", [25,110,105,130], 'OK');

 // Define the behavior of the buttons
 win.pnl.okBtn.onClick = function()
 // Display the window;
return true;

new getBounds().run();

Download the script file

To install the script, copy it into Photoshop's Scripts directory
Windows: C:\Program Files\Adobe\Adobe Photoshop CS4\Presets\Scripts\
Mac OSX: Applications/Adobe Photoshop CS4/Presets/Scripts/
After you restart Photoshop, it should appear under File > Scripts > GetScaleGridDimensions

I'm sure there's an even better solution out there, I'm just not aware of it.  If you are, let me know about it in the comments.  :)

No comments:

Post a Comment