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

이 방법은 앞서 포스팅 한 라이브러리의 무비클립에 직접 클래스 파일을 연결한 경우와 비교하여 컴파일러의 선택이라는 측면에서 좀더 넓은 선택의 폭을 제공합니다. 라이브러리에 직접 클래스 파일을 연결한 경우는 최종 컴파일을 Flash IDE에서만 할 수 있는 반면, 오늘 소개할 Embed 태그를 이용해 그래픽 자원을 클래스에 직접 붙이는 경우에는 Flash IDE에서 컴파일을 할 수도 있고, Flex SDK를 통해 mxmlc 에서 컴파일을 하는 경우에도 사용할 수 도 있습니다. 무슨소리인지 잘 이해가 되지 않으셔도 일단 다음으로 패스! 포스팅의 내용과 살짝 거리가 있는 내용이므로 컴파일러에 대해 다루는 글을 나중에 별도로 포스팅 할 예정입니다.

***

먼저, fla 파일을 만들어 보겠습니다. 이름을 무엇으로 짓건 관계 없지만 이왕이면 파일이름에 어떤 역할을 하는 파일인지 네이밍을 해 준다면 Flash IDE를 열어서 어떤 파일인지 확인하는 수고를 덜 수 있겠죠. 그러므로 이 파일은 asset 이라는 폴더를 새로 만든 후 그 안에 TestProject_graphic_asset.fla 라고 약간 설명적으로 네이밍을 하고 저장했습니다.

드로잉 도구를 이용하거나 비트맵 이미지등을 import 하여 적당히 디자인을 하고 F8 단축키를 이용해 무비클립으로 만들어 줍니다. 라이브러리에서 방금 만든 MovieClip의 속성창을 열고 class 이름을 부여해 줍니다. 별 그림 이므로 클래스 이름은 MyStar 라고 지어보죠. 이때 Sprite로 만들고 싶으면 라이브러리의 무비클립을 클래스로 만들어 사용하기의 중간에 있는 관련 내용을 살펴보세요.

무비클립에 클래스 이름을 준 이후에는 무비클립이 스테이지에 놓여있건 아니건 우리나 사용하는데는 관계가 없습니다. 이 fla 파일은 그래픽 자원만을 사용하려는 목적으로 만들어진 것이므로 라이브러리 목록에 클래스 정의되어진 무비클립만 사용할 수 있습니다. 스테이지에 무엇이 놓여있건 최종 결과물과는 관계 없으므로 무비클립들을 배치하여 디자인을 미리 보는 용도로 활용할 수도 있습니다. 전체 예제 파일을 다운로드 하여 TestProject_graphic_asset.swf 을 확인해 보세요.

디자인이 완료되면 테스트 무비(Ctrl + ENTER) 나 퍼블리싱 메뉴(Ctrl + Shift + F12)를 통해 swf 를 생성합니다. 별다른 설정을 하지 않았다면 파일이름은 TestProject_graphic_asset.swf 이 되겠습니다. 그렇다면 asset 폴더 안에는 TestProject_graphic_asset.fla 파일과 TestProject_graphic_asset.swf 두개의 파일이 있을 겁니다.

자 그럼, 이 무비클립을 사용할 클래스를 하나 작성합니다. 클래스의 이름은 역시 MyStar 라고 지었는데요, 위에서 TestProject_graphic_asset.swf 의 라이브러리에 지정한 클래스의 이름과 동일하게 네이밍 했습니다. 이름이 반드시 같아야 할 필요는 없지만, 후일 클래스의 그래픽 자원을 라이브러리에서 찾아야 할 경우, 이름이 같으면 쉽게 찾을 수 있으므로 잇점이 생기는 거죠.

클래스 내용은 아래와 같습니다.

0
1
2
3
4
5
6
7
8
9
10

package items
{
	import flash.display.Sprite;
 
	[Embed(source='../../asset/TestProject_graphic_asset.swf', symbol='MyStar')]
 
	public class MyStar extends Sprite
	{
 
	}
}

