4-07. 스톱워치 만들기 - (액션) stop, play, goto, 경로

제4장 예제를 이용한 애니메이션 만들기

4-06. 스톱워치 만들기 - stop, play, goto, 경로 설정

[안내]

이번에는 이전 차시보다 약간 쉬운 몇 가지 기능을 활용하여 스톱워치를 만들어 봅니다.
발상의 출발점은 플래시의 초당 상영 프레임수(fps)입니다.
기본값는 초당 24프레임입니다만, 이는 원하는대로 수정할 수 있다는 점을 이용하여, 초침을 기준으로 1fps 즉, 1초에 1프레임이 움직이도록 무비를 만든다면 스톱워치는 쉽게 만들어낼 수 있을 것입니다.
초당프레임 속도를 60으로 해서 만든 예제가 다음에 있습니다.

[완성된 예제]

초침은 초당 1프레임 상영 속도에서 60초에 걸쳐 한 바퀴 회전하는 무비클립으로 만들었습니다.

그리고 이 초침을 제어하기 위해 전문가 모드를 이용하여 스크립트를 작성합니다. 즉, 무비클립은 한 프레임 안에서도 계속해서 움직이므로, 'Stop' 스위치를 누르더라도 계속해서 움직이게 됩니다. 이러한 무비 클립을 제어하려면 해당 무비클립의 인스턴스 이름과 경로를 적어주어야 합니다.
 

[실습용 예제]

▶ 다운로드하기(stopwatch_ex.fla)


stopwatch_ex.fla

이 파일은 시계의 윤곽과 reset, stop, start 등 세 개의 버튼, 그리고 분침, 초침이 라이브러리에 포함되어 있습니다.
여유가 있으시면 이것들도 더 멋지게 직접 그려 보시기 바랍니다.





1. 초침 만들기

1) 다운로드한 파일을 불러오기 하십시오.

  불러운 파일에서 먼저 초당 상영 프레임수를 1로 맞추어줍니다.
  [수정 > 문서](단축키는 Ctrl + J)나 24.00fps 표시 부분을 더블클릭하면 다음과 같은 대화 상자가 나오게 됩니다.
  여기서 [프레임 속도]를 '1'로 설정해 줍니다.


이렇게 하면 1초에 1프레임씩 움직이는 무비가 되어 초시계 만들기가 쉬어집니다.




2) Ctrl + L 키를 눌러 라이브러리를 불러냅니다.




3) 초침은 분침이 60분을 돌아가는 동안 회전을 계속하여야 하므로 무비클립으로 만들도록 하겠습니다. 

먼저 예제의 '버튼' 레이어를 선택하고 레이어 추가를 합니다.
그런 다음 라이브러리에 있는 '초침1' 그래픽 심볼을 스테이지로 가져와 12시 방향으로 정확하게 위치시키십시오.




4) '초침1' 그래픽 심볼을 선택하고 F8키를 눌러 이름을 '초침2'라고 주고, [무비클립]으로 설정해주십시오.

이렇게 하는 이유는 심볼은 또 다른 심볼을 포함할 수 있다는 성질을 이용하는 것입니다. 이런 방법으로 만든 그래픽 심볼을 포함하는 무비클립은 우선은 모션 트윈이 쉽고, 초침의 모양을 수정하고자 한다면 그래픽 심볼만 수정해주면 무비클립에 포함된 객체도 자동으로 수정이 되므로 편리합니다.
또한 배경 그림을 보면서 작업할 수 있기 때문에 편집이 용이하다는 점도 장점이라고 할 수 있습니다.


5) 자유변형도구를 이용하여 회전축인 ○를 드래그하여 시계의 중앙에 위치시키십시오.




이 바늘을 회전시켜보면 회전축을 기준으로 회전하는 지를 알 수 있을 것입니다.





6) 118프레임에 키프레임을 넣어주고, 초침을 59초 방향으로 돌려놓으십시오.
(120프레임에 키프레임을 넣고 12시 방향으로 초침을 두면 되지 않느냐고 생각할 지도 모르겠습니다. 이는 잘못된 생각입니다. 1프레임과 마지막 프레임이 같으면 연속 동작을 하게되면 12시 방향에서 2초를 머물기 때문입니다.)

[참고] 초당 프레임 속도를 1로 설정해두었는데 왜 초침이 한 바퀴 도는데 118프레임이 필요하냐는 의구심을 가질 것입니다. 이유는 중심축이 초침의 허리가 아닌 뿌리에 있기 때문입니다. ^.^





7) 1프레임과 118 프레임 사이를 클릭한 후 [속성]에서 [트윈 > 모션]으로 설정해줍니다.



 

아래쪽의 옵션 중에서 [회전]의 펼침 목록을 눌러 [시계방향], '1'번으로 설정해 주십시오.

[참고] CW - Clockwize ; 시계 방향, CCW - Coclockwize ; 반시계 방향

Enter키를 쳐서 초침이 돌아가는지를 확인합니다.




8) 무비클립 편집창에서 빠져 나옵니다.

9) 속성창에서 인스턴스 이름을 ss로 줍니다. 

Ctrl + Enter 키를 쳐서 무비를 상영해보십시오.

 

2. 분침 만들기

1) 이번에는 분침을 만들어보겠습니다.


분침은 상영속도가 초당 1프레임으로 설정되어 있으므로, 7200프레임에 걸쳐 한 바퀴 회전하도록 하면 될 것입니다. 




2) '초침' 레이어를 선택하고 레이어 추가 단추를 눌러 레이어 이름을 '분침'으로 고칩니다.




