4-06. 시계 놀이 - (액션) goto / stop

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

4-06. 시계 놀이 - goto / stop

예제 파일 


03b_clock_원본.fla




플래시에서는 액션 스크립트가 결부되면 결과물은 같을지라도 그 구현 방법은 여러 가지일 수가 있습니다. 이 점은 일반 프로그래밍에서도 마찬가지죠.

마우스를 시계 내부에서 움직이면 중심점을 기준으로 방향에 따라 시침이 움직이고, 시침이 가리키는 시간대에 숫자가 깜박이도록 합니다.

우리는 아직 기초 단계를 벗어나지 않은 상태이므로 위와 같은 유아용 시계 교육 프로그램을 만든다고 할 때 복잡한 액션 스크립트보다는 구현하기 쉬운 아주 간단한 액션 스크립트를 먼저 떠올려 보십시오.

이 예제의 핵심은 사실 보이지 않는 버튼에 있습니다. 즉, 마우스가 시계 내부에 들어서면 보이지 않는 버튼이 작동되어 그 버튼에 따라 무비클립 속에 들어 있는 시간대별로 12개로 만들어져 있는 시침의 해당 프레임으로 이동을 하게 하면 되는 것입니다.

마우스 이벤트는 그저 마우스를 투명 버튼 위에 올려놓기만 하면 동작이 되도록 하는 '롤오버'를 사용하면 될 것입니다.




[만들어보기]

1, 구상하기

시계 위에 마우스를 올리지 않은 상태에서는 시침이 계속 회전하도록 하여 시계 놀이의 긴장감을 유발하도록 합니다. 시계의 숫자는 ?표로 표시되도록 하여 궁금증을 자아내도록 합니다. 이렇게 하려면 시침을 회전하는 무비클립으로 만들어 1프레임에 넣어주고, 1프레임에서 stop을 하도록 하면 될 것입니다.

2프레임부터 13프레임에 걸쳐서는 각 프레임마다 시침을 1시부터 12시까지 보이게 하고, 아울러 각 프레임에는 해당 시간을 표시하는 숫자를 무비클립으로 만들어 배치, 깜박이도록 하면 될 것입니다.

버튼 레이어를 별도로 만들어 해당 시간 영역 만큼의 히트 프레임을 만들어 여기에 마우스를 올리면 해당 시간을 표시하는 프레임으로 가서 stop하는 액션을 넣어주면 완성이 될 것입니다.

사실 이번 예제는 제작하는 과정이 좀 지루할 정도로 반복 작업이 많습니다.




2. 시침 무비클립 만들기

시침 무비클립을 만들 때 유의해야 할 점은 회전축입니다. 일반적으로 회전축은 객체의 가운데 위치하게 되는데, 시계의 침과 같은 경우는 회전의 축이 몸통이 아니라 바닥에 있어야 합니다.

회전축의 이동은 그룹화되어 있는 상태에서 자유변형도구로 가능합니다.



시침 무비클립의 1프레임에서 위와 같이 중심축을 옮겨놓고 적당한 프레임을 건너뛴 다음 키프레임을 넣은 후 방향을 59초 쪽을 돌려놓습니다.

그런 다음 [트윈 > 모션]을 주고, 회전을 [시계 방향 > 1번] 해주면 회전하는 시침이 될 것입니다.




3, 시간 표시 프레임 만들기

[시간 표시] 레이어 2프레임에 빈 키프레임을 넣어주고(F7키 누름), 라이브러리에 있는 '시침' 그래픽 심볼을 가져다 놓습니다.

[자유변형도구]를 눌러 중심축을 시침의 뿌리 동그라미 중앙에 옮겨 놓습니다.

그리고 1시 방향으로 회전시켜 줍니다.

3프레임에서는 키프레임 넣기(F6)를 하고 방향으로 2시로, 4프레임은 3시로... 13프레임에는 12시 방향을 가리키도록 합니다.

또한 물음표 대신 해당 시간이 깜박이도록 하기 위해서 라이브러리에 있는 1을 참고해서 2부터 12까지의 깜박이는 숫자 무비클립을 만들어줍니다.

