이 방법은 앞서 포스팅 한 라이브러리의 무비클립에 직접 클래스 파일을 연결한 경우와 비교하여 컴파일러의 선택이라는 측면에서 좀더 넓은 선택의 폭을 제공합니다. 라이브러리에 직접 클래스 파일을 연결한 경우는 최종 컴파일을 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. 컴파일 또는 테스트무비 한다는 의미입니다.

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]() 이런식으로 될리가 없다는거죠.