Flex에서 Image 클래스를 이용해서 로드하는 컨텐츠중 png, jpg 등의 이미지를 회전, 확대를 하게 되면 이미지가 약간씩 깨진다.

이때 깨지는 것을 방지하기 위해 Bitmap클래스의 smoothing 속성을 true로 설정하면되는데...
Image클래스에 로드되는 컨텐츠는 DisplayObject이므로 바로 smoothing을 적용할 수 없다.
매번 smoothing속성을 적용하는 것도 귀찮으므로
Image클래스를 확장하여 SmoothImage 클래스를 만들어 보았다.

/**

 * SmoothImage 클래스

 * 제작 : 지돌스타(http://blog.jidolstar.com, jidolstar@gmail.com)

 * 환경 : Flex 3

 *

 * Image로 로드하는 컨텐츠에 smoothing 자동적용시켜 회전, 확대시 이미지가 깨지는 것을 방지해준다.

 */

package com.starpl.components

{

       import flash.display.Bitmap;

       import flash.display.DisplayObject;

       import flash.events.Event;

       import flash.events.IOErrorEvent;

       import flash.events.SecurityErrorEvent;

      

       import mx.controls.Image;

 

       public class SmoothImage extends Image

       {

             public function SmoothImage()

             {

                    super();

             }

            

             override public function load(url:Object=null):void

             {

                    super.load(url);

                    addEventHandlers();

             }

            

             private function completeEventHandler(event:Event):void

             {

                    var content:DisplayObject = this.content as DisplayObject;

                    var bitmap:Bitmap;

                    if(content)

                    {

                           bitmap = content as Bitmap;

                           if( bitmap )

                                 bitmap.smoothing=true;

                    }

                    removeEventHandlers();

             }

            

             override public function set source(value:Object):void

             {

                    var bitmap:Bitmap = value as Bitmap;

                    if( bitmap )

                    {

                           bitmap.smoothing = true;  

                    }

                    super.source = value;

             }

            

             private function ioEventHandler(event:IOErrorEvent):void

             {

                    removeEventHandlers();

             }

            

             private function securityErrorEventHandler(event:SecurityErrorEvent):void

             {

                    removeEventHandlers();

             }

            

             private function addEventHandlers():void

             {

                    this.addEventListener(Event.COMPLETE, completeEventHandler);

                    this.addEventListener(IOErrorEvent.IO_ERROR, ioEventHandler);

                    this.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorEventHandler);

             }

            

             private function removeEventHandlers():void

             {

                    this.removeEventListener(Event.COMPLETE, completeEventHandler);

                    this.removeEventListener(IOErrorEvent.IO_ERROR, ioEventHandler);

                    this.removeEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorEventHandler);

             }

       }

}

사용방법은 Image처럼 사용하면 되겠다.

 <local:SmoothImage id="image" source="이미지경로" rotation="회전각도" scaleX="x축스케일" scaleY="y축 스케일"/>

아래와 같은 이미지를 보통 Image클래스를 사용할 때와 SmoothImage 클래스를 사용할 때를 비교해 보겠다.

Image를 사용했을 때

SmoothImage를 사용했을 때