4-16. 퍼즐 만들기 - startDrag, hitTest

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

4-16. 퍼즐 만들기 - startDrag, hitTest

1. 안내

Start Drag와 hitTest 액션을 활용한 그림 짝맞추기 작품을 만들어 봅니다.

문제와 보기를 나열하고, 문제를 드래그해서 정답 위에 올리면 그림이 붙고, 오답이면 원 위치로 돌아가도록 하는 것으로 형성평가 문제 제작에 활용하면 유용할 것이라고 생각됩니다.

2. 완성된 작품과 예제 파일 다운로드

예제 파일 다운로드


puzzle_ex.fla

예제 웹페이지에서는 완성된 예제를 보실 수 있으며, 실습을 위해 기초적인 작업을 해둔 예제 파일을 다운로드할 수 있도록 해두었습니다.

예제 파일을 다운로드해서 적당한 폴더에 저장을 하시고, 아래의 실습 과정을 따라 해보시기 바랍니다.

3. 만들어보기

가. 무비 클립 안에 버튼 넣기

이번 작품의 첫 번째 제작 핵심은 무비 클립 안에 버튼을 넣어 드래그할 수 있도록 하여야 한다는 점입니다.

무비클립 만이 드래그를 할 수 있고, 마우스로 선택이 되게 하려면 버튼이 되어야 한다는 점을 잘 이해하여야 합니다.

(1) 다운로드한 예제 파일을 불러옵니다.

만약에 라이브러리 창이 떠있지 않다면 Ctrl + L키를 눌러 엽니다.




(2) 예제 파일에는 그래픽 심볼로 된 몇 가지 컴퓨터 관련 그림이 있습니다.

이 그래픽 심볼을 가지고 버튼 심볼을 만들고, 다시 무비클립 심볼 안에 넣을 것입니다.

역으로 해도 문제되지 않습니다. 즉, 무비클립 심볼 안에 버튼 심볼을 넣고, 그 안에 그래픽 심볼을 담아도 된다는 것입니다.

여기서는 전자의 순서로 만들어 보겠습니다.




(3) Ctrl + F8키를 눌러 새 심볼을 만들기를 합니다.

심볼 이름은 'b_모니터'로 하고, 유형은 '버튼'으로 하십시오.






(4) [업] 프레임에 라이브러리의 '모니터' 그래픽 심볼을 가져다 놓습니다.

+ 중심점에 일치하도록 놓는 것이 중요합니다.






(5) [장면 1]을 눌러 본 편집창으로 빠져 나옵니다.

이제 무비클립을 만들겠습니다.

Ctrl + F8키를 눌러 새 심볼을 만들되, 이름은 'mc_모니터'로, 유형은 '무비클립'으로 하고 [확인] 단추를 누릅니다.




(6) mc_모니터 무비클립 편집창에서 1프레임에 라이브러리에 있는 버튼 심볼 'b_모니터'를 끌어다 놓습니다.

역시 중심점인 + 에 일치하도록 자리를 잡아줍니다.






(7) [장면 1]을 눌러 본 편집창으로 다시 빠져 나와서는 '그림' 레이어를 선택하고,

라이브러리에 있는 'mc_모니터' 무비클립을 끌어서 왼쪽 편의 '그림' 아래 적당한 곳에 위치시킵니다.



 

(8) 스캐너, CPU, PC Cam도 위의 (3)～(7) 단계 과정으로 작업합니다.

심볼의 이름에 b는 버튼 심볼을, mc는 무비클립 심볼의 약자로 이해하십시오.



* 따라하기의 편의를 위해 위의 그림과 같은 순서로 배열해줍니다.

 

(9) '설명' 레이어에는 'target' 무비클립을 미리 넣어두었습니다.

 

나. 인스턴스 이름 부여

인스턴스 이름(Instance Name)이란 앞서 강좌에서 ‘백설공주와 일곱 난쟁이’ 예로 설명한 바 있습니다만, 라이브러리에 있는 무비클립 심볼이 편집창에 쓰였을 경우에 구분을 위해 붙이는 이름입니다.

하나의 심볼이 편집창에서 여러 번 쓰일 수 있다는 점은 아시죠?

무비클립의 경우는 클립 안에 애니메이션을 포함할 수 있으므로, 외부에서 무비클립을 제어하는 등 다양한 활용을 할 수 있습니다.

같은 무비클립을 편집창에서 여러 번 활용하면서 제각각 제어하려면 이름이 필요하겠지요? 이럴 경우 이름을 붙일 수 있는데 그것이 바로 인스턴스 이름(Instance Name)인 것입니다.

