노무현 대통령 배너

TweenMax 로 유명한 GreenSock, 통합로더 LoaderMax 라이브러리 공개

by on 6.18, 2010, under AS3.0 API

TweenMax/TweenLite 로 유명한 GreenSock 이 6월 16일자로 통합 로더를 발표하고 LoaderMax 라고 이름 지었습니다. GreenSock 은 TweenMax/TweenLite 개발은 대략 끝내고, 얼마전에는 타임라인을 제어하는 TimelineMax/TimelineLite 를 내놓더니, 이번에는 통합 로더군요.

이 라이브러리는 단순히 swf, image, video 등을 로드하자는게 아니라 xml, css, mp3, txt 나 binary 데이터 까지 플래시에서 로드 가능한 거의 모든 종류의 외부 자원들을 로드할 수 있습니다.
사실 이것 뿐이라면 “그정도의 통합 로더는 나도 만들어 사용하고 있다” 고 하실 분들이 있을텐데요. 제작자인 GreenSock 은 이전에 발표한 TweenMax 에서 보여주듯이 개발자에게 상당히 매력적인 편의 기능을 동시에 제공하고 있습니다.

로드된 swf 에서 다시 한단계 건너 로드되는(2단계 이상의 로더구조) 외부 자원에 대한 관리를 하거나, 다수의 외부 자원을 동시에 로드할 수 있는 소위 벌크로더 구현, 그 벌크로더의 로딩 순서를 제어할 수 있는 기능도 제공합니다. 그중에서도 가장 주목할만한 것은 LoaderMax 와 관련 있는 미리 약속된 XML 노드이름을 자동으로 파싱해서 로더 객체를 만들어 내고 속성까지 설정할 수 있는 XML 자동 파싱 기능입니다.

아래 설명을 읽어내려가면, 전반적으로 개발자의 번거로운 코딩 작업들을 알아서 처리해 주는 정말 편리한 라이브러리라는것을 알 수 있습니다. 귀차니스트인 저에게는 딱이군요.

이 예제는 GreenSock 이 만든 데모 예제 입니다. LoaderMax 가 어떻게 동작하는지 확인해보세요. 썸네일이 뜨기 전의 전체 로딩 작업 부터 LoaderMax 의 영역입니다.

아래는 http://www.greensock.com/loadermax/ 의 요약 번역 입니다. 저는 전문 번역자가 아니므로 일부 번역에 에러가 있을 수 있습니다. 이상한 점이 있으면 원문을 확인하세요.

LoaderMax – Smart AS3 Loading

버전 : 1.01, 2010-06-16 업데이트
호환성 : AS3.0 (Flash Player 9 이상)

로더와 로더 내부의 서브로드 swf 파일의 통합

로드 당하는 swf 에서 다시 로드하는 자원의 로딩 관리를 조상님이 모두 해주신다는 이야기. doc 에 있는 코드로 보면 확 와닿으실 겁니다. 아래에 있는 모든 예제 코드는 doc 에 있는 코드를 기본으로 해서 현재 설명하고 있는 context 에 집중할 수 있도록 일부 편집했습니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// LoaderMax 객체를 "mainQueue" 이름으로 생성하고 onProgress, onComplete 와 onError 리스너를 한꺼번에 설정
var queue:LoaderMax = new LoaderMax({name:"mainQueue", onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler});
 
// 몇 개의 로더 객체를 LoaderMax 에 붙임(append)
queue.append( new XMLLoader("xml/data.xml", {name:"xmlDoc"}) );
queue.append( new ImageLoader("img/photo1.jpg", {name:"photo1", estimatedBytes:2400, container:this, alpha:0, width:250, height:150, scaleMode:"proportionalInside"}) );
queue.append( new SWFLoader("swf/main.swf", {name:"mainClip", estimatedBytes:3000, container:this, x:250, autoPlay:false}) );
 
// 로딩 시작
queue.load();
 
// 로딩 일시정지
queue.pause();
 
// 로딩 다시시작
queue.resume();
 
// 이렇게 LoaderMax 객체의 모든 하위 로더들의 이벤트를 통합하여 받을 수 있습니다.
function progressHandler(event:LoaderEvent):void {
	trace("progress: " + event.target.progress);
}
 
