Scale objects with 9-slice scaling

Intelligently scale buttons and graphic symbols (in vector or bitmap files) with 9-slice scaling. Combine 9-slice scaling with smart guides.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Fireworks CS4

• Try
• Buy

Sample file

lrvid4036_fw.zip (ZIP, 996K)

Prerequisite knowledge

Intermediate knowledge of creating and editing symbols

Scale objects with 9-slice scaling

In Adobe® Fireworks® CS3, 9-slice scaling could only be applied when you turned an object into a symbol. In Fireworks CS4, you can use 9-slice scaling with nonsymbol objects. This tutorial will teach you how to use the 9-slice scaling options in Fireworks CS4.

Scaling an object

In Fireworks CS4, you can resize an object without distorting outlying areas using 9-slice scaling. To use 9-slice scaling:

1. Add a movie clip containing a nested symbol into the main window of the Fireworks interface.

   

   Figure 1: The Fireworks interface
2. Double-click the nested symbol in the movie clip. The document window now displays the nested symbol. Notice that the symbol has slicing guides of its own.

   

   Figure 2: The symbol slicing guides
3. Select a shape within the symbol. Note that the selected shape is a regular graphic object, not a symbol.
4. Choose the Scale tool from the Fireworks toolbox. From the submenu that appears, select the 9-Slice Scaling tool.

   

   Figure 3: Choosing the 9-Slice Scaling tool

   Tip: You can also press the Q key to activate the 9-Slice Scaling tool.

   Note: Once you select the 9-Slice Scaling tool, free transform handles appear around the selected area. In addition, 9-slice scaling guides appear inside the selection area. You can reposition these guides as needed. Note that it is the area inside the scaling guides that will be modified. This feature allows you to rescale an object without distorting the areas outside the scaling guides.

   

   Figure 4: The Free-transform handles
5. To rescale the object, drag the transform handles around the selection area. You can scale the right, left, top, or bottom of the selection area.
6. Press Enter or Return to apply the changes.

   Note: If you reselect the Transform tool after scaling the object, the guides will snap back to their original positions. There is no way to save guide positions once the changes have been applied.

7. To see the modifications to the original design, use the breadcrumb menu just below the control panel to return to the original object.

   

   Figure 5: The Breadcrumb menu
8. Double-click the object from the original design to return to the main symbol.

Scaling a symbol

While it is not possible to save the position 9-slice scaling guides when dealing with objects, it is possible to save the new positions of these guides when working with symbols. To save the position of 9-slice scaling guides:

1. Go to the Properties inspector. You will see checkboxes that allow you to enable the guides or lock them into place.

   

   Figure 6: The Properties inspector
2. Choose both Enable and Lock by selecting the checkboxes.

   Tip: If you want greater control over 9-slice scaling, it is best to turn an object into a symbol before the scaling process.

Where to go from here

• Fireworks CS4 Help and Support
• Learn Fireworks CS4
• Introducing Fireworks CS4, by Jim Babbage
• Understanding styles and symbols, by Jim Babbage
• Creating interactive prototypes for reviews, by Jim Babbage
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors