ScaleBitmap : 9-slice bitmap class by Didier Brun

Hi everybody,

I have just finished a simple class which allows you to resize dynamically any Bitmap (just like the MovieClip.scale9Grid feature).

ScaleBitmap

Open Source This project is OPEN SOURCE under RPL License.
2009-02-19 v1.2.2 scaleBitmap_v122.zip

The zip file contains :

  • the v1.2.2 ScaleBitmap class
  • a Flash CS3 demo file
  • a demo PNG Bitmap file

Some features :

  • dynamically set the scale9Grid parameter
  • use setSize() method
  • get the originalBitmapData instance
  • ScaleBitmap extends flash.display.Bitmap

Don't hesitate to post any comments/bugs :)

NEW

Alexandre Legout has contributed to this v1.2 ScaleBitmap which introduce these
new features :

  • bitmapData setter
  • redrawing scale9Grid optimization
  • null scale9Grid capability (restore the default Bitmap class behaviour)

Thanks Lalex :)

Comments (59)

  1. Freddy wrote::

    really great job… liquid components are using this class??

    Monday, December 17, 2007 at 5:06 am #
  2. katopz wrote::

    thx!, i love this one!

    Monday, December 17, 2007 at 5:44 am #
  3. Isaac wrote::

    Nice! Should be handy for raster-based interfaces.

    Monday, December 17, 2007 at 7:21 am #
  4. Flapflap wrote::

    Wow… That kick ass.

    Monday, December 17, 2007 at 12:27 pm #
  5. Eugene wrote::

    as far as i understand this Class could rewritten to AS2 Flash 8.

    am i right?

    Monday, December 17, 2007 at 1:02 pm #
  6. Han Sanghun wrote::

    Wow, nice one. I don’t have to break apart bitmaps anymore. Thanks.

    Monday, December 17, 2007 at 3:06 pm #
  7. Didier Brun wrote::

    Freddy > No, Liquid Components are based on a more complex multi-states grid : LiquidGrid.

    Eugene > Yes, it could be ported to AS2.

    Thanks for your comments :)

    Monday, December 17, 2007 at 4:48 pm #
  8. joan wrote::

    Nice, nice and very nice… not more comments.

    Yes one comment, good work.

    Monday, December 17, 2007 at 5:54 pm #
  9. teejay wrote::

    which are differences between this class and the embedded scale9Grid feature?

    Monday, December 17, 2007 at 9:18 pm #
  10. Didier Brun wrote::

    teejay > the scale9Grid does not work with Bitmap.

    Tuesday, December 18, 2007 at 2:10 am #
  11. Pleh wrote::

    Nice, I made a similar class byself a while ago to use in my controls, however I was having problems scaling controls in a 3-slice setup, some of my controls only needed to be scaled horazontaly but I wanted to use the same scaling class to manage everything, so I would pass a rectangle with y set to 0 and height set to the height of the bitmap. This will cause an error in adobes 9 slice implementation. What would yours do in this situation?

    Keep up the good work

    Tuesday, December 18, 2007 at 4:18 pm #
  12. Didier Brun wrote::

    Hi Pleh,

    It’s working pretty well with a 3-slice rectangle :)

    Tuesday, December 18, 2007 at 4:57 pm #
  13. William from Lagos wrote::

    Nice work Didier.

    Can you make available the AS2 version, please?

    Tuesday, December 18, 2007 at 8:48 pm #
  14. Roger wrote::

    Whoah, THANK YOU! I always hated that scale9 was for vectors only. Yay, me and my skins thank you!

    Wednesday, December 19, 2007 at 2:51 am #
  15. Didier Brun wrote::

    William > Sorry, I think I will never find enough free time to port it to AS2, maybe a ByteArray reader ?

    A new V1.2 is up ! (thanks Lalex)

    Wednesday, December 19, 2007 at 6:04 pm #
  16. Danny wrote::

    There’s an issue if I try to do more of scale3 rect (say I only want to stretch horizontally or vertically).

    I updated validGrid to allow the right or bottom to be

    Wednesday, December 19, 2007 at 6:35 pm #
  17. Danny wrote::

    My comment goto stripped.
    I meant to say validGrid() allow right or bottom to be less than/equal to width or height.

    Wednesday, December 19, 2007 at 7:00 pm #
  18. Didier Brun wrote::

    Danny > Yes you’re right, I’ve just fixed this issue, the new 1.2 is up.
    Thanks :)

    Wednesday, December 19, 2007 at 9:23 pm #
  19. LAlex wrote::

    My mistake!

    I changed the v1.1 condition to return the opposite result, changing the and(&&) by a or(||) and “more than” by “less than” instead of “less than or equal”…

    Good use! ;)

    Wednesday, December 19, 2007 at 9:27 pm #
  20. AS2 implementation. http://durej.com/?p=59

    Monday, January 14, 2008 at 2:22 am #
  21. Didier Brun wrote::

    Slavomir > Nice !

    Monday, January 14, 2008 at 11:41 am #
  22. Pleh wrote::

    There is a bug which only allows scale9 rectangles to have evenly distributed widths/heights for example a scale9rect of {2,2,2,2} will not work on an image what has a width and height of {10,10}

    to fix this change the following 2 lines in resizeBitmap…

    var dRows : Array = [0, _scale9Grid.top, h - (_originalBitmap.height - _scale9Grid.bottom), h];
    var dCols : Array = [0, _scale9Grid.left, w - (_originalBitmap.width - _scale9Grid.right), w];

    Sunday, February 10, 2008 at 2:41 pm #
  23. Didier Brun wrote::

    Thanks Pleh :)
    I’ve updated it.

    Tuesday, February 19, 2008 at 8:30 pm #
  24. mopi wrote::

    sorry, I made a mistake… Please delete previously comment.

    Just a little bug to fix :

    function ScaleBitmap(bmpData : BitmapData = null, pixelSnapping : String = “auto”, smoothing : Boolean = false) {

    // super constructor
    super(bmpData, pixelSnapping, smoothing);

    // original bitmap
    if (bmpData) _originalBitmap = bmpData.clone();
    }

    Wednesday, February 20, 2008 at 4:21 pm #
  25. DJ_ouf wrote::

    Thanks a lot Pleh! you helped me on a hard problem which was annoying me so much! :D

    Friday, February 22, 2008 at 3:53 pm #
  26. Blue112 wrote::

    Bonjour.
    Premièrement, bravo pour cette classe.

    Ensuite, il semble y avoir un bug lorsque je redimensionne l’objet scaleBitmap de 700 à 790 pixel en largeur.
    En effet, dans cette plage de largeur, toute la partie centrale de l’image (haut, milieu et bas inclus) disparait.
    En dessous et au dessus de cette plage, tout est normal.

    Pour information, mon image fait 220*130

    Rectangle de redimension :
    var rect:Rectangle = new Rectangle(105, 60, 10, 10);

    Merci bien :)

    Friday, March 7, 2008 at 12:49 am #
  27. mediakid wrote::

    2009-02-19 v1.2.2 scaleBitmap_v122.zip

    200″9″ ? Am I way too picky or I self just missing something :P

    Wednesday, March 26, 2008 at 12:24 pm #
  28. Pleh wrote::

    no problem DJ_ouf, Thanks Didier for creating the class in the first place, I have now scrapped my existing SplitBitmap classes and im now using this because its soooo good :)

    Wednesday, March 26, 2008 at 7:17 pm #
  29. Didier Brun wrote::

    Blue 112 > Merci, je vais regarder çà et je te tiens au courant.

    mediakid > Oops ! Welcome to the future :)

    Pleh > You’re welcome !

    Wednesday, March 26, 2008 at 9:34 pm #
  30. Blue112 wrote::

    Des nouveautés au niveau de mon bug ?

    Sunday, April 20, 2008 at 1:15 am #
  31. sitron wrote::

    thanks a lot for this class! very handy!
    shouldn’t you add a clear() (or dispose()) method which would dispose() both the original bitmap and the scaled one?

    Wednesday, September 17, 2008 at 6:38 pm #
  32. Shimray wrote::

    Hi. I found a bug. I tried to add a ScaleBitmap with null bmpData:

    _bodySBM = new ScaleBitmap();

    There was an Exception thrown because:

    (ScaleBitmap.as@48) _originalBitmap = bmpData.clone();

    So I fixed it with:

    (ScaleBitmap.as@48) if(bmpData != null) _originalBitmap = bmpData.clone();
    (ScaleBitmap.as@123) if(super.bitmapData != null) super.bitmapData.dispose();

    So now I am able to change original BitmapData if it’s even unknown at init. Sweet ;]

    BTW you have year 2009 next to download link :]

    Tuesday, October 14, 2008 at 8:19 pm #
  33. lilive wrote::

    Hello,
    I just try your class. Thanks a lot to share it.
    I try to use an embedded asset :
    [Embed(source="bmp.png")]
    var bmp:Class;
    var test:ScaleBitmap = new bmp() as ScaleBitmap;
    addChild(test);
    I’ve got an execution error (null object reference).
    I solved it doing:
    [Embed(source="bmp.png")]
    var bmp:Class;
    var temp:Bitmap = new bmp() as Bitmap;
    var test:ScaleBitmap = new ScaleBitmap(temp.bitmapData);
    addChild(test);
    But it’s not very nice.
    Did I miss something ?
    Thanks.

    Sunday, February 15, 2009 at 4:44 am #
  34. Matthew Sweet wrote::

    Wow, thanks man. I just discovered that scale9Grid doesn’t support bitmaps. Under a serious time crunch, and didn’t have time to write my own class to do this. You just saved my butt. Thank you!

    Tuesday, March 24, 2009 at 11:56 am #
  35. Andrei wrote::

    Thank you, it works great!

    Wednesday, April 8, 2009 at 4:35 pm #
  36. Daniel wrote::

    if you try to use the same bitmapdata to conserve memory it will Error out : 2015
    var msb1:ScaleBitmap=new ScaleBitmap(MainBitData);
    var msb2:ScaleBitmap=new ScaleBitmap(MainBitData);
    msb1.scale9Grid = new Rectangle(20,20,80,80);
    msb1.setSize(200,64);
    addChild(msb1);
    msb2.scale9Grid = new Rectangle(20,20,80,80);
    msb2.setSize(200,64);
    addChild(msb2);
    using your example.

    comment out .scale9Grid and it works without correctly scaling.

    Monday, May 11, 2009 at 3:22 am #
  37. Hi Didier,
    I’m trying to reflect a movieclip containing an instance of the ScaleBitmap class but I get a really strange result. Seems that the original bitmapdata is reflected.
    I just uploaded an example here:
    http://www.rblab.com/reflect.zip

    Thanks a lot for all the shared work

    Friday, May 29, 2009 at 4:35 am #
  38. Pipeep wrote::

    There is a weird bug that happens when I set my width and height of the scale9 rect to 1 and 1.

    Sunday, June 21, 2009 at 11:56 pm #
  39. Severiaan wrote::

    Hi,
    I wnat to report broken link, I can’t download example:(

    Friday, July 3, 2009 at 11:47 pm #
  40. Joel Stransky wrote::

    I’ve created scaleX and scaleY properties.

    //add to class properties
    private var _originalWidth:Number;
    private var _originalHeight:Number;
    private var _scaleX:Number = 1;
    private var _scaleY:Number = 1;

    //add to constructor
    _originalWidth = bmpData.width;
    _originalHeight = bmpData.height;

    //add to getters/setters
    override public function get scaleX():Number { return _scaleX;}
    override public function set scaleX(value:Number):void {
    if ( value != _scaleX) {
    _scaleX = value;
    var w:Number = _originalWidth * value;
    setSize(w, height);
    }
    }
    override public function get scaleY():Number { return _scaleY;}
    override public function set scaleY(value:Number):void {
    if ( value != scaleY) {
    _scaleY = value;
    var h:Number = _originalHeight * value;
    setSize(width, h);
    }
    }

    Wednesday, August 12, 2009 at 7:16 pm #
  41. foreground wrote::

    SUPER-MEGA-BEST class!

    Monday, August 24, 2009 at 7:34 pm #
  42. Hey, I really like the Idea!

    Unfortunately I’m having a problem with rotating the scaled Bitmap. It looks distorted like the bitmap is not smoothed. But I pass smoothing = true.

    Do you have an Idea?

    Thank you,
    Raphael ;)

    Tuesday, October 6, 2009 at 11:59 am #
  43. sindney wrote::

    nice work!

    Sunday, November 1, 2009 at 6:43 am #
  44. I merged all changes from comments (me, Joel Stransky etc.), cleanded the code and published at http://gist.github.com/232800. I think it will be much easier to have it hosted as a gist…

    Thursday, November 12, 2009 at 1:58 pm #
  45. Jakob E wrote::

    Very nice class – thanks!

    However I encountered a bug with missing middle section graphics.

    Example(original 80×45 png)

    If using scale9Grid=new Rectangle(10,10,4,10) the
    following bitmap widths causes the middle section not to be drawn:
    600,700,800,900,1000,1500,1600,1700,1800,1900,2000.

    If setting the following bitmap widths it shows just fine:
    100,200,300,400,500,1100,1200,1300,1400,2100,2200

    If I figure out why I’ll post my findings.

    Best,
    Jakob E

    Sunday, December 6, 2009 at 5:03 am #
  46. chhabeg wrote::

    thnx… Excellent class

    Friday, December 18, 2009 at 4:21 pm #
  47. martin wrote::

    A Really useful class that’s also super easy to use :P
    What more could I want :) Thanks, man!

    Tuesday, February 23, 2010 at 4:06 pm #
  48. Sides Dissapearing wrote::

    Hi, Didier.
    Any thoughts on why I’m getting this

    http://bit.ly/ScaleBitmap
    (just move around with the mouse down to test)
    Notice how the sides disappear.
    Here’s a close-up of the bitmap showing the grid.
    Thanks
    http://img717.imageshack.us/i/grid.gif/

    Wednesday, April 14, 2010 at 10:51 pm #
  49. +1 thanks

    Saturday, August 7, 2010 at 12:34 am #
  50. lolo wrote::

    very great, thanks !

    Friday, August 27, 2010 at 8:02 pm #
  51. Vemilyus wrote::

    Hello Didier, I incorporated this really nice class into my open source toolkit.
    Check it out: http://code.google.com/p/as3petoolkit/source/browse/trunk/PET%20Core/src/at/vy/pet/visuals/Scale9Bitmap.as

    Thursday, April 7, 2011 at 7:46 pm #
  52. Greg wrote::

    If anybody is curious the solution outlined below is over twice as fast to execute:

    http://troygilbert.com/2009/08/quick-fix-for-scale-9-issues/

    Saturday, April 30, 2011 at 1:39 am #
  53. michael wrote::

    Hi!

    I use this class as the base component in a gui framework i wrote for my games.

    In my last project I started to recycle bitmapdata and found a bug when trying to do so. it seems the class is destroying the original bitmapdata when asigning a scale9grid. Reusing the bitmapdata somewhere else causes a #2015 – invalid bitmapdata.

    I am starting investigations.

    michael

    Tuesday, December 6, 2011 at 10:07 pm #
  54. michael wrote::

    Hi!

    I found the reason and it’s not wrong to say:”It’s a feature, not a bug” :-)

    The feature is: As long as scaling isn’t used the class uses the original bitmapdata member of the super class. When asigning a scale9grig, the dispose function of the super class’ bitmapdata is called and the own implementation for bitmapdata is used.

    Clear this saves performance. And there are situations where this behavior is correct and there are other situations where this behavior is wrong.

    I sugest a member to control if the super.bitmapdata is disposed or not.

    My solution looks like this:


    public var disposeSuperBitmapData:Boolean = true;

    private function assignBitmapData( bmp:BitmapData ):void {
    if ( super.bitmapData != null && disposeSuperBitmapData) {
    super.bitmapData.dispose();
    }

    regards,

    michael

    Tuesday, December 6, 2011 at 10:43 pm #
  55. michael wrote::

    Hi!

    I made a test file last night.

    I created an instance of the scaleBitmap class on stage and assigned a scale9grid to it.

    In an enterFrame-Event I created a new Bitmapdata object and assigned it to the scalebitmap instance.

    I completely disabled the call of dispose in the class and watched the memory consumtions of the flash player. It was stable and didn’t increase with each new Bitmapdata.

    As far as I know the flashplayer uses reference counting to determine if objects are still in use or not. If we assign a new bitmapdata object to our instance, flashplayer knows the old one isn’t used anymore.

    But when we want to recycle our bitmapdata object we have a second reference to it from your “bitmapdata library”.

    I think we could remove the dispose call.

    Someof you may argue, that the flashplayer’s behavior isn’t the same in every version/plattform. – You may be right!

    regards,

    michael

    Wednesday, December 7, 2011 at 1:08 pm #
  56. vamapaull wrote::

    I can’t download the zip archive. Is it still available?

    Tuesday, May 15, 2012 at 5:27 pm #
  57. Thibault Imbert wrote::

    Hi vamapaull,

    Yes, just fixed, sorry for the inconvenience.

    Thibault

    Friday, May 25, 2012 at 10:44 am #
  58. vamapaull wrote::

    Thank you for this great and very useful project!

    Thursday, December 6, 2012 at 7:22 pm #
  59. amandus99 wrote::

    Hi,
    I’m trying to use ScaleBitmap in combination with TweenMax. When I’m resizing the BMP it is growing to the left and down. Is there a possibility to make it individual. So in some cases I want the BMP to grow to the left and up…

    Saturday, February 9, 2013 at 9:27 am #

Trackbacks/Pingbacks (21)

  1. [...] Visit site: http://www.bytearray.org/?p=118 [...]

     
  2. [...] was inspired by the  the poston Bytearray blog , well this is basicaly it’s slightly different AS2 implementation.  [...]

     
  3. [...] AS3 one can be found with our friends over at Byte Array http://www.bytearray.org/?p=118 addthis_url = ‘http%3A%2F%2Fwww.robmccardle.com%2Fwp%2F%3Fp%3D21′; addthis_title = [...]

     
  4. AS3 opensource project « RIAdobe on Thursday, April 10, 2008 at 12:25 pm

    [...] 15. ScaleBitmap : 9-slice bitmap class The owner have just finished a simple class which allows you to resize dynamically any Bitmap (just like the MovieClip.scale9Grid feature). [...]

     
  5. 30+ useful as3 open source projects |Ntt.cc on Wednesday, April 16, 2008 at 1:47 pm

    [...] 15. ScaleBitmap : 9-slice bitmap classThe owner have just finished a simple class which allows you to resize dynamically any Bitmap (just like the MovieClip.scale9Grid feature). [...]

     
  6. 30个AS3的开源项目 | 明的日记 on Saturday, July 19, 2008 at 3:42 pm

    [...] 15. ScaleBitmap : 9-slice bitmap class The owner have just finished a simple class which allows you to resize dynamically any Bitmap (just like the MovieClip.scale9Grid feature). [...]

     
  7. 30个AS3开源项目 | RIA Technology on Friday, December 26, 2008 at 4:51 pm

    [...] 15. ScaleBitmap : 9-slice bitmap class The owner have just finished a simple class which allows you to resize dynamically any Bitmap (just like the MovieClip.scale9Grid feature). [...]

     
  8. ScaleBitmapLauncher « 쎈과 서연이의 행방불명 on Tuesday, April 7, 2009 at 9:57 am

    [...] ScaleBitmap 은 http://www.bytearray.org/?p=118 이 아저씨가 [...]

     
  9. [...] 15. ScaleBitmap : 9-slice bitmap class The owner have just finished a simple class which allows you to resize dynamically any Bitmap (just like the MovieClip.scale9Grid feature). [...]

     
  10. AS3 opensource project « Sharring Your Life on Tuesday, November 24, 2009 at 4:44 am

    [...] 15. ScaleBitmap : 9-slice bitmap class The owner have just finished a simple class which allows you to resize dynamically any Bitmap (just like the MovieClip.scale9Grid feature). [...]

     
  11. [...] scaling nine Bitmap instances. When developing the MAX Companion, I tried Didier Brun’s ScaleBitmap class, but discovered a costly memory leak in which it instantiates a new BitmapData instance with [...]

     
  12. ScaleBitmap : 9-slice bitmap class « as3开源大全 on Sunday, March 28, 2010 at 10:00 pm

    [...] 项目地址:http://www.bytearray.org/?p=118 [...]

     
  13. Flash: Scale9Grid für Bitmaps / crusy.net on Friday, May 28, 2010 at 3:07 pm

    [...] Glück gibt es Abhilfe von ByteArray.org. Anwendungsbeispiel: var bg:SomeSwcClip = new SomeSwcClip(); var bgBitmapData:BitmapData = new [...]

     
  14. 30+ useful as3 open source projects « FED视野 on Monday, July 19, 2010 at 2:54 am

    [...] 15. ScaleBitmap : 9-slice bitmap class The owner have just finished a simple class which allows you to resize dynamically any Bitmap (just like the MovieClip.scale9Grid feature). [...]

     
  15. Flex开源图形组件 on Tuesday, September 7, 2010 at 3:56 pm

    [...] : 9-slice bitmap class http://www.bytearray.org/?p=118 [...]

     
  16. The Power of Scale 25 « TheoryNine Labs on Friday, September 10, 2010 at 10:07 pm

    [...] The ScaleBitmap25 and ScaleBitmap9 classes are based on the ScaleBitmap class created by ByteArray’s Didier Brun. [...]

     
  17. Scale 25 > Scale 9 « TheoryNine Labs on Friday, September 10, 2010 at 11:31 pm

    [...] ByteArray’s Didier Brun provided us with a solution to the problem that eliminates most, if not all, the limitations that the native tools and APIs [...]

     
  18. 30+ useful as3 open source projects [转] | Next Wonderland on Wednesday, February 9, 2011 at 4:06 am

    [...] 15. ScaleBitmap : 9-slice bitmap class The owner have just finished a simple class which allows you to resize dynamically any Bitmap (just like the MovieClip.scale9Grid feature). [...]

     
  19. FLASH9宫切图ScaleBitmap at ZEALMAN on Friday, June 17, 2011 at 10:31 am

    [...] 原文地址:http://www.bytearray.org/?p=118 [...]

     
  20. unbox » Blog Archive » Skinning PlayBook components on Thursday, June 23, 2011 at 1:31 am

    [...] ScaleBitmap by [...]

     
  21. Flex开源项目 « 能博客 on Thursday, July 28, 2011 at 6:50 am

    [...] : 9-slice bitmap class http://www.bytearray.org/?p=118 [...]