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

세계의끝 — Thu, 17 Jun 2010 23:20:40 +0000

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 에 집중할 수 있도록 일부 편집했습니다.

// 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 파일을 만든 후,

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

// 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번 항목에서 제공되고 있으니까 그것도 놓치지 마세요. 실제로 어떻게 적용시키는지 한눈에 알 수 있습니다.

세계의끝과 플래시 원더랜드 » TweenMax