src 폴더를 만들고 다시 그 안에 items 폴더를 만들어 MyStar.as 파일을 그 안에 저장했습니다. Embed 태그 의 source 속성에 swf 파일의 경로를 as 파일 기준으로 넣어주고, symbol 속성에 TestProject_graphic_asset.fla 의 라이브러리에 지정했던 클래스 이름이 들어가 있는 것이 보입니다. 이 클래스는 아직까지 그림 외에는 별다른 역할을 하지 않으므로 생성자 함수조차도 필요 없습니다. TestProject_graphic_asset.fla 파일의 라이브러리에는 MyEarth 클래스도 하나 더 만들어 놓았습니다. MyEarth.as 파일은 하단에 있는 전체 파일 다운로드에서 확인하세요.

여기까지 하면 모든 준비가 끝났습니다. 아래 도큐먼트 클래스에서 new 연산자로 MyStar 객체를 생성하고 addChild 메서드를 통해 화면에 표시했습니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

package
{
	import flash.display.Sprite;
	import items.*;
 
	public class TestProjectMain extends Sprite
	{
		private var star:MyStar;
		private var earth:MyEarth;
 
		public function TestProjectMain()
		{
			star = new MyStar();
			addChild( star );
 
			earth = new MyEarth();
			addChild( earth );
			earth.x = star.width;
		}
	}
}

위의 도큐먼트 클래스를 Flash Builder 나 FlashDevelop 등의 외부 에디터에서 직접 컴파일을 해도 무방하지만, 이번에는 TestProjectMain.fla 파일에 연결하여 컴파일을 해 보겠습니다. 아래 컴파일 결과에서 보는것과 같이 TestProjectMain.fla 파일에는 배경이미지가 있습니다.

이 방법이 가져다 주는 장점으로는 디자인단과 개발단이 명확하게 구분되어 협업 시스템에서 큰 이득을 가져다 주는 것이라고 할 수 있겠습니다. 디자이너는 그래픽 자원만을 가지고 있는 fla 파일을 수정하면 되고, 수정이 완료되면 컴파일 한번, 해야할 일은 그것으로 끝 입니다.

한편 개발자는 코딩을 하고 최종 컴파일을 하는 권한(또는 의무)을 가지게 됩니다. 디자인과 개발을 분업할 만한 정도 규모의 프로젝트라면 최종 컴파일은 개발자가 하는 것이 유리하다고 할 수 있고, 게다가 누군가 fla 파일을 열고 있으면 다른 사람이 수정하거나 심지어는 copy 조차도 되지 않은 fla 파일의 특성상, 개발자는 TestProject_graphic_asset.fla 파일을 만질 필요가 없고, 디자이너는 TestProjectMain.fla 파일을 만질 필요가 없는 이런 작업영역 분배는 상당히 바람직한 방법이라 할 수 있겠습니다.

  Embed 태그를 이용한 그래픽 자원 사용 예제

AS3.0 에서는 기존의 linkage^[02] 를 사용할 수 없는 대신, class 정의를 하고 new 연산자를 통해 객체를 생성한다는것은 알고 계실 겁니다. 라이브러리에 등록된 무비클립의 속성을 선택하면 아래와 같은 화면을 볼 수 있습니다.

라이브러리에 있는 무비클립의 속성메뉴를 선택한 화면

AS2.0 같으면 라이브러리 무비클립의 linkage 를 myMc 같은 스타일로 네이밍 했겠죠? AS3.0 은 본격적인 클래스 기반 프로그래밍이므로 MyClass 라고 네이밍 해 보았습니다. 클래스 이름의 첫 알파벳은 대문자로 시작하는것이 통상이므로 그것 역시 반영하였습니다.

그래서 이렇게 설정해 놓았으면, 아래와 같이 사용할 수 있게 되는거죠.

0
1

var instance:MyClass = new MyClass();
addChild( instance );

그런데 속성을 설정할 때 아래와 같은 대화상자가 나온 분도 있을 것입니다.

