Button scripte 강좌

버튼 스크립트 강좌

1. 작업창 크기; 700*500, 이미지 크기; 700*500, 난이도; ★★★★

이번 강좌는 전부터 마음으로만 생각했던 부분을 좀 길더라도 다 설명할 예정이다. 이제까지 버튼 스크립트를 적어놓고 붙여넣기 식으로 설명하였다. 오늘은 스크립트의 전부를 설명할 수는 없지만 버튼에 관련된 부분은 그 스크립트를 작성하는 방법을 설명하려 한다. 내 생각대로 잘될런지는 모르나 최선을 다해 설명할 수 있는 부분까지 하려 한다.

사실 스크립트는 일반인들이 이해하려면 그리 쉬운 일이 아니다. 대부분의 강좌나 서적들을 보면 이론 위주로 되어 있어 영상에 적용하기는 무척 힘들다. 우리가 문법을 10간 공부했다 해도 외국인 만나면 말 한마디 하기 힘들다. 스크립트 역시 그와 같다. 영상 위주로 설명을 하면 그래도 조금은 이해할 수 있으나 그런 책이나 강좌는 거의 없다. 그래 오늘은 강좌가 길어지더라도 자세히 설명하려 한다.

우선 콤포넌트-세이프-2D-아트워크에서 터어키를 작업창에 끌어내 350/250에 위치시키고 터어키 무비클립을 열고 그 안의 무비클립을 모두 해체하고 타임라인의 효과막대로 전부 제거한다. 이어 세이프 모두를 선택하고 그룹핑-그룹 에스 세이프 [아니오]를 선택하여 하나의 세이프로 만들어 아래 스크립트를 적는다. 이 스크립트까지 설명하자면 너무 길다. 마우스가 올라갈 때 모션을 적은 것이고 맨 아래 부분은 클릭할 때 칠면조 소리와 버튼 에펙이 나타나게 하는 명령이다. 스크립트의 칠면조 소리와 스크립트 연결은 강좌 끝부분에서 설명할 것이다.

* Turkey 안의 세이프를 선택하고

onSelfEvent (load) {

L = 60;

PX = L;

PY = L;

VY = 0;

VX = 0;

accel = 2;

slow = 1.075000E+000;

plusV = 1;

comp = 0;

}

onSelfEvent (enterFrame) {

VX = (VX + (L - PX) / accel) / slow;

VY = (VY + (L - PY) / accel) / slow;

PX = PX + VX;

PY = PY + VY;

this._xscale = PX * 100 / L;

this._yscale = PY * 100 / L;

if (this.hitTest(_root._xmouse, _root._ymouse)){

comp = 1;

plusV = 1;

VX = VX - plusV;

VY = VY + plusV;

}else if (comp == 1){

comp = 0;

plusV = 8;

VX = VX - plusV;

VY = VY + plusV;

} // end else if

}

onSelfEvent (release) {

if (this.hitTest(_root._xmouse, _root._ymouse) && comp == 1){

plusV = 12;

VX = VX - plusV;

VY = VY + plusV;

} // end if

}

2. 칠면조를 다시 무비클립으로 묶고 이름을 다시 Turkey라 하고 이 무비클립으로 열고 51-70프레임에 Appear into position-Fade_Std fade in을 주고 71-90 프레임에 Disappear from position-Fade_Std fade in을 주고 70과 90 프레임에 스톱을 준다.

3. 이번에는 에스터 에그2를 끄집어내 그룹을 해체하고 불필요한 세이프는 삭제하고 번호를 적어 같은 짝끼리 묶는다. 아웃라인의 맨 아래가 작업창 왼쪽 H가 되게 한다. 다시 부연하면 세이프 3개가 한 조다. 녹색은 그림자 효과, 그 다음 색상별로 달걀이고 하나는 글자 세이프다. 제 짝을 잘 찾아 정렬하고 3개를 블록으로 잡아 그룹핑-그룹 에스 세이프 [아니오]로 하나의 세이프를 만들어 맨 아래에서부터 b1-b11까지 표시한다.

4. 이어 50/50으로 동그라미 그려 필타입=none(그림은 보여주기 위해 색을 넣음)으로 H 위에 올리고 셀렉션툴 선택하고 자판의 Alt 키를 누른 채 A 위로 드래그 복사, 다시 P 위로, 이렇게 11개 글자 위에 투명 세이프를 올린다. 동그라미가 서로 겹치지 않게 한다. 이게 버튼이 된다. 이어 H부터 btn1-11로 이름 한다.

5. b1-b11을 선택하고 타임라인 1-20프레임에 Appear into position-Random jump in을 주고 21-40 프레임에 Looping continuously-Rocking을 주고 41-60 프레임에 Appear into position-Spin back and in을 주고 모두가 선택된 상태에서 콘버트 투 무비클립 [예]를 선택하여 개별무비클립으로 만든다.

