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(){}

getBounds.prototype.run = function()
{
 var selBounds;
 if(activeDocument.selection)
 {
  selBounds = activeDocument.selection.bounds;
 }
 else
 {
  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()
 {
  win.close();
 }
 
 // Display the window
 win.show();
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.  :)

8 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

    ReplyDelete
  2. 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

    ReplyDelete
  3. 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.

    ReplyDelete
  4. 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

    ReplyDelete
  5. Many casinos give cashback, offer coupons for meals or compensate for things like motels. In case you’ve got certainly one of these, maintain what might have} and decide your winnings. As a facet note, however equally essential, watch your alcohol consumption. Being aware of the difference and 온라인카지노 using an “optimal strategy” can significantly affect the house edge. A paytable is a list of potential hands and the quantity they payout should you hit that hand.

    ReplyDelete