이 경고메세지는 “다시 표시하지 않음” 에 체크 한 후 닫으면 이후로는 보이지 않습니다. 간혹 영문 Flash IDE^[03] 에서 뭔가 자꾸 똑같은 것이 뜨는 것이 귀찮아서 무슨 내용인지도 모른 채 체크한 적이 있는 분은, 이 대화상자의 중요한 의미를 모르고 지나칠뻔 한 경우입니다.

다시 내용으로 돌아갑니다. 저 경고 메세지의 의미는 fla 파일과 같은 디렉토리에는 MyClass.as 라는 파일이 없다는 경고 메세지 입니다. 맞는 말이죠? 이런 파일을 우리는 만든일이 없습니다. 그래서 Flash IDE 는 swf 파일을 내보낼 때^[04]  MyClass.as 를 가상으로 만들어서 임의로 연결 한 후, swf 파일을 생성하게 됩니다.

가상으로 만들어진 그 파일의 내용은 어떤 내용을 가지고 있을까요? 간단합니다.

0
1
2
3
4
5
6
7
8

package
{
	import flash.display.MovieClip;
 
	public class MyClass extends MovieClip
	{
		public function MyClass ();
	}
}

즉, MovieClip 을 상속했고 아직까지는 인스턴스라던가 멤버함수와 같은 다른 내용이 없는 기본형태의 클래스 입니다. 우리가 만들지 않아 Flash IDE가 대신 만들어준 것이죠. 이것은 무엇을 말합니까? 라이브러리에 있는 클래스 화(化) 되어 있는 요소들은 우리가 *.as파일을 만들었건, 만들지 않았건 간에 모두 클래스 정의를 가지고 있다는 것을 말합니다.

“그럼 Sprite 로는 못만드나요?”

가능합니다. 클래스 이름란 아래에, 기본 클래스 라는 항목이 있고, 기본값으로 flash.display.MovieClip 이 지정되어 있는것을 가장 위의 스크린샷에서 확인할 수 있었습니다. 이 기본 클래스 항목을 flash.display.Sprite 로 바꿔주면 이 라이브러리 항목은 이제부터 Sprite 를 상속한 녀석이 됩니다. 더 이상 무비클립이 아니죠.

기본 클래스를 MovieClip 에서 Sprite 로 바꾸게 되면, 라이브러리 목록상에 보이는 아이콘의 색상도 아래와 같이 녹색으로 바뀌게 됩니다. 또한 가상으로 만들어지는 MyClass.as 파일도 MovieClip 대신 Sprite 를 상속한걸로 변경됩니다. 타임라인의 2프레임 이상을 사용할일이 없는 그래픽 자원이라면 Sprite 로 바꿔주는 것이 좋겠죠.

만약 이 Sprite 에 MovieClip 이었을적 만들어진 타임라인 애니메이션이 있다면 모두 무시되고 1프레임의 내용만이 유효한 내용으로 고정됩니다.

***

위에서는 클래스 정의만 하고 실제 클래스 파일(MyClass.as) 은 만들지 않았는데요, 매우 간단한 플래시 결과물이라면 그렇게 해도 별 지장 없을 것입니다. 클래스 정의를 하긴 하되, 그래픽 자원 이상의 취급을 해주진 않는 거죠.

그러나 점점 난이도와 복잡도가 높은 플래시 애플리케이션을 만들다 보면 클래스 파일이 그림이상의 역할을 해야할 경우가 생깁니다. 따라서 클래스 파일을 실제로 만들고 필요한 변수와 함수를 추가하는 등의 작업을 하게 됩니다만, 이 포스트의 범위를 벗어나는 내용이 되므로 다른 포스트에서 기회가 닿으면 살펴보기로 하고, 실제 클래스 파일을 만들어 연결하는 것은, 가상으로 클래스 파일이 연결되어지는것과 어떤 부분이 다른가를 짚어보도록 하겠습니다.

파일을 실제로 만들기 전에 매우 현실적인 상황 하나를 설정하겠습니다.  만들어야 하는 파일의 갯수가 많아질것을 대비해서 MyClass.as 파일을 fla 파일과 같은 디렉토리가 아닌 “ui” 라는 이름의 하위 디렉토리에 넣고 싶어졌다면 어떻게 해야할까요?

