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); // falseAnd 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.
Follow @gskinner on Twitter for more news and views on Flash, Flex, and ActionScript.
Comments (18)
Great tip!
Posted by: Tink at August 22, 2007 04:18 PMURL: http://www.tink.ws/blog
Thanks for mentioning! Will safe me a lot of time!
Posted by: Patrick Pietens at August 22, 2007 04:29 PMURL: http://www.flashaddict.nl
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...
Posted by: pan69 at August 22, 2007 05:57 PMURL:
@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 :)
Posted by: Nick at August 22, 2007 10:30 PMURL: http://www.gskinner.com/blog
workaround in mxml
ViewHelper Class:
public static function smoothImage(event:Event):void
Posted by: Claudius at August 23, 2007 06:29 AM{
var bitmap:Bitmap = ((event.target as Image).content as Bitmap);
if (bitmap != null)
{
bitmap.smoothing = true;
}
}
URL:
on complete not creationComplete
Posted by: Claudius at August 23, 2007 06:40 AMURL:
Just came across with this bug. Thanks for the post.
Posted by: C4RL05 at September 10, 2007 04:46 AMURL: http://carlosulloa.com
Thanks for the tip. I just couldn't work out why my bitmaps looked so rubbish.
Posted by: Anon at March 31, 2008 03:38 AMURL:
Can anyone explain my bitmap smoothing woes? Is it really just a limitation of Flash?
Posted by: Michael at May 20, 2008 09:27 AMhttp://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
URL:
Thanks:)
Posted by: young_moon at November 7, 2008 08:15 AMI was crazy for few hours, almost thinking to switch project to HTML because of that :)
Than i run into this post
URL: http://www.martinswanviolins.com
SWEET, this explains everything...
Posted by: al at February 9, 2009 11:50 AMURL:
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
Posted by: Wayne at February 25, 2009 08:28 AMURL:
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;
Posted by: Sundev at October 1, 2009 09:32 AMURL:
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());
Posted by: Ionel at October 7, 2009 02:27 PMbitmapOver.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;
URL: http://riaextended.com
This is working if you do:
var bitmap:Bitmap = new Bitmap(yourBitmapData)
bitmap.smooting = true;
now it works
Posted by: Ionel at October 7, 2009 02:31 PMURL: http://riaextended.com
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)];
Posted by: trent at November 18, 2009 01:37 PMURL:
what about bitmaps in the library nested in custom-class movieclips that are initiated dynamically?
Posted by: Saar at March 15, 2010 05:20 AMdo i need to acces the bitmap through code (movieclip.getchildat()) and re-assign smoothing = true?
URL:
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
Posted by: Saar at March 15, 2010 02:17 PMURL: