 BitmapSlice9: Scale9 for Bitmaps in Flash ProPosted on April 14, 2010 by Grant SkinnerBitmapSlice9 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.
Follow @gskinner on Twitter for more news and views on interactive media.
|
|
|
42 Comments
this resource from ByteArray.org is pretty cool, but it's code only http://www.bytearray.org/?p=1206
Posted by: MrSteel on Apr 14, 2010 10:42am URL: 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 on Apr 14, 2010 10:44am URL: http://gskinner.com/blog/
Very handy indeed! Thanks for the tool!
Posted by: Nate Chatellier on Apr 14, 2010 10:57am URL: http://blog.natejc.com
Very handy - yes please, you are a natural at these tutorials!
Posted by: Nick on Apr 14, 2010 11:12am
this is great !
that would help a lot ;
Posted by: Ali on Apr 14, 2010 11:14am 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 on Apr 14, 2010 11:31am URL: http://www.liluc.com
Cool, keep up the good work! I'm looking forward to your video tutorials.
Posted by: mpc on Apr 14, 2010 11:35am URL: http://www.blog.mpcreation.pl/last-few-weeks/
slick!
unfortunately it does not work in Flash Pro CS3
Posted by: Chris Davis on Apr 14, 2010 11:40am
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 on Apr 14, 2010 12:34pm URL: http://Blog.martian-arts.org
CS4 cannot open example.fla; is it a CS5 file?
Posted by: Tronster on Apr 14, 2010 1:01pm URL: http://tronster.com
Tronster - whoops, just uploaded a new version with a compatible example.fla. Thanks for pointing that out.
Posted by: Grant Skinner on Apr 14, 2010 1:10pm URL: http://gskinner.com/blog/
I would like to see more of this tutorials. Thank you.
Posted by: alvaro obyrne on Apr 14, 2010 3:04pm
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 on Apr 14, 2010 3:16pm
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 on Apr 14, 2010 4:30pm URL: http://www.pixelbath.com/
Very nice dude. Would definitely like to see more tutorial videos in the future.
Posted by: jassa on Apr 14, 2010 6:19pm URL: 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 on Apr 14, 2010 7:24pm URL: http://www.itamt.org
I always use code to slice a bitmap to 9 bitmaps.
Posted by: jim on Apr 14, 2010 10:51pm URL: http://theflashblog.spaces.live.com/
Grat, ThankU, man :)
Posted by: Ali on Apr 15, 2010 3:12am
Awesome Grant, thank you.
Posted by: Flo on Apr 15, 2010 6:31am URL: 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 on Apr 15, 2010 12:27pm URL: 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 on Apr 17, 2010 1:28pm URL: http://www.davidcameron.biz
Nice! I am using it. :)
Posted by: Renato on Apr 18, 2010 6:58pm URL: http://www.aschile.net
Realy nice! Just DL and start to use...
Thanks Grant.
Posted by: Özgür ALTAY on Apr 20, 2010 7:54am URL: 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 on Apr 20, 2010 1:07pm URL: 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 on Apr 21, 2010 12:39pm URL: 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 on May 2, 2010 1:38pm URL: 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 on May 4, 2010 2:54pm
Delfeld & Moritz - I just posted a fixed version. You can download it from the link in the post above.
Posted by: Grant Skinner on May 4, 2010 3:28pm URL: http://gskinner.com/blog/
Thanks. Video tutorials would be great.
Posted by: Martin on May 4, 2010 5:33pm
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 on Jun 16, 2010 9:04am
THANK YOU, THANK YOU, THANK YOU!!!!!!!
What a time-saver!
Posted by: Greg on Jun 29, 2010 2:00pm
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 on Jul 8, 2010 12:43pm
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 on Jul 8, 2010 3:20pm URL: 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 on Jul 27, 2010 11:08am
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/
Posted by: TheoryNine on Oct 8, 2010 12:50pm URL: http://theorynine.com/labs/
I don't see the swf, only "get Adobe Flash Player" button.
I have Google Chrome and Flash Player 10.2.
Posted by: Broady on Mar 6, 2011 8:03am
Does not seem to work with 10.2 debug player and Firefox 4.
Works in Safari though.
Posted by: Tom Grant on Apr 4, 2011 5:52pm
Does not work in FireFox 4 with 10.2 debug player installed.
Posted by: Tom Grant on Apr 4, 2011 5:53pm
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!
Posted by: Paul on Apr 5, 2011 8:19am
You're a God. Thank you!
Posted by: DrTyrell on Apr 27, 2011 2:39am URL: http://www.zeroggames.com/
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
Posted by: alex on Oct 5, 2011 3:44am
Works great! Thanks heaps!
Posted by: Paul on Nov 28, 2011 2:47pm