BitmapSlice9 is a command for Flash Pro that preps bitmaps for use with Scale9. Among other things, this makes it easy to use bitmap skins for controls, which is quite common for games and mobile apps.
In short, it slices your target bitmap into rectangles with custom bitmap fills according to the applied Scale9 grid. It also preserves your original bitmap in a guide layer (to keep it from compiling into the SWF) to make it easy to adjust and reapply the command.
Here’s a quick video showing how it works. It’s the first tutorial video I’ve ever done, and the audio is really terrible – I obviously need to get a decent microphone.
Ignoring the poor quality audio, would you like to see more tutorial videos here in the future?
I’m still hoping to see real Flash player support for Scale9 on bitmaps, but hopefully this works as an interim solution.
You can download it by clicking here. I’ve tested it in Flash CS4 and CS5.
UPDATE: May 4: updated to fix an issue with symbols in library folders. Download using the link above.
this resource from ByteArray.org is pretty cool, but it’s code only http://www.bytearray.org/?p=1206
MrSteel – good link, I was considering writing a run-time class for this as well. Now I don’t have to. 🙂
Very handy indeed! Thanks for the tool!
Very handy – yes please, you are a natural at these tutorials!
this is great !
that would help a lot ;
nice and handy script. thanks a lot !! … and don’t change your microphone, i love the sound 🙂
Cool, keep up the good work! I’m looking forward to your video tutorials.
slick!
unfortunately it does not work in Flash Pro CS3
I did a child class of movieclip with a totally embedded bitmapscale9, overriding scale9 property so it works great with flash pro. May It post It here ?
CS4 cannot open example.fla; is it a CS5 file?
Tronster – whoops, just uploaded a new version with a compatible example.fla. Thanks for pointing that out.
I would like to see more of this tutorials. Thank you.
Doesn’t CS4 and CS5 support the Flex [Embed] metadata tag? That would allow you to accomplish the same thing no? (Since the Embed tag supports scaleGridLeft, scaleGridRight, scaleGridTop, scaleGridBottom attributes). The resulting display object would equate to something similar to what you’ve created.
Wow, and I just wrote a 9-slice scaler for bitmaps last week. Though, mine works at runtime so is probably not as good for non-techies.
All the same, here you go: http://www.pixelbath.com/blog/2010/04/flash-bitmap-9-slice-scaling-as3/
Very nice dude. Would definitely like to see more tutorial videos in the future.
Wow, nice one.
i had created a similar jsfl here:
http://www.itamt.org/blog/index.php/slice9bitmap_jsfl/
well, i named it slice9bitmap…
and i get the library item through:
fl.getDocumentDOM().library.getSelectedItems();
i find that you get the ‘curEditItem’ through:
doc.library.items[doc.library.findItemIndex(doc.getTimeline().name)];
this really helps me!
I always use code to slice a bitmap to 9 bitmaps.
Grat, ThankU, man 🙂
Awesome Grant, thank you.
“would you like to see more tutorial videos here in the future?”
Yes! Thanks for this, very handy as I like to do everything I can when it comes to graphics and animation in the Flash Pro IDE.
Another vote for more tutorial videos here. I don’t care if the audio is rough, I could understand what you were saying and that’s all I care about.
Nice! I am using it. 🙂
Realy nice! Just DL and start to use…
Thanks Grant.
very cool authoring tool 😉 thanks Grant , and yes more video tutorials! Could I bring up a point of concern pertaining to video steaming in a global perspective of bandwidth – for the many people like me not living in a first world city with good internet speeds I would be happy if you offer your feeds with a choice of video compression eg low , medium , high ? I personally don’t see enough of this type of logic anymore from many of the big international brands , a simple means to make your content delivery solution more user friendly to a global audience – just a thought.
Neat feature to add to the IDE, thanks! I’ve recently been using a 3rd party framework by ghostwire.com – the Aspire UI tookit – that does this at runtime using external PNGs as skins for a variety of components. I’ve found it to be really handy for rapid UI building in games (and for our own internal AIR based tools).
My main reason for adopting it initially was no 3rd party dependencies (this is not a partisan plug BTW – just think it’s a good library and well worth checking out).
Thanks, very helpful! One little bug: The symbol may not be contained in a library folder, otherwise the script (wrongly) complains the bitmap should not be on the root timeline.
Moritz, thanks for figuring that out. I was having the same problem.
Grant, this seems like an exception that needs a better error message, or else a fix (since I have to keep symbols organized in Library folders).
Delfeld & Moritz – I just posted a fixed version. You can download it from the link in the post above.
Thanks. Video tutorials would be great.
as I can make an image tag will take effect, and also that when the turn only see the front, I am simulating esque label from any image loaded in a swf, then I’m good alternative as I can make winding defect of an image to a body like a cylinder or bottle
THANK YOU, THANK YOU, THANK YOU!!!!!!!
What a time-saver!
At line 208 of file “BitmapSlice9.jsfl”:
TypeError: doc.addNewPrimitiveRectangle is not a function
Adobe Flash CS3. Second layer is empty. No working ^(
dark – it’s only tested in CS4 & 5. You could probably make it work in CS3 by changing the JSFL to use rectangle shapes instead of rectangle primitives.
This script will not work in CS3. The style “bitmap” for a Fill is not valid.
source: http://livedocs.adobe.com/flash/9.0/main/00004099.html
Inspired by ByteArrays Didier Brun (referenced in an earlier comment) and his scalebitmap class, I decided to create a scale25 bitmap to provide a little more power and flexibility when dealing with slightly more complex graphics.
You can checkout the Scale 25 library at the Theory9 website here: http://theorynine.com/labs/components-source/scale-25/
I don’t see the swf, only “get Adobe Flash Player” button.
I have Google Chrome and Flash Player 10.2.
Does not seem to work with 10.2 debug player and Firefox 4.
Works in Safari though.
Does not work in FireFox 4 with 10.2 debug player installed.
Wanted to share my appreciation for this. I previously always solved this by code, which is not ideal. This fits perfectly into my preferred workflow where assets are created in the Flash IDE. Many thanks for this awesome script!
You’re a God. Thank you!
Excellent solution! Thanks for sharing.
The embed code for the video seems to be broken. I was seeing the text mentioning the video and a Get Flash Player button (I’ve got the latest version, tried in 2 different browsers).
Anyway, I’ve found the video here: http://gskinner.com/blog/assets/BitmapSlice9/BitmapSlice9Vid.swf
Works great! Thanks heaps!
try do it. so cool.
you’re awesome! thanks!
Three years later and you’re still a blessing Grant!! Used it in conjunction with Uniswf for a bitmap based frame for a game. Uniswf doesn’t support 9-Slice (yet), so this worked wonderfully with Unity and Uniswf.
Thanks Grant!