[참고] 형식이 같고 내용이 약간 다른 심볼은 복제를 해서 만드는 편이 훨씬 쉽고 편리합니다. 숫자 표시의 경우 숫자만 다르고 깜박이는 동작은 같으므로 다음과 같은 방법으로 복제를 해보십시오.

(1) [라이브러리] 패널의 목록에서 '1'을 선택한 후 마우스 오른쪽 버튼을 눌러 다음 그림과 같이 [복제]를 선택합니다.



(2) 이름을 '2'로 고치고 [확인] 단추를 누릅니다.



(3) 미리보기 그림을 더블클릭해서 숫자를 2로 고쳐줍니다.



(4) (1)~(3)의 방법으로 12까지를 만들면 되겠습니다.

이렇게 만든 무비클립을 각각 드래그해서 시침에 따라 해당 프레임의 ? 표 위에 겹쳐서 배치합니다.




4. 투명 버튼 만들기

다운로드한 예제 '투명버튼' 레이어에서 다음 그림과 같이 시각 영역을 부채꼴 모양으로 그려줍니다.



그려진 객체를 선택한 후 [심볼로 변환](F8)을 해서 '시간 영역'이란 이름으로, 유형은 [버튼]으로 해서 등록합니다.

더블클릭한 후 버튼 편집 모드에서 [히트] 프레임을 선택, F6키를 눌러 키프레임을 넣어주고, [업] 프레임으로 가서 부채꼴 모양을 지워줍니다.
이렇게 하면 히트 프레임만 가지는 투명 버튼이 되게 됩니다.

[장면 1]로 나와서 자유변형도구로 회전축을 시계의 중앙점으로 옮깁니다.




5. 액션 넣기

1) 1프레임에서 멈춤

우리가 지금까지 만든 예제의 1프레임에는 시침이 계속해서 회전하는 무비클립이 들어 있습니다. 1프레임에서 재생을 멈추지 않으면 이후의 프레임 내용이 연속적으로 재생되어 버리게 됩니다. 따라서 1프레임(레이어와는 상관없음)을 클릭해서 선택한 다음 멈춤 액션을 넣어줍니다.

stop();

2) 투명 버튼에 들어갈 액션

'시간 영역' 투명 버튼에는 어떤 액션이 들어가야할까요? 일반 마우스를 시각 표시 영역에 올리기만 하면 회전하던 시침이 해당 시각에 멈추고(그러면 자동으로 숫자가 깜박이겠지요?),
마우스를 시계 밖으로 옮기면 다시 1프레임으로 돌아가게 하는 겁니다.

투명 버튼을 선택한 후 위와 같은 동작을 하도록 액션을 넣어봅시다.
[스크립트 도우미] 모드에서 작업해보겠습니다.

(1) 해당 시각으로 가는 goto

아래 그림과 같이 액션 목록에서 goto를 더블클릭합니다.

그리고 오른쪽에서 [이동하고 중단]을 선택하고,
[프레임]에서 2를 입력해줍니다.(2프레임이 1시를 가리키므로)



결과적으로

on(release) {

     gotoAndStop(2):

}

라는 스크립트가 완성되게 됩니다.


(2) 마우스 이벤트 수정

마우스가 버튼 영역 위에 올라오기만 하면 이 동작이 실행되도록 하기 위하여 마우스 이벤트를 수정합니다.

즉, 스크립트의 첫 줄 on(relelase) {를 마우스로 클릭하여 선택하면 다음과 같은 이벤트 항목들이 보이게 됩니다.
여기서 [해제]를 체크 해제하고 대신 [롤 오버]를 선택해줍니다.

이 결과 마우스 이벤트 부분이 다음 그림의 아래쪽 화살표 부분과 같이 바뀌게 됩니다.



(3) 1프레임으로 가는 goto

액션을 추가하려면 스크립트의 마지막 줄을 선택한 후 추가하고자 하는 액션을 목록에서 더블클릭하면 됩니다.
따라서 위의 (1)~(2)와 같은 방법으로 다음과 같은 액션 스크립트를 만들어주십시오.

on(rollOut) {

     gotoAndStop(1):

}

1프레임으로 멈출 것인가 재생할 것인가는 이 액션 스크립트의 경우는 문제가 되지 않습니다. 왜냐하면 이미 1프레임에 멈춤 액션이 들어 있기 때문입니다.