보존:플래시 게임 만들기

단축: 괴:플게_, 괴:플래시_

우리 백괴대학교에서는 다음과 같은 강의를 수록중입니다.
백괴대학:본관/플래시 기초

돈슨의 게임과 같은 것을 만들기 힘들었다고요? 플래시를 이용하면 돈슨의 게임 수준과 비슷한 수준에서 게임을 만들 수 있습니다.

게임 만들기의 기초

이 부분의 본문은 도움말:게임 만들기입니다.

플래시의 구성

플래시는 다음과 같이 구성됩니다.

화면 상단 타임라인

프레임 : 플래시를 움직이게 하는 구성 요소입니다.
키 프레임 : 프레임 중에서도 중요한 프레임으로 그림이 새로 구성됩니다.
빈 프레임 : 프레임과 같은 의미이나 아무것도 없는 프레임입니다.
레이어 : 그림의 층으로 다른 그림에 영향을 받지 않도록 하는 일종의 셀로판지입니다.

화면 하단

액션스크립트 창: 게임을 만들기 위해 꼭 필요한 요소로, 플래시에 여러 기능을 추가하여 단순히 움직이는 이미지가 아니라 사용자와 입력을 주고받을 수 있습니다.
속성: 선택한 개체, 프레임, 혹은 해당 플래시 자체의 속성을 보여줍니다.

화면 좌측

화면 좌측에는 그림을 그리고 편집할 수 있는 도구가 있습니다. 도구 밑에서 각 도구별로 설정을 할 수 있습니다.

화면 우측

색상 선택, 구성요소 등이 있습니다. 색상은 단색 외에도 그라데이션이나 라이브러리로 불러온 비트맵 등으로 채울 수 있으며 그 농도를 조절할 수 있습니다.

도구 활용하기

도구는 크게 다음과 같이 구별할 수 있습니다.

그림 그리기 도구
그림과 색 선택 도구
화면 이동과 확대 (네비게이터) 도구

그림 그리기

그림은 도구를 이용해 그리면 됩니다. 어때요? 참 쉽죠?

펜
붓
채우기

그림 선택하기

원하는 이미지를 클릭하거나, 마우스를 드래그하여 선택할 수 있습니다. 선택을 해제하면 일반적인 벡터 이미지와는 달리 붓으로 그린 개체가 합쳐지기 때문에 이미지 위에 이미지를 올릴 때 특히 유의하시기 바랍니다.

화면 이동과 확대

손 도구 : 화면을 이동합니다.
돋보기 : 화면을 확대하거나 줄일 수 있습니다. 하지만 페이지나 그림 크기가 변하는 것은 아닙니다.

좋은 그림 그리는 법

동물을 그리기 위해서는 먼저 몸통을 그리고 선으로 구도를 잡아야 합니다. 다음으로 안면을 그리고 구도를 지우면 됩니다.

움직이는 그림 만들기

일일이 키프레임을 추가하여 움직이는 그림을 그리는 방법도 있지만, 그렇게 하면 힘들기 때문에 트윈을 사용합니다.

모션 트윈(Motion Tween)

움직이고 싶은 그림을 선택한 후 Modify(수정)→Group(그룹) 혹은 Ctrl+G를 눌러 그룹을 잡습니다.
몇 프레임 앞에 (바로 다음 프레임에 만들면 아무 효과가 없습니다.)새로운 키프레임(단축키 F6)을 생성합니다.
이미지를 움직입니다. 크기 조절도 가능합니다.
다시 첫 프레임을 클릭하여 플래시 하단에 있는 속성에서 Tween(트윈)→Motion(모션)을 선택하거나 그 프레임을 마우스 오른쪽 클릭하여 Create Motion Tween(모션 트윈 만들기)를 선택합니다.
움직이는 이미지가 만들어졌습니다. Enter나 Ctrl+Enter로 재생해보세요.

속성 창에서 ease로 가속도를 조절할 수 있습니다.
심볼도 모션 트윈으로 만들 수 있으며 이 때는 심볼을 선택하여 속성 창에서 설정한 색상, 알파(농도)도 모션 트윈을 이용하면 서서히 바뀌는 효과를 줄 수 있습니다.

셰이프 트윈(Shape tween)

움직이고 싶은 그림을 그립니다.
새 키프레임을 생성하여 이미지의 모양, 색상 등을 바꿉니다.
첫 프레임을 클릭하여 플래시 하단에 있는 속성에서 Tween(트윈)→Shape(모양)를 선택합니다.

모션 트윈과는 달리 그룹을 지으면 안 되며 이미지가 일그러질 수 있습니다. 그룹은 농도를 지정할 수 없기 때문에 서서히 나타나는 단색 이미지 등에 유용하게 쓰일 수 있습니다.

가이드라인(Guideline)

가이드라인은 모션 트윈의 일종으로, 선을 따라 움직이는 이미지를 구현할 수 있습니다. 레이어 2개가 필요하며 그룹이나 심볼이 필요합니다.

연필 아이콘을 클릭하여 움직일 선을 그립니다. 그 아래 레이어에는 움직일 이미지 혹은 심볼을 불러 그룹을 짓습니다.
타임라인에서 레이어 이름 옆에 있는 종이 아이콘을 더블클릭하면 레이어 속성이 나옵니다. 여기에서 TYPE를 GUIDE(가이드)로 선택합니다.
같은 방식으로 움직일 이미지는 GUIDED를 선택합니다.
가이드(연필로 그린 선)는 몇 프레임 뒤에 프레임을 추가(F5)하며, 이미지는 가이드와 같은 프레임 위치에 키프레임을 추가합니다.
화살표 도구(검은 마우스)를 클릭하여 이동합니다. 중심은 첫 프레임은 연필로 그린 선의 첫 부분에, 마지막 프레임은 연필로 그린 선의 마지막 부분으로 옮깁니다.
대충 가운데 근처로 맞춰놓으시면 중앙이 보입니다.
모션 트윈을 추가합니다.

