플래시CS3에서 v3컴포넌트 만들기 -1-

간단하게 마우스를 올리면 반투명이 되는 컴포넌트를 만들어 본다.

사각형을 그리고 무비클립 심벌로 만든 후 linkage 설정에 들어간다.
Export for ActionScript를 체크하고 클래스에 Skin_box라고 쓴다.

빈 무비클립을 만든다.

빈 무비클립의 레이어를 이렇게 변경한다.

avatar 레이어의 1프레임에 이렇게 그린다.
테두리 두께는 헤어라인(hairline)이고, 칠하지 않았다.
컴포넌트의 시각 요소들을 모두 포함할 수 있는 크기로 그린다.

assets 레이어의 2프레임에, 라이브러리에서 skin_box 심벌을 드래그한다.
위치는 상관 없다.


--------------------------------------------------------------------------------

publish settings... 로 들어간다.
윈도우즈에서의 단축키는 Ctrl+Shift+F12.

Flash 탭으로 이동한다.
version과 actionscript version이 각각 flash player 9, actionscript 3.0인지 확인한다.
그 다음 Settings... 버튼을 누른다.

Automatically declare stage instance의 체크를 해제한다.
스테이지에 있는 인스턴스들이 자동으로 addChild() 되는 것을 막는다.


--------------------------------------------------------------------------------


이제 컴포넌트를 위한 클래스를 만들자.
클래스는 UIComponent를 상속해야 한다. (UIComponent extends Sprite)
Sprite를 상속해도 되지만 v3 컴포넌트 프레임워크를 쓸려면 UIComponent를 상속한다.

draw(), configUI(), setSize()를 재정의 한다.
draw()는 컴포넌트의 시각 요소들을 생성하고 추가하는 초기화 작업을,
configUI()는 시각 요소들을 알맞게 배치시키는 초기화 작업을 한다.
으흑흑 draw()랑 configUI()랑 설명이 바뀌었다 ㅜ_ㅜ
앞으로 나오는 draw(), configUI() 설명 전부 반대로..
이 컴포넌트에는 크기 설정 때 별도의 조작이 필요하지 않으므로 setSize()를 재정의하지 않는다.

이제 Skin_box 클래스의 객체를 시각 요소로 추가하자.
앞에서 봤듯이 Skin_box는 빨간 사각형 심벌과 연결된 클래스다. (런타임 때 생성되는)

이제 마우스를 올리거나 내리면 투명도가 바뀌게 만들자.
리스너 등록은 draw()에서 이루어진다.

이제 .swc 파일로 만들어보자.


--------------------------------------------------------------------------------

앞에서 레이어 설정을 했던 무비클립의 Component Definition으로 들어가자.

Class에는 컴포넌트 제어를 위해 만들었던 클래스(TransparentBox)를 쓴다.
Display in Componenets panel 에 체크를 하고, 설명을 쓴다.
Require minimum player version은 Flash Player 9를,
Require minimum ActionScript vrsion은 ActionScript 3.0으로 선택한다.

다 완료했으면 OK를 누른다.

이번에는 Linkage 설정으로 들어간다.

Export for ActionScript를 체크하고
여기 Class에도 컴포넌트 제어를 위한 클래스 이름을 쓴다.

마지막으로 Export SWF File 을 선택한다.

아무데나 저장하고 다음 위치로 들어간다.
C:\Documents and Settings\User\Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\Components (숨김 파일 표시를 해야 한다)

또는 다음 위치로.
C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components

임의의 폴더를 만들고

만들었던 .swf 파일을 여기로 옮긴다.

실험을 위해 새 문서를 만든다.

Componenets 패널(없다면 Ctrl+F7을 누른다)에서
작은 화살표를 누르면 Reload, Help가 나오는데 Reload를 누른다.

컴포넌트를 화면으로 끌어온다.

컴포넌트가 화면에 보인다.

라이브러리에는 컴포넌트가 자동으로 추가되어있다.

이제 Ctrl + Enter로 무비를 테스트 해보자.

완성.
다음에는 Inspectable 태그에 대해 알아본다.

---------------------------------------------------------------------------------

지금까지의 과정에 사용한 파일들(TransparentBox.fla, TransparentBox.as, transparent box.swc)

invalid-file

음.. draw()랑 configUI() 부분을 좀 틀린 것 같은데.. 일단 덮어두고..