6. b1을 열고 20, 40, 60 프레임에 스톱을 주고 21프레임에서 프레임 셋 레벨을 선택한다. 이제까지는 스크립트에 프레임 수를 적어 찾아가게 했는데 오늘은 프레임에 이름을 주고 그 명찰을 찾아가게 하는 것이다.

7. 셋 레벨을 선택하면 그림처럼 스크립트창이 열린다. 여기서 레벨 이름을 (빨간색 부분에) over라 적고 엔터를 치면 스크립트에 입력된다. 이름은 어떤 것으로 해도 상관없다. 이 명찰을 스크립트에 연결하는 것은 다음 장에서 하겠다. 이어 41 프레임에 셋 레벨을 선택하고 이름을 out이라 한다. 이 작업을 b1-b11에 다 같이 한다. 이 스크립트 모두 카피해 다음 무비클립을 열고 붙여넣기를 하면 된다.

8. 작업을 다 하였으면 b1-11을 무비클립으로 묶고 bef라 하고 타임라인에 위 그림처럼 배열한다. 1프레임에 스톱으로 주고 맨 아래부터 5프레임 간격으로 place를 주고 맨 마지막 52프레임에 다시 스톱을 준다.

9. 이제 간단하게 본 영상을 만들어 보자. 작업창 크기로 사각형 그려 카피해 하나는 색상을 달리하고 서브셀렉션툴 선택하고 하나는 우상 꼭지점을 삭제하고 하나는 좌하 꼭지점을 삭제한 두 개의 삼각형으로 만들어 둘을 선택하고 0/15로 잘라 벗겨내고 다시 하나의 group으로 만든다.

10. 그룹을 선택하고 1-50프레임에 Appear into position-Wild_Slide Up을 주고 51-100프레임에 Return to start-Rotate_Turn을 주고 101-130프레임에 Disappear from position-Rise and inflate를 준다. 이어 그룹을 열고 안의 조각을 모두 선택하고 그룹핑-그룹 에스 세이프로 하나의 세이프로 만들어 1번 이미지로 교체하고 다시 언그룹을 한다.

11. 그룹을 무비클립으로 묶고 img1으로 표시하고 주고 싶은 필터를 준다. 이어 img1을 열고 100프레임에 스톱으로 주고 130프레임에도 스톱을 준다.

12. img1을 카피해 총 11개를 만들어 이름을 주고 타임라인에 위 그림처럼 배열하고 해당 이미지로 교체한다.

이제 이해를 돕기 위해 부연 설명한다. 그냥 보여주면 될 영상을 버튼 스크립트의 이해를 위해 복잡하게 만들었다. 우선 영상이 시작되면 칠면조가 나타난다. 칠면조에 마우스가 올라가면 칠면조가 움직이면서 칠면조 소리가 나게 하였다. 이어 칠면조를 클릭하면 달걀 11개가 나타나고 달걀에 오버와 아웃에 모션을 주었다. 또 달걀을 클릭하면 칠면조와 달걀이 사라지고 본 영상이 나타나면서 메인 버튼이 등장하고 메인버튼을 클릭하면 화면이 사라지면서 칠면조가 나타나게 만들었다. 지금부터 스크립트의 작성 요령을 알아보자.

13. 제일 먼저 칠면조를 스크립트와 연결해 보자. 칠면조 세이프를 선택하고 스크립트 창을 열고 Add Script-Events-Button-on (press)를 선택하고 다시 Add Script-Sound-playSound(...)를 선택한다.

14. 그러면 위 그림과 같은 창이 뜬다. 여기서 빨간색 부분 임포트를 선택하여 자기 컴퓨터에서 넣고 싶은 음원을 선택하면 그 옆 칸에 그 음원이 로드 된다. 그걸 선택하면 아래 스크립트 창에 음원이 입력된다.

이어 클릭하면 달걀이 나타나게 연결해 본다. 에디디 스크립트-무비콘트롤-고투엔 플레이-고투엔 프레임를 선택한다. 그러면 아래와 같은 글자가 입력된다.

on (press) {

playSound("B-40 칠면조",true);

gotoAndPlay(1);

}

15. 그냥 저렇게 놓아두면 연결이 되지 않는다. 타켓트를 정해주어야 한다. 타켓트는 말 그대로 목표물이다. 위 그림의 타켓트창의 작은 역 삼각형을 선택하면 등록된 무비클립의 이름이 나온다. 무비클립에 이름을 주어야 여기에 나타난다. 그래 작업할 때 이름을 주라고 하는 것이다. 달걀을 bef라 했다. 여기를 자세히 보면 bef 앞에 파렌트, 파렌트가 붙어있다. 그건 지금 이 세이프와 한 선상에 있는 것이 아니라는 것이다. 만약 bef를 한 번만 무비클립으로 묶으면 파렌트가 된다. 그리고 스크립트를 읽어보면 지금 gotoAndPlay(1);으로 되어 있다. 아까 작업할 때 1프레임에 스톱을 주었다. 그것은 자동으로 실행하지 않게 하기 위해서다. 그러면 당연히 괄호안의 (1)을 (2)로 바꾸어 주어야 한다.