Ctrl+Enter로 미리보기를 하면 가이드는 보이지 않고 그 선을 따라 움직이는 이미지만 보입니다.

플래시로 파일 불러오기

이미지나 효과음 등을 플래시로 불러올 수 있습니다. 단, 용량이 너무 크면 곤란하니 (특히 음악 파일의 경우) 가능하면 용량을 줄인 후 불러오세요.

불러오는 방법: file(파일)-import(불러오기)를 사용합니다. 혹은 그대로 Ctrl+C와 Ctrl+V를 사용하여 이미지를 추가할 수 있습니다.

플래시는 확대해도 깨지지 않는 벡터 방식의 이미지를 사용합니다. (그러나 실제 벡터 이미지와는 다릅니다.) 즉 벡터 이미지를 불러오지 않을 시 이미지 확대시 깨질(계단 현상이 일어날) 수 있습니다.

이렇게 불러온 파일들은 라이브러리(F11)에서 볼 수 있습니다. 라이브러리에는 불러온 파일 뿐만 아니라 심볼도 섞여 있습니다.

심볼 만들기

심볼을 만드는 것은 심볼로 만든 그림을 여러 번 붙여 넣어도 플래시의 용량이 커지지 않게 하는 장점이 있기 때문에 왠만해서는 만드는 것이 좋습니다.

버튼 만들기

버튼을 만들 때는 다음과 같이 하면 됩니다.

그림을 그립니다.
F8 버튼을 눌러 버튼 속성으로 심볼로 만듭니다.
해당 심볼을 더블 클릭해 버튼 편집 상태로 들어갑니다.
평상시, 올려져 있을 때, 누를 때, 누르는 영역 순으로 프레임을 구성해 버튼을 만들면 됩니다.

액션스크립트

액션 스크립트는 프레임의 여러 동작을 제어하는 것으로, 플래시가 단순히 움직이는 그림에서 그치지 않도록 하는 역할을 합니다. 액션 스크립트 창 좌측에 라이브러리가 있으며, 해당 창 오른쪽 아래 구석에서 Normal Mode(일반 모드)와 Expert Mode(전문가 모드)를 선택할 수 있습니다. 전문가 모드는 액션스크립트를 직접 입력합니다.

play : 프레임이 지나가게 합니다. (재생)
stop : 프레임을 멈춥니다. (정지)
gotoAndPlay : 해당 프레임으로 보내주고 나서 재생시킵니다.
gotoAndStop : 해당 프레임으로 이동하여 정지시킵니다.

변수 선언

변수는 var로 선언하면 됩니다. 참고로 플래시 6 이하는 변수 선언을 하지 않아도 되지만 CS2 이상부터는 변수 선언을 하여야 합니다. (8은 잘 모르겠습니다.) 예를 들어 더하기는 변수=변수+숫자, 혹은 하나만 더하려면 변수++; 등으로 설정할 수 있습니다.

예를 들어 플래시 6 이하에서는 다음과 같은 것이 동작합니다.

a=0;
a++;

플래시 CS2 이상에서는 다음과 같이 하여야 합니다.

var a=0;
a++;

변수를 출력할 시에는 텍스트를 클릭한 뒤, 속성에서 Dynamic Text(재생 중 값 입력 불가) 혹은 Input Text(재생 중 값 입력 가능)을 선택하여 Instance Name(인스턴스 네임)을 입력해야 합니다. 인스턴스 네임을 'result'로 입력하였으며 이곳에 'score'라는 변수를 보여주고 싶을 때는 프레임을 클릭하고 액션 스크립트에 다음과 같이 씁니다.

this.result.text=score;

응용

프레임으로 간 뒤에 재생을 하다가 멈춤을 추려면 다음과 같은 방법으로 할 수 있습니다.

갈 프레임에 gotoAndPlay(갈 프레임); 를 입력합니다.

멈추려는 프레임에 가서 stop(멈출 프레임); 을 입력합니다.

플래시 파일의 종류와 업로드

플래시 파일에는 fla와 swf가 있습니다.

fla는 플래시 소스 파일입니다.
swf는 플래시 소스 파일을 컴파일을 한 플래시 무비입니다.

이때 swf를 업로드 하시는 것이 바람직합니다. 소스를 공유할 때에만 fla로 된 파일을 업로드하시기 바랍니다.

업로드는 가입한 지 3일이 지나면 백괴사전에서 하시면 됩니다.

이외에도 다음과 같은 파일이 있습니다.

as는 액션스크립트가 있는 파일입니다.
fla는 플래시에서 사용하는 비디오 파일입니다.

위키에 플래시 보여주기

기본적으로 위키에서는 서버나 컴퓨터에 해를 끼칠 수 있으므로 플래시를 사용할 수 없습니다. 하지만 확장 기능이나 자바스크립트로 플래시를 사용할 수 있게 할 수 있습니다. 이 위키에서는 자바스크립트로 플래시를 사용할 수 있게 하였기 때문에 {{플래시}}를 사용해서 다음과 같은 방법으로 위키에 플래시를 보여줄 수 있습니다.

{{플래시|www.(사이트 이름).com/(플래시 이름).swf|800|600}}

이 틀은 플래시 파일을 정해진 가로세로 크기에 따라 나타냅니다.

이때 파일명에 http:// 를 붙이지 마세요. 자바스크립트가 알아서 http:// 를 붙여줍니다.