Embed 메타데이터 태그를 이용하여 다른 swf 파일의 그래픽 자원 이용
by 세계의끝 on 12.26, 2009, under 고수들은 가르쳐주지 않는 AS3.0 입문
이번에는 as 파일의 Embed 태그를 이용하여 클래스에서 사용하는 그래픽 자원을 컴파일 타임에 다른 swf 파일에서 가져와 사용하는 방법을 소개합니다.
이 방법은 앞서 포스팅 한 라이브러리의 무비클립에 직접 클래스 파일을 연결한 경우와 비교하여 컴파일러의 선택이라는 측면에서 좀더 넓은 선택의 폭을 제공합니다. 라이브러리에 직접 클래스 파일을 연결한 경우는 최종 컴파일을 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 태그를 이용한 그래픽 자원 사용 예제 - fla 는 CS4에서 생성
관련된 글
8 Comments for this entry
Leave a Reply
-
Howdy. Welcome to
세계의끝과 플래시 원더랜드!이 블로그는 2008년 9월에 만들어진 후, Flash ActionScript와 Web Publishing, 그리고 Design 영역을 포함한 본인의 작업에 관해 주로 다루고 있습니다.
세계의끝이 누군지 궁금한 분은 여기를 클릭하세요. 저작자 표시 및 내용 변경금지
Blog under the Creative Commons Attribution-NoDerivs 3.0 License 
1월 6th, 2010 on pm 4:30
퍼블리시 세팅에서 SWC로 내보내도록 한다음에 TestProjectMain.fla에서 불러오면 해당 심볼을 나타내는 클래스(MyStar, MyEarth)을 작성할 필요가 없어서 더 편합니다. ㅎㅎ
1월 6th, 2010 on pm 4:38
네. 물론 잘 알고 있습니다.
사실 swc 를 이용하는 방법을 먼저 쓰고 이 글을 그 이후에 써야 하는데 순서가 바뀌었죠. ㅎㅎ
나중에 다른 글에서 설명할 예정이어서 이 글에는 표현이 안되있지만, 클래스 내부에서 public 메서드를 제공하는 것을 고려했기 때문에 나름 Embed 메타데이터 태그를 설명하는 것도 가치가 있다고 생각했습니다.
댓글주셔서 감사합니다. swc 로 빨리 써야겠네요.
1월 14th, 2010 on pm 5:55
감사합니다. 오늘 많이 배워갑니다^^
1월 14th, 2010 on pm 6:01
그래픽 자원을 이용하는 다른 방법에 대해서 2개의 포스트가 더 이어질 예정입니다.
1월 10th, 2011 on am 11:45
좋은글 감사합니다.
궁금한점이 각각의 개체를 클래스를 따로따로 만드는 방법 밖에 없나요?
한클래스안에서 그심볼에 접근하는 방법은 없는지 알고싶습니다.
1월 11th, 2011 on pm 1:48
질문의 의도를 모르겠네요.
객체를 만드려면 “new 클래스명()” 을 해야 하는거고
fla 파일의 라이브러리에 클래스 정의되어 있든 as 파일로 정의되어 있든 클래스는 만들어야 하는 것이죠.
위의 경우에 해당하지 않는다면 이미 스테이지에 만들어져 있는 객체이고 그 경우는 인스턴스네임으로 참조해야 합니다.
5월 11th, 2011 on am 10:00
안녕하세요 항상 감사해하며 보고있는 초보입니다. TestProject_graphic_asset.fla 무비클립안에 버튼심볼을 만들어서 인스턴스 이름을 적어주면 main에서 속성을 만들 수 없다고 나옵니다. 원래 그런건가요?
인스턴스네임을 가져올 수 없다면 버튼같이 여러개의 파일이 어울어 지는건 쉽게 만들수 없겠네요..
5월 11th, 2011 on am 11:17
그 문제는 이 포스트의 주제인 Embed 메타데이터 태그 뿐만 아니라 클래스 파일(*.as)을 이용하는 모든 경우에서 나타나는데요.
이미 인스턴스네임이 정의되어 있는 객체는 클래스 입장에서 봤을때 객체는 만들어져 있으되 변수는 없는 상황이 됩니다.
Flash IDE가 하듯이 컴파일 타임에 자동으로 추가 될 수도 있겠지만, 그렇게 되더라도 다른 클래스에서 해당 문제 생긴 객체의 코드힌트는 받지 못하겠죠.(어쩌면 자동으로 처리했을때는 이 문제가 가장 큰 이유일지도 모르겠어요)
그래서 만약 라이브러리에 클래스 정의한(질문 내용에서는 이걸 main 이라고 네이밍 하신것 같군요) 무비클립 내부에 myInstanceName 이라고 인스턴스네임을 준 하위 무비클립 객체를 만들었고, 이 파일이 as 파일에 연결되어 있을때는 해당 as 파일(질문 내용으로 보면 main.as 파일이 되겠네요.)에
라고 해당 인스턴스네임으로 변수 선언만 하면 됩니다.
= new MovieClip() 은 붙이지 않습니다. 왜냐고요? 이미 만들어져 있으니까요. ^^