결국 그림 짝맞추기는 무비클립에 인스턴스 이름을 붙여서 어떤 이름의 인스턴스를 어떤 위치의 인스턴스에 가져가 좌표를 맞추어보고, 맞으면 거기에 붙고, 맞지 않으면 원위치로 돌아가도록 하는 것이 액션의 핵심 원리입니다.




(1) 왼쪽 '그림' 쪽에 있는 무비클립 중에서 'mc_모니터'를 선택하고,

속성 관리자에서 인스턴스 이름(Instance Name)을 클릭하고 다음과 같이 'pic1'이라고 줍니다.
(이번 작품에서는 액션스크립트가 이 무비클립 안에 포함된 버튼 심볼에 들어갈 것이므로 이름을 주지 않아도 상관 없습니다)

나머지 3개의 무비클립도 마찬가지 방법으로 pic2, pic3, pic4 라는 인스턴스 이름을 주십시오.




(2) 모니터가 붙을 자리는 'target1', 스캐너가 자리는 'target2', PC캠이 붙을 자리는 'target3', CPU가 붙을 자리는 'target4' 로 인스턴스 이름을 주십시오.(이 예제에서는 이미 붙여두었습니다)

* 이런 퍼즐 종류는 인스턴스 이름을 붙일 때 정답을 기준으로 하는 것이 좋습니다. 위치 상으로 위에서부터 아래로, 혹은 아래에서 위 순 등으로 이름을 붙이게 되면 스크립트를 만드는 과정에서 상당한 혼란(!)이 일어날 수 있습니다.

다. 그림 짝맞추기

(1) 원래 위치 값을 파악합니다.

먼저 'mc_모니터'가 원 위치로 되돌아가기 위해서는 무비가 시작되는 순간 자신의 처음 위치를 특정 변수에 저장해야 합니다. 이를 위해 스테이지의 'mc_모니터'를 선택하고 다음과 같은 액션스크립트를 작성합니다(전문가 모드에서 하십시오).

onClipEvent(load) { // 클립 이벤트 시작

startX = this._x; // startX라는 변수에 현재의 무비클립 x 좌표를 대입

startY = this._y; // startY라는 변수에 현재의 무비클립 y 좌표를 대입

}



 

(2) 그리고 'mc_모니터'를 누르는 순간 모니터가 드래그되어야 하므로 'mc_모니터' 무비클립 속에 들어 있는 'b_모니터' 버튼에 마우스를 누른 상태에서 드래그가 되도록 합니다.

'mc_모니터'를 더블클릭하여 무비클립 편집모드로 들어갑니다. 그리고 거기에 있는 'b_모니터'를 선택한 후 다음과 같이 드래그가 되도록 액션 스크립트를 작성합니다.

on (press) { // 마우스를 누르면

this.startDrag (); // 이 클립을 드래그하기 시작

}






(3) 이제 모니터 무비클립을 놓을 때 해야 할 일을 설정해줍니다.

즉, '모니터' 무비클립의 드래그를 멈추게 합니다.

'모니터' 무비클립과 'target1' 무비클립의 충돌 여부를 판단해서, 충돌하면 '모니터' 무비클립이 'target1' 무비클립과 일치하게 하고, 그렇지 않으면 원위치로 돌아간다는 것입니다.

이를 'b_모니터' 버튼의 액션스크립트(위의 (2)) 다음에 계속해서 적어줍니다.

on(release){ // 마우스 버튼을 놓으면

this.stopDrag(); // 드래그를 멈춘다.

if (this.hitTest(_root.target1._x,_root.target1._y,1)==true){

// 만약에 이 클립이 'target1'의 x,y 좌표와 일치하면

this._x = _root.target1._x; //이 클립을 'target1'과 x좌표로 일치시킴

this._y = _root.target1._y; //이 클립을 'target1'과 y좌표로 일치시킴

}else{ // 일치되지 않으면

this._x = startX; // 원래의 x 좌표로 돌아감

this._y = startY; // 원래의 y 좌표로 돌아감

}

}






(4) 나머지 무비클립들도 (1)～(3)의 과정으로 액션스크립트를 만들어줍니다.

하나만 제대로 적용하여 테스트를 해보아 성공하면 나머지는 액션스크립트를 복사해서 붙여 넣고, 인스턴스 이름 부분만 수정해주면 될 것입니다.

4. 저장하고 테스트해보기

작업한 결과를 저장하고, Ctrl + Enter키를 눌러 무비 테스트를 해보십시오.

많은 액션 스크립트가 적용된 무비의 경우, 오자, 탈자로 인한 에러와 변수, 인스턴스 이름 등의 지정 잘못으로 무비가 제대로 구동되지 않는 경우가 많습니다.

에러가 있다면 잘 살펴보시고, 점검해보십시오.