// 이벤트 완료 후에는 아래와 같이 content 를 잡아낼 수 있습니다.
function completeHandler(event:LoaderEvent):void {
	var image:ContentDisplay = LoaderMax.getContent("photo1");
	TweenLite.to(image, 1, {alpha:1, y:100});
	trace(event.target + " is complete!");
}
 
function errorHandler(event:LoaderEvent):void {
	trace("error occured with " + event.target + ": " + event.text);
}

XML 내부의 LoaderMax 관련 노드 자동 파싱

LoaderMax 의 일부인 XMLLoader 클래스의 경우, 파싱될 XML 파일이 일정한 네이밍 규칙대로 노드명과 속성명을 작성하면 관련 로더 클래스들을 생성하여 로딩까지 모두 끝낸 후 Sprite 를 상속한 ContentDisplay 형태로 넘겨줍니다.
아래와 같이 doc.xml 파일을 만든 후,

<?xml version="1.0" encoding="iso-8859-1"?>
<data>
	<LoaderMax name="dynamicLoaderMax" load="true" prependURLs="http://www.greensock.com/">
		<ImageLoader name="photo1" url="img/photo1.jpg" />
		<ImageLoader name="logo" url="img/corporate_logo.png" estimatedBytes="2500" />
		<SWFLoader name="mainSWF" url="swf/main.swf" autoPlay="false" estimatedBytes="15000" />
		<MP3Loader name="audio" url="mp3/intro.mp3" autoPlay="true" loops="100" />
	</LoaderMax>
</data>

아래와 같이 XMLLoader 를 통해 로드하면

0
1
2
3
4
5
6
7
8
9
10
11
12

// ImageLoader 를 활성화
LoaderMax.activate( [ImageLoader] );
 
var loader:XMLLoader = new XMLLoader("xml/doc.xml", {name:"xmlDoc", onComplete:completeHandler});
loader.load();
 
function completeHandler(event:LoaderEvent):void {
 
	// xml 파일에 정의되어있던 name="photo1" 속성을 가진 ImageLoader 를 찾아서 content 를 가져옴
	var photo:ContentDisplay = LoaderMax.getContent("photo1");
 
	addChild(photo);
}

이렇게 로드의 이벤트 완료 리스너에서 LoaderMax.getContent() 메서드를 이용해 name 속성으로 객체를 잡아내어 바로 addChild() 시켜버릴 수 있습니다. 초 간단이죠.

작은 파일 사이즈

보통의 경우 간단한 text 를 로드하는데도 16~24K 정도를 사용하게 되지만, LoaderMax 는 7K 정도만을 사용한다고 합니다. 어떻게 이럴 수 있나 하는 생각이 들어 소스코드와 docs를 살펴보니 아래 그림과 같이 Flash 네이티브 클래스는 flash.events.EventDispatcher 만 사용하고 그 이후는 직접 구현해버렸더군요.

flash.display.Loader 클래스의 상속 체인

GreenSock 의 LoaderMax 라이브러리 중 XMLLoader 클래스의 상속 체인

모든 로더간 공통 속성과 메소드

LoaderMax 의 여러가지 로더 클래스들은 load(), pause(), resume(), prioritize(), unload() 등과 같이 공통된 메서드명을 이용합니다. 코드 힌트를 지원하는 에디터를 사용한다고 하더라도 메서드 명이 모두 제각각이면 아무래도 불편하겠죠. 그런 점을 고려한듯 합니다.

상위 LoaderMax 객체는 내부에 다른 LoaderMax 객체를 원하는 깊이만큼 포함 가능

2단계 이상의 로더 구조를 지원하여 progress, bytesLoaded, bytesTotal 등을 속성을 사용하거나 최상위 로더객체가 하부 시스템을 제어할 수 있습니다.

AutoFitArea 클래스 제공

ImageLoader, SWFLoader, VideoLoader 를 로드하고 width나 height 속성을 조정 했을 경우, 자동으로 원본 비율에 맞게 조정할 수 있습니다. 이것은 GreenSock 이 직접 제작한 예제를 보면 빨리 이해가 될 것 같네요.

이런식으로 썸네일 이미지 따위를 만들때 반드시 만나게 되는 좌우상하 비율 문제를 명쾌하게 해결해 주고 있습니다.

여러가지 편리한 속성 제공

