ScaleBitmap : New version by Didier Brun

Let me introduce the new version of ScaleBitmap :

ScaleBitmap

I have totally rewritten ScaleBitmap to suit my needs :

  • Better usage of memory : no more creation of BitmapData instance (possibility to swap BitmapData)
  • Outer drawing capability
  • ScaleBitmapSprite

The outer drawing & ScaleBitmapSprite allows you to :

  • Easily deal with shadow, glow, overlapping icon effects
  • Use real size & position to align or place your elements

Usage 1 : ScaleBitmap

ScaleBitmap.draw(
bitmap : BitmapData, // the bitmap source
graphic:Graphics, // the destination graphic
width:Number, // width (defined by outer rectangle if not null)
height:Number, // height (defined by outer rectangle if not null)
inner : Rectangle, // inner rectangle for scale 9
outer : Rectangle=null // outer rectangle : visual size reference
):void

If outer is not null, ScaleBitmap use a negative offset for drawing (according to outer properties)
If outer is null, ScaleBitmap works as a classic Scale9 grid drawer

Usage 2 : ScaleBitmapSprite

ScaleBitmapSprite(
bitmap : BitmapData, // the bitmap source
inner : Rectangle, // inner rectangle for scale 9
outer : Rectangle=null) // outer rectangle : visual size reference

var s:ScaleBitmapSprite=new ScaleBitmapSprite(mySkin, new Rectangle(20,20,80,20), new Rectangle(15,15,90,30));
addChild(s);
s.width=80;
s.height=40;</a>

ScaleBitmapSprite override public size setter & getter : you can move & resize a ScaleBitmapSprite object without taking care of bitmap outer drawing.

Simple MyButton class using ScaleBitmapSprite (click the button) :

A Flash animation should have appeared here, but it seems that your browser has an older version of the Flash Player or it is not installed at all. Please, install the last release of the Flash Player now, then reload this page.


Sources FCS4 [ require Eaze to compile]

Download ScaleBitmap & ScaleBitmapSprite :
Repository : http://gist.github.com/264250

Some of you prefer gist, so as possible, I will share my new projects via gist.

Hope this class help & merry Xmas to bytearray readers.

[EDIT 2010-05-18]

A new version 1.1 is available !

Jerôme Decoster, a talented french developer have made a lot of improvements in this new version :

  • smooth support
  • invalidation for ScaleBitmapSprite
  • code optimization
  • inner drawing correction

So many thanks to you Jerôme :)

Repository : http://gist.github.com/264250

Comments (22)

  1. fenixkim wrote::

    Long waiting for these improvements, many congratulations on this great and usable class

    Monday, December 28, 2009 at 3:56 pm #
  2. Very nice work!

    Monday, December 28, 2009 at 4:16 pm #
  3. The original class was great and this one is even better. The new outer rectangle is going to be a time saver. Thanks!

    Monday, December 28, 2009 at 4:58 pm #
  4. James Penman wrote::

    Thanks for the excellent utility class. Stuff like this really helps with every scale of web design project’s productivity. You’re the man.

    Monday, December 28, 2009 at 5:06 pm #
  5. Antonin wrote::

    Génial ! Très beau boulot, bravo !

    Saturday, January 9, 2010 at 10:07 am #
  6. Didier wrote::

    Thanks guys, don’t hesitate to report any problems or bugs :)

    Sunday, January 10, 2010 at 2:38 pm #
  7. Jloa wrote::

    Really nice update. I on download the source and see myself the improvment around the ‘BitmapData’

    Monday, January 11, 2010 at 11:16 am #
  8. Almog wrote::

    Thanks, this is great

    Tuesday, January 12, 2010 at 7:26 pm #
  9. Daniel Hai wrote::

    Not sure if some of you know this, but you can embed a bitmap with scale9 as long as you set the scale dimesions, and make sure you embed it as MovieClip rather than Bitmap or BitmapData.

    Either way this is extremely useful for non-embedded assets :)

    Wednesday, January 13, 2010 at 10:12 pm #
  10. Markus wrote::

    great job! thanks for sharing!!

    Thursday, January 14, 2010 at 1:05 am #
  11. sitron wrote::

    this is just great! the outer addition is really useful!
    Something odd: it seems that with ScaleBitmapSprite, the original bitmap size is not respected by default (at least without outer Rectangle).
    Anyway… thanks a lot!

    Tuesday, January 19, 2010 at 4:25 pm #
  12. sharedtut wrote::

    thank you for sharing the source code

    Friday, January 22, 2010 at 4:45 am #
  13. Tink wrote::

    Yes nice job, thanks!

    Wednesday, February 17, 2010 at 10:21 am #
  14. Bonsoir, à quand le scale nine grid et scale Bitmap porté à Photoshop ?Une feature pour Photshop cs6 ?

    Wednesday, February 24, 2010 at 11:54 pm #
  15. Jerome wrote::

    Bonjour, pourquoi se limiter au scale9 ? A quand le scale15 ? Une feature pour Flash CS6 ?

    Thursday, April 1, 2010 at 3:46 pm #
  16. Didier Brun wrote::

    hello all, many thanks for your comments.

    @sitron> Do you use the outer capability ? could you send me an example ?

    @jerome> Well, just for you : http://www.didierbrun.com/demos/scale_grid.swf (using one PNG file http://www.didierbrun.com/demos/layout.png)

    Thursday, April 1, 2010 at 3:57 pm #
  17. myrddin wrote::

    Thanks, I just used it, very nice ! It works perfectly.

    Friday, April 23, 2010 at 5:35 pm #
  18. penny wrote::

    Hi,

    thank you for this usefull tool. Is there a simple way, to change ScaleBitmap.draw behavior, to work the oposite way – outer slices are scaled, and the inner stays untouched?

    Saturday, April 16, 2011 at 12:20 am #
  19. Dennis wrote::

    Hello Didier,

    I used these classes a lot and they’re great.

    But I have an issue while using a checked bitmap. The inner rect will be squeezed/stretched, if the width/height is not the original width/height.

    Is there a way to improve the display in this case?

    Thanks a lot for any hint.
    Dennis

    Friday, July 15, 2011 at 7:58 pm #
  20. Max wrote::

    Hi,

    Just used these very nice classes to create some scaleable bitmaps for UI elements. I noticed however it doesnt render till its added to stage.

    What is the reason it doesnt render once right away, when positioning/resizing your UI before adding it to stage this gives some weird hard to debug results.

    An extra render cant possible give that much of a performance drop and even so, is worth it when using it extensively.

    greets
    max

    Wednesday, April 25, 2012 at 9:55 pm #
  21. Max wrote::

    Hi again,

    Just wanted to add, for some more practical use like i mentioned. It might be nice to change:

    if (stage != null) stage.invalidate();

    to:

    if (stage != null){
    stage.invalidate();
    }else{
    onRender();
    }

    greets
    max

    Wednesday, April 25, 2012 at 10:01 pm #
  22. zeke wrote::

    hello jerome,
    why did the ScaleBitmapShape extends Sprite instead of Shape, thanks~

    Friday, January 4, 2013 at 8:39 am #

Trackbacks/Pingbacks (3)

  1. 9格切片位图脚本 « tamt on Monday, March 22, 2010 at 4:00 pm

    [...] 在AS3环境下,可以通过著名的ScaleBitmap来实现。   No Comments [...]

     
  2. [...] bytearray.org のDemoで使われていた EazeTween が面白そう。 ScaleBitmap : New version [...]

     
  3. - ludev on Friday, May 18, 2012 at 6:21 pm

    [...] 본 라이브러리는 배경 이미지의 크기조절을 위해 내부적으로 bytearray.org 의 ScaleBitmap을 사용합니다. [...]