홈페이지 : http://code.google.com/p/tweener/
레퍼런스 : http://hosted.zeh.com.br/tweener/docs/en-us/
0.장 서문
액션스크립트 3.0의 기본 tween클래스에는 많은 버그들이 있다..사용하기에도 불편하고 그리하여 지구인들은 몇가지 멋진 기능이 있는 외부 tween들을 몇가지 만들어서 배포, 판매를 하고 있는데, 그 여러가지 종류중에서 효율성이 최상은 아니지만 가장 사용하기 간단하고 처음 접하기에 편한 구글 트위너에 대해서 한번 알아보자. 일단 그전에 간략하게 소개정도 하자면 Tweener 라는 이름의 이녀석은 여러가지 개발자들(layman's terms)이 구글프로젝트 지원정책하에서 움직이기 땜시롱 일명 구글트위너 라고도 한다. 상용으로는 트윈맥스란 녀석도 있는데 이녀석은 꾀나 효율이 좋은편이란다 그래도 일단 돈내야 하니깐(물론 기능이 제한된 무료버전도 있다) 패스하고. 간단한 구현정도는 구글트윈을 이용해서 손쉽게 활용해보자 기본적으로 as3.0 기본으로 설명을 해보자 (사이트가면 2.0버전도 있으나 저자가 3.0 신봉자라서 3.0으로만 하겠다)
1.장 설치
홈페이지에서 다운을 받자.오른쪽 중간 쯤 보면 액션스크립트 버전별로 다운로드 할수 있다. 우리는 3.0으로 할꺼니깐
tweener_1_31_74_as3.zip 가볍게 눌러주자 그럼 신나게 다운한다. 다운이 완료되었다면 이제 플래시(CS4기준)을 켜고,
프로젝트를 하나 만들어보자. 이름은 "tweener"라고 이쁘게 지어보자. 프로젝트안에 fla파일과 as파일또한 손쉽게 "tweener"이라고 지어보자. 자그럼 본격적으로 설치을 해보자 (지금까지는 ...?!!!) 자 설치는 초간단하다 아까받은 파일을 압축을 푼다. 어디에? 프로젝트 폴더에 !!! 이걸로 설치는 끝이다. 어려운가? 어렵다고 생각하면 지금 당장 접시물에 코을 넣어야 할것이다. (압축을 풀면 caurina란 폴더가 있다 이폴더을 통째로 프로젝트폴더에 넣을것.)
2.장 사용
그림1처럼 tweener이란 프로젝트에 tweener.as파일과 tweener.fla파일이 있다. 일단 처음에는 간단히 fla파일에서 빨간색 box을 만들어 F8로 라이브러리에 등록한후(심볼이름은 mc_box) 액션으로 제어하기 위해 Linkage으로 스크립트와 이어준다.(클래스이름은 자동으로 심볼이름과 동일하게 지정된다)
그림1
다음으로 그림2처럼 tweener.as파일에 본격적으로 코딩을 시작해보자.
그림2
코드를 분석해보면 tweener이란 클래스는 Display의 Sprite를 상속받은 클래스 이기 때문에 그래픽 심볼들을 붙여서 표현할수가 있다.
7줄) 생성자에서 바로전에서 라이브러리에 등록한 mc_box란 클래스의 객체를 box란 변수에 할당한다.
8줄) addChild메소드를 이용해 디스플레이 객체 (변수 box)를 렌더링 엔진의 디스플레이 리스트에 추가한다.
9줄) 이부분 바로 구글트위너의 핵심이다.
맨 위에서 "caurina.transitions.Tweener" 이란 클래스를 import시켰다.
그리고 이번줄에서 Tweener클래스의 static속성의 메소드(addTween)를 호출하게 되는데
메소드의 파라미터값들의 유형은 이런식이다.
Tweener.addTween(object, {parameters});
object형식으로 트윈시킬 대상을 넣고 대괄호 { } 안에 속성들을 넣는다.
자세한 속성들은 본문 첫줄에 언급한 레퍼런스 사이트에서 찾아보면 많은 트윈속성들을 찾아볼수 있다.
자 이제 컴파일 시켜보자. Test Project나 Ctrl+Enter를 통해서 컴파일 시켜보면 뭐가 이상한점을 느낌수 있다.
그렇다 아무것도 일어나지 않는다. 해답은 간단하다. 그림3을 보자.
그림3
어떤가? as3을 조금이라도 해본사람이라면 이부분에서 "아~ 맞다~" 하면서 탄성을 질러야 정상이다.
그렇다 Document Class 정의가 해답이다. fla파일과 as파일 2개는 독립된 파일이다 예전처럼 fla파일에 f9을 눌러서 중구난방식으로 스크립트을 작성했던 시절엔 fla안에 스크립트와 온갖 심볼들이 다 포함되어 있었기 때문에 as파일을 클래스화 한다거나 클래스를 나눠서 협업을 한다는 등의 생각은 꿈도 꾸지 못하였다 하지만 이렇게 스크립트파일을 따로 만들어서 fla과 as파일을 이어줌으로 써 개발함에 있어서 좀더 유연해 졌다. 자 이제 그림3처럼 Document Class 부분에 우리가 작성한 as파일의 이름을 쓰자.
그리고 다시 컴파일 해보자. 어떠한가? 빨간 box는 일단 보이니 안심이다. 하지만 box가 이동되는 트윈모션은 안보이고 그냥 단순히 이동된 후의 모습만 보일 뿐이다. 이러면 단순하게 box.x=100, box.y=100 한것과 무슨 차이가 있겠는가? 하면서 의아해 하는것이 정상이다. 이런한 결과의 원인은 꾀 간단하다.
플래쉬는 fps단위로 작동된다 무슨말인가. frame per sec 즉 초당 프레임수에 따라서 영상의 움직임을 표현한다.
"엥 그거야 당연하지 그림3에도 FPS는 32잖아?" 라고 생각하는가 ? 그렇다 맞다. 하지만 Tweener에는 별도의 time이란 속성값이 있다. (물론 fps의 영향도 받는다) 이 time이란 파라미터는 트위을 당하는 디스플레이 객체가 매초마다 얼마나 오래 변화될 것인가 하는 변화량을 적는것이다. time:99 라면 1초당 99번 변화되는것이다. 그럼 어떨것 같은가? 같은거리를 1초동안 99번 움직여서 가는것과 1번 움직여서 가는것. 그렇다 1번 움직이는것이 더 빠를것이다. 통상적으로 time값은 1~ 1.2 정도로 2이상을 넘어가는 경우는 드물다. 또한 delay란 속성값이 있는데 이는 시작을 지연시키는 속성값이다. 그외 속성들은 레퍼런스를 참고 하기 바란다.
아래 그림4는 우리가 이번장에서 알아본 트위너의 최종형태이다. (그림2에서 time만 추가되었다)
추가로 transition속성값에 따라서 움직임(가속,마찰)이 달라지는데 그 종류들은 아래 사이트에서 참고하여 한번씩 바꿔보길 권한다 (나름 재미있다)
transition types : http://hosted.zeh.com.br/mctween/animationtypes.html
다음은 3장 Tweener의 응용에 대해서 알아보겠다.
후기
휴 블로그 만들고 처음으로 강의 올려보내요 힘들다; 쓰다가보니 막 반말로 그냥 주구장창 ㅋㅋㅋ 그냥 너그러히 이해해주심이ㅠ
그래도 뭔가 뿌듯한데요? 이맛에 사람들이 강의올리고 블로그 활용하나 봐요 ㅋ 매번 저도 이블로그 저블로그 참고만 하다가ㅋ
여튼 다들 좋은 주말 보내세요~ 다음엔 as3.0도 올려야지 흐흐흐
<출처 : http://www.cyworld.com/ra_q/2457191>
