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.  :)


  1. Pixel By Hand prefers to take a more personal approach to image editing. Each and every business we work with will have allocated point of contact. If you have any questions, problems or special requests we are available to help.

    Ecommerce Product Images Editing

    1. Great Article Image Processing Projects Deep Learning Projects for Final Year JavaScript Training in Chennai JavaScript Training in Chennai The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai

  2. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress website development Chennai

  3. Photoshop isn't difficult to adapt, however you will require guidance and video is by all accounts the strategy for decision with regards to learning Photoshop. print a vector from photoshop

  4. In cases where your business relies heavily on photographs and images of products, such as e-commerce websites, etc., you need to ensure a steady stream of high-quality images on a daily basis. Opt for the best clipping path service.

  5. The posts and blogs are very unique. Great!so fantastic, so inspiring .this is really amazing. i learned new information. thank you so much for sharing this great post. 3d Printing Services

  6. You have given important data for us. It is excellent and informative for everyone. Always keep posting. I am very thankful to you. vectorization software mac