16. 칠면조는 끝났고 이제 달걀에 스크립트를 연결해 보자. 11개 모두 같은 것이니 하나만 설명한다. btn1(none을 만든 세이프)을 선택하고 에이디디-스크립트-이벤트-버튼-룰 오버를 선택한다.

17. 이어 바로 에이디디-무비콘트롤-고투엔 플레이-고투엔 프레임을 선택하고 타켓트 창에서 bef.b1을 선택한다.

18. 이어 위 그림의 빨간색 Goto label에 체크하고 내림 화살표를 선택해 아까 명찰로 입력한 over를 선택한다. 즉 마우스가 올라올 때 타임라인의 그 효과막대가 움직이는 것이다. 이번에는 같은 방법으로 on(roll out)을 선택하고 입력한 out를 선택한다. 자 그러면 이제 버튼을 클릭했을 때만 남는다.

19. 이번에는 에이디디 스크립트-이벤트-버튼-on(release)를 선택한다. 프레스나 리리즈나 별 차이는 없다. 프레스는 버튼을 클릭했을 때이고 리리즈는 클릭하고 놓았을 때다. 이걸 클릭하면 칠면조와 달걀이 사라지고 본 영상이 나타나면서 메인 버튼이 나타나게 하는 것이다.

20. 이어 에이디디 스크립트-무비콘트롤-고투엔 플레이-고투엔 프레임을 선택하고 타켓트창에서 bef를 선택한다. bef 1프레임을 비워 놓고 스톱처리를 하였기 때문에 나타나지 않을 것이다. 이어 칠면조도 사라지게 에이디디 스크립트-무비콘트롤-고투엔 플레이-고투엔 프레임을 선택하고 타켓트에서 Turkey를 지정하고 Turkey가 사라지게 지정한 71프레임을 적으면 된다.

21. 다시 에이디디 스크립트-무비콘트롤-고투엔 플레이-고투엔 프레임을 선택하고 타켓트에서 main을 선택하고 1번 이미지가 메인 2프레임에 배열되어 있다. 그래 괄호 안의 숫자를 2으로 적으면 된다.

이제 처음으로 돌아가라는 버튼을 만들어 연결해 보자.

22. 버튼 이미지 불러와 650/450에 위치시키고 이를 무비클립으로 묶고 btn12라 적고 주고 싶은 필터를 준 다음, 무비클립으로 열고 1프레임에 스톱을 주고 101-120프레임에 Appear into position-Come in_Appearance를 주고 120프레임에 스톱, 다시 121-140프레임에 Disappear from position-Come in_Mystery Out을 주고 다시 140프레임에 스톱을 준다.

23. 다시 btn1을 선택하고 스크립트창을 열어 아래 main.gotoAndPlay(2); 열 뒤쪽에 커서를 두고 에이디디 스크립트-무비콘트롤-고투엔 플레이-고투엔 프레임을 선택하고 타켓트창에서 btn12를 선택하고 프레임을 2로 정정한다.

나머지 btn2-11도 스크립트 모두를 카피해 다 같아 붙이기를 하고 b1을 해당 b (숫자)로, main 프레임수를 해당 이미지 프레임으로 바꾸어 주면 된다.

여기에 물결효과를 주면 메인이 하나가 더 생긴다. 이 추가된 메인에 이름을 주고 그것도 여기도 첨가해 주어야 물결효과가 제대로 보인다.

24. btn12를 열고 안의 이미지를 선택하고 에이디디 스크립트-이벤트-버튼-on (release)를 선택하고 다시 에이디디 스크립트-무비콘트롤-고투엔 플레이-고투엔 프레임을 선택하여 타켓트창에서 터어키를 찾아 입력하고 다시 무비콘트롤-고투엔 플레이-고투엔 프레임을 선택하고 타켓트창에서 this를 찾아 선택하고 프레임을 121로 정정한다. 즉 이걸 클릭했을 때에 공작이 나타나고 이 버튼은 사라지게 하는 것이다.

다시 무비콘트롤-고토엔 플레이-고토엔 프레임을 선택하고 타켓트창에서 main.img1을 선택하고 이 영상이 사라지는 101프레임을 지정한다. 나머지 img2-11도 다 지정해 주어야 한다.

이번 강좌는 버튼 공부를 위해 복잡하게 만들었다. 여기에 물결효과를 주고 이 모든 것을 연결하려면 여러 군데의 스크립트를 정정해야 할 것이다. 한 번에 되지 않으면 자주 해보아라. 버튼 스크립트는 반드시 극복될 것이다. 이 영상에 무난히 물결효과를 준, 분들은 버튼 스크립트는 100% 이해했다고 볼 수 있다.