Document class 에서 상속 받았던 Sprite 클래스는 DisplayObjectContainer > InteractiveObject >DisplayObject > EventDispatcher > Object 를 상속 받게 됩니다.

DisplayObject 는 플레이어 상에서 눈에 보이는 모든 놈들이라고 생각하시면 됩니다. EventDispatcher 를 상속받음으로서 addEventListener 와 dispatchEvent 를 통한 이벤트 모델을 쉽게 만들 수 있습니다.

InteractiveObject 는 그중에서도 마우스와 키보드 이벤트를 받을 수 있는 놈들입니다. flash  상의 그래픽 심볼 클립이랄 수 있는 Shape 클래스와 Static 텍스트 필드인 StaticText  는 InteractiveObject 의 자식놈이 아니라 불가능 합니다. 그래픽 심볼과 Static 텍스트 필드는를 액션을 줄 수 없는 것은 같은 이유입니다. (제 설명이 좀 이상할 지 모르겠는데 뭐, 어쨌든 그렇습니다. 더이상은 제 능력 밖이라... ㅡ.,ㅡ)

다 레퍼런스에 있는 내용입니다. 전 레퍼런스보다 더 잘 설명해줄 능력이 없답니다...ㅡ.,ㅡ


Sprite 는  쉽게 이해하자면  2.0의 Movieclip 클래스에서 타임라인이 빠진 녀석입니다.


흔히 2.0 에서 개발자들은 원프레임  어플리케이션이라고 명하는 타임라인을 전혀 쓰지 않는  어플들을 만들어왔습니다.  타언어에서 넘어온 개발자들에게는  타임라인이라는  녀석을 전혀 이해할 수 없었음이 가장 큰 이유였죠. MM 에서는 그래서 폼어플리케이션이라는 새문서까지 만들어내는 생각해보면 참 쓸데없는(?) 짓까지 하게됐죠.(새 문서 하면 나오는 그녀석 말입니다)
플래시를 조금 더 이해한 분들은 추가 프레임을 적절히 섞어가며 좀 더 효율적인 개발을 하였지만 실상은 그랬죠.

그런 분들이 만들어낸 어플들의 라이브러리를 열어보면  무비클립은 있되  모두 하나의 프레임만을 가졌죠.

Sprite  가  바로 그녀석이라고 생각하시면 됩니다. 물론 태어난 이유는 위 설명과 달리  무비클립의 다이어트를 위해서지만  그냥 이해하시기 쉬우시라고요...


앞으로 개발하실 분들이 만질  새로운 무비클립은  Sprite  라고 생각하시면 되겠습니다.  (무비클립은  Sprite  자식놈으로 따로 있습니다)


무비클립이 그랬듯 Sprite 는 속에 다른 그래픽 객체들을 넣을 수 있습니다. 그 부분이 DisplayObjectContainer 클래스입니다. MovieClip.attachMovie 가 DisplayObjectContainer.addChild  로 바뀌긴 했지만요.

하지만 약간 개념이 다릅니다.
attachMovie 가 삽입의 개념이라면 addChild는 추가의 개념입니다. 오히려 attachMovie 는 addChildAt 에 가깝죠.


2.0의 무비클립은 타임라인이라는 시계와 Depth 라는 고층 건물을 가지고 있었는데 반해 DisplayObjectContainer 는 그것들이 모두 사라졌습니다.

Depth 라는 고층 건물이 있었던 무비클립은 사람을 아래층에 사람이 있건 없건 12층에 넣는 것이 가능했습니다만 수위실만 있고 건물은 없는 DisplayObjectContainer 는 건물이 그것이 불가능합니다. 다만 수위실에서 누가 몇번째로 건물에 들어갔는지만 체크할 뿐입니다. 들어간 녀석들은 먼저 들어간 녀석들 등에 업혀있습니다.

사이에 있는 녀석을 쏙 빼버리면 위에 업힌 놈은 밑으로 툭 떨어져 버립니다. 단지 index 라는 순서의 개념만 남게된겁니다.



말이 계속 길어지기만 하니 많이 사용할 놈만 쳐다보죠.
많이 보셨던 2.0 > 3.0 마이그레이션 과는 약간 다를 겁니다. 그녀석은 이론용이고 다음건 실무용 마이그레이션이랄까요... 레퍼런스에 있는걸 제가 또 설명할 필요는 없으니까요.

2.0 > 3.0

createEmptyMovieClip > new Sprite + (addChild, addChildAt)
attachMovie > addChild, addChildAt
removeMovieClip > removeChild, removeChildAt
swapDepth > swapChildren, swapChildAt, setChildAt, setChildIndex
getNextHighestDepth > numChildren



많이 길어졌으니 이번 강좌는 여기까지...



p.s. 늘 그렇듯 오타는 책임지지 않습니다...ㅡ.,ㅡ

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

