Allow Smoothing is Your Friend

A lot of Flash work I’ve seen recently has had really choppy looking images in Flash. This is especially true in images that are rotated. Today I was randomly searching around for the maker of Chiclets (whole different story) and ran across the Cadbury Adams site (pictured above). Someone did some pretty significant tweening there to get the effect of the brands going along the animated rope, but as the images go around all of the boxes get really mangled.
There is a very easy fix that would have made the SWF look many times better, but I’ve been discovering that the feature isn’t well known about by people starting with Flash in the last few versions. To let your images to be cleanly smoothed as they are resized and/or rotated go to the bitmap in your library, right mouse click and select properties. From there select “Allow Smoothing.”
I’m trying to figure out if the default in the past was to have the image smooth since I don’t really remember seeing as many sites having issues like this one. Otherwise it could be a feature that has been lost to the ages (though I’m sure YOU know about it!) :D.
Also if you want to have your image smooth in some cases, but not smooth in others, you can always take an instance of the image and use break apart (not trace as bitmap!) which will take the image, remove it and replace it with a vector shape of the same size and position and give it a fill with the bitmap. This will always allow smoothing. Any non-broken-apart images then will remain crisp.
Digg This!
May 15th, 2007 at 2:17 pm
I think you’re right about Adobe/MM changing the default behavior in more recent versions of Flash. I think it used to smooth by default until around MX. If you’ve got a lot of images you need to do this to, there’s a great little util that can make it far less painful.
Grab this library panel and you can alter the properties of as many bitmaps as you can select.
http://blog.fuelindustries.com/
May 15th, 2007 at 2:25 pm
thanks chris,
I will look for the utility when the fuel blog come back (down for maintenance at the moment)
May 15th, 2007 at 2:47 pm
I’ve got books packed away, but just memory now….
I recall that option appearing about Flash 3/4 days… the early versions were very performance-based, and sub-pixel interpolation was a costlier addition to the basic options. Once we started front-loading symbols and non-timeline elements then the performance culture shifted a bit. I remember default-off from the start.
Matt Wobensmith would be a good one to check with, because I remember him writing Flash technotes at about that time period.
jd/adobe
May 15th, 2007 at 2:50 pm
I’m pretty sure the default smoothing changed in Flash 8 (because I started with MX 2004, and I specifically remember it happening with a new version). When it first appeared, there were many questions in forums and such about jagged edges and rotated images, and I remember seeing a few side-by-side demonstrations of the effect.
May 16th, 2007 at 3:06 am
I just recently stumbled across this issue.
there are two different things to look out for.
1. graphics in your library
2. dynamically loaded graphics
1. for graphics in your library the default setting for smoothing changed from flash mx to flash 8.
2. for dynamically loaded images the smoothing behaviour changed from flash player 6 and 7 to flash player 8.
in flash player 6 and 7 dynamically loaded images were smoothened if you set the _global.quality property to “high” or “best”.
in flash playerf 8 dynamically loaded images are not smoothened, no matter what the _global.quality property is set to.
to make your images smooth again you have to use this hack: http://www.kaourantin.net/2005/12/dynamically-loading-bitmaps-with.htm l
which is very unconvenient at its best.
May 16th, 2007 at 6:09 am
I’m not sure if the default behavior has changed.. but maybe we never noticed because how many sites were even willing to move bitmaps around the screen like that even just a few years ago? The bandwidth, player, and processor speeds just weren’t there. But yeah, Allow Smoothing is DEFINITELY my friend.
May 16th, 2007 at 7:26 am
Actually, even though the Fuel Blog is down, the last link on their holder page is the Library Items MXP that you need. It’s good stuff - also modifies properties for multiple MovieClips and Sounds.
May 22nd, 2007 at 2:20 am
Great tip. Thanks. I have a chiropractor client who needed some basic animations applied to drawings of the back; and they looked awful until I stumbled upon your post. Thanks.
May 23rd, 2007 at 6:35 am
I don’t think it has changed since I have been developing. I think the issue is more the allowscale in the embed tags of some sites. Works fine to jack up the width and height to 100% if all content in movie is vector format. However if you have any raster graphics in the movie they go to complete shit. You really notice this if you have a wide screen resolution such as a notebook.
Really kind of sad because stretching the site to fit the screen looks quite nice.
Don’t use much raster graphics myself for this exact reason, as well as loading a vector drawn in flash is way fast than a photoshop export.
August 23rd, 2007 at 6:39 am
Uh.. that choppy image from Cadbury Adams is really something.. :/
September 7th, 2007 at 8:02 pm
Unique Custom Design Resources
I couldn’t understand some parts of this article, but it sounds interesting
September 7th, 2007 at 10:12 pm
Great article!!
September 8th, 2007 at 4:09 pm
LOL… I’ve started designing in flash. I’ve done lots of programming in the past but flash is new to me. And I immediately noticed the problem with smoothing. I asked a very good friend of mine who knows action script intimately. I guess he didn’t quite understand my problem although I thought he did. He started to tell me about flash.display.bitmapData to correct the problem. I was like OMG isn’t there a better way LOL. So i did a google search and came across your site. I laughed myself silly when you described that there was a check box for smoothing. I can’t tell you how happy I am!!!! I think the main reason I couldn’t find the info i wanted more quickly is because I was using the term “interpolation” instead of “smoothing”. I told my friend Tom (the expert in action script) that the interpolation method used in Flash was crappy and how could I fix that… In any case you really saved the day for me. I’m sure I would have figured it out eventually but I was rather sad when my friend told me I had to learn how to use flash.display.bitmapData or even more complex classes in flash to accomplish the task. I was like you’ve got to be kidding. Many thanks for your post! - Dean
September 16th, 2007 at 4:39 am
World Religion Resources
I couldn’t understand some parts of this article, but it sounds interesting
October 18th, 2007 at 6:43 am
Thank you for this, I’ve been driving myself nuts on this Flash banner I’ve been working on. Everything was getting pixelated and all my strokes on images were jagged. Thanks for the tip!
October 22nd, 2007 at 8:05 am
Hey Dean,
Your mate is right, if you are loading in an external asset, you will need to use bitmapData to achieve smoothing. The tick box only applies to content in your library.
November 5th, 2007 at 5:09 am
THANKS VERY GOOD
November 5th, 2007 at 5:09 am
THANKS NİCE
November 7th, 2007 at 5:38 am
[…] short tips for smooth images in Flash, particularly when tweening or animating with them. read more | digg story This entry wa […]
December 28th, 2007 at 9:23 pm
“Smoothing is Your Friend” that is right.Thanks for your sharing.
January 18th, 2008 at 12:53 am
I didnt quite understand everything in your article it has somewhat helped me however. Thanks
January 20th, 2008 at 4:47 pm
thank
January 25th, 2008 at 2:49 am
it’s just great…an amazing problem solver.
I’ve never think about it.
Thank u very much..nice guidance.
January 29th, 2008 at 7:19 pm
Great tip. Thanks. my images looked awful until I stumbled upon your post. Thanks.
January 29th, 2008 at 7:22 pm
thanks for the help with this, its funny how jagged the images would get without this.,
March 3rd, 2008 at 9:29 am
I’m having trouble creating smoothed and non-smoothed (sharp) images from the same .png in Flash CS3. I basically want a logo to be sharp while static and smoothed when it begins to fly around. Above you said that if you break apart an instance of a bitmap it will default to smoothed, but I’m having trouble re-creating this effect. I’m trying avoid using two different bitmap images for this, as the file size begins to get too big. Any help would be greatly appreciated. Thanks
March 12th, 2008 at 12:25 pm
I know for a fact, Flash MX smoothed as default. I just did a test on Flash MX: I imported a pic, checked it’s properties in the Library and the “Allow Smoothing” option was already checked. Now the question remains: Why did Flash change this in Flash Pro 8? Is it just a bug? Or is there a reason for this?
March 21st, 2008 at 6:33 pm
thank you
March 21st, 2008 at 6:34 pm
thanx
March 21st, 2008 at 6:35 pm
thx.
March 21st, 2008 at 6:36 pm
danke
March 24th, 2008 at 8:24 am
bartın
March 29th, 2008 at 5:34 pm
thanks a lot.
April 7th, 2008 at 5:33 pm
Thanks You