[Flash Lite] 예제를 이용한 개론

◐ 목 차 ◑

1. 소개
2. 기본적인 액션스크립트의 이해
3. 컨텐츠 제작을 위한 환경설정
4. 메뉴부터 엔딩까지의 화면 구성 방법
5. 이벤트 처리와 제어
6. 게임의 완성

• 인쇄용 버전

#1 페이지 입니당~

Flash Lite를 통해 우리는 데스크탑 뿐만이 아닌 휴대용 단말기를 통해서도 플래시 컨텐츠를 접할 수 있게 되었습니다. 현재 한국에서 손쉽게 구할 수 있는 Flash Lite 가 탑재된 기기로 iRiver 의 U10 이 있습니다. U10 은 사용자가 직접 제작한 Flash Lite 컨텐츠를 재생할 수 있도록 도와줍니다.

하지만, Flash를 전문적으로 다루지 않는 U10 사용자의 경우에는 Flash Lite 환경에서 원하는 컨텐츠를 만드는 일이 낯설게 느껴질 수 있습니다. 특히나 게임일 경우에는 더욱 그러합니다. 그래서, U10을 가지고 계신 유저분들 가운데, 플래시를 조금 알고 계신 분들도 따라할 수 있도록, 기본적인 액션스크립트의 구성방법을 배울 것입니다. 그리고, 그것을 이용하여 손쉽게 게임을 만들어 보겠습니다. 액션스크립트를 잘 알지 못해도, 여러분의 독창적인 Flash Lite 컨텐츠를 만들 수 있습니다.

#2 페이지 입니당~

기본적인 액션스크립트의 이해

저는 둘이서 즐길 수 있는 단순한 야구 게임을 만들 예정입니다. 둘이서 역할을 분담하도록 할 생각 인데요. 한사람은 공을 던질 것이고, 다른 한사람은 그 공을 치도록 할 것입니다. 그렇다면, 우리가 해야할 과제가 무엇인지 몇가지 상상할 수 있습니다.

• 투수가 공을 던지게 되면, 공이 움직여야 할 것입니다. 이 때 우리는 공의 좌표가 바뀌어야 한다는 것을 알 수 있습니다.
• 타자는 공이 오는 것을 보고 공을 치게 됩니다. 결과는, 공을 맞추거나 헛스윙을 할 수 있습니다. 여기에서, 타자가 공을 치는 동작이 있어야 할 것 같구요. 공을 치는 적절한 시점을 알아야 할 것 같습니다.

우선 위에 두가지만 생각을 하도록 하겠습니다. 게임의 가장 기본적인 구성만 생각하고, 나머지는 점차 순서대로 살을 붙여나가도록 하겠습니다.

위 두가지를 구현하기 위해서는 알아야 할 몇가지 액션스크립트 문법이 있습니다. 다음과 같이 4가지 문법만 익히시면 됩니다. 이정도면 간단한 야구게임을 만드는 데에는 전혀 무리가 없습니다.

• gotoAndPlay(), gotoAndStop(), stop()
• tellTarget()
• 변수의 사용법
• if 명령문

gotoAndPlay(), gotoAndStop(), stop()

gotoAndPlay() 는 특정 프레임으로 이동한 후 그 프레임부터 재생합니다. () 안에 인자로 이동하고자 하는 특정프레임의 번호 또는 프레임 레이블을 입력합니다.

//5번 프레임으로 이동한 후 재생합니다. gotoAndPlay(5); //menu 프레임으로 이동한 후 재생합니다. gotoAndPlay("menu");

이동하고자 하는 프레임 레이블은 해당 프레임을 선택하였을 때 그림1과 같이 속성창에서 지정할 수 있습니다.

그림1. 프레임 레이블

gotoAndStop() 은 특정 프레임으로 이동한 후 재생을 중지합니다. () 안에 인자로 이동하고자 하는 특정프레임의 번호 또는 프레임 레이블을 입력합니다.

//5번 프레임으로 이동한 후 재생을 중지합니다. gotoAndStop(5); //menu 프레임으로 이동한 후 재생을 중지합니다. gotoAndStop("menu");

stop() 은 현재 프레임에서 재생을 중지합니다.

//현재 프레임에서 재생 중지합니다. stop();

tellTarget()

tellTarget() 은 Flash Lite1.1 에서 스크립트를 작성하는 무비클립과 다른 경로에 있는 무비클립을 선택하여 제어하고자 할 때 유용하게 쓰입니다. () 안에 인자로는 타겟이 되는 무비클립의 경로를 입력합니다. 무비클립의 경로는 / (슬래시) 구문을 이용하여 표현합니다.

