Slice 9 in Adobe Flash CS4

Lately I have been getting many questions and complains regarding Slice 9 and why it's not functioning correctly when doing certain things , so i decided to write this blog to clarify two things :
- What is Slice 9 and how the user can you use it.
- Feature Limitations.

First let me talk a little bit about Slice 9 concept and then i will tell you about what you can and cannot do with slice 9.

The concept of Slice 9 is to split the Movieclip into 9 areas that are going to be scaled independently.
Why?? Using the Slice 9 grid,Users can control which areas to be scaled and which not to be scaled.For instance, many designers don't want see the corners of a custom component to be distorted when scaling that component.

As you see in the graph below Flash Authoring will divide the Movieclip into 9 areas that going to be scaled as below

1. No scale 2. Horizontal scale 3. No scale
4. Vertical scale 5. Horizontal and Vertical scale 6. Vertical scale
7. No scale 8. Horizontal scale 9. No scale



Figure 1. Slice 9 areas.

Nothing better than an example to demonstrate how to use scale 9

1. Launch Flash CS4 "if you don't have Flash CS4 go buy it :)".
2. File > New and then Select "Flash File (ActionScript 3.0).
3. Select Rectangle Tool from the ToolBar as follow :



Figure 2. ToolBar Panel.

4. From Properties panel (Window > Properties).Under Rectangle Options lock the rectangle corner and set them to 15 as follow



Figure 3. Properties Panel.

5. Draw Rectangle on Stage.
6. Select the Rectangle and the stroke by double clicking on it.
7. Modify > Convert To Symbol.
8. Make sure Symbol type is MovieClip.
9. Turn on "Enable guides for 9-slice scaling" as follow :



Figure 4. Convert To Symbol dialog.

10.Click OK.
11.Double click on the symbol to go into Edit mode and you should be seeing the following :



Figure 5. Slice 9 Edit Mode.

Moving those guides will determine which areas are going to be scaled :
a. Horizontally
b. Vertically
c. No Scale
as i explained above "Figure 1".

12.Exit "Edit Mode" by clicking on Scene 1 as follow :



Figure 6. Exit Edit Mode.

13. Now try to scale the rectangle as follow :



Figure 7. MovieClip with Slice 9.

Notice that neither the stroke nor the corners have been scaled.

Now let's try to turn off Slice 9 and see the difference. You can turn off Slice 9 by doing the following :

1. Right click on the Symbol inside the library and select "Properties".
2. Turn off "Enable guides for 9-slice scaling".
3.Click Ok.

You will see that the Rectangle on stage looks like below :



Figure 8. MovieClip without Slice 9.


Slice 9 limitations :
1. You can apply Slice 9 only on a MovieClip ( No Shape , No Button).
2. You can only Scale Slice 9 horizontally or vertically and if you try the following type of transformation,Slice 9 will get automatically turned off :
a. Skew.
b. Rotate.