The 'Scaling Correction' Technique

We present in this tutorial a simple and elegant solution to the issue of blurring 3D objects in Flash Player 10 and Flash CS4. The solution, which consists of a clever scaling correction, was submitted to Flash and Math by Matteo Sisti Sette. Below is Matteo's example (changed slightly for the sake of presentation).

Download

  • Download all files corresponding to this tutorial: blursol.zip

The Idea

In one of our earlier tutorials (3D News Ticker in Flash CS4 and AS3) we gave an example that illustrates the blurring issue: Blurry 3D Objects in Flash Player 10.

Matteo wrote to us: "The object converted to 3D doesn't just 'become blurry'. It becomes bigger. Slightly bigger. [...] It seems that the object is being rescaled to exactly 1 pixel wider and 1 pixel higher than its original size. No matter what's the width and the height of the object, it grows one pixel. The scale factor is not constant, it depends on the sizes: horizontal_scale=(width+1)/width, vertical_scale=(height+1)/height.

In my example, I try to compensate this by rescaling the object by inverse factors width/(width+1) and height/(height+1) before converting it to 3D...and it actually works! "

It does work, indeed. In the example above, objects (a bitmap as well as a vector shape), are converted to 3D by setting their z coordinate to 0. The same 'scaling correction' technique works equally well when an object is rotated in 3D. We give an example on the next page.

Here are the most relavant parts of the code. The photo on the left is stored in a variable 'photo1', the vector shape on the left in a variable 'oval1'.

/*
We calculate the scaling factors for photo1 and oval1. The scaling factors will be applied when those objects become 3D objects and will compensate for the increase in size that happens when a DisplayObject becomes a 3D object.
*/

var ovalXFactor:Number=oval1.width/(oval1.width+1);

var ovalYFactor:Number=oval1.height/(oval1.height+1);

var photoXFactor:Number=photo1.width/(photo1.width+1);

var photoYFactor:Number=photo1.height/(photo1.height+1);

/*
Here is the handler of 'Make 3D' button in the left panel. The button is named 'btnLeft3D'.
*/

btnLeft3D.addEventListener(MouseEvent.CLICK,leftTo3D);

 

function leftTo3D(e:MouseEvent):void {

photo1.scaleX=photoXFactor;

photo1.scaleY=photoYFactor;

photo1.z=0;

oval1.scaleX=ovalXFactor;

oval1.scaleY=ovalYFactor;

oval1.z=0;

}

/*
For photo1 and oval1 scaling factors are applied when the objects become 3D. For photo2 and oval2 the scaling correction is not applied. The movie above shows the difference.
*/

Visit Matteo's site

On the next page, rotating without a blur!

Back to Flash CS4 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.