//메인 타임라인의 ball_mc 무비클립을 선택합니다. tellTarget("_level0/ball_mc"){ //homerun 프레임으로 이동한 후 재생합니다. gotoAndPlay("homerun"); }

변수의 사용법

변수란 말 그대로 변하는 수를 저장하는 그릇이라고 보시면 됩니다. 항상 정해져 있지 않고, 변할 가능성이 있는 값인 경우에는 변수라는 그릇에 그 값을 저장하고 사용합니다. Flash Lite1.1 에서는 변수를 따로 선언하지 않고 사용합니다. 변수는 일반적으로 영문 소문자로 표시합니다.

//data 라는 변수에 30 이라는 숫자를 입력합니다. data = 30; //str 이라는 변수에 hello 라는 문자를 입력합니다. str = "hello"; //data 와 str 을 출력하면 입력된 값이 나타납니다. trace(data); trace(str);

변수를 참조할 때에는 /(슬래시)구문과 함께 .(도트)와 :(콜론)을 사용합니다. 다음 코드는 메인 타임라인의 data 변수를 표시합니다.

/:data _root.data

다음 코드는 메인 타임라인에 있는 무비클립 인스턴스에서 data 변수를 표시합니다.

/mc1/mc2/:data _root.mc1.mc2.data

다음 코드는 현재 mc1 타임라인에 있는 무비클립 인스턴스에서 data 변수를 표시합니다.

mc2/:data mc2.data

if 명령문

if 명령문은 어떠한 조건을 만족시켰을 경우에만 특정한 명령을 처리하라는 구문입니다. 그 형태는 다음과 같습니다. 조건은 true 또는 false 값으로 표현됩니다. 명령은 true 일 경우에만 처리가 됩니다.

if(조건){ 명령 }

예를 들어 다음과 같은 경우 명령은 실행이 됩니다. () 안에서 비교를 한 결과값이 true 이기 때문입니다.

data = 10; if(data >= 5){ trace("명령이 실행되었습니다."); }

다음 예제는 비교 연산을 하지 않고 직접 true 값을 입력하였습니다.

condition = true; if(condition){ trace("명령이 실행되었습니다."); }  자~ 여러분들 힘 내시면서~ #3 페이지 들어갑니다~ 빠져 듭니다~!

컨텐츠 제작을 위한 환경설정

컨텐츠를 제작하기 위해서는 Flash Lite1.1 에 맞게 환경을 설정해야 합니다. 다음의 세가지를 설정하면 환경설정의 모든 작업이 마무리됩니다.

• 화면 크기 설정
  제작하고자 하는 컨텐츠의 가로와 세로 화면의 크기를 지정합니다. U10의 경우에는 320 x 240 으로 설정하면 됩니다.
• 제작 환경 설정
  Version 을 Flash Lite1.1로 맞춥니다.
• 테스트 디바이스 설정
  아직 U10용 디바이스 프로필이 준비중입니다. 업데이트는 아래 사이트에서 확인하실 수 있습니다.
  http://www.macromedia.com/software/flash/download/device_profiles/

지금부터 컨텐츠 제작을 위한 환경설정을 하도록 하겠습니다.

1. Flash 8을 실행한 후 오른쪽 템플릿 선택 메뉴에서 Global Phones를 선택합니다.

그림2. 템플릿 선택1

2. Flash Lite1.1 - Symban Series 60 을 선택합니다. U10 과 일치하는 사양은 아니지만 이 템플릿을 이용해 보도록 하겠습니다.

그림3. 템플릿 선택2

3. 문서의 속성패널을 보면 그림4 와 같이 기본적으로 설정이 되어 있는 것을 확인 하실 수 있습니다.

• 몇가지 설정을 원하는 내용으로 변경합니다.
• 화면 크기를 320 x 240 으로 바꾸어 줍니다.
• Frame rate 를 15 로 설정합니다. U10 에서 Frame rate 는 12 에서 15 정도가 적정합니다.
• 배경 색상을 #A6E840 값으로 바꾸어 주겠습니다.

그림4. 템플릿 선택시 기본 설정

주의: 현재 설정된 Test Devce는 320 x 240 화면사이즈와 틀리기 때문에 실제보다 작게 나옵니다. Device 업데이트 또는 수정을 통하여 해결할 수 있습니다.

