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.Fireworks CS3 Features: Intelligent 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.”

    Fireworks CS3 Features: Intelligent Scaling
  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
    • The center-left and ceter-right pieces are allowed to scale
    • 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.

    Fireworks CS3 Features: Intelligent Scaling

  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.

    Fireworks CS3 Features: Intelligent Scaling

  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.


Category: other Time: 2007-05-23 Views: 1

Related post

  • Fireworks CS3: 5 Reasons You Might Upgrade 2007-06-22

    I wrote most of this piece for the Design View, but the graphics took some time, so I figure it's worthwhile posting it here too. Obviously the main reason you upgrade any application is to be able to do new stuff. I've been working with Fireworks CS

  • How can I create a 24-bit PNG with alpha and no transparency in Fireworks CS3? 2012-06-19

    We're creating icons for a mobile app, and the developers have asked for very specific files. One needs to be 48px x 48px and has to be a 24-bit PNG with alpha and no transparency. I'm using Fireworks CS3 and I wondered if exporting the PNG as a PNG-

  • Fireworks CS3 crashes when I try to open it on Windows 7 2009-11-13

    I've just installed Win 7 and the CS3 web premium collection. Its pretty much a clean install ( about a week old ), but for some reason every time I open Fireworks it crashes with the error 'The application Fireworks has unexpectedly quit'. Photoshop

  • Vertically scaling part of an image using Photoshop/Fireworks 2010-08-05

    This is an image of a blackboard: I would like to reduce its height while its width, and all its four wooden borders (top, bottom, left, right) should stay unchanged. Could anyone kindly suggest how this can be done in Photoshop/Fireworks? ----------

  • How to resize a feature and prevent it from scaling when zooming in OpenLayers 3 2015-01-16

    I have initialized a custom OpenLayers 3 map (used to show houses for sale in the neighborhood) with an image as the map. Then, I create additionnal features and layers dynamically for each house (each feature's anchor is set as the middle of its ima

  • Adobe Fireworks CS4 beta released 2008-05-29

    Adobe have made the new Fireworks CS4 beta download available, and the good news is anyone with Fireworks CS3 - either standalone or as part of the web suites - can take it for a spin. You'll need to have an account at Adobe and login. You'll then be

  • Adobe Master Collection CS3 wont run on my Windows 7 64bit 2010-01-21

    I have a brand new HP p6230y. My first step after booting it up was to install Master Collection. It installs fine, but when I go to run each of the applications, and they all behave differently. I have re-installed twice already. Photoshop opens, bu

  • Text Editor In Adobe Fireworks CS6 has been removed 2014-12-19

    I'm using Adobe Fireworks CS6. The latest version I'm missing a very helpful tool in CS6 is text editor window. I have also worked on Fireworks CS3 and it has the text editor. How can I import the text editor from CS3 to CS6? --------------Solutions-

  • Using custom fonts without administrator rights? 2010-03-09

    I know you can put custom fonts in say C:\Windows\Fonts and applications will be able to find and use them. However this is only possible when you have administrator access to the machine, which is rarely the case in shared environments. Is there a g

  • Using webfonts with sublime text 3 2010-03-09

    I know you can put custom fonts in say C:\Windows\Fonts and applications will be able to find and use them. However this is only possible when you have administrator access to the machine, which is rarely the case in shared environments. Is there a g

  • Allowing Underprivileged Users to Install Fonts on Windows 7 2010-03-09

    I know you can put custom fonts in say C:\Windows\Fonts and applications will be able to find and use them. However this is only possible when you have administrator access to the machine, which is rarely the case in shared environments. Is there a g

  • Facebook Beacon: The Great Privacy PR Stunt 2007-12-12

    Here's my take on Facebook Beacon, the recent feature added to the popular social networking site Facebook for informing one's friends about activities on an external site: the controversy was orchestrated. Last week the feature was scaled back due t

  • Software to partially remove text from file names 2009-12-28

    I'm looking for a software which can remove some parts of file names: i.e.: very_long_name.jpg to name.jpg --------------Solutions------------- Assuming a Windows OS, I like Ken Rename for this purpose. This bat file will do the trick; for %%i in (ve

  • Customizing Gnome Shell in 11.10 2011-11-16

    Since Unity on my old MBP is not that snappy, I really want to change my GUI to Gnome Shell. However, I've really been struggeling with the customization of Gnome Shell. Can you help me with the following: Is is possible to have the dock on the scree

  • Does Laptop power supply matter? 2015-09-09

    This question already has an answer here: Can I safely charge my laptop with a non-standard, third-party charger? 2 answers I have a power supply which is 19.5V and 6.15A. My friends power supply or laptop probably broke and his power supply has a 19

  • Force closest facilities take the same route 2015-12-17

    I have a routing problem that I intend to solve with ArcGIS network analyst. First, Closest facility works perfect for me to find the shortest paths to a number of demands. The results look like the left part of the figure: For my analysis I would li

  • Photoshop CS3 New Features: #1 - Quick Selection Tool 2007-05-31

    So, we've had the Adobe CS3 web and design suites for two weeks now and we're starting to really get a feel for the improvements. As you might expect with such a large cross-section of applications, some have eveolved more than others - at this stage

  • Fireworks States: Does any other layout tool have an equivalent feature? 2015-03-03

    I'm dropping Fireworks as my main tool for web layouts. It's just too slow and Adobe isn't supporting it anymore. Is there another tool that can do something similar to Fireworks' states? Photoshop layer comps don't do it for me. This feature is prob

  • Scaling features based on an attribute 2014-08-21

    I would like to scale polygon features by a specific factor I have calculated for each feature in a feature class. I know of the Scale tool, however it only allows for manual entry of a scale factor and I have hundreds of features, so I would like to

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.421 (s). 13 q(s)