JSFL Slicing for Skin Resizing

Slice-9 has been a beautiful solution to resizing skins but sometimes you’re restricted to using a pre-8 FlashPlayer. Shortly before the beta of 8 I wrote a couple scripts in JSFL to solve the tedious task of manually slicing my designs into 9 pieces. They will take any MovieClip (including their child MovieClips) and slice it up into 9 unique library assets named and preped for resizing. This process has been long and monotonous for many designers and can now be as easy as the Slice9 introduced in FlashPlayer 8.

Note: These scripts do not provide resizing functionality. They prepare skins to be used for resizing by dividing them into 9 individual MovieClips. Additional code must be included to intelligently resize these 9 clips properly.

There are two commands, divide.jsfl and slice.jsfl. The first, divide, simply creates a new guide layer with 4 dividing lines within the skin. To run the script, make sure you are in edit-mode for the skin you wish to effect, then double-click the jsfl file and it will do the rest. Once created, these lines should be positioned to divide the skin into it’s 9 areas respectfully.

As a brief explaination for those unfamiliar with how the slice 9 approach works: The 4 corners, top-left top-right bottom-left bottom-right, do not resize at all but are kept at a constant to their original size. The top-middle and bottom-middle portions are stretched horizontally and the left-middle and right-middle are stretched vertically. By stretching and positioning the 9 elements in this way a skin can retain a consistant visual appearance. See the following example:

Once the guides are positioned, run the script slice. This cuts the graphics on the guides and creates a new skin packaged nicely in the Library. The instance names of the 9 segments are “TL”, “T”, “TR”, “L”, “C”, “R”, “BL”, “B”, “BR” but this can be easily reconfigured by modifying the JSFL script.

Slice is intelligent enough to work well with children MovieClips. For example a skin could have two children, a movieclip named bgColor and one named shadow. The slicing process will retain the relationship of these clips and slice them appropriately so that each of the 9 segments will now have a bgColor and shadow child. This is necessary for styling, and in this example you can now apply a Color to the bgColor movieclip of each segment.

I hope it’s not too late to release these and still benefit pre-Flash8 developers or projects. Best of luck! The scripts can be downloaded here.

2 Comments

  1. Posted on November 22, 2008 at 9:07 am by Jakob Sternberg

    Hi Tyler!

    I’m still very much working with as2 solutions, and was just in to read more about your prototype class, when i stumbled over this slicing script.

    It sounds so cool, but it seems like the zip file is gone :/

    Apreciate your works!

  2. Posted on February 6, 2009 at 4:13 pm by xtyler

    Jakob – The zip has been restored.

    and to all – Sorry about the long delay…

The comments are closed.