그림5. 문서 속성 변경

4. 이제 이 파일을 game_step1.fla 로 저장합니다.

#4 입니다 ^^

메뉴부터 엔딩까지의 화면 구성방법

앞에서 우리가 해야할 것에 대해 기본적인 구상만 했었습니다만, 이제 조금더 구체화 시킬 필요가 있겠습니다. 전체적인 화면 구성과 게임에 필요한 내용들을 정리해 보고, 컨텐츠의 틀을 잡도록 하겠습니다.

일단 어떤 것들이 필요한지 생각이 나는데로 적어봅니다. 내용이 빠지거나 틀려도 괜찮습니다. 우선 필요한 것들을 글로 적어서 정리하는 과정이 필요합니다.

• 게임을 실행하였을 때 제일 처음 게임 타이틀 화면이 나타납니다.
• 타이틀 화면에서 도움말 메뉴를 누르면 게임 방법을 볼 수 있습니다.
• 게임 타이틀 화면에서는 게임을 종료하는 메뉴도 있습니다.
• 게임 타이틀 화면에서는 게임을 시작하는 메뉴도 있습니다.
• 게임 시작 메뉴를 선택하면 게임 진행 화면으로 이동합니다.
• 게임 진행 화면에서는 투수와 타자가 있습니다.
• 투수는 왼쪽에, 타자는 오른쪽에 배치시키는 것이 좋겠습니다.
• 투수는 공을 던집니다. 왼쪽 방향키를 누를 때 던지는 것이 좋겠습니다.
• 공은 다양한 형태로 던질 수 있습니다. 변화구가 가능하면 좋겠습니다.
• 타자는 공을 치는 동작을 합니다. 오른쪽 방향키를 누를 때 치는 것이 좋겠습니다.
• 공을 정확히 치면 공이 홈런 처럼 날아가게 됩니다.
• 공을 치지 못하면 공은 그대로 타자를 지나쳐 갑니다.
• 점수도 있어야 할 것 같습니다. 점수는 투수와 타자의 대결구도로 가는 것이 좋겟습니다. 타자가 공을 치면 타자의 점수가 증가하고, 공을 치지 못하면 투수의 점수가 증가합니다.
• 점수를 게임 진행 화면상에서 보여줍니다.
• 게임의 종료는 투수와 타자 중 일정한 점수를 먼저 획득하는 사람이 생기면 종료되도록 합니다. 15점을 먼저 획득하는 사람이 이기도록 하는 것이 좋겠습니다.
• 엔딩화면은 두가지로 구성합니다. 투수가 이겼을 경우와 타자가 이겼을 경우로 나누어 봅니다.

이제 위에서 기술한 내용을 그림으로 그려봅니다. 그림으로 그리면 어떤 화면들이 필요한지, 레이아웃은 어떻게 잡아야 하는지을 정리할 수 있습니다. 그림6 은 우리가 만들 게임의 화면을 정리한 내용입니다.

그림6. Game Flow

Flash 8 을 시작하고 그림6 에 해당하는 다섯가지 화면을 먼저 구현하게습니다.

1. 이전에 저장했었던 game_step1.fla 를 엽니다. 그리고, 다른 이름으로 저장하기를 합니다. 이름은 game_step2.fla 로 설정합니다.

2. 타임라인에서 필요한 키프레임을 추가하겠습니다. 총 5개의 화면이 필요하기 때문에 5개의 키프레임을 추가하고 각 프레임에 Frame Label 을 지정하도록 하겠습니다. 각 키프레임은 게임진행에 대한 화면의 내용을 표시할 것입니다.

그림7. Add KeyFrame

3. 현재의 상태로 재생을 한다면 5개의 키프레임 화면은 계속해서 반복되어 재생이 될 것입니다. 그래서 각 화면으로 이동하면 그 키프레임에서 정지해 있도록 하겠습니다.

ActionScript 레이어의 main 키프레임을 선택하고 액션 패널을 선택합니다. stop(); 액션스크립트를 입력합니다. 나머지 help, game, pwin, bwin 키프레임에도 같은 작업을 합니다.

그림8. stop() 액션스크립트 추가

4. Content 레이어를 선택하고 각 키프레임의 화면을 구성하겠습니다. 그림6 에서 설계한 바와 같이 각 화면을 만들어 봅니다.