3) 라이브러리(Ctrl + L)에서 '분침'을 끌어 편집창 위에 올려놓고 위치를 조절합니다.




4) 자유변형도구를 이용하여 회전축을 앞의 초침과 마찬가지 방법으로 시계의 중앙에 맞추어 줍니다.




5) 7200 프레임으로 이동합니다.

[참고]   보통은 600프레임 전후가 타임라인 상의 프레임의 끝입니다만, 끝 프레임에서 F6키를 눌러 키프레임을 삽입한 다음 이전 프레임에서 F5키를 누르면 프레임을 무한 연장시킬 수 있습니다. 
여러 프레임을 한꺼번에 늘리려면 프레임을 블록으로 싸준 후에 F5키를 누르면 블록으로 싸인 만큼 프레임이 추가되게 됩니다.
키프레임이 원하는 프레임 이후로 밀려 버리면 밀린 그 프레임만큼을 블록으로 싼 후 Shift + F5 키를 누르면 프레임을 삭제할 수 있습니다.




6) 다른 레이어 7200 프레임에서 F5키를 눌러 프레임을 연장시켜 줍니다.

7200 프레임에 있는 분침을 회전도구를 이용하여 시계 방향(1초 방향)으로 살짝 돌려줍니다.




7) 1프레임과 7200 프레임 사이를 클릭하고 속성창에서 [트윈 > 모션], [회전 > 시계방향 > 1]로 설정해줍니다.



8) 장면1로 빠져나와서 속성창에서 인스턴스 이름을 mm으로 줍니다. 

 

3. 스크립트 넣기

1) 이제 reset, stop, start 버튼에 대한 스크립트를 넣어주도록 하겠습니다.

버튼들의 작동 원리를 살펴보겠습니다.

(1) reset : 스톱 워치를 원 위치 즉 0분 0초로 돌려놓습니다. 분침은 1프레임으로 가서 멈추게 하면 될 것입니다. 그러나 초침은 무비 클립으로 만들어져 있으므로 계속해서 돌아갈 것이므로 60프레임에 걸쳐 반복해서 애니메이션되고 있는 '초침2' 무비클립을 호출, 이 클립을 1프레임으로 가게해서 멈추도록 해야 할 것입니다.

(2) stop : 누르면 경과한 시간만큼에서 그대로 멈추도록 합니다.
이 경우도 초침은 계속해서 움직일 것이므로 '초침2' 무비클립을 호출해서 멈추도록 해야 할 것입니다.

(3) start : stop으로 멈춰진 초침과 분침을 계속해서 움직이도록 해야 할 것입니다. 멈춰진 '초침2' 무비클립도 움직이도록 해야 할 것입니다.




2) 무비클립을 제어하려면 인스턴스 이름을 받드시 주어야 합니다.
[참고] 인스턴스(Instance)란 편집창에서 사용하고 있는 무비클립 심볼을 가리킵니다. 같은 이름의 무비클립이라도 각기 다른 이름을 가질 수 있습니다.


편집창의 초침을 선택한 후 속성창에서 있는 인스턴스 이름에 'ss'라고 넣어주었고, 분침에는 mm으로 붙여준 바 있습니다. 인스턴스 이름은 사용자가 기억하기 쉽도록 작명해주면 됩니다.




3) 먼저 stop 버튼부터 만들어 보겠습니다.

'stop' 버튼을 선택하고, 액션 스크립트 창을 불러냅니다.
멈추게 하는 스크립트는 stop 입니다.
[스크립트 도우미] 모드에서 stop을 더블클릭해서 스크립트를 만들어줍니다.

이번에는 초침을 제어하는 액션 스크립트를 추가해 보겠습니다.
여기에는 우리가 앞서 주었던 초침의 인스턴스 이름 ss를 사용하여 액션을 지정하여야 하므로 [스크립트 도우미] 모드를 해제하고 직접 입력 모드로 전환합니다.

stop(); 다음에 엔터키를 쳐서 빈 줄을 삽입한 후에 다음과 같이 스크립트를 만들어줍니다.

_root.ss.stop();




    on (release) {
       _root.ss.stop ();
       _root.mm.stop();
    }

_root는 경로를 나타냅니다. 지금 사용하는 개체들은 모두 장면1에 있고, 다른 심볼 속에 포함되어 있지도 않으므로 그냥 ~root로 잡아주면 되는 것입니다.




4) 'start'의 경우는 위의 'stop' 버튼에 들어가는 액션 중에서 stop을 play로 바꿔주면 될 것입니다.

* 도트 표현식

    on (release) {
      _root.ss.play();
      _root.mm.play();
    }




5) 'reset' 버튼은 'goto' 액션을 이용하여 1프레임으로 가서 멈추게 하면 될 것입니다.
다음 그림을 참고하십시오.

   on (release) {
       _root.ss.gotoAndStop (1);
       _root.mm.gotoAndStop(1);
    }




6) 무비 재생을 해보면 한가지 수정해야 할 사항이 보일 것입니다.

재생을 하면 바로 스톱워치가 움직이기 시작하는 즉, 'start'  버튼을 누르기도 전에 움직이는 문제입니다.

이 문제는 1프레임에 'stop' 액션을 넣어주고,
초침 역시 _root.ss.stop();을 넣어줌으로써 해결할 수 있습니다.




7) Ctrl + Enter 키를 쳐서 무비를 재생해보십시오.

문제점이 있다면 이전 단계로 가서 차근차근 다시 한번 점검해보십시오.