ScaleBitmap : 9-slice bitmap class [ by Didier Brun aka Foxy ]

Hi everybody,

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

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 (48)

  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 #

Trackbacks/Pingbacks (14)

  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). [...]