Content 레이어의 main 에 해당하는 키프레임을 선택합니다. 그림9 와 같이 제목과 메뉴를 배치합니다. 제목과 메뉴들은 심볼로 만들어 두어도 좋습니다. 다시 재활용 할 수 있기 때문입니다.

그림9. 메뉴 화면구성

Content 레이어의 help 에 해당하는 키프레임을 선택합니다. 그림10 와 같이 제목과 메뉴를 배치합니다. 중앙에 게임 방법을 설명합니다. 하단에 만든 사람의 정보를 넣는 것도 좋을 것 같습니다.

그림10. 도움말 화면구성

game 화면에서는 공을 던지는 투수와 공을 치는 타자에 해당하는 내용이 있어야 할 것입니다. 공모양과 배트 모양을 심볼로 만들어 배치해 보도록 하겠습니다.

Content 레이어의 game 에 해당하는 키프레임을 선택합니다. 그림11과 같이 가로20, 세로20의 동그란 원을 그리고, 심볼로 변환합니다. 종류는 무비클립으로 합니다.

그림11. 공 무비클립 생성

이 공 무비클립의 인스턴스 이름은 그림12 와 같이 ball_mc로 입력합니다.

그림12. 공의 인스턴스네임 입력

Content 레이어의 game 에 해당하는 키프레임을 선택합니다. 그림13과 같이 배트모양의 무비클립 심볼을 만듭니다. 인스턴스 네임은 bat_mc 로 하였습니다.

그림13. 배트 무비클립 생성

엔딩 화면을 만들겠습니다. 엔딩화면은 두가지가 있습니다. 투수가 이겼을 경우와 타자가 이겼을 경우입니다. 그림14, 그림15 와 같이 Content 레이어의 해당하는 키프레임을 선택하고 내용을 입력합니다. 엔딩화면을 취향대로 멋지게 꾸며보셔도 좋을 것 같습니다.

그림14. 투수가 이긴 엔딩화면

그림15. 타자가 이긴 엔딩화면

5. 게임에서 필요한 5가지 화면구성을 하였습니다. 이제 이 파일을 game_step2.fla 로 저장합니다.

이제 또 #5 들어갑니다~

이벤트 처리와 제어

앞에서는 게임의 틀을 구상하였습니다. 지금 부터는 게임에 생명을 불어넣는 작업을 할 것입니다. 키버튼을 눌러서 각 게임의 화면으로 이동하게 합니다. 게임화면에서는 키버튼을 눌러서 투수가 공을 던지게 만들기도 하고, 타자가 공을 치게 만들기도 할 것입니다.

1. 이전에 저장했었던 game_step2.fla 를 엽니다. 그리고, 다른 이름으로 저장하기를 합니다. 이름은 game_step3.fla 로 설정합니다.

2. 눌려진 키를 감지하기 위해서는 버튼 심볼이 필요합니다. 그림16과 같이 메인 타임라인에서 버튼 심볼을 위치시킬 레이어를 만듭니다. 그리고 ActionScript 레이어의 키프레임 위치와 동일하게 키프레임들을 추가시킵니다. 대신 bwin 위치의 키프레임은 추가하지 않았습니다. 그 이유는 투수가 이겼을 경우와, 타자가 이겼을 경우 모두 키를 눌렀을 때의 이벤트가 동일하기 때문에, 굳이 나누어서 작성할 필요가 없기 때문입니다.

그림16. Button레이어의 추가

3. Button 레이어의 main 키프레임을 선택한 후 스테이지 오른쪽에 버튼 심볼을 만들어서 위치시킵니다. 이 버튼심볼은 앞으로 키입력을 감지하여 처리하는 역할을 할 것입니다.

그림17. 버튼심볼의 생성

4. 버튼심볼을 선택한 후 액션패널을 열어서 액션스크립트를 작성합니다. 메인화면일 때의 키 조작에 대하여 정의합니다.

//왼쪽 방향키를 눌렀을 경우 게임을 종료합니다. on(keyPress "<Left>"){ fscommand2("Quit"); } //오른쪽 방향키를 눌렀을 경우 help 메뉴화면으로 이동합니다. on(keyPress "<Right>"){ gotoAndStop("help"); } //아래쪽 방향키를 눌렀을 경우 게임화면으로 이동합니다. on(keyPress "<Down>"){ gotoAndStop("game"); }

5. Button 레이어의 main 키프레임에서 만든 버튼 심볼을 복사하여 help, game, pwin 키프레임에 붙여넣기 합니다. 그리고 다음과 해당 위치의 키프레임에서 버튼을 선택한 후 액션스크립트를 작성합니다.