네번째 시간에 들어와 또 한가지 강좌에 대한 부연 설명 & 변명

이 강좌는 모 카페에 글을 올려 등급을 올리기 위해(레벨놀이 하려는게 아니라 남의 글 좀 보려고) 시작한겁니다.
동기가 불순(?)하다보니 강좌는 날림일 것입니다. 자세한 설명은 없을 거고요... 지금까지 올린 코드들은 컴파일도 안해봤습니다. 블로그에 바로 키보드 두들겨서 쓰고선 바로 옮긴겁니다. 앞으로도 딱히 해볼 것 같지는 않습니다.
앞으로도 대충 써놓고 자세한 설명은 레퍼런스를 살펴보시라는 식으로 진행할 겁니다

그러니 어떤 에러가 여러분 앞에 닥쳐도 그것은 예정된 일일 뿐입니다.


사실 3.0을 별로 마음에 안들어 하는 사람입니다. 아직 버그가 너무 많아서 실무에 쓰기에는 적당치 않다고 생각합니다.
하지만 실무에는 실용적인 컨텐츠 말고도 테크닉이나 기술력을 보여줘야 하는 일도 있는 법이지요.

저도 3.0을 무작정 싫다는게 아니고 좀더 플레이어가 안정화 되야 한다고 생각할 뿐이고 아직은 덜 그렇다는 것이죠. 공부를 할 이유는 충분하다 생각합니다.



그럼 다시 한번 각설하고... 지난 번에 얘기했듯이 이 강좌는 2.0에서 3.0으로 넘어가기 위합입니다. 그러니 2.0으로 태그 클라우드를 먼저 한번 짜보겠습니다.
swf에 dataxml=data.xml 이라고 변수를 던져줘서 받을 경우를 보겠습니다.




뭐, 이런 식이 될겁니다.

그냥 XML 클래스의 속성을 이용하시는 분도 있고 xfactorstudio 의 xpath 패키지를 사용하시는 분도 있겠지만 저는 mx부터 제공된 XPathAPI 를 사용했었습니다. XML은 사용이 복잡하고 xfactorstudio 는 너무 무겁더라고요. 혹시 XPathAPI 클래스를 모르시는 분들은 언제나 그렇듯 레퍼런스 검색을...


이렇게 사용하던 xml 파싱이 3.0 에서부터는 e4x를 사용하기 시작합니다. 이또한 레퍼런스를... 중요한건 코드니까요...

그래서 다음과 같이 변환됩니다. 3번 강좌의 Document class 안에 넣으셔야 합니다. package 부터 쓰기가 귀찮아서...ㅡ.,ㅡ;;;



대충 이런 식이 되지요.... 좀 길어졌으니 이후 설명은 다음 강좌로 넘기겠습니다.



p.s. 제가 다시 한번 돌아봐도 날림 강좌네요... 코드도 뒤죽박죽에 설명도 별로 없고 ㅋㅋㅋ...




p.s. 코드에 보면 패키지를 임포트하지 않았습니다.
    첫째, 다 쓰기 귀찮기 때문이고, 두째, 클래스를 하나씩 하나씩 레퍼런스 찾아가면서 공부하시라는 나름 깊은 뜻이 있답니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

첫번째 강좌 때, 제가 잊은 것이 있는데요... 이 강좌는 액션을 처음 배우려는 분들을 위한게 아니라 2.0에서 3.0으로 전환하시려는 분들을 위한겁니다.


그럼 시작하겠습니다 (코드 중 *숫자 는 맨 아래 보충 설명을 넣어놨습니다)


플래시를 실행하고 새문서를 열어 3.0 플래시파일을 선택해서 파일을 연후 밑의 properties 창에 Document class 란에 Main 이라고 써놓고 main.fla 로 저장합니다.


다시 새문서를 열고 액션스크립트 파일을 선택해 Main.as 라고 저장합니다. 이 파일이 이 어플리케이션에서의 Document Class 가 될 것입니다.


Document Class 를 만들어 작업하는 것과 2.0 때처럼 Main.as 파일을 만들어 인클루드 해서 쓰는 것의 차이를 알고 싶으시다면 아주 간단한 방법이 있습니다.

메인타임라인에 다음과 같이 넣고 돌려보시면



이렇게 나오게 되고

Document Class 에 넣어서 돌려보면


이렇게 나오게 됩니다.

참고로 3.0에서 2.0으로 짠 swf를 로드하면


으로 나오게 됩니다


여기서 더 깊은 차이를 알고 싶으시다면 레퍼런스에서 두가지에 대해서 살펴보시고요... 다른 파일이나 플렉스에서 이 파일을 로드했을 경우도 생각해보시기 바랍니다.


다시 시작해볼까요...


여기까지는 2.0에서 라이브러리에 Linkage 로 클래스를 연결해 만들던 방법과 특별히 다를게 없습니다


