[AS3.0] Loader 클래스의 이해와 쓰임

플래시를 시작 하고 나서 처음으로 만들어 보고 싶은 것을 꼽으라면 내 사진첩 이라는 말을 제일 많이 들어보았습니다. 

저 또한 플래시를 접하게 되고 처음으로 "내가 만든 것" 이라고 사람들에게 보여 준것도 사진첩이었습니다. 사진첩이라는 말이 거창하게 들릴지 모르겠지만, 사진첩이난 MP3 플레이어를 만들때 핵심이라 할수 있는 Loader Class 에 대해 끄적여 볼까 합니다.

Loader

Loader DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object

Loader 클래스는 SWF 파일이나 이미지(JPG, PNG 또는 GIF) 파일을 로드하는 데 사용됩니다. load() 메서드를 사용하여 로드를 시작합니다. 로드된 표시 객체는 Loader 객체의 자식으로 추가됩니다.

텍스트 또는 이진 데이터를 로드하려면 URLLoader 클래스를 사용합니다. Loader 객체는 자식 표시 객체(Loader 객체가 로드하는 표시 객체)를 하나만 가질 수 있기 때문에 Loader 클래스는 자신이 상속하는 다음 메서드를 무시합니다. 따라서 addChild(), addChildAt(), removeChild(), removeChildAt() 및 setChildIndex() 메서드를 호출하면 예외가 발생합니다. 로드된 표시 객체를 제거하려면 해당 부모 DisplayObjectContainer 자식 배열에서 Loader 객체를 제거해야 합니다.

레퍼런스에 적혀 있는 말이 어렵게만 느껴지는 군요;;  위의 말대로 Loader 는 파일을 로드 하기 위해 사용 됩니다.   

var testloader:Loader = new Loader();
testloader.load(new URLRequest("image.jpg");
addChild(testloader);   

로더 클래스에서 경로를 설정해 주기 위해서는 URLRequest 라는 클래스를 사용하게 되는데 URLRequest 클래스는 하나의 HTTP 요청에 포함된 모든 정보를 캡처합니다.

 

가장 기본이 되는 뼈대 입니다. 그렇다면 Loader 는 불러 오기만 하면 그 기능을 다 하는 것인가? Loader Class 에서는 그 해당 로더로 불러와 지는 데이터의 접근 기능을 가지고 있습니다. 이 기능으로 인해 예를 들어 사진을 로드 한다면 width 값이나 height 값을 바꿀수 있는 것이지요.  

testloader.contentLoaderInfo.addEventListener(Event.COMPLETE, fComplete);
function fComplete(ev:Event):void
{
    var mObject:DisplayObject = ev.target.content;
    mObject.width=100;
    mObject.height=100;

}

// ev.target.content 로 해당 로더로 불러와 지는 데이터에 대한 접근을 할수 있습니다. 그 후에 width 값과 height 를 바꿔주는 것이지요. 위의 예는 이미지 로드 뿐만 아니라 xml 로드 swf 로드 때에도 동일하게 적용이 됩니다.  

function  fComplete(ev:Event){
   var loader:URLLoader=URLLoader(ev.target);             
// URLLoader 에 대한 내용은 레퍼런스를 참고하세요
   var dataXML=new XML(loader.data);
   trace(dataXML);
  
  }

 LoaderEvent 에서는 load 가 끝났을때의 이벤트 뿐만 아니라 로드가 진행 될때의 이벤트도 제공 하고 있습니다.  

testloader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, fProcess);
function fProcess(ev:ProgressEvent):void
{
    var mPercent:Number =int( e.bytesLoaded/e.bytesTotal*100.0);
    trace(mPercent);
}

 위의 기능으로 이미지 로드시 로딩바를 만들수 있게 되는 것입니다. ( progressEvent 가 진행되고 있을때는 로딩 무비 클립을 addChild 해 주고 끝나면 그 무비 클립을 제거 해 주는 방식으로)  

이러한 이벤트들로 이미지를 불러오고 불러온 이미지를 조작하고 interaction 을 추가 하여 기본적인 겔러리를 구현할수 있습니다. 이 로드하는 방식을 간단하게 쓸수 있게 만들어 놓은 Class 를 소개 합니다.

( 새롭게 시작하는 Actionscript 3.0 -윤훈남 의 예제 소스 ) - 문제가 생기면 삭제 하겠습니다.  

package {    import flash.display.Loader;  import flash.display.DisplayObjectContainer;  import flash.events.ProgressEvent;  import flash.events.Event;  import flash.net.URLRequest;  import flash.display.DisplayObject;    public class CLoaderUI extends CLoadAni {   var pLoader:Loader = new Loader();   var pRequest:URLRequest = new URLRequest();   var pContainer:DisplayObjectContainer;       var pWidth:Number,pHeight:Number;   var pX:Number,pY:Number;     function CLoaderUI(mStage:DisplayObjectContainer,mURL:String,mWidth:Number,mHeight:Number,mX:Number=0, mY:Number=0):void {    pContainer = mStage;                      // mStage 는 어느 객체에 load 를 할지를 지정할수 있게 해 준다.    pX=mX;                                         // 위치 지정    pY=mY;                                          // 크기 지정    pWidth=mWidth;    pHeight=mHeight;                pRequest.url =mURL;                       // 해당 이미지 경로 지정    if(pRequest.url != "")     pLoader.load(pRequest);    else     pLoader.load(new URLRequest("noImage.jpg"));          // 이미지가 없을때는 정해진 이미지 로드        pLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, fProcess);       // 진행중             pLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fComplete)           // 완료      }      function fProcess(e:ProgressEvent):void {      var mPercent:Number =int( e.bytesLoaded/e.bytesTotal*100.0);        trace(mPercent);   }     function fComplete(e:Event):void   {       var mObject:DisplayObject = e.target.content;        //load 된 내용을 불러 와서     mObject.width=pWidth;                                       // 조작한다.     mObject.height=pHeight;     mObject.x=pX;     mObject.y=pY;     pContainer.addChild(mObject);     pContainer.removeChild(this);                  // 해제 시켜 준다.     pLoader =null;     pContainer=null;     pRequest=null;   }  } }

 위의 클래스를 사용하면 로드시에 겪는 불편을 조금 덜어 줍니다. 처음 사진첩 만들때 이미지 크기 조작을 어떻게 해야 할지 몰라 고생했던거 생각을 하면서 썼습니다.
조금이라도 도움이 되셨다면 좋겠네요.