help 키프레임에서 버튼 선택 후 작성

//아래쪽 방향키를 누르면 게임화면으로 이동합니다. on(keyPress "<Down>"){ gotoAndStop("game"); }

pwin 케프레임에서 버튼 선택 후 작성

//아래쪽 방향키를 누르면 게임화면으로 이동합니다. on(keyPress "<Down>"){ gotoAndStop("main"); }

다음은 게임화면에서의 키 입력에 대한 부분입니다. 아직 구체적으로 스크립트를 어떻게 작성할 것인지는 나오지 않았습니다. 그래서 기본틀만 작성하도록 하겠습니다. 투수가 왼쪽에 위치하여 있고, 타자가 오른쪽에 위치하여 있기 때문에 키 입력 부분도 동일 위치로 설정하겠습니다. 그리고, 게임을 하는 중간에 Down 키를 누르면 다시 메인화면으로 돌아갈 수 있도록 설정합니다.

game 케프레임에서 버튼 선택 후 작성

//투수가 공을 던진다. on(keyPress "<Left>"){ //공을 던지는 것에 대한 액션 스크립트 작성 예정 } //타자가 공을 친다. on(keyPress "<Right>"){ //공을 치는 것에 대한 액션스크립트 작성 예정 } //메인화면으로 돌아간다. on(keyPress "<Down>"){ gotoAndStop("main"); }

6. 지금까지는 키 입력을 감지하기 위해서 버튼 무비클립을 만들어서 배치하고, 기본적인 액션스크립트를 작성하였습니다. 현재까지 작업한 내용을 저장을 하고 난 후, 다른 이름으로 저장하기를 합니다. 이름은 game_step4.fla 로 설정합니다.

7. game_step4.fla 에서부터는 투수와 타자의 각 동작을 만들고 제어하도록 할 것입니다. 우선 공의 움직임부터 만들겠습니다. Content 레이어의 game 키프레임에 있는 ball_mc 무비클립을 선택하고 더블클릭하여 ball_mc 내부의 타임라인으로 이동합니다.

8. 그림18 과 같이 공을 선택한 후 무비클립 심볼로 변환합니다.

그림18. ball 무비클립 생성

9. 공을 움직이는 방법에 대하여 여러가지 생각해 볼 수 있을 것 같습니다. 공의 x 및 y 좌표를 변화시켜 주어서 움직이는 방법도 있을 것이고 모션트위닝을 이용하여 움직이는 방법도 있을 것입니다.

저는 여기서 모션트위닝과 가이드라인을 이용하여 공의 움직임을 만들어 보겠습니다.

그림19 와 같이 레이어에서 오른쪽 마우스를 클릭하고 모션가이드 레이어추가합니다.

그림19. Add Motion Guide

10. 그림20과 같이 Guide 레이어와 Layer1의 2번, 16번 프레임에 키프레임을 삽입합니다. 1번 프레임은 공이 멈추어 있는 상태이고, 2번 프레임과 16번 프레임은 공이 움직이는 애니메이션과 가이드라인이 들어갈 것입니다. Layer1의 15번, 30번, 31번, 40번에 키프레임을 삽입하고, 41번에 빈 키프레임을 삽입합니다.

그림20. 애니메이션을 위한 키프레임 삽입

11. 레이어의 키프레임에 프레임 레이블을 부여하겠습니다. 1번 키프레임은 pitch, 2번 키프레임은 pitch0, 16번 키프레임은 pitch1, 31번 키프레임은 homerun 으로 설정합니다.

12. 그림21과 같이 Guide 레이어를 선택하고 2번 키프레이에 공이 움직이는 모양을 나타낼 가이드라인을 그립니다.

그림21. 가이드라인1

13. 그림22와 같이 Guide 레이어를 선택하고 15번 키프레이에 공이 움직이는 모양을 나타낼 가이드라인을 그립니다. 이번에는 굴곡이 있는 변화구를 표현하였습니다.

그림22. 가이드라인2

14. 그림23과 같이 Layer1 의 2번과 15번 키프레임 사이에 모션트위닝을 적용시킵니다. 그리고 15번 키프레임에서 공의 위치를 가이드라인 오른쪽 끝에 맞추어 줍니다. 중간의 프레임들을 클릭하여 보면 볼이 가이드라인을 따라 이동하는 것을 확인할 수 있습니다.