편리한 자동 이미지 smoothing, 중심점(registration point) 이동, noCache 기능, x, y, scaleY, rotation, alpha, blendMode 속성을 초기값 세팅, mp3, swf, video 등의 자동 플레이 옵션등을 제공합니다. 특히 noCache 속성은 같은 이름의 url 을 로드할때 브라우저의 캐시에서 다시 가져오는 것을 강제로 막는 옵션입니다. 보통 이제까지는 파일의 url 에 random() 값을 넣거나, 시간 값을 마이크로타임 단위로 넣어서 캐시를 막았었죠.

가비지 컬렉션 관련 불편/버그 우회법

GreenSock 은 로드된 하위 swf 의 가비지 컬렉션이 작동 안되던 문제를 우회해 버렸다고 합니다.

name 또는 url 로 로더객체와 content 찾기

LoaderMax.getLoader() 나 LoaderMax.getContent() 를 이용해 각 객체를 손쉽게 잡아낼 수 있습니다.

단일 로더가 다수의 LoaderMax 객체에 속할 수 있음

상기한대로 LoaderMax 는 여러가지의 로더 객체를 포함할 수 있는데, 각 객체들은 또다른 LoaderMax 객체에 속할수도 있습니다.

정확한 로드 진행상황 정보 제공

퍼포먼스를 내기 위해서 로드가 일어나기 전에는 예상 바이트 수를 하드코딩(또는 xml 에 속성으로 코딩) 해 넣어놓지만, 로드가 진행되가면서 실제 파일의 바이트를 정확히 계산하여 로딩 정보를 주고 받게 됩니다.

런타임에 로드의 우선순위 변경

언제든지 로더의 로드 우선순위를 바꿀 수 있는 prioritize() 메서드를 제공합니다. LoaderMax 는 다수의 로드 요청이 있을때 queue 형태로 로드를 순차적으로 처리하는데, 이걸 런타임에 동적으로 우선순위를 바꿀 수 있다는 의미 입니다.

강력한 이벤트 시스템

LoaderMax 의 계층과 대상을 식별하기 쉬운 일관된 이벤트 대상 등.

한 줄의 코드라인에 여러개의 이벤트 리스너 설정 가능

코드로 보면 한번에 이해가 됩니다.

0

LoaderMax({name:"mainQueue", onComplete:completeHandler, onProgress:progressHandler, onError:errorHandler});

maxConnections 속성 설정

동시에 받을 수 있는 연결 숫자를 정할 수 있습니다. 2 로 설정하면 벌크 로더 과정에서 동시에 받는 파일이 2개가 되는거죠. 데이터 크기가 작은 파일이 다수 있을 경우에는 숫자를 크게 하면 좋고, 파일 크기가 큰 경우라던가, 파일의 갯수가 적을 경우에는 1 에 가깝게 설정하는것이 좋습니다.

pause() / resume() 메서드

로드과정 어떤 시점에서나 이 메서드를 호출하여 전체 로드를 일시정지하거나 다시 시작할 수 있습니다.

Flex 친화적

LoaderMax.contentDisplayClass 에서 FlexContentDisplay 객체로 쉽게 변경(아마도 캐스팅인듯)할 수 있어 ImageLoader, SWFLoader, VideoLoader 는 UIComponent 로 감싸진 content 를 반환받을 수 있습니다.

* * * * *

아… 이건 너무 좋습니다. 제가 사용하고 있던 클래스 중 몇가지는 이 라이브러리로 대체 가능하겠습니다.
여러분들도 지금부터 사용하세요.

LoaderMax 링크 (소스코드는 제작자의 블로그에 직접 다운로드 하세요)

그리고 위의 두 가지 데모 샘플 swf 파일을 만든 fla 와 도큐먼트 클래스도 원문 페이지 중간 부분 FAQ 의 9번 항목에서 제공되고 있으니까 그것도 놓치지 마세요. 실제로 어떻게 적용시키는지 한눈에 알 수 있습니다.

이 글을 복사해서 퍼가시는건 허용하지 않습니다. 글의 주소를 다른곳에 알려주시는 것은 환영합니다.

관련된 글

:, , , , , , , , , , , , ,

