라이브러리의 무비클립을 클래스로 만들어 사용하기
by 세계의끝 on 12.22, 2009, under 고수들은 가르쳐주지 않는 AS3.0 입문
“고수들은 가르쳐주지 않아요” 시리즈의 첫 포스트는 라이브러리에 있는 무비클립을 클래스로 만들어 사용하는 방법 입니다. AS2.0 방식[01] 으로는 attachMovie() 메서드를 사용하는 경우에 해당하죠.
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 기준의 프로젝트에서 라이브러리의 그래픽 자원을 클래스로 만들어 사용하는 데에는 문제가 없으리라 생각합니다.
이어지는 내용으로는 라이브러리의 그래픽 자원을 클래스 파일에서 이용하는 다른 몇 가지 방법들에 대한 내용이 되겠습니다.
- 별도의 지칭이 없는 한 이 블로그에서 AS2.0 방식 프로그래밍이라 함은 클래스를 이용하는 방식이 아닌, fla 파일의 타임라인에 코딩하는 방식을 이야기 합니다. [↑]
- 한글판 Flash IDE 에는 “식별자”라는 명칭으로 되어있습니다만, 영어 단어를 발음 그대로 옮겨쓴 “링키지”로 더 많이 알려져 있죠. [↑]
- 우리가 흔히 말하는 Flash CS4, CS5 같은 것들을 Flash IDE (Integrated Development Environment : 통합 개발 환경)라고 말합니다. [↑]
- 컴파일 또는 테스트무비 한다는 의미입니다. [↑]
Blog under the Creative Commons Attribution-NoDerivs 3.0 License
12월 23rd, 2009 on 오후 11:11
그렇다면, 2.0 시절의 attachmovie를 대신하게 되는건가요?
(var mc:myMC = new mcMC(); 같은 코드를 통해서 라이브러리 자원을 가져다 쓸 수 있게 된다는 건가요?)
12월 23rd, 2009 on 오후 11:16
네 그렇습니다.
1월 8th, 2010 on 오전 11:52
@_@…………..
(하..한글이 맞을텐데…. 분명 우리나라 글씨인데….왜 난….ㅠㅠ)
1월 8th, 2010 on 오후 12:10
지금은 대략 읽어만 보시고, 3.0을 공부하다 보면 나중에 이 부분을 만나게 될 겁니다.
그때 이 글을 다시 보시면 되요.
4월 28th, 2010 on 오후 3:42
감사합니다.
안그래도 이제 클래스 변환작을 할려고 했는데 너무 좋은 글을 보게 되었습니다.
말미에 이어지는 내용으로는 라이브러리의 그래픽 자원을 클래스 파일에서 이용하는 다른 몇 가지 방법들에 대한 내용이 되겠습니다.
의 포스팅 글은 어디있나요? 고수들 카테고리에서 못찾겠습니다.
4월 28th, 2010 on 오후 3:51
Embed 메타데이터 태그를 이용하여 다른 swf 파일의 그래픽 자원 이용
위의 글이 이어지는 글입니다.
그 다음 이어지는 글은 swc 를 사용하여 그래픽 자원을 이용하는 방법인데, 적절한 예제를 생각중이라 아직은 대기상태의 글로 있습니다.
그 다음 이어지는 글은 런타임에서 다른 swf 의 그래픽 자원을 이용하는 방법인데, swc 퐇스팅 이후로 작성할 예정입니다.
이 4개의 세트 글이 완료되면 각 포스트에 링크를 정리해서 업데이트 할 예정입니다.