FlexBuildPath.png

SWC 컴포넌트의 활용 (SWFLoader 의 대안으로서-)

플래시를 모태로 개발된(혹은 그렇다고 알려진) 플렉스지만, 이 녀석 결정적으로 타임라인을 베이스로 하고 있지 않다. 타임라인이 플래시의 화려함을 만들어내는 기초인데, 그 타임라인을 빼버림으로써 불필요한 동적 로드를 최소화하고 상하위 클래스/인터페이스의 일관성을 갖추게 된 것. ‘Animation Tool’ 에서 ‘Development Tool’ 로의 한 단계 진화인 건 분명한데. 그 덕분에 플렉스에선 플래시처럼 자유도 높은 애니메이션을 구현하기가 무진장 까다로운 일이 되었다. 정형화된 컨트롤 컴포넌트를 이리저리 작당하는거야 뭐 잘들 만들어놨으니 쓰는데 문제가 없지만, 조금만 예뻐보이려 애쓰는 순간 사방팔방에서 태클이 걸려오는거다. 망할.

지금 SealTale 개발 과정에는 모듈화 된 SWF 조각들을 다량으로 로드해야 하는 일이 포함되어 있다. 이 역시 그냥 액션스크립트 모듈이라면 플렉스 컴포넌트로 제작해 사용하면 오죽 좋겠냐만 디자이너와의 협업을 해야하는 상황. 디자이너에게 타임라인은 반드시 무조건 기필코 필요한 필수요소 아닌가. 결국 애니메이션 소요를 플렉스 대신 플래시 기반 (정확히는 타임라인 기반) 으로 만들어내고 이를 플렉스가 제어하는 형태로 기획된 것이다.

여기서 발생한 문제 하나.
플렉스 기본 컨트롤 컴포넌트로 제공하는 SWFLoader- 이거 정말 못쓸 물건이다.
로딩 속도도 마음에 안 들고, Scale 조정에도 지정된 컨텐트 사이즈를 벗어나 홀로 삽질하는 경우가 다반사. 하지만 그 모두를 다 참고 인내하며 해달라는거 다 해주고 어거지로 돌렸더니, 이거, 뭐야. 이거 포커싱이 안된다? 고로, 마우스 이벤트를 죄다 씹어버린다. 망할-.- 자신에게 들어오는 포커스를 전부 로드된 SWF 로 넘겨버리는 과도한 친절함으로 인해 발생한 문제. 따라서 플렉스에 마우스 이벤트가 일어났음을 알리려면 로드된 SWF 의 소스코드에서 LocalConnection 으로 플렉스와 대화하는 수밖에 없는데 이것도 참 못 쓸 물건이다. 사소한 변수 전달 하나에도 코드 소요가 장난 아니고. 한마디로 뭐 이따위로 만들어놨나 싶음.
(레퍼런스에는 정말 친절하게도 SWFLoader 는 애니메이션 로드용이므로 복잡한 사용을 위해서는 커스텀 컴포넌트를 추천합니다- 라고 써놨다. 그래놓고는 커스텀 컴포넌트 사용에 관한 일체 언급이 없다. 제길-.-)