다음은 실제로 만들 MyClass.as 파일의 내용입니다.

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

package ui
{
	import flash.display.Sprite;
 
	public class MyClass extends Sprite
	{
		public function MyClass()
		{
			trace( "MyClass 클래스를 이용해 생성된 객체" );
		}
	}
}

위에서 Sprite 로 변경했으므로 그에 맞게 부모클래스를 설정했고, package 키워드 오른쪽에 ui 라고 디렉토리 이름을 붙였습니다.

이 파일을 fla 파일 기준 ui 디렉토리에 넣고, Flash IDE의 라이브러리의 MyClass 에 해당하는 Sprite 의 속성을 열고 왼쪽과 같이 디렉토리 경로를 추가해 줍니다. 디렉토리 경로는 곧 패키지 이름과 같게 되는것인데, 이 내용도 차차 알아나가기로 하겠습니다.

***

여기까지 확실히 이해를 했다면 Flash IDE 기준의 프로젝트에서 라이브러리의 그래픽 자원을 클래스로 만들어 사용하는 데에는 문제가 없으리라 생각합니다.

이어지는 내용으로는 라이브러리의 그래픽 자원을 클래스 파일에서 이용하는 다른 몇 가지 방법들에 대한 내용이 되겠습니다.

1. 별도의 지칭이 없는 한 이 블로그에서 AS2.0 방식 프로그래밍이라 함은 클래스를 이용하는 방식이 아닌, fla 파일의 타임라인에 코딩하는 방식을 이야기 합니다.
2. 한글판 Flash IDE 에는 “식별자”라는 명칭으로 되어있습니다만, 영어 단어를 발음 그대로 옮겨쓴 “링키지”로 더 많이 알려져 있죠.
3. 우리가 흔히 말하는 Flash CS4, CS5 같은 것들을 Flash IDE (Integrated Development Environment : 통합 개발 환경)라고 말합니다.
4. 컴파일 또는 테스트무비 한다는 의미입니다.

Main.swf 에서 Sub.swf 를 Loader 를 이용해 로드한 후에 Main.swf 에서 Sub.swf 의 클래스나 메서드를 사용해야 할 때가 있습니다.

AS2.0 라면 MovieClipLoader 와 loadClip 을 이용하여 로드 완료 이벤트를 확인 한 후 인스턴스네임으로 참조해 들어가면 되지만, AS3.0의 경우에는 그런 방법으로 다른 swf의 클래스를 사용할수 없습니다. 이런 경우 ApplicationDomain 클래스의 getDefinition() 메서드를 이용해 참조해야 합니다.

이 예제에는 3개의 클래스가 사용됩니다. 각 클래스에 대한 설명은 본문과 코드 주석에 포함되어 있습니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// SubSystem.as 의 내용.
package
{
	import flash.display.Sprite
 
	/*
	 * 이 클래스는 별도로 SubSystem.swf로 컴파일 하여 Main.swf 에서 Loader를 통해 로드하는 대상으로 삼음
	 * 즉, 이 클래스는 SubSystem.swf 의 도큐먼트 클래스 입니다.
	 */
	public class SubSystem extends Sprite
	{
		public function SubSystem()
		{
			trace( "SubSystem !!!" )
		}
 
		public function createItem( $name:String = "" ):Sprite
		{
			var item:Circle = new Circle( $name, 50, 50 );
			addChild( item )
			return item;
		}
	}
}

생성자에서는 제대로 로드가 되었는지 확인하는 용도의 trace 외에는 하는 일이 없고, public 으로 공개된 createItem() 메서드는 Circle 클래스를 new 해주고, 객체를 반환하고 있습니다.

Circle 클래스는 예제용으로 밖에 사용할 일이 없는 궁극의 원그리기 클래스 입니다.

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

