9 slice scale for bitmaps in flash (no hacks)
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
2. symbol after break apart
3. symbol2 after break apart and individual grouping
4. result in flash cs4 ide symbol, symbol2
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
gSkinner released BitmapSlice9 command for Flash Pro. It makes all this happen by one click.
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
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
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.
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)
doesn’t work at all… ;( it would be sooo neat if it actually would, though
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.
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.
[...] 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 [...]
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.
Thanks this worked awesomely! I had a giant PNG bitmap in the background, breaking & grouping it up like you said worked solid.