Fireworks CS3 Features: Intelligent Scaling

Republished from SitePoint Design View #33

Adobe’s first take on Fireworks — CS3, or version 9 in the old money — has finally been released into the wild and is getting some good press. As we only received the full review edition last week, I’ll publish a full wrap-up in the next Design View, but for the time being I thought I’d look at one of the package’s nicest new features: intelligent or “9-slice” scaling.

Symbols — in Flash or Fireworks — have always been a great concept. If you use a bit of CSS, there’s something quite familiar about being able to define a permanent reference graphic, then use linked instances or copies of that graphic in your artwork. Changes to the symbol automatically flow through to copies, just as CSS changes flow through to your document.

The biggest drawback I’ve always found with using symbols has always been scaling issues.Bad symbol scaling While it doesn’t really matter if your radio button doesn’t resize elegantly, the majority of buttons, text fields, dropdowns, scroll bars, tabs, and other screen widgets we might use in a typical design are required to resize to fit the content they contain. In
the past, resizing a symbol in Fireworks (or Flash, for that matter), distorts the graphic’s shape like a funhouse mirror. While you could learn to live with small distortions, larger resizing issues are a real issue.

Fireworks CS3 fixes that problem with the introduction of 9-slice scaling. The process is relatively simple to control and although the new symbols will only scale nicely in CS3, they’ll still behave as they always have in older versions of Fireworks. Let’s run through it.

  1. Convert to Symbol: Select your original graphic and convert it to a symbol Modify/Symbols/Convert to Symbol). A dialog box allows you to name your symbol, and you’ll see it has two extra checkboxes at the bottom — tick the box marked “Enable 9-slice scaling guides.”

    Covert to symbol dialog

  2. The Symbol Editor: Your new symbol will appear in the Symbol Editor, but with an added set of blue, dashed, movable guides — two vertical, two horizontal.
  3. Setting the scaling guides: The blue guides create a 3×3 grid that lets us control which bits scale, and how. As the illustration below shows:
    • The center-top and center-bottom pieces are only allowed to scale
      horizontally.
    • The center-left and ceter-right pieces are allowed to scale
      vertically.
    • The four corner pieces won’t be allowed to scale at all.
    • The center piece scales in all directions.

    Slide the guides around until you have isolated the corner pieces entirely from the tileable side, top, and bottom pieces.

    The Symbol Editor

  4. Lock your guides: When you’re satisfied click the “Lock” checkbox at the bottom left, and click the
    “Done” button at the top left.

    9-slice scaling in action (gif animation)

  5. Test drive it: Drag your symbol from the Library palette onto your layout and try scaling it. You should get a result like the one shown at right.

In this example, I positioned both horizontal guides outside my graphic, meaning that it’s only designed to scale horizontally. Similarly, you might design a vertical scrollbar to only scale along the vertical axis.

Of course, this scaling trick isn’t limited to buttons and widgets. Entire layouts, navigation panels, rounded text boxes or any other repeating design element can, and no doubt will, benefit from this new feature.

In short, this is a feature that makes symbols more useful than they’ve ever been, so I see it as the feature most likely to change the way you work.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform