by Grant Skinner

Minor Bug with Bitmap Smoothing in AS3

We recently encountered a problem where bitmap images that we created dynamically were not being properly smoothed when rotated and scaled. We couldn’t see any obvious reason for it – we were setting the container bitmap to smooth, tried every quality setting, but it still looked terrible.

The answer turned out to be super simple, if not immediately obvious. The Bitmap object in ActionScript 3 reverts its .smoothing property to false whenever you change it’s .bitmapData property. Because we were setting up our Bitmap objects in advance, then assigning BitmapData objects to them when they were created, it simply appeared as though smoothing just didn’t work in our project.

Here’s a quick code example:

var bmp:Bitmap = new Bitmap(null,true);
trace(bmp.smoothing); // true
bmp.bitmapData = bmpd;
trace(bmp.smoothing); // false

And here’s what it looks like with smoothing on (top) versus off (bottom).




You can definitely see how our project wasn’t looking too good prior to fixing this issue.

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

If you enjoyed this, you might like these articles…

Bitmap Fonts in Flex (via Flash), The Future of Online Branding!, AS3 Kaleidoscope Class, Beach Grass in the Wind

20 Comments

  2. Patrick Pietens August 22, 2007 at 4:29pm

    Thanks for mentioning! Will safe me a lot of time!

  3. pan69 August 22, 2007 at 5:57pm

    Off topic: When I right click the SWF and select “Zoom In” the browser (FF) wants to add and entry “[Folder Name]” to my bookmarks… huh? I’m on a Mac right now, maybe thats it. Quirky little machines those Mac’s…

  4. Nick August 22, 2007 at 10:30pm

    @pan69

    I ran into this problem yesterday afternoon while in development. It seems to be a Mac only bug with Firefox 2.0.0.6. It doesn’t look like a Flash bug, but a browser bug. Hopefully it will be resolved in the next release/build of Firefox.

    Quirky perhaps, but I still love my mac 🙂

  5. Claudius August 23, 2007 at 6:29am

    workaround in mxml

    ViewHelper Class:

    public static function smoothImage(event:Event):void

    {

    var bitmap:Bitmap = ((event.target as Image).content as Bitmap);

    if (bitmap != null)

    {

    bitmap.smoothing = true;

    }

    }

  6. Claudius August 23, 2007 at 6:40am

    on complete not creationComplete

  7. C4RL05 September 10, 2007 at 4:46am

    Just came across with this bug. Thanks for the post.

  8. Anon March 31, 2008 at 3:38am

    Thanks for the tip. I just couldn’t work out why my bitmaps looked so rubbish.

  9. Michael May 20, 2008 at 9:27am

    Can anyone explain my bitmap smoothing woes? Is it really just a limitation of Flash?

    http://www.geocities.com/niquon/bitmap_test/

    (watch small thumbnail when toggling quality)

    and the thread on actionscript.org:

    http://www.actionscript.org/forums/showthread.php3?p=745369

  10. young_moon November 7, 2008 at 8:15am

    Thanks:)

    I was crazy for few hours, almost thinking to switch project to HTML because of that 🙂

    Than i run into this post

  11. al February 9, 2009 at 11:50am

    SWEET, this explains everything…

  12. Wayne February 25, 2009 at 8:28am

    Claudius – re your FLEX fix above (and just in case it helps anyone else) – works on Flash with the following var replaced:

    var bitmap:Bitmap = (event.target.content as Bitmap);

    I was going nuts trying to smooth dynamically loaded images – your function worked a treat!

    Cheers

    W

  13. Sundev October 1, 2009 at 9:32am

    This wasn’t working for me with super small scaling (thumbnails) until I added this once my class was added to the stage:

    stage.quality = StageQuality.BEST;

  14. Ionel October 7, 2009 at 2:27pm

    I ran into the same problem, and I noticed that works if you initiate another object (Bitmap) set the new object bitmaData = yourBitmapData and then add smooting = true to Bitmap object

    var bitmapOver:Bitmap = Bitmap(new OverFinal());

    bitmapOver.smoothing = true;

    ui11.addChild(bitmapOver);

    //end adding png OVER

    actualBMD = new BitmapData(ui11.width, ui11.height, true, 0xFFFFFFFF );

    actualBMD.draw(ui11, new Matrix(), null, null, null, true );

    var smoothTRY:Bitmap = new Bitmap(actualBMD);

    smoothTRY.smoothing = true;

    actualBMD = smoothTRY.bitmapData;

  15. Ionel October 7, 2009 at 2:31pm

    This is working if you do:

    var bitmap:Bitmap = new Bitmap(yourBitmapData)

    bitmap.smooting = true;

    now it works

  16. trent November 18, 2009 at 1:37pm

    Nothing else seemed to work for me. If you apply a filter to the bitmap with 0 alpha, smoothing is added:

    _bmp.filters = [new GlowFilter(0x000000, 0, 5, 5)];

  17. Saar March 15, 2010 at 5:20am

    what about bitmaps in the library nested in custom-class movieclips that are initiated dynamically?

    do i need to acces the bitmap through code (movieclip.getchildat()) and re-assign smoothing = true?

  18. Saar March 15, 2010 at 2:17pm

    ok i tested that and the answer is yes: you do have to reassign smoothing to library bitmaps like this:

    Bitmap(myMovieClip.getChildAt(~)).smoothing = true;

    cheers

  19. Marco February 10, 2011 at 11:15pm

    How can I make smooth my movie clip¿?
    This is my code.

    _root.createEmptyMovieClip(“imageCentral_3”,_root.getNextHighestDepth());
    imageCentral_3._x = 700;
    imageCentral_3._y = 150;
    imageCentral_3._alpha = 100;
    imageCentral_3._rotation = -4;
    fullClipLoader.loadClip(“images/imageCentral_3.jpg”,imageCentral_3);

  20. Abe K November 10, 2011 at 7:02pm

    Thanks folks! I am using two static BitmapData objects and swapping them out from under the displayed Bitmap when some action is performed. The same problem occurs. The first load looks nice, the subsequent ones look horrible. By resetting the smoothing property to true just after the swap, everything starts to spin right! Annoying little gremlin is quashed thanks to your post here.

Comments are closed.