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.