// Circle.as 의 내용.
package
{
	import flash.display.Sprite
 
	public class Circle extends Sprite
	{
		private var _name:String;
 
		public function Circle( $name:String = null, $x:int = 0, $y:int = 0, $radius:uint = 50, $color:uint = 0x000000, $alpha:Number = 1 )
		{
			draw( $x, $y, $radius, $color, $alpha )
			this._name = $name
		}
		private function draw( $x:int, $y:int, $radius:uint, $color:uint, $alpha:Number ):Sprite
		{
			var item:Sprite = new Sprite();
			item.graphics.beginFill( $color, $alpha );
			item.graphics.drawCircle( $x, $y, $radius );
 
			addChild( item )
			return item
		}
 
		override public function get name():String { return _name; }
	}
}

SubSystem 클래스에서 Circle 클래스를 따로 import 하지 않았으므로, 이 두개의 클래스는 같은 폴더에 넣어야 동작하겠군요.

다음은 Main 클래스 입니다. 이 파일은 Main.swf 에 사용되는 도큐먼트 클래스 입니다.

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
32
33
34
35
36

//Main.as 의 내용.
package
{
	import flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLRequest;
 
	public class Main extends Sprite
	{
		private var loader:Loader = new Loader();
		private var request:URLRequest = new URLRequest( "SubSystem.swf" );
 
		public function Main()
		{
			//Loader는 직접 addEventListener 하지 못하고 contentLoaderInfo 를 통하여야 함
			loader.contentLoaderInfo.addEventListener( Event.COMPLETE, completeHandler );
			loader.load( request );
		}
 
		private function completeHandler( e:Event ):void
		{
			var runtimeClassRef:Class = loader.contentLoaderInfo.applicationDomain.getDefinition( "SubSystem" )  as  Class;
			var displayObj:DisplayObject = new runtimeClassRef(); //addChild 하려면 DisplayObject 로 캐스팅
			addChild( displayObj );
 
			var subSystemObj:Object = displayObj as Object; //메서드를 호출하려면 다시 Object 로 캐스팅
			var item1:Sprite = subSystemObj.createItem( "item1" );
			var item2:Sprite = subSystemObj.createItem( "item2" );
			item2.x = 100;
 
			//로드한 SubSystem.swf 의 자원은 이제 subSystemObj 로 참조하면 됩니다.
			trace( "subSystemObj.numChildren : ", subSystemObj.numChildren );
		}
	}
}

getDefinition() 과는 직접 관련은 없지만, 한가지 짚고 넘어가야할 내용이 있습니다. Loader 의 다운로드 진행상황이나 로드 완료 등의 이벤트를 받고 싶을 경우 Loader 에 contentLoaderInfo 를 통해 addEventListener 를 걸어야 합니다.^[01] Loader 에 직접 addEventListener 를 걸고 아무리 기다려본들 이벤트는 발생하지 않습니다.^[02]

다시 내용으로 돌아와서, Main.as 는 SubSystem.swf 를 Loader 를 통해 로드하고, 로드 완료된 이벤트 확인한 이후, SubSystem 의 내부 메서드를 호출하여 SubSystem 로 하여금 Circle 객체를 new 로 생성하게 하고 있습니다.

만약 SubSystem.swf 를 통해 얻고 싶은 것이 fla의 라이브러리에 Class 네임으로 정의한^[03] 무비클립이라면 getDefinition( “ClassName” ) 과 같이 해당 무비클립의 클래스 네임을 넣어주고 addChild 까지만 해주면 됩니다. 메서드 호출 까지도 필요 하지 않은 경우라면 이렇게 훨씬 더 간단하죠.

참고 : Main.swf 가 AS3.0 이고 SubSystem.swf 가 AS2.0 인 경우 ApplicationDomain 은 사용할 수 없습니다.

관련 레퍼런스 링크
ApplicationDomain 클래스 사용
ActionScript 3.0 언어 및 구성 요소 참조 설명서 : ApplicationDomain

* 다른 swf 가 아닌 하나의 swf에서 fla 라이브러리에 정의한 클래스 이름으로 무비클립을 사용하려면 “AS3.0 getDefinitionByName() 메서드를 이용한 라이브러리 자원 이용 – AS2.0 attachMovie 대응” 을 읽어보세요..

1. 로더객체.contentLoaderInfo.addEventListener(……)
2. 로더객체.addEventListener(……) <– (잘못된 사용)
3. AS2.0의 Linkage 사용하듯