그래서 레퍼런스를 이잡듯이 뒤지고, 네이버 플코카페(http://cafe.naver.com/flexcomponent) 를 손가락에 땀나게 돌아다니며, 이와 더불어 캐삽질을 반복한 끝에, 끝에, 결국 방법을 찾아냈다. (으하, 장하다, 나 이거 찾고 울 뻔 했음. 진짜)

바로 플래시를 플렉스에서 사용 가능한 형태의 SWC 컴포넌트로 만들고, 이를 RSL(Runtime Shared Library) 로 로드하는 방법.

1. 플래시 -> SWC 컴포넌트
 - 위에도 썼다시피 ‘플렉스에서 사용 가능한 형태의’ SWC 컴포넌트로 변환해야 한다. 플래시 Publish Setting 메뉴에 들어있는 Export SWC 옵션에 체크하는거로는 플렉스에서 코빼기도 볼 수 없다.

1053236637.mxp

바로 요 녀석이 기특하게도 그런 막중한 임무를 수행해주는 Extension 파일. CS3 가 설치되어 있다면 mxp 라는 해괴망측한 확장자를 더블클릭만으로 실행할 수가 있다. 실행하고 동의 버튼만 누르면 설치는 대강 다 알아서 함. 그리고 설치해도 뭐 딱히 변화된건 아무것도 없다. 플래시를 들어가면 Commands 메뉴에 Make Flex Components 라는 서브메뉴가 있음을 확인하면 설치 다 된 것임.

사용자 삽입 이미지

사실 이런 메뉴 있는지도 몰랐음;

이 녀석은 꼭 무비클립 단위로만 만들어지게 되어 있으므로, 분산된 모든 코드들을 정리해 하나의 무비클립으로 만들 필요가 있다. 나 역시도 액션스크립트2.0 코더들의 지독한 습관으로 Level0 Action 레이어 1 프레임에 코딩하고 있었던 터라 전부 들어내 하나의 무비클립에 담았다. 그리고 그 무비클립을 Linkage 속성에 들어가 클래스 이름을 지어주고 요 위 그림의 Make Flex Component 를 클릭한다. Trace Window 에 [ Component "Action" is ready to be used in Flex. ] 이 뜨면 완료. 혹시 다른 에러메세지가 떴다면 다른 무엇보다 자신의 코드를 보길 바람. 이 작업은 한번만 해주면 된다. 그 다음은 퍼블리시만 반복해도 플렉스와 대화하는데 문제 없음.

사용자 삽입 이미지

Export SWC

그 다음은 Publish Setting 에 들어가 Export SWC 에 체크하고 Publish-

사용자 삽입 이미지

Properties


다음은 플렉스에서 프로젝트의 Properties – Flex Build Path – Library Path – Add SWC
그리고 Link Type 을 RSL 로 지정해주면 끝난다.
얘도 한번만 하면 된다. RSL 코드가 수정되어도 빌드 한번이면 알아서 인식.

사용자 삽입 이미지

ContentAssist 에 뜨는 Flash 의 변수/함수들-


이쯤되면 나름 감동적임-
LocalConnection 같은 귀찮은 작업 도무지 필요 없다. 플래시에서 코드 수정 후 퍼블리시 한방, 빌드 한방이면 알아서 촤르륵 떠주는 센스.

http://222.111.166.187/favoriteTest/CategoryNavigation.html

아직 작업중이긴 한데, 필요한 부분은 거의 다 완성됐다.
Flex HttpService 로 받은 E4X 포맷의 XMLList 가 바인딩 되었고, 플렉스에서 dispatchEvent 때려도 잘 동작함.
이제 현재 릴리즈용 코드인 TaleMain 과 결합만 하면 실질적으로 이 부분은 마무리 된다.
진정한 SwfLoader 의 대안 도구로서 활용하려면 플래시의 Loader 클래스를 활용해 커스텀 컴포넌트를 따로 하나 제작해야 할 듯 한데 그건 내일 이 시간에-

음, 역시 모르면 고생이고. 알면 재밌다.

5 thoughts on “SWC 컴포넌트의 활용 (SWFLoader 의 대안으로서-)

  1. 지돌스타

    디자이너와 개발자 협업 도구로 Flex Component kit 만큼 좋은 것도 없지요. 이것은 컴포넌트를 만들어주는 것 외에도 스킨작업을 위해 Linkage를 걸어줄때 일괄적으로 걸어주는 편리함도 제공합니다. ^^

    외부 SWF와 통신을 위해서는 ApplicationDomain 개념이 꼭 알아야하는 것 같아요. RSL 형태로 SWF를 로드하는 것은 부모 SWF와 자식 SWF가 같은 ApplicationDomain 안에서 사용되는 것이므로 부모-자식간에 정의된 클래스에 접근하는데 전혀 지장이 없지요. 하지만 Loader를 통해서 load할때는 이 ApplicationDomain을 여러가지 형태로 정의해줄 수 있습니다.

    http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/flash/system/ApplicationDomain.html

    http://livedocs.adobe.com/flash/9.0_kr/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000327.html

    http://livedocs.adobe.com/flash/9.0_kr/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000173.html

    이런 글들이 도움이 될 듯합니다.

    Reply
  2. kjs

    안녕하십니까.
    글 잘 읽어보았습니다.
    하나 잘 안되는것이 있어서 문의드려봅니다.
    설명해주신데로 따라해봤는데…
    flash cs3에서 make 했을때…아래와 같은 오류가 납니다.

    Command made the following changes to the FLA:
    Set frame rate to 24
    Imported FlexComponentBase component to library
    Skipping Library item “img”. It is not a MovieClip.
    Symbol “disconnect” can be used as a Flex component.
    Symbol “warning” can be used as a Flex component.
    Symbol “failure” can be used as a Flex component.
    Symbol “normal” can be used as a Flex component.
    Skipping Library item “x_img”. It is not a MovieClip.
    Skipping Library item “warning_img”. It is not a MovieClip.
    Skipping Library item “failur_img”. It is not a MovieClip.
    Skipping Library item “normal”. It is not a MovieClip.
    Skipping Library item “server2_f.gif”. It is not a MovieClip.
    Skipping Library item “server2_n.gif”. It is not a MovieClip.
    Skipping Library item “server2_w.gif”. It is not a MovieClip.
    Skipping Library item “server2_x.gif”. It is not a MovieClip.
    Select File > Publish to create the SWC file for use in Flex.

    1046: 유형이 없거나 컴파일 타임 상수가 아닙니다: normal.
    1046: 유형이 없거나 컴파일 타임 상수가 아닙니다: disconnect.
    1046: 유형이 없거나 컴파일 타임 상수가 아닙니다: failure.
    1046: 유형이 없거나 컴파일 타임 상수가 아닙니다: warning.

    디자이너가 fla로 무비클립을 만들어 주었는데…
    따로 액션스크립트를 입력해야 하나요?
    디자이너가 준 상태에서는 아무런 구문이 없거든요.
    바쁘시겠지만 여건이 되신다면 답글 좀 부탁드리겠습니다.
    감사합니다.

    Reply
    1. 민상k

      답글을 달아드릴 곳이 여기뿐이라 이곳에 답니다.

      제가 경험하지 못한 에러라 정확한 답변은 될 수 없겠지만,
      에러메세지를 바탕으로 몇가지 추측해보자면.

      일단 Make Flex Component 커맨드는 SWF 를 컴포넌트화 하는 커맨드가 아니라 플래시 MovieClip 을 (MovieClip 클래스에서 상속된 특정 클래스를) SWC 컴포넌트로 export 하는 커맨드입니다.

      Symbol 이 사용불가라고 뜨고 Library 의 아이템들이 Skipping 된 것으로 보아 FLA 파일 전체를 Make Flex Component 커맨드로 지시한 이 아닐까 싶습니다.

      그리고 Export SWC 커맨드 (Publish Settings – Flash – Export SWC) 는 플래시 플랫폼에서 돌아가는 SWC 컴포넌트로 만드는 커맨드로서, mxp 파일을 설치하지 않더라도 사용이 가능한 녀석이지요. 이 말은 곧 플렉스에서 구동 가능한 SWC 컴포넌트의 제작을 위해서는 그 파일이 플래시 SWC 로 문제없이 export 될 수 있는 상태여야 한다는 뜻입니다.

      아, 그리고 한가지 더.
      플래시의 기존 UI 컴포넌트는 (혹은 그 녀석들이 포함된 심볼들은) 플렉스 컴포넌트하는데 에러를 발생시킬 수 있습니다. 이에 관해서는 위에 댓글 달아주신 지돌스타님의 블로그에서 관련된 내용을 본 듯 하네요.

      추가적으로, 저의 경우,
      개별 로드된 파일과 플렉스 코드의 연동 과정에서 포커싱 문제로 발생하는 모든 문제를 디자이너쪽에 약속된 코드를 심음으로써 해결했습니다. 테스팅을 통해 몇가지 필요 코드 (예를 들면 로드된 SWF 파일에서 발생한 MouseEvent 를 parent 인스턴스에서 dispatch 하여 전달하는 등의) 들을 사전에 협의하여 전달하고, 디자이너는 그 코드를 import 하여 사용할 수 있게 했지요. (학습시켰다는 표현이 적절할까요;)

      도움이 되셨길 바라고, 제가 위에서 적은 내용으로 문제를 해결하지 못하셨다면 다시 질문 주시길 바랍니다. 제가 아는 한도 내에서 최대한 설명해보겠습니다. 아, 그리고 공개되어도 큰 상관없는 범주의 컨텐츠라면 fla 파일을 hwirang앳nate.com 로 보내주세요.

      Reply
  3. 감사합니다

    플렉스 초보인데, 플래시는 처음써보는거라 메뉴클릭 이벤트하나 연결하는거도 하루종일 걸리는군요 ㅠ.ㅠ
    플래시 cs3 에서는 on(relase) 이런거 안먹는다니.. 이벤트하는 방식도 다르다는군요ㅎㅎ. 여튼.
    플렉스에 swf 메뉴 다는 작업중인데 큰도움 됐습니다 !

    Reply
    1. 민상k

      onRelease 를 template function 으로 사용하는 방식은 AS2.0 에서 썼었지요. CS3 는 플렉스와 같습니다. 해당 객체(DisplayObject) 에 addEventListener 메소드를 호출하여 이벤트 리스너를 등록하시면 됩니다. 도움이 되었다니 다행이네요 -.-.-

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>