그림23. 모션트위닝

15. 14의 과정과 같이 Layer1 의 16번과 30번 키프레임 사이에 모션트위닝을 적용시킵니다. 그리고 30번 키프레임에서 공의 위치를 가이드라인 오른쪽 끝에 맞추어 줍니다.

16. Layer1의 31번과 40번 키프레임에도 모션트위닝을 적용시킵니다. 타자가 공을 쳤을 때 공이 홈런이 되어서 날아가는 애니메이션을 만들 것입니다. 그래서 공의 위치를 바꾸어주겠습니다. 그림24와 같이 31번 키프레임에서 공의 위치를 배트보다 약간 뒤에 위치시킵니다. 그리고 40번 키프레임에서는 공의 위치를 그림25와 같이 배치하고 크기를 키워줍니다.

그림24. 공위 위치변경

그림25. 공의 위치와 크기 변경

17. 이제 공의 움직임을 표현할 애니메이션 부분은 완료하였습니다. 마지막으로 공의 애니메이션이 연속적으로 진행되지 않도록 키프레임에 stop(); 액션스크립트를 추가합니다. 그림26과 같이 Layer1 의 1번, 15번, 30번, 41번 프레임을 각각 선택하고, 액션 패널을 열어서 액션 스크립트를 입력합니다.

그림26. stop() 액션스크립트 삽입

18. 다음은 키 버튼을 눌렀을 때에 공이 움직이도록 처리하겠습니다. 메인 타임라인으로 돌아와서 game 키프레임에 위치한 버튼 심볼을 선택하고 투수가 공을 던지게끔 다음과 같이 스크립트를 작성합니다. 여기에서 random() 함수는 정수형 난수를 발생시키는 함수입니다. 인자가 2일경우 0과 1의 숫자가 무작위로 산출되게 됩니다. 난수를 구한 후 pitch 라는 문자와 더해서, 이동할 키프레임의 프레임 레이블을 표시합니다.

//투수가 공을 던진다. on(keyPress "<Left>"){ //메인타임라인의 ball_mc 를 선택한다. tellTarget("ball_mc"){ //공을 던지는 키프레임으로 랜덤하게 이동한다. gotoAndPlay("pitch" add random(2)); } }

19. 다음은 배트의 애니메이션을 만들겠습니다. 배트에서는 모션트위닝을 쓰지 않고, 몇가지 동작의 키프레임만 삽입하여 표현하도록 합니다. 메인타임라인의 배트를 더블클릭하여 배트의 내부 타임라인으로 이동한 후, 추후에 수정하기 편하도록 배트를 심볼로 등록합니다.

20. 배트의 내부 타임라인에서 2, 3, 4, 5번에 키프레임을 삽입하고, 6, 7, 8 에는 프레임을 삽입합니다. 각 키프레임을 삽입하면서 동시에 배트를 점차 공을 치는 모양으로 바꾸어 줍니다.

그림27. 배트의 프레임별 모양

21. 배트의 1번 키프레임을 선택하고, 액션패널에서 stop(); 액션스크립트를 삽입합니다.

22. 배트의 3번 키프레임 위치에서 공을 정확히 쳤는지를 검사하여, 정확히 쳤을 경우 공의 홈런의 애니메이션이 되도록 공의 키프레임을 이동시킵니다. 배트의 3번 키프레임을 선택하고 다음과 같이 액션스크립트를 작성합니다.

//공을 선택합니다. tellTarget("_level0/ball_mc"){ //공의 현재 프레임 위치를 구하여 15로 나눈 나머지값 구합니다. frm = _currentframe%15; //공의 애니메이션 주기를 15프레임으로 설정하였습니다. 14 정도의 프레임 위치에 //왔을 경우 homerun 키프레임으로 이동하여 재생합니다. if(frm == 14){ gotoAndPlay("homerun"); } }

그림28. 배트의 3번 키프레임 액션스크립트 작성예

23. 키 버튼을 눌렀을 때에 타자가 공을 치도록 처리하겠습니다. 메인 타임라인으로 돌아와서 game 키프레임에 위치한 버튼 심볼을 선택하고 타자가 공을 치게끔 다음과 같이 스크립트를 작성합니다.

//타자가 공을 친다. on(keyPress "<Right>"){ //메인타임라인의 bat_mc 를 선택한다. tellTarget("bat_mc"){ gotoAndPlay(2);; } }

