Wednesday, March 4, 2009

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.

9 comments:

  1. Very Good Review
    http://google.com

    ReplyDelete
  2. The 9-slice scaling is a nice feature but I've had to disable all live previews when using it. In CS4, it seems to make flash lag a hell of a lot, for example when selecting symbols on the stage, there seems to be a 2 second (roughly) delay and the same goes for entering edit mode etc. Turn off the live-preview and everything is back to normal. Has anybody encountered this? We are using Vista Ultimate on a wuad core machines so I know it shouldnt be a resource issue.

    ReplyDelete
  3. Not sure what you mean by "disable all live preview". Do you mean "Disable guides foe 9-slice scaling"?
    Thanks,
    Tareq

    ReplyDelete
  4. Very good the post,interesting blog.Thanks!

    ReplyDelete
  5. I've seen the problem with CS4 lagging from this feature. It appears to only be on ActionScript 2 projects. AcionScript 3.0 projects show the live preview perfectly without any lagging :)
    In AS2, even having just one symbol with 9 Slice Scaling in the library is enough to start the program lagging.

    ReplyDelete
  6. Hi Tom,

    This is a known issue with Slice 9 in AS2 fla file. It depends on the number of sliced 9 instance on stage. The more you have the longer it takes to display.

    ReplyDelete
  7. This information is very interesting, I really enjoyed, I would like get more information about this, because is very beautiful, thanks for sharing! costa rica investment opportunities

    ReplyDelete
  8. Excellent tutorial, thanks a lot, I have a question why the tool on the top was take off ? That could be use in many jobs.
    Thanks for sharing.

    ReplyDelete
  9. nice info..!!! I really like this blog, you are very good making them. I say that the issue discussed in this blog is quite interesting and of high quality. Keep on sharing.

    ReplyDelete