AS3.0 에 들어와서는 라이브러리 패널의 링키지는 사용할 수 없지만 클래스 네임을 부여하여 별도의 클래스 파일을 만들지 않고도^[01] new ClassName() 을 하여 마찬가지의 기능을 수행할 수 있습니다.

그런데 new ClassName() 에서 ClassName 부분은 정확한 클래스 이름이 와야 하고, this["str"] 나 _root["str"] 같이 AS2.0에서 흔히 사용했던 레퍼런스 참조 방법을 new 연산자 다음에는 사용할 수 없으므로 AS3.0에서 new ClassName() 으로는 아래와 같은 AS2.0의 for 문을 이용한 동적인 attachMovie() 는 사용할수가 없습니다.^[02]

0
1
2
3
4
5
6

//AS2.0의 동적 attachMovie 예시
var arr:Array = new Array( "메뉴1", "메뉴2", "메뉴3" )
var len:Number = arr.length;
for ( i = 0; i < len; i++ )
{
	 attachMovie( "mc", "mc"+i, i )
}

그럼 어떻게 해야할까요?

먼저 라이브러리 패널에 있는 무비클립 심볼의 속성창을 열고 아래와 같이 클래스 이름을 지정해 줍니다.

클래스 이름은 for 문의 i 값으로 호출할 수 있게끔 숫자를 붙여 순차적으로 지정합니다. 그리고,

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//AS3.0에서 라이브러리의 클래스 이름을 이용하여 무비클립을 동적으로 사용
for ( var i:uint = 0; i < 5; i++ )
{
	var ClassReference:Class = getDefinitionByName( "mc" + i ) as Class;
	var displayObj:DisplayObject = new ClassReference();
 
	displayObj.addEventListener( MouseEvent.CLICK, clickHandler );
	displayObj.name = "mc" + i;
	displayObj.x = i * 51;
 
	addChild( displayObj );
}
 
function clickHandler( e:MouseEvent ):void
{
	trace( e.currentTarget.name )
}

이렇게 getDefinitionByName() 메서드를 이용해 Class의 레퍼런스로 캐스팅하고 new 연산자로 클래스를 호출하여 DisplayObject 객체에 담을 수 있습니다.
클래스가 다형성을 가지지 않고 이렇게 클래스의 이름을 이용하여 호출하는 주객이 전도가 된듯한 사용법은 객체지향 프로그래밍과는 약간 거리가 있는것 같긴 합니다만, 이런 사용법을 원하는 분들이 있고, 어도비에서도 이런 메서드를 제공하고 있으니 필요하다면 사용할 수 있는 거겠죠.

만약 buttonMode 등의 Sprite 속성을 사용해야 할 경우 DisplayObject 에는 해당 속성이 없으므로 아래와 같이 Sprite 로 캐스팅을 해야 합니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

for ( var i:uint = 0; i < 5; i++ )
{
	var ClassReference:Class = getDefinitionByName( "mc" + i ) as Class;
	var displayObj:DisplayObject = new ClassReference();
 
	//buttonMode 등의 Sprite 속성을 사용하려면 한번 더 캐스팅
	var instance:Sprite = displayObj as Sprite;
	instance.buttonMode = true;
 
	instance.addEventListener( MouseEvent.CLICK, clickHandler );
	instance.name = "mc" + i;
	instance.x = i * 51;
 
	addChild( instance );
}
 
function clickHandler( e:MouseEvent ):void
{
	trace( e.currentTarget.name )
}

관련 레퍼런스

  getDefinitionByName 예제 다운로드

* Loader 를 통해 로드한 다른 swf 의 라이브러리 자원 또는 클래스를 사용하는 방법은 “AS3.0 로더(Loader)로 불러온 다른 swf 의 클래스 사용하기” 를 읽어보세요.

1. 정확하게는 컴파일 타임에 자동으로 클래스 파일이 생성됩니다. 그러나 개발자가 이에 관여할 필요는 없습니다.
2. new this["mc"+i]() 이런식으로 될리가 없다는거죠.