9 slice scale for bitmaps in flash (no hacks)

9slice_result_flash

9 slice scale is a nice feature, but when you try to use 9 slice in flash ide on MovieClip with bitmap, you will notice a problem. It will just not work as expected. So first thing you try is “Break Apart”, with same result. You are almost there, but due to the solution is not documented you need a small hint: After break apart (ctrl + b), select each of nine slices one by one and group (ctrl + g) individually and voilà its done. See snapshot and result images…

1. original image.png

9slice_image

2. symbol after break apart

9slice_flash_bitmap_break

3. symbol2 after break apart and individual grouping

9slice_flash_bitmap

4. result in flash cs4 ide symbol, symbol2

9slice_result_flash

5. 9 slice scale in flex (maintainAspectRatio used just for purpose, no impact on 9 slice scale)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
    [Embed(source="image.png", 
        scaleGridTop="5", scaleGridBottom="15", 
        scaleGridLeft="5", scaleGridRight="15")]
    public static const imageClass:Class;
    
    [Embed(source="lib.swf", symbol="symbol")]
    public static const symbolClass:Class;
    
    [Embed(source="lib.swf", symbol="symbol2")]
    public static const symbol2Class:Class;
]]>
</mx:Script>
<mx:Image width="100" height="200" source="{imageClass}" 
    maintainAspectRatio="false"/>
<mx:Image width="100" height="200" source="{symbolClass}"
    maintainAspectRatio="false"/>
<mx:Image width="100" height="200" source="{symbol2Class}"
    maintainAspectRatio="false"/>
</mx:Application>

6. result from flex

9slice_result_flex

gSkinner released BitmapSlice9 command for Flash Pro. It makes all this happen by one click.

11 comments so far

  1. kinetic one November 26, 2009 10:33

    Sorry,

    but how exactly do you select the parts in step 2?
    My Flash CS4 won’t allow me to select individual parts of the png,
    only the whole png.

    Cheers

  2. Jozef Chúťka November 26, 2009 10:39

    1. import image on scene
    2. make it symbol (f8)
    3. go inside symbol, select an image object and push ctrl+b (break apart) until image breaks into graphics (step 2)
    4. now select each part and continue

  3. kinetic one November 26, 2009 12:18

    Unfortunately,
    no luck, and I’m doing exact the things in you say.
    Do you also have Flash CS4? Maybe they changed the way beaking apart works.
    I managed to work around by slicing the original png and importing the 9 slicing seperately.

  4. Jozef Chúťka November 26, 2009 12:42

    yes, using cs4, maybe shortcut is deifferent … you can use right click on image -> break apart to break it into graphics (instead of ctrl+b)

  5. Rob December 10, 2009 06:02

    doesn’t work at all… ;( it would be sooo neat if it actually would, though

  6. Martin Svarovsky March 4, 2010 13:54

    Breaking apart into 9 pieces doesn’t work for me, either (Flash CS3 IDE). But I found workaround: draw horizontal/vertical lines in the place of slice guides *before* breaking bitmap apart. Then select all elements (ie. bitmap + lines) and now try to break it. Parts of bitmap should be selectable now. Group them individually (Ctrl+G) as described. Now it’s possible to delete rest of the lines.

  7. Michiel van der Ros June 22, 2010 16:33

    Works great, thanks!
    I guess some people don’t realize you have to create nine different selections and make them into nine groups.
    A very annoying thing about the Flash interface here, is that when you want to make a selection where the 9-slice-guide is, you will drag the guide. You cannot lock these guides, which is possible for regular guides.
    The previous comment is a nice solution for this.

  8. […] If you want to use a bitmap…good luck.  Yes, it is possible, as explained here, but the process is a royal pain and don’t even think about tweaking the slices or updating the […]

  9. caleb68 September 30, 2011 01:06

    I was going nuts for a bit trying to work this out with a PNG till I found this page. I converted to 9 point, then added a second layer, arranged the slice marks to the proper spots, then drew lines on second layer just on the “Outside” of the slice marks (very important) sense the corners were rounded with transparency. Cut the lines i drew on the second layer then pasted to the layer with the png, selected all and did CTRL+B (break apart), deselected all, selected each grid piece and did CTRL+G (Group). After Grouping I deleted the lines. If you do not want your transparent corners to ‘scale’ you have to have the grid lines off of it, and is why I drew the lines just outside of the grid so that the corners would be just slightly smaller then the grid itself. If they line up with the grid, THEY WILL SCALE, I don’t know if this is true for bmp’s and jpg’s, but it is for PNGS. Works great in CS 5.5 Thanks for the page 🙂 I should make a little section on my site with helpful tips of flash like this, even if its just so that I can go back to it and review if I forgot. I was converting to sprites rather then groups and lining the pieces edges up exactly with the grid lines.

  10. Scotty October 20, 2011 20:06

    Thanks this worked awesomely! I had a giant PNG bitmap in the background, breaking & grouping it up like you said worked solid.

  11. Philip March 15, 2012 12:49

    hello i read the tutorial and it worked for me, probably i could make a button which positions the corners with code easier than that, adobe should really fix that.

    thank you,

    used flash cs 5.5 ( still not supporting proper bitmap resizing)

Leave a comment

Please be polite and on topic. Your e-mail will never be published.