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.
Comments (34)
this resource from ByteArray.org is pretty cool, but it's code only http://www.bytearray.org/?p=1206
Posted by: MrSteel at April 14, 2010 10:42 AMURL: http://mrsteel.wordpress.com
MrSteel - good link, I was considering writing a run-time class for this as well. Now I don't have to. :)
Posted by: Grant Skinner at April 14, 2010 10:44 AMURL: http://gskinner.com/blog/
Very handy indeed! Thanks for the tool!
Posted by: Nate Chatellier at April 14, 2010 10:57 AMURL: http://blog.natejc.com
Very handy - yes please, you are a natural at these tutorials!
Posted by: Nick at April 14, 2010 11:12 AMURL:
this is great !
Posted by: Ali at April 14, 2010 11:14 AMthat would help a lot ;
URL: http://www.im-school.com
nice and handy script. thanks a lot !! ... and don't change your microphone, i love the sound :)
Posted by: uli at April 14, 2010 11:31 AMURL: http://www.liluc.com
Cool, keep up the good work! I'm looking forward to your video tutorials.
Posted by: mpc at April 14, 2010 11:35 AMURL: http://www.blog.mpcreation.pl/last-few-weeks/
slick!
Posted by: Chris Davis at April 14, 2010 11:40 AMunfortunately it does not work in Flash Pro CS3
URL:
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 ?
Posted by: y_nk at April 14, 2010 12:34 PMURL: http://Blog.martian-arts.org
CS4 cannot open example.fla; is it a CS5 file?
Posted by: Tronster at April 14, 2010 01:01 PMURL: http://tronster.com
Tronster - whoops, just uploaded a new version with a compatible example.fla. Thanks for pointing that out.
Posted by: Grant Skinner at April 14, 2010 01:10 PMURL: http://gskinner.com/blog/
I would like to see more of this tutorials. Thank you.
Posted by: alvaro obyrne at April 14, 2010 03:04 PMURL:
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.
Posted by: Twinsen at April 14, 2010 03:16 PMURL:
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/
Posted by: Michael Hoskins at April 14, 2010 04:30 PMURL: http://www.pixelbath.com/
Very nice dude. Would definitely like to see more tutorial videos in the future.
Posted by: jassa at April 14, 2010 06:19 PMURL: http://www.bangersandflash.net
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!
Posted by: tamt at April 14, 2010 07:24 PMURL: http://www.itamt.org
I always use code to slice a bitmap to 9 bitmaps.
Posted by: jim at April 14, 2010 10:51 PMURL: http://theflashblog.spaces.live.com/
Grat, ThankU, man :)
Posted by: Ali at April 15, 2010 03:12 AMURL:
Awesome Grant, thank you.
Posted by: Flo at April 15, 2010 06:31 AMURL: http://www.so-touch.com
"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.
Posted by: Aaron Beall at April 15, 2010 12:27 PMURL: http://abeall.com
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.
Posted by: David Cameron at April 17, 2010 01:28 PMURL: http://www.davidcameron.biz
Nice! I am using it. :)
Posted by: Renato at April 18, 2010 06:58 PMURL: http://www.aschile.net
Realy nice! Just DL and start to use...
Thanks Grant.
Posted by: Özgür ALTAY at April 20, 2010 07:54 AMURL: http://www.astrolabs.net
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.
Posted by: ian pretorius at April 20, 2010 01:07 PMURL: http://www.flashtheplanet.com
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).
Posted by: Tom Gooding at April 21, 2010 12:39 PMURL: http://www.quickthinkmedia.co.uk
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.
Posted by: Moritz Stefaner at May 2, 2010 01:38 PMURL: http://well-formed-data.net
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).
Posted by: Delfeld at May 4, 2010 02:54 PMURL:
Delfeld & Moritz - I just posted a fixed version. You can download it from the link in the post above.
Posted by: Grant Skinner at May 4, 2010 03:28 PMURL: http://gskinner.com/blog/
Thanks. Video tutorials would be great.
Posted by: Martin at May 4, 2010 05:33 PMURL:
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
Posted by: Miguel Angel at June 16, 2010 09:04 AMURL:
THANK YOU, THANK YOU, THANK YOU!!!!!!!
What a time-saver!
Posted by: Greg at June 29, 2010 02:00 PMURL:
At line 208 of file "BitmapSlice9.jsfl":
TypeError: doc.addNewPrimitiveRectangle is not a function
Adobe Flash CS3. Second layer is empty. No working ^(
Posted by: dark at July 8, 2010 12:43 PMURL:
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.
Posted by: Grant Skinner at July 8, 2010 03:20 PMURL: http://gskinner.com/blog/
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
Posted by: upbeat.addict at July 27, 2010 11:08 AMURL: