SubscribeSupportLog In
VirtualClues.com - Web Design Training
Movie Library Downloads Photos Blog Archived Tutorials  
 Fireworks CS3 New Features
Fireworks CS3 New Features > 9-Slice Scaling

A new feature found in Fireworks CS3 is 9-Slice Scaling. With 9-Slice Scaling, objects can now be scaled, bigger or smaller, while retaining their right proportions. Before this ability in Fireworks, if an object such as the one below was scaled bigger it became distorted. See the comparison below when I tried to scale the button larger horizontally. As you can see there's quite a bit of difference between the two.

Original Size
Original Size

Scaled
Compare With/Without 9-Slice Scaling

Enabling 9-Slice Scaling

Before you can use 9-Slice Scaling in Fireworks, the object has to be converted to a symbol.

button

To convert it to a symbol you can do one of the following. Right-Click on the object and choose "Convert to Symbol", go to Modify > Symbol > Convert to Symbol or simply hit F8 on your keyboard. (Make sure the object is selected.)

The Convert to Symbol box will open. Give the symbol a name. 9-Slice Scaling can be used on either Graphic or Button Symbols. In this case, I was creating a button, so I chose button for the symbol type but I could have chosen Graphic.

IMPORTANT: To Enable 9-slice scaling guides, check the box next to it for the the Symbol Options.

Click OK.

Convert to Symbol

 

Now that the object is a symbol, a slice will be created. Double-click on the slice to open up the button editor. A box may appear telling you that the object must be ungrouped, just click Ungroup.

Ungroup Message

 

Since 9-slice scaling was enabled when I created the symbol, guides will display in the button editor. For this graphic I really only need 3-slices, just the ones that are going to affect it horizontally.

If you remember how rounded rectangles scaled before 9-slice scaling (see the first image), you'll notice that the radius of the corners was the most distorted. I want those to remain the same, what I want to scale is the middle part of the button, the area between the two guides.

9-Slice Scaling Guides

 

Click Done. Now try scaling the object horizontally. As you can see the corners retain the right proportions!

Scaled

 

Copyright 2005-2007. VirtualClues.com (A division of Lynn Information Technologies ).

Home | Resources | Site Map | Contact Us | About Us | Terms | Membership FAQ's