Flash AS3 Tutorial: 3D Blur Fix

In second part of our Flash AS3 3D Flip Tutorial we will take a look at unwanted blur effect that appears when we try to implement 3D rotations. Similar 3D engine is used in our WordPress 3D Banner Plugin.

TABLE OF CONTENTS

1. Flash AS3 Tutorial: 3D Flip effect Part I
2. Flash AS3 Tutorial: 3D Blur Fix
3. Flash AS3 Tutorial: Unlimited 3D rotations
4. Flash AS3 Tutorial: Rolling Newspaper effect

 

[download id=”58″]

STEP 1: REASON FOR BLUR

Blur occurs because of the way Flash renders 3D. When z axis is applied it will create a small anomaly. Whether this is intended or not is not really known but it produces a result that isn’t satisfactory. That’s why we will implement a small fix that will correct the issue.

STEP2: APPLYING THE FIX

Open the AS3 file that we created in first part of our tutorial. Add two more variables to the beginning of the file:

Now just before the flip3D function copy and paste following code:

First two lines define a small value of pixels that we have to decrease width and height for. After we get the values needed for fix (value is near 1) we apply them to both images that we are using. That will slightly decrease the size of the image (in our case width of the image is now 269 pixels, was 270 pixels before the fix) but the unwanted blur effect is now gone. You can see a before/after image below.

STEP 3: CONCLUSION

Hopefully this small fix will save some head banging that occured in my case when I was first searching to fix this problem. In third part of our 3D Flip tutorial we will create a simple 3D engine that will allow us to use unlimited 3D rotations along all axis (x,y and z) so stay tuned. Good luck!

[download id=”53″]