• Keep in touch:
  • Linked In
  • Twitter
  • RSS

Archive for March, 2011

Smooth Zooming Depends on Flash Version

I was recently helping out with an web application for creating custom slide-shows for cars using photos that dealers would upload to the site. The problem is straight-forward enough and when the first slide-show was generated with a reasonably high resolution image (640 x 480, gasp) we were greeted with the following scene:

The first reaction was that the Flash Player was having a hard time rendering the image at the default 20 frames per second, which seemed an unlikely event since movie was being viewed using the stand-alone Flash Player running on a core i7 desktop. Slowing the frame rate down did not do much, besides we needs to keep the frame rate high in order to get a smooth animation. The problem only seemed to affect zooming (panning was mostly ok) – the fine lines around the door appeared to be suffering from aliasing so after all the attempts to see if the movie could be tweaked to reduce the load on the Flash Player failed we tried smoothing the image first before adding it to the movie. The results were better but there were still visual artifacts and the quality of the image was starting to suffer before we got something that was watchable.

One interesting observation came when the Player screen was larger or when zooming in – the animation appeared smoother. The next attempt at a solution was to resized the image. The idea was that the Player had one image pixel for each screen pixel and that is why the aliasing was occuring. With more image pixels then the Player would be better able smooth the image when it was rendering it. At x2 the results were definitely better. At x4 the results were great, phew:

The only problem was that the file size was getting a little on the large size. Fortunately drastically reducing the JPEG quality during the resize process did not seem to visually degrade the image and the final movie size was comparable to the one with the original images.

So while we had a working solution and met the deadline (just) the results weren’t great. I took another look at the code which was based on Transform 2.3 and ported the method used to do the zooming over to Transform 3.0 – just to see if there was a bug or someother configuration problem that was biting us. Imagine the surprise when the the following movie was generated using the original sized images:

So what was the difference? Double-checking the code and the binary format of the files revealed nothing; correct fill style ? check; same classes, check; same binary? check; same swf version ? No! Rushing back to the web app I changed the default swf version for Transform 2.3 from 7 to 8 and voila a nice smooth zoom with images at their original size.

So what was going on ? To be honest I am not sure. The fill style using for displaying the image definitely specified image smoothing – I even checked the bits encoded on the file but for some reason the Flash Player decided to turn smoothing off – hence all the jagged lines. Only when the frame rate was insane (100 fps) or the images large (x4) did the Player turn smoothing on. It could be a bug, however image smoothing has been in the Flash specification for a long time so it is hard to believe that this problem went unnoticed or unfixed for long. Could it be an evil plot to force people to upgrade to Flash 8 and beyond? Although unlikely this give an insight into how the Flash Player works. The different text rendering engines that have been deployed by Macromedia and Adobe to get better text quality is well known however it also appears that there are different sub-systems for images handling too. Any movie with swf version 7 or below is likely to run into smoothing problems and anything using swf 8 or above will be ok.

MORAL: Unless you are targetting a specific hardware profile, for example, a set-top box or mobile device go for the highest version of Flash that your users will be able to easily view. For most applications this will probably be Flash 8.