24 Comments for this entry

  • neewooNo Gravatar
    6월 18th, 2010 on pm 12:39

    좋은내용 감사해요.
    번역 노가다를 해야되나 고민했었는데 너무 잘 정리해주셔서 감사합니다.

    그나저나 기능이 정말 강력하네요 ^^b

    응답
  • 동강No Gravatar
    6월 18th, 2010 on pm 6:37

    상당히 유용하게 쓰일듯 하네요.ㅎㅎ 실무에 적용해 봐야 겠지만, 노가다가 반으로 줄어들듯 합니다. 좋은 정보 감사합니다.

    응답
  • semomuriNo Gravatar
    6월 19th, 2010 on am 1:26

    오늘 하루종일 LoaderMax 가지고 놀고있는중인데 이거 굉장히 유용하네요.
    좋은 정보 감사합니다.

    응답
  • 쫑쫑쫑No Gravatar
    6월 19th, 2010 on pm 4:54

    로더가 왜 안나오나 싶어서 허접하게 만들어서 사용하고 있는 로더 가 있었는데 버릴때가 된거 같네요 ~ ㅋㅋ 완젼 좋은것 같아서 신납니다 ~

    응답
    • 세계의끝No Gravatar
      6월 19th, 2010 on pm 6:48

      이 통합로더 덕분에 개발자들 사이에서 버려지는 클래스들 꽤 되겠네.
      뭐… 그렇게 발전해 나가는거지. ^^

      응답
  • kyeNo Gravatar
    6월 20th, 2010 on pm 3:04

    http://kyezip.com/blog/index.php/2010/06/20/loadermax-1-1/
    ㅋㅋ 기껏해봤지만 저도 아마 형님 글을 보면서 기능을 익혀나갈것 같네요..ㅎㅎ

    응답
    • 세계의끝No Gravatar
      6월 20th, 2010 on pm 3:14

      계준이구나. 도메인 끝내주네 ㅎㅎ
      처음엔 나도 전체 문장을 번역해보려다가, 의미를 잘못 파악해 오역할 수 도 있을 것 같아, 그냥 제목들만 번역하고 의미만 전달하는 방식으로 바꿨지.
      계준이가 내 수고를 대신해 줬군.

      응답
  • 동범이No Gravatar
    7월 9th, 2010 on pm 12:55

    좋은 정보네요. 그린속 이 양반은 정말 도네이션 해주고 싶네요. ㅋㅋ

    요즘 신규 프로젝트 들어가는데 한번 이용해봐야겠다 싶습니다.

    다운 받아서 잠깐 연습해봤는데 아직은 urlloader가 더 익숙해서 그런지 쓰기가 좀 어렵네요. ^^;;

    주말 이용해서 좀더 테스트해보고 다음주 정도에 실무작업에 이 클래스로 변경해야겠네요.

    TweenMax 너무 잘 쓰고 있긴한데 쓸때마다 느끼는게 그린속씨(?)는 왜 옵션설정을 오브젝트 타입으로 했을까 궁금하더라구요. 일부러 그런건 아닌거 같은데…. 플래시빌더에서 코드힌트로 옵션이 나타나질 않으니 좀 불편하더라구요. 좀 다른 옵션을 쓰려면 데모를 열어봐야하는;;;;

    블로그에 이 정보도 적어놔야겠네요. 나중에 글 쓰고 트랙백 걸겠습니다. ^^

    응답
    • 세계의끝No Gravatar
      7월 10th, 2010 on am 12:44

      데모 샘플 swf 파일을 만든 fla 와 도큐먼트 클래스를 다운 FAQ 의 9번 항목에서 다운받을 수 있습니다.
      이 데모 코드를 보면 어떻게 사용하는지 한눈에 알수 있죠.
      주소는 아래와 같습니다. (외부 사이트에서 다운로드 안될수도 있으니 원문 사이트에서 받으세요)
      http://www.greensock.com/as/LoaderMax_Demo_Source.zip

      GreenSock 은 녹색 양말(한짝) 이라는 의미죠.(로고 그림) 양말이니까 그린삭 이라고 읽으면 될거 같습니다.

      그리고 FAQ 의 8번에 어째서 Object 타입으로 했는지 이유가 나와있습니다.

      0
1
2

      new SWFLoader("main.swf", "myFile", 100, 100, 200, 200, this, completeHandler, null, null, progressHandler);