간단한 메소드와 속성을 만들어 보겠습니다.


예를 들어 UI 컴포넌트 를 만들려면 첫번째 키프레임에 하얀 무비클립을 하나 넣어놓고 두번째
 키프레임에 실제 코드를 넣어서 그 무비클립을 이용해 컴포넌트의 사이즈를 조절할 수 있도록 만듭니다. 왜냐하면 속에 아무것도 없으면 width 와 height 값은 늘 0이기 때문이죠.

이런걸 무비클립을 넣지 않고도 가능하도록 width,height 속성을 바꿔보죠...




이렇게 해놓고 컴파일 해보시면 아무것도 없는 빈 문서이지만 width, height 속성을 입력한대로의 값 그대로 가지게 된다는 것을 알 수 있을 것입니다.

일단 오늘은 여기까지... :)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

먼저 xml 을 짜야합니다. 제가 짜고선 그쪽 웹개발자에게 이런이런 식으로 뿌려달라고 해야겠죠
.

그럼 테스트용 xml이니깐 다음과 같은 태그를 뿌린다고 치겠습니다.


            인기도  중요도  링크
김민환     100      100     http://www.minarto.com

미나토     100      100     http://www.minarto.com

플래시       30      70      http://www.adobe.com


이걸 xml 로 늘어놔보자면,

<tag>
     <data label="김민환" rank="100" imp="100" link="http://www.minarto.com" />
     <data label="미나토" rank="100" imp="100" link="http://www.minarto.com" />
     <data label="플래시" rank="70" imp="30" link="http://www.adobe.com" />
</tag>

뭐, 이런 식이 되겠죠

그런데 여기서 어플리케이션의 기능 중 일부를 다시 늘어놓자면,

3. 태그의 유저 인기도를 시각적으로 표시해야 한다 (컨텐츠로서의 기능)
4. 노출의 중요도를 (태그를 기업 광고의 연장으로 생각할 수도 있다) 시각적으로 표시해야 한다 (상업적으로서의 기능)
5. 사용자 이벤트는 태그 클릭시 페이지 이동으로 한다


인기도와 중요도를 시각적으로 표시해야 한다고 했습니다.

특정 태그를 타 태그와 시각적으로 달리 하려면 어떤 방법이 있을까요?


1. 폰트의 차이 (종류, 크기, 색, bold, italic)
2. 배경색
3. 특정 디자인의 박스로 꾸미기

이 세가지가 일단 떠오르는 생각이겠죠... 3번은 제가 디자인 재주가 없으니 빼겠습니다
1번과 2번이 네이버에서 사용하는 방법이지요...

대신 저는 다른 한가지를 추가하겠습니다. 위치입니다. 단지 순서대로 뿌려주는 것이 아니고 태그클라우드의 가운데 위치시킨다는 것입니다.
마치 키보드의 자주 사용하는 알파벳의 키가 중앙에 배치되듯이 말입니다.

이걸 생각한 이유는 인기도야 색이나 크기로 표현을 하면 유저들이 쉽게 인지하게 할 수 있어 좋지만 중요도를 그렇게 표현하면 컨텐츠가 상업적으로 유저들에게 비춰질 수 있다는 생각이 들어서입니다.
위치는 상대적으로 상업적으로 보이지는 않을테니까요... 단, 색이나 크기에 비해 부각되기가 힘든 점이 있습니다. 매우 많이요...


뭐, 사실 이런건 이제 클라이언트의 팀장이나 디자이너가 판단할 문제죠. 하지만 자신이 다니는 회사의 프로젝트라면 이런 저런 아이디어를 내보고 실험해보는 정신도 필요하겠죠...

이 이외에도 많은 방법이 있을 수 있겠지만 강좌가 길어지면 제가 귀찮으니 1번(중요도 - 폰트 색)과 2번(인기도 - 크기와 배경색)만으로 어플을 만들겠습니다.


이렇게 정해졌다면 디자이너와의 협의에 따라 xml을 수정할 필요가 있을 수 있습니다

모든 인기도나 중요도의 색 변경을 한가지 색으로 통일할 수도 있겠지만 제각각일 수도 있으니까요. 나중에 수정의 귀찮음이 없어지도록 xml 안에 rgb color 값을 박는 식으로 변경하겠습니다.


<tag>
     <data label="김민환" color="ffcc00" rank="100" imp="100" link="http://www.minarto.com" />
     <data label="미나토" color="000000" rank="100" imp="100" link="http://www.minarto.com" />
     <data label="플래시" color="ff0000" rank="70" imp="30" link="http://www.adobe.com" />
</tag>

자 끝났느냐... 뭐, 끝낼 수도 있겠지만 저는 만약에 대비해 id 라는 값을 하나 더 넣겠습니다.
id는 db의 인덱스처럼 고유한 값을 말합니다. 특정 코드가 될 수도 있고요.

