Tag Archives: 카테고리 네비게이션

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 클래스를 활용해 커스텀 컴포넌트를 따로 하나 제작해야 할 듯 한데 그건 내일 이 시간에-

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