Flash에서 제작된 무비클립을 SWC(Adobe Flash Compiled Component File)형태로 Export한 후 Flash Builder 4에서 사용하는 방법에 대해 알아보겠다.


Flash에서 작업에 필요한 무비클립 제작



이번 예제에서 최종 완성되는 결과물은 2개의 프레임을 가진 무비클립을 마우스로 클릭했을 때 타임라인 헤드가 이동하는 예제를 만들어 보도록 하겠다. 먼저 2개의 이미지로 만들어진 무비클립을 제작한다. Flash에서 2개의 이미지를 Import 한 후 각각 1번 프레임과 2번 프레임에 위치시키고 1번 프레임에 stop(); 액션을 추가해서 타임라인 헤드가 움직이지않도록 고정한다.

라이브러리 패널에서 해당 무비클립의 속성 패널창을 활성화 시킨 후 Linkage 옵션의  Export for ActionScript와 Export in frame1 체크박스를 선택한다. 그리고 Class 필드에 Icon을 입력한다. Flash Builder에서 사용할 클래스 이름이고 우리가 제작한 무비클립의 생성자 이름이다. 기본 클래스는 flash.diplay.MovieClip으로 지정한다.

Flash Publish Settings 패널을 열어서 SWC로 Export 할 수 있도록 지정한다. Publish Settings 패널의 SWF Settings 옵션에 있는 Export SWC 체크박스를 선택한다. 이것을 선택하면 해당 Fla를 Publish 했을때 SWF파일과 함께 SWC 파일도 함께 생성된다.

제작한 무비클립을 SWC로 내보내기위한 모든 작업이 끝났다. Flash에서 Publish를 실행하면 다음과 같이 SWF파일과 SWC파일이 함께 생성되는 것을 확인할 수 있다.


Flash Builder에서 SWC 가져오기




Flash Builder를 실행한 후 File > New 메뉴를 선택하면 여러가지 프로젝트를 생성할 수 있는 메뉴가 있는데 우리가 사용할 프로젝트는 ActionScript 프로젝트다. ActionScript Project를 클릭해서 새로운 프로젝트를 생성한다.

New ActionScript Project 창이 열리면 Project name 필드에 SmartGallery라고 입력하고 Project contents가 만들어질 위치를 지정하는데 필자는 Flash Builder의 기본 Workspace에 생성하도록 하였다. 입력이 모두 끝났으면 Next 버튼을 클릭한다.

반드시 Next 버튼을 클릭해야지만 프로젝트의 속성을 추가로 설정할 수 있다. 물론 프로젝트 생성 후에도 속성은 얼마든지 추가, 변경할 수 있다.

Library path 탭을 선택해서 방금전에 제작한 SWC를 새로운 ActionScript Project에 추가한다. Add SWC 버튼을 클릭해서 SWC 파일을 추가해준다. 이제 제작한 SWC를 사용할 준비가 모두 끝났다. Finish 버튼을 클릭해서 프로젝트 생성을 마무리하자. 참고로 Source path에는 자주 사용되는 ActionScript Open API를 추가할 수 있는데 Tween, PV 3D 같은 API는 이곳에 추가해서 사용하면된다.

그리고 하단의 Main application file은 프로젝트 이름과 같은 SmartGallery.as로 자동 지정된다.



새로운 ActionScript Project가 생성되면 Package Explorer에 추가한 SWC와 클래스 정보를 확인할 수 있다. 그림에서 보면 우리가 Flash에서 지정했던 Icon이라는 클래스 이름이 MovieClip.swc안에 있다는 것을 확인할 수 있다. 그리고 우측에는 ActionScript Project의 Main application file인 SmartGallery.as가 자동으로 생성되면서 기본적인 클래스 코드가 입력되어있는 것을 볼 수 있다.


액션스크립트 추가해서 완성하기


본격적으로 액션스크립트를 작성해 보도록하자. SmartGallery 생성자 함수에 icon이라는 지역변수를 선언하고 데이터 유형을 Icon으로 지정하였다. 현재  SmartGallery 프로젝트의 Library path 에는 MovieClip.swc가 추가되어있기 때문에 그림에서처럼 swc안에 있는 클래스 이름이 코드 힌트로 보여지는 것을 볼 수 있다.


완성된 액션스크립트이다. Icon 객체를 추가한 후 마우스 이벤트를 통해 객체를 클릭했을 때 현재 객체의 타임라인 헤드 위치를 비교해서 이동 시키는 간단한 액션스크립트이다. 액션스크립트 입력이 모두 끝났다면 ActionScript Project를 컴파일해본다. Flash Builder에서 컴파일을 하려면 Run > Run을 선택해서 Web Application으로 선택한 후 진행하면 자동으로 Html과 swf가 생성된다. 컴파일과 관련한 설정을 수정하려면 Run > Profile Configurations를 선택해서 컴파일 되는 위치라든지 디버깅 환경 등을 설정할 수 있다.

컴파일된 결과물을 보면 Flash에서 제작한 icon 무비클립이 화면에 보이고 마우스로 클릭할 때 마다 타임라인 헤드가 이동하는 것을 볼 수 있다.

간단한 예제였지만 이번 예제를 통해 Flash와 Flash Builder를 함께 사용할 때 어떠한 방법으로 사용해야 하는지 조금은 도움이 되었을거라 생각된다. 우리가 제작한 무비클립은 한 개였지만 프로젝트에 필요한 무비클립을 하나의 fla에 모두 제작. 각각 생성자 이름을 입력한 후에 SWC로 생성하면 Flash Builder에서 손쉽게 사용할 수 있다. 물론 무비클립뿐만 아니라 이미지, 사운드, 동영상 등도 사용할 수 있다.

현재 Flash Builder 4는 Beta 2까지 공개된상태이며 정식 버전에서는 Flash CS5와 보다 더 강력한 협업 기능을 제공하는 것으로 알려지고 있다.  콜린무크 블로그에 올라온 포스트(http://www.moock.org/blog/archives/000294.html)에는 Flash Builder 4 정식버전에 Flash Professional Project를 생성할 수 있는 기능이 추가되어 대부분의 플래시 개발자들이 Flash와 액션스크립트 편집 프로그램(FDT, Flash Develop 등)을 사용해서 디자인 작업과 개발 작업의 애매한 경계를 오가며 작업하던 환경을 Flash Builder를 통해 컴파일부터 디버깅까지 한번에 처리할 수 있는 통합 환경을 제공할 예정이다. 자세한 내용은 콜린무크의 블로그를 방문해 보길 바란다.

또한 이번 MAX2009에서는 Flash Builder 4의 새로운 기능을 자세히 소개하는 섹션도 마련되었었다.
http://tv.adobe.com/watch/max-2009-develop/whats-new-in-flash-builder-4/
관심있는 분들이라면 놓치지 않고 꼭 봐야할 영상이다.

예제에 사용된 프로그램
Adobe Flash Builder 4 : http://labs.adobe.com/technologies/flashbuilder4/
Adobe Flash CS4 Professional : http://www.adobe.com/products/flash/


원문 : Adobe RIA 기술문서
작성자 : Kobalt60 강성규