이건 혹시 클릭 이벤트를 자바스크립으로 할 경우에 인수를 던지기 위함일 수 있고 어떠한 특정기능에서 태그의 동음이의어의 구분을 위함일 수도 있습니다.

이부분은 사전에 클라이언트쪽 개발자와 협의가 확실히 끝났다면 전혀 불필요한 부분일 수도 있습니다만 어쨌든요...


그럼 다음과 같이 다시 써보겠습니다.


<tag>
     <data label="김민환" id="111" color="ffcc00" rank="100" imp="100" link="http://www.minarto.com" />
     <data label="미나토" id="aaa" color="000000" rank="100" imp="100" link="http://www.minarto.com" />
     <data label="플래시" id="1b1" color="ff0000" rank="70" imp="30" link="http://www.adobe.com" />
</tag>


그럼 다음 강좌에서 드디어 플래시를 실행하도록 하겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

네이버 블로그 페이지에 있는 태그 클라우드(최근 인기 태그)를 AS 3.0으로 만들어보도록 하겠습니다.


이걸 만드는 이유는 제가 모 회사의 면접에서 실기 테스트로 만들었었기 때문입니다.(제가 만들 내용은 시험문제로 나온 것과는 약간 다릅니다) 그리고 아르바이트로 이걸 제작해달라고 들어온 적도 있지만 단가가 맞지 않아 안하게 된 적도 있고요.


그러니 입사을 원하시는 신입개발자들에게 뭐 이런 것이 나온다 정도의 내용도 될 수 있을 것 같기도 하고...알바를 어떤 식으로 한다도 알 수 있을 거고요.
시험문제야 당연히 언제든 바뀌는 것이니 이거 달달 외우고 가면 붙을 거라고 생각하시는 바보같은 분들이 없기를 바라며 시작하겠습니다.



어플리케이션의 기능은 다음과 같이 정의하겠습니다.

1. 태그내용 표시
2. 당연히 태그는 겹치거나 하지 말아야 한다
3. 태그의 유저 인기도를 시각적으로 표시해야 한다 (컨텐츠로서의 기능)
4. 노출의 중요도를 (태그를 기업 광고의 연장으로 생각할 수도 있다) 시각적으로 표시해야 한다 (상업적으로서의 기능)
5. 사용자 이벤트는 태그 클릭시 페이지 이동으로 한다

여기까지가 클라이언트의 요청일 것입니다.

자, 클라이언트와 기간과 페이 협의를 끝내고 계약서를 쓴 후 디자인을 받았다면 이제 진짜 작업에 들어가야합니다.


///////////////////////////////////////



어플리케이션을 만들기 위해 프로그램 흐름도를 대충 생각해보겠습니다. (사실 짬빱 먹고 나니 이런건 잘 안하게 됩니다. 귀찮고 어차피 그냥 머릿속에서 바로 그려지니깐... 하지만 강좌니깐 나열해보겠습니다)


플래시 로드 > 로딩화면 구성 > 서버의 data.xml 페이지 로드 > xml 을 배열로 파싱 > 로딩 화면 삭제 > 화면 생성

실제 프로그램 흐름도를 그리려니 포토샵 열기가 귀찮아 그냥 화살표로 썼습니다.

자, 그럼 이 흐름이 적당한 것인지 생각해봐야 할 때입니다.


1. 배열 대신에 DataProvider class 로 만들고 DataChangeEvent 를 발생시킬 수도 있겠지만 클라이언트가 원하지 않은 오버스펙으로 작은 어플리케이션을 괜히 무겁게 할 필요는 없다고 생각합니다. (이 말이 무슨 말인지 모르는 분들은 그냥 무시해도 상관 없습니다)

2. xml 이 로드된 후 파싱 이전에 로딩 화면 삭제가 들어가야 할 것 같기도 합니다만 큰 차이가 없기도 하거니와 큰 양이라면 시간이 걸릴 수도 있는 것이니 파싱 이후로 뒀습니다.

3. 다시 생각해보니 data.xml 의 크기가 작을테니 로딩화면은 필요가 없을 것 같습니다


그럼 다시 써보죠.

플래시 로드 > 서버의 data.xml 페이지 로드 > xml 을 배열로 파싱 >화면 생성

자, 그럼 다음 글에서 실제 코딩에 들어가도록 하겠습니다. 물론 언제 쓴다는 기약은 없습니다 :)




p.s. 잘못 만들었기 때문인지 이력서의 내용이 문제인지 면접에서의 태도가 문제인지 연봉이 문제인지는 모르겠지만 참고로 저는 그 회사를 낙방했습니다. :) 제가 누누히 말하잖습니까, 저는 하수라고요... ㅎㅎㅎ

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.