24. 키 입력 이벤트에 대한 처리와 공과 배트의 제어에 대하여 작성하였습니다. 테스트 무비를 한 후 공을 던지고, 치는 동작을 테스트할 수 있습니다. 이제 이 파일을 game_step4.fla 로 저장합니다.

마지막 #6 입니다 ^^

게임의 완성

게임을 만들기 위한 기본적인 화면구성과 이벤트 처리는 모두 하였습니다. 이제 게임의 마무리 작업을 하도록 하겠습니다. 첫번째, 게임적인 성격을 위해서, 투수와 타자에게 점수를 부여하도록 하겠습니다. 투수와 타자에게 점수를 획득하게 하고, 15점을 먼저 얻는 사람이 이기도록 하면 좋을 것 같습니다. 두번째, 버그를 찾아서 해결하겠습니다. 지금까지 만든 게임을 계속 테스트 하셨다면, 몇가지 문제점도 발견하셨을 것입니다. 그 중 하나는 투수가 공을 던지는 버튼을 연속적으로 반복해서 누르게 되면, 공이 타자에게 도착하지 않는다는 점입니다. 이 문제를 해결하도록 하겠습니다.

• 점수를 부여하고 화면에 표시합니다.
• 공의 애니메이션이 끝나기 전에 다시 공을 던지지 않도록 처리합니다.

1. game_step4.fla 파일을 열고 이 파일을 game_step5.fla 로 저장합니다.

2. 그림29 와 같이 메인 타임라인에 Content 레이어의 game 프레임에 점수를 표시할 수 있는 동적 텍스트필드를 위치시킵니다. 점수와 같이 가변적인 데이타를 표시할 때에는 동적 텍스트 필드를 사용합니다.

그림29. 점수 표시를 위한 동적텍스트필드 배치

3. 동적 텍스트필드를 선택한 후 속성패널의 Var 항목에 이름을 입력합니다. 왼쪽의 동적 텍스트필드는 pitcher 라고 입력하고 오른쪽의 동적 텍스트필드는 batter 라고 입력합니다. Var 항목에 입력된 이름은 변수와 같이 사용할 수 있고, 화면에 바로 반영이 되어 나타납니다.

그림30. Var 항목에 이름 입력

4. 생성한 두개의 동적 텍스트필드를 초기화 하는 액션스크립트를 작성하도록 하겠습니다. 게임이 시작되자마자 0으로 점수를 세팅하도록 할 것입니다. 이 방법은 게임이 끝난 후 다시 시작을 하여도 항상 0부터 초기화되도록 설정하는 것입니다. ActionScript 레이어의 game 키프레임을 선택합니다. 액션패널을 열면 stop(); 이라는 스크립트가 작성되어 있습니다. 다음과 같이 추가로 작성합니다.

batter = 0; //타자의 점수를 0으로 초기화. pitcher = 0; //투수의 점수를 0으로 초기화. stop();

5. 타자가 공을 치는 동작을 했을 때, 투수와 타자의 점수를 판별하여 증가시키는 스크립트를 작성하겠습니다. 이 내용은 타자가 공을 치는 동작에서 판별하여 구분하기 때문에 타자가 공을 치는 시점에서의 프레임에 액션스크립트를 작성할 것입니다. 스테이지의 bat_mc를 더블클릭하여, bat_mc의 타임라인으로 이동합니다. 그리고 타자가 공을 치는 시점인 3번째 프레임을 선택하고 액션패널을 엽니다.

다음과 같이 스크립트를 추가합니다. 메인 타임라인의 batter, pitcher 변수에 접근하기 위해 _root.batter 와 같이 도트 구문을 사용하였습니다.

