CODEWITHSUNDEEP
actionscript-3flashapache-flexbitmapflex-spark
peewee_RotA
peewee_RotA

Reputation: 405

AS3 Bitmap Object Not Smoothing at Low Scale values

I need help getting a bitmap to apply smoothing properly after being scaled very small.

What I am doing now is loading a .png image with a Loader object. After loading the file I cast the loaderInfo's content to a bitmap and set the smoothing value to true. This works without a problem until I reach a ScaleX and ScaleY value less than 0.5.

For example, if I have a 1000x1000 object, scaling it down to 200x200 causes the bitmap smoothing to no longer work.

I can reproduce the problem using all of the following Sizing methods:

I've also tried some other workarounds that I found when searching, such as:

Below is some sample code for reproducing the problem. (I am running this locally so I have a copy of testimage.png in my bin-debug folder)

public class MainObj
{
    public var comp:UIComponent;

    public function MainObj()
    {
    }

    public function LoadContent():void
    {
        var str:String = "testimage.png";
        var l:Loader = new Loader();
        l.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadContentComplete);
        l.load(new URLRequest(str));
    }

    public function LoadContentComplete(e:Event):void
    {
        var li:LoaderInfo = e.target as LoaderInfo;
        var bmp:Bitmap = li.content as Bitmap;

        bmp.smoothing = true;
        bmp.scaleX = 0.2;
        bmp.scaleY = 0.2;
        comp.addChild(bmp);
    }
}

I also have an mxml file that creates an instance of the MainObj class and sets the comp property to a UIComponant instance that's been added in the Application mxml code (the UIComponent is what allows the Bitmap to be added to the Spark elements making up the mxml).

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600"
               width="800" height="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            private var mainObj:MainObj;
            override protected function initializationComplete():void
            {
                mainObj = new MainObj();
                mainObj.comp = comp;
                mainObj.LoadContent();

                super.initializationComplete();
            }
        ]]>
    </fx:Script>
    <s:VGroup width="100%" height="100%">
        <mx:UIComponent id="comp" width="100%" height="100%"/>
    </s:VGroup>
</s:Application>

Upvotes: 0

Views: 3535

Answers (2)

Marcela
Marcela

Reputation: 3728

I've found that setting the stage.quality property to StageQuality.BEST enhances the smoothing on scaled Bitmaps.

Upvotes: 0

Jonathan Dunlap
Jonathan Dunlap

Reputation: 2631

  • Scale to sizes that are a power of 2 with the original size also being a power of 2
  • Mipmapping is a term popular in the gaming industry for making multiple zoomed versions of an image in order to reduce scaling aliasing. (especially for radical sizing changes)
  • As a hack for Flash Player 10, set the 'z' property to 1. This will enable hardware smoothing of the Bitmap, although it will eat more memory and performance.

Upvotes: 2

Related Questions