-OR-
new SWFLoader("main.swf", {name:"myFile", x:100, y:100, width:200, height:200, container:this, onComplete:completeHandler, onProgress:progressHandler});

      보는 바와 같이
      1. 직관적인 속성 설정을 위함(가독성)
      2. 속성(파라미터)의 순서에 구애받지 않음
      의 이유가 있는거죠.

      응답
  • 최강영구No Gravatar
    7월 14th, 2010 on am 2:07

    어제 오늘 하루죙일 이거 갖고 놀구있습니다.
    정말 강력하네요.
    덕분에 프로젝트 진행하는데 큰 도움 얻습니다.
    번역 굳좝!!

    응답
    • 세계의끝No Gravatar
      7월 16th, 2010 on am 3:15

      나도 이리저리 테스트 해 보니까, 강력한 한편 기존 코딩 스타일이 변경 되는 부분 때문에 고민중이야.

      응답
  • 매No Gravatar
    9월 27th, 2010 on pm 6:23

    좋은 글 잘 읽었습니다!
    저도 이번주는 LoaderMax을 파보는 한주로 삼아야겠군요.

    그리고 하나 꼬지르자면 ^^;;
    http://blog.hannim.com/archive/20100723?page=3 에서 불펌을 하신 것 같군요.
    위화감이라도 조성하심이.. 불펌하지 말아달라고 직접 본문에 써넣으셨는데도.

    응답
    • 세계의끝No Gravatar
      9월 27th, 2010 on pm 7:16

      매님이 오랜만에 오셨군요.

      불펌은 이제껏 네이버 블로거들 뿐이어서
      .htaccess 로 blog.naver.com 만 막았는데 말이죠 ^^
      blog.hannim.com 도 추가했습니다.

      제보 감사합니다. ^^

      응답
  • 세계의끝No Gravatar
    10월 14th, 2010 on am 3:14

    LoaderMax 를 실제 프로젝트에 이용하려는 분들은, LoaderMax 의 제작자 GreenSock 이 직접 말해주는 LoaderMax Tips & Tricks 을 꼭 읽어보세요.

    http://www.greensock.com/loadermax-tips/

    응답
  • 예썰No Gravatar
    11월 4th, 2010 on pm 6:06

    제 마음대로 응용해서 쓰고 싶은데

    생각처럼 싶지가 않네요 ㅎ_ㅎ’

    그래도 매우 유용한듯~! 감사합니다.

    응답
    • 세계의끝No Gravatar
      11월 5th, 2010 on am 12:17

      본문 가장 아래에 설명되어있는 GreenSock 이 만든 예제 fla 샘플을 살펴보면 어떻게 사용해야 하는지에 대한 좋은 힌트가 될겁니다. ^^

      응답
  • 운동부No Gravatar
    11월 10th, 2010 on pm 1:41

    막상 기존방식을 버릴려니 어렵더라고요 그래서 지저분해지고 그렇네요
    이기회에 제것으로 만들어야 할거같습니다 잘보고 배우고 갑니다^^

    응답
    • 세계의끝No Gravatar
      11월 10th, 2010 on pm 1:57

      단일 로더로 LoaderMax 를 사용했을 경우에는 Loader 와는 다른 구조와 사용방법 때문에 시행착오를 겪어야 한다는 점과, 외부 라이브러리에 의존해야 한다는 점이 마음에 걸리는 부분이긴 한데요… 벌크로더 기능만으로도 충분히 감쇄하고도 남으니 일단 사용하고 보는거죠. ^^

      응답
  • 세계의끝No Gravatar
    11월 16th, 2010 on pm 12:16

    GreenSock 도 LoaderMax 의 사용법이 다소 어렵다고 불평하는 사람들의 의견을 들었는지, 비디오 튜터리얼이 나왔습니다.
    Video Tutorial: Meet LoaderMax – http://www.greensock.com/loadermax-video/

    응답
  • ziaNo Gravatar
    1월 13th, 2011 on am 11:43

    안녕하세요 세계의 끝님~^^

    LoaderMax를 사용중에 궁금한점이있어서 이렇게 질문드립니다….

    SWFLoader 사용시 불러들인 swf파일에서 타임라인에 이렇게

    import flash.events.EventDispatcher;
    import flash.events.Event;

    dispatchEvent(new Event(“onEvent”)); 를 적어주고

    SWFLoader에서 로드하고난후에 이 onEvent를 캐치하고 싶은데 잘안되네요…

    혹시 알고계신가해서요^^

    응답

1 Trackback or Pingback for this entry

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Meta

관련된 글

Visit our friends!

A few highly recommended friends...