tellTarget("_level0/ball_mc"){ frm = _currentframe%15; if(frm == 14){ //타자가 공을 쳤을 경우 batter 의 점수를 1 증가한다. _root.batter ++; gotoAndPlay("homerun"); }else{ //타자가 공을 치지 못했을 경우 pitcher 의 점수를 1 증가한다. _root.pitcher ++; } }

6. 점수를 표시하는 단계까지 완성하였습니다. 이제 투수와 타자 중 15점을 먼저 획득한 사람이 이기게 설정하고, 그에 해당하는 엔딩화면으로 이동하도록 하겠습니다. 이러한 액션스크립트가 실행되는 시점은 투수가 공을 던지려고 할 때가 좋을 것 같습니다. 그래서, 액션스크립트를 투수가 공을 던지기 직전의 위치에 작성하도록 하겠습니다. 메인 타임라인의 Key Capture 버튼을 선택하고 액션패널을 엽니다. 그리고 다음과 같이 점수를 체크하고, 화면을 분기하는 내용을 추가합니다.

//투수가 공을 던진다. on(keyPress "<Left>"){ //점수를 체크하여 화면을 분기한다. if(_root.batter >= 15){ //타자의 점수가 15점이면 bwin 키프레임으로 이동한다. gotoAndStop("bwin"); }else if(_root.pitcher >= 15){ //투수의 점수가 15점이면 pwin 키프레임으로 이동한다. gotoAndStop("pwin"); } //메인타임라인의 ball_mc 를 선택한다. tellTarget("ball_mc"){ //공을 던지는 키프레임으로 랜덤하게 이동한다. gotoAndPlay("pitch" add random(2)); } }

7. 게임의 종료시점을 체크하여 해당하는 엔딩화면으로 분기시키는 부분까지 완성하였습니다. 이제 게임의 기본적인 형태는 완성이 되었습니다. 다음은 투수가 공을 던질 때의 문제점을 해결하도록 하겠습니다. 해결 방법은 투수가 공을 던진 후, 공이 타자에게 전달되기 전까지는 다시 공을 던지지 못하게 하면 되겠습니다. 이럴 때에는 boolean 형의 데이타를 이용하면 편리합니다. 투수가 공을 던질 수 있는 상태인지, 던지면 안되는 상태인지를 참과 거짓으로 구분하여 표시합니다.

메인 타임라인에 ActionScript 레이어의 game 키프레임을 선택하고 다음과 같이 액션스크립트를 추가합니다. throwOk 가 true 이면 공을 던질 수 있는 상태를 의미합니다.

batter = 0; pitcher = 0; throwOK = true; stop();

8. 투수는 throwOk 가 true 일 때에만 공을 던질 수 있습니다. 던진 후에는 바로 공을 던질 수 없도록 throwOk 의 값을 false 로 설정합니다. 이 액션스크립트는 투수가 공을 던지는 시점에서 적용하도록 하겠습지다. 메인 타임라인의 Key Capture 버튼을 선택하고 액션패널을 엽니다. 그리고 다음과 같이 throwOk 의 값을 참조로 하여 공을 던지고, 던진 후 fasle 로 세팅하는 액션스크립트를 작성합니다.

//투수가 공을 던진다. on(keyPress "<Left>"){ //투수가 공을 던질 수 있는 상태인지 체크한다. if(throwOk){ //점수를 체크하여 화면을 분기한다. if(_root.batter >= 15){ //타자의 점수가 15점이면 bwin 키프레임으로 이동한다. gotoAndStop("bwin"); }else if(_root.pitcher >= 15){ //투수의 점수가 15점이면 pwin 키프레임으로 이동한다. gotoAndStop("pwin"); } //메인타임라인의 ball_mc 를 선택한다. tellTarget("ball_mc"){ //공을 던지는 키프레임으로 랜덤하게 이동한다. gotoAndPlay("pitch" add random(2)); } //공을 던질 수 없는 상태로 값을 변경한다. throwOk = false; } }

9. 마지막으로 공이 타자에게 도착하게 되면, 투수는 다시 공을 던질 수 있는 상태가 되어야 합니다. 이 액션스크립트는 공이 타자에게 도착하는 순간의 프레임에 작성하도록 하겠습니다. 공을 더블클릭하여 공의 타임라인으로 이동합니다. 그리고, 15번, 30번, 41번 키프레임을 각각 선택하고 다음과 같이 상태값을 변경하는 액션스크립트를 추가합니다.

//투수가 공을 던질 수 있는 상태로 설정한다. _root.throwOK = true; stop();

10. 무비를 테스트 합니다. 점수 표시 및 연속적으로 공을 던질 수 있던 버그가 해결되었는지 확인합니다. 문제가 없다면, 이제 게임이 완성되었습니다. 이제 이 파일을 game_step5.fla 로 저장합니다.

점수를 표시하고, 문제를 해결함으로써 게임을 완성하였습니다. 이제 남은 일은 투수가 공을 좀 더 다양하게 던질 수 있다거나, 디자인을 좀 더 멋있게 꾸미는 것입니다. 완성한 파일을 U10 으로 전송하여 테스트해보고, 2인용으로 게임을 즐겨 보십시오.

완성된 내용은 다운로드 받으신 파일 중 fungo.fla 를 참조하십시오.