Jump to content


Photo

New Smart Resize extension


  • Please log in to reply
5 replies to this topic

#1 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 05 March 2009 - 09:57 PM

Once you've laid out UI elements in a mockup of a dialog or window, changing the layout can be a pain. You have to move some elements to stick to the edges of the new layout, while others have to stretch horizontally and/or vertically. Fireworks' Scale tool isn't any help with this, since it scales elements proportionally instead of moving them. The new Smart Resize extension can simplify this process of editing an interface mockup: http://johndunning.c...out/SmartResize

From the extension's description:

The Smart Resize auto shape helps you resize a group without distorting its elements or disrupting its layout. Imagine you have a group that contains all the elements of a dialog box: a colored background and border, an icon in the upper left, a close box in the upper right, some text across the full width of the dialog, and some buttons in the bottom right. If you want to make the dialog wider and taller, you'll have to resize the background element, move the close box to the right, move the buttons down and to the right, etc.

Instead of doing all this manual labor, just select your group and run "Commands > Smart Resize > Attach". A Smart Resize auto shape will be grouped with your selection. Drag the auto shape's yellow handles to resize the group in any direction. When you release the mouse, the elements in the group will be moved to maintain their previous relationship to the group boundaries. For instance, an element whose right and bottom edges were 10px from the right and bottom edges of the group will be moved to still be 10px from the new location of the group's right and bottom edges. Elements that extended across more than 80% of the width and/or height of the group will also be resized so that their edges maintain the same relationship to the group's borders. The resizing is smart so that text blocks, rounded rectangles, etc. should not be distorted.

To override the default resizing and snapping behavior, you can use the other commands in this extension. For instance, to force an element to be resized horizontally, even if its initial width is less than 80% of the group's width, sub-select the element and run "Smart Resize > X Anchor - Both". The next time the auto shape is resized, the element's width will be resized as well (i.e., it will be anchored to both the left and right sides of the group). Overrides like this are maintained even if you attach a new Smart Resize shape. If you need to reposition a child in the group, move it, select the group and then run the "Attach" command again; this will update the positions of all the children so that they're maintained when the Smart Resize shape is resized.

#2 kelton

kelton

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 471 posts
  • Location:Antigua
  • Interests:web design, logo design, user interface design

Posted 06 March 2009 - 06:03 AM

this seems very awsome cant wait to try it

#3 spiral

spiral

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 136 posts
  • Location:sweden
  • Interests:design, css, icon design

Posted 10 March 2009 - 12:45 AM

it's like 9 slice scaling for groups! awesome!

#4 raja

raja

    FireMonkey

  • Members
  • PipPipPipPipPipPipPipPipPipPip
  • 1,226 posts

Posted 10 March 2009 - 01:16 AM

seems interesting

#5 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 11 March 2009 - 10:20 AM

it's like 9 slice scaling for groups! awesome!

But automatic, so you don't have to reset the slices every time, like you do with the 9-slice scale tool. And you don't actually have to group the elements you want to re-layout. You can select multiple objects and run Smart Resize > Attach to enable resizing on the current selection without first creating a group (though there's a bug where the objects are left grouped when you run Detach, which I can fix).

#6 zabberwan

zabberwan

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 129 posts

Posted 13 March 2009 - 07:27 AM

I have had a tough time lately, resizing and aligning small elements before exporting them and as you know that Smart CSS doesn't work properly if you have any elements, boxes or boundaries overlapping.

So, when I export CSS and Images from Fireworks to Dreamweaver and if I am the Q then this tool is definitely the U.

Thanks for that John (if I may address you so)!

:)