4-14. 산수 문제 출제하기 - 난수와 if

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

4-14. 산수 문제 출제하기 - 난수와 if

가. 안내

이번 강의는 완성된 예제는 간단해 보이지만 제법 복잡한 액션을 사용하게 됩니다. 그렇다고 지나치게 긴장할 필요는 없습니다. 지금까지의 예제보다는 약간 복잡하다는 것이지 어렵지는 않습니다.

무비를 실행시켰을 때 덧셈문제가 자동으로 출제됩니다. 사용자는 답을 입력하는 텍스트 필드에 답을 입력하고 버튼을 누르면 답이 맞았는지 틀렸는지 텍스트 필드에 결과가 나타나게 됩니다.

계산하는 액션 스크립트만 수정하면 사칙 연산이 모두 가능한 예제입니다.

예를 들면 7 + 8 라고 문제가 자동으로 출제될 수 있습니다.

사용자가 답 입력란에 답을 입력하고 확인 버튼을 누르면

결과가 나타나는 텍스트 필드에 "정답" 또는 "틀림" 이 나타납니다.

sansu_ex.fla




이번 예제를 통해서 두 가지 액션을 익히게 될 것입니다.

하나는 컴퓨터가 임의로 셈을 할 수를 발생시키는 난수 기능이고, 다른 하나는 조건문(if문)입니다. 조건문이라는 것은 말 그대로 "만약 ～(이)라면 ～해라"라고 조건에 따라서 명령을 실행하는 것입니다.

나. 텍스트 유형 지정하기와 변수 주기

글자를 이용하는 무비의 경우 각별히 신경 써야 할 부분이 텍스트의 유형입니다. 플래시에서는 세 가지 텍스트 유형, 즉, 정적, 동적, 입력 텍스트가 있습니다.

정적 텍스트는 값의 변화가 없는 단지 화면에 보여주기만 하는 글자이고, 입력 텍스트는 임의의 값을 입력받을 때 사용하며, 입력된 값을 화면에 뿌려주는 역할을 하는 것이 동적 텍스트입니다.

예제에는 정적 텍스트로 처리해야 할 글자들은 이미 입력해두었습니다.

1) ‘문제’ 레이어를 선택합니다.

2) 스테이지에서 + 앞에 텍스트 필드를 하나 생성한 다음 [동적 텍스트 ; Dynamic Text]로 설정하고 테두리를 보이게 한 다음(여기까지는 예제에 이미 설정되어 있음), [변수]를 num1 이라고 줍니다.

3) + 와 = 사이에 또 하나의 텍스트 필드를 생성한 다음 [동적 텍스트 ; Dynamic Text]로 설정하고, 테두리 보이기를 한고(여기까지는 예제에 이미 설정되어 있음), 변수를 num2 라고 줍니다.

4) 텍스트 필드를 하나 더 생성하고 [입력 텍스트 ; Input Text]로 설정하고 테두리를 보이게 설정한 다음(여기까지는 예제에 이미 설정되어 있음), 변수 입력란에 num3 이라고 입력합니다.

문제가 출제되면 사용자는 이 필드에 답을 입력하게 될 것입니다.

5) 버튼 레이어의 5번 프레임으로 가서 아래쪽에 텍스트 필드를 하나 더 생성하고 [동적 텍스트]로 설정하고(여기까지는 예제에 이미 설정되어 있음), 변수 입력란에 answer 라고 입력합니다.

정답 여부가 이곳에서 나타나게 될 것입니다.

다. 난수 발생시키기

0에서 9 사이의 10개의 난수를 발생시키기 위한 액션을 만들어 보겠습니다.

1) 1번 키프레임을 클릭하여 선택한 다음 액션 패널을 열고 [액션 > 명령문 > 변수 > set variable]을 더블클릭합니다.

2) [변수 ; variables] 입력란에 num1 이라고 입력하고 [값 ; value] 입력란에 random(10)이라고 입력한 다음 입력란 오른쪽에 있는 표현식(Expression)을 체크하세요.



※ 0부터 99까지의 100개 숫자를 임의로 발생시키고 싶으면 random(100)이라고 입력하면 될 것입니다.

3) 마찬가지 방법으로 두 번째 수(변수 이름 num2)을 발생시키는 액션을 추가하겠습니다. [명령문 > 변수 > set variable]을 더블클릭하여 액션을 한 줄 더 삽입합니다.

4) [변수] 입력란에 num2 을, [값] 입력란에 random(10)이라고 입력한 다음 입력란 오른쪽에 있는 표현식(Expression)을 체크합니다.

5) 이제 Ctrl + Enter키를 눌러 무비를 테스트해보면 덧셈 문제가 출제될 것입니다.

라. if 문 만들기

1) [확인] 버튼 심볼을 클릭하여 선택한 다음 액션 목록에서 [명령문 > 조건/루프> if] 를 더블클릭하여 삽입합니다.






2) 액션 편집창의 [조건] 입력란에

num1+num2==num3

라고 입력합니다.

참고 : num1+num2==num3

== 은 조건비교를 의미합니다. a=1 이라고 하면 1이라는 값을 a 에 저장하라는 뜻이지만 a==1 이라고 하면 a 가 1인지 아닌지 검사하게 됩니다. a 가 1이면 참(true)이 되지만 a가 1이 아니면 거짓(false)이 됩니다.




3) [명령문 > 변수 > set variable] 를 더블클릭하여 액션을 삽입합니다.




4) [변수] 입력란에는 answer 라고 입력하고 [값] 입력란에는 ‘정답입니다’라고 입력합니다. 오른쪽에 있는 Expression 은 체크하지 않습니다.

참고 : if 문

if 문은 조건을 비교하는 비교하여 참인가 거짓인가에 따라서 행동을 달리하는 함수입니다.

기본 구조는 다음과 같습니다.

if( 조건 ) {

실행한 액션;

}

else {

실행할 액션;

}

괄호 안의 조건이 참이라면 { } 안에 있는 "실행할 액션"을 실행하고, 괄호 안의 조건이 거짓이라면 { } 안에 있는 "실행할 액션을" 실행하지 않습니다.




5) 액션 목록에서 [조건/루프 > else] 를 더블클릭하여 삽입합니다.




6) 다시 [변수 > set variable] 를 더블클릭하여 액션을 삽입합니다.




7) [변수] 입력란에는 answer 라고 입력하고 [값] 입력란에는 ‘틀렸습니다’이라고만 입력합니다. 오른쪽에 있는 Expression 은 체크하지 않습니다.

참고 : else

else 는 if 문과 짝을 이루는 액션입니다. 항상 if 문 뒤에 사용되어야 합니다. if(조건문)가 참이면 else 문 안에 있는 액션은 동작하지 않습니다. 하지만 if(조건문)가 거짓이면 else 문 안에 있는 액션은 동작하게 됩니다.

 

위 예제에서는 num1 + num2 값이 num3 과 같으면

answer = "정답입니다";

가 실행되고

answer = "틀렸습니다";

는 실행되지 않습니다.




하지만, num1+num2 값이 num3 과 같지 않으면

answer = "정답입니다";

은 실행이 되지 않고

answer = "틀렸습니다";

가 실행이 됩니다.




8) 이제 확인 버튼을 누르면 결과를 알려주는 5번 프레임으로 가도록 하는 액션을 넣어줍니다. [전역함수 > 타임라인 컨트롤]에서 goto를 더블클릭하고, [이동하고 중단]을 선택한 후, 프레임 번호는 5를 넣어줍니다.

 

마. 버튼 심볼에 들어간 액션 설명

① on (release) {

② if (num1+num2==num3) {

③ answer = "정답입니다";

④ } else {

⑤ answer = "틀렸습니다";

⑥ }

⑦ {

⑧ gotoAndStop(5);

⑨ }

⑩ }

① 번 줄에 있는 액션은 버튼에 어떤 액션을 넣든지 자동으로 기본적으로 삽입되는 액션입니다. on() 이라는 것은 버튼 액션 이벤트임을 나타내주는 것입니다. release 는 마우스로 클릭을 했다가 떼는 순간 이벤트가 발생하라는 뜻입니다.

②번 줄은 조건문입니다. 괄호 안의 액션이 참이면 ③번 액션이 실행되고 괄호 안의 액션이 거짓이면 ⑤번 액션이 실행될 것입니다.

즉 num3 텍스트 필드에 숫자를 입력하고 버튼을 클릭했을 때 답이 맞으면 "정답입니다"이라는 글자가 answer 텍스트필드에 나오고 답이 틀리면 "틀렸습니다"라는 글자가 answer 텍스트 필드에 나오게 됩니다.

⑦～⑨ 까지는 goto 스크립트입니다.




<참고>

우리는 지금까지 액션 스크립트 작성을 [스크립트 도우미] 모드를 이용하였습니다.

이 예제의 경우 도우미 모드를 이용하면 액션 목록에서 이 액션 저 액션 선택하고 값을 입력하는 등 상당히 번거롭고, 복잡함을 느꼈을 것입니다. 이런 경우 버튼을 선택한 후 액션 창을 열어 [직접 입력 모드]에서

on (release) {

on (release) {

if (num1+num2==num3) {

answer = "정답입니다";

} else {

answer = "틀렸습니다";

}

{

gotoAndStop(5);

}

}

 

이렇게 직접 입력해주는 편이 오히려 더 쉽고 편리할 것으로 생각됩니다.

플래시를 자주 접하고 액션 스크립트에 대한 보다 깊은 공부가 이루어진다면 직접 입력 모드가 더 편리하다는 점을 이 강의의 첫 부분에서 말씀드린바가 있습니다만, 이제는 이해가 되시는지요?

[참고] 뺄셈이나 곱셈, 나눗셈은 어떻게
위의 스크립트 중 한 부분만 수정해주면 될 것입니다. 즉,

if (num1+num2==num3)

에서 num1+num2 의 연산자를 뺄셈은 - 로, 곱셈은 * 로, 나눗셈은 / 로 바꾸어주면 되는 것입니다.

 

바. 다시 풀기

이제까지 만든 무비를 실행해보면 단지 한번만 문제를 출제해주고, 확인한 후 그것으로 끝입니다. 이 상태에서 새 문제를 만나려면 무비 실행을 종료하고, 다시 실생해야 합니다.

이 문제를 해결하기 위해 다른 문제를 자동으로 다시 출제하기 위해 [다시 풀기] 버튼을 달아놓은 것입니다.

이 버튼을 선택한 후 다음 액션을 넣어주시면 무비를 다시 실행할 필요가 없어지게 될 것입니다.

이 액션 스크립트는 직접 입력 모드로 만들어 보십시오.

 

on(release) { <-- 마우스를 클릭하면

num1=""; <-- num1의 변수값을 없는 것으로 만듭니다. 즉 앞서 발생

된 숫자가 초기화되게 됩니다. 1프레임으로 가면 다시

난수가 발생될 것이므로 이렇게 하는 것입니다.

num2=""; <-- 위의 num1과 마찬가지로 초기화하는 것입니다.

num3=""; <-- 덧셈의 결과값도 초기화합니다.

gotoAndStop(1); <-- 그리고 1번 프레임으로 가서 중지합니다.

}

 

사. 키 누르기 활용하기

이 예제를 완성해서 몇 번 활용해보면 불편한 점으로 정답을 입력하고 마우스로 '확인' 혹은 '다시 풀기'를 클릭해야 한다는 점일 것입니다. 대신에 키보드를 누르면 얼마나 편리할까요? 키보드로 입력을 하고 키보드를 눌러 확인하고 다시 풀 때도 키보드를 누르면 동작하도록 하는 것이 아무래도 키보드-마우스-키보드로 옮겨 입력하는 것보다 편리할 것은 자명한 일입니다.

키보드의 키를 누르면 동작하도록 하는 방법은 의외로 간단합니다.
마우스 이벤트 항목에 [키 누르기]가 있기 때문이지요.

가령 '확인' 버튼 대신에 엔터키를 누르면 정답 확인 화면으로 이동하게 하려면 다음과 같이 합니다.


'확인' 버튼에 있는 스크립트 중 마우스 이벤트 행을 클릭하고,
이벤트 항목 중 [키 누르기]를 선택한 후
원하는 키를 키보드로 눌러 줍니다.



결과적으로 스크립트는

on(release) {

에서

on(release, keyPress "<Enter>") {

로 바뀌게 됩니다.

'다시 풀기' 버튼에도 Enter키를 배정해보십시오.

 

아. 무비 테스트

Ctrl + Enter 키를 눌러 결과물을 테스트해 봅니다.

[주의] 계산 결과에 대한 메시지가 엉터리로 나오는 경우
이 예제처럼 계산이 필요한 경우 동적 텍스트나 입력 텍스트의 속성에서 [자동 자간]을 체크해두면 연산이 제대로 되지 않습니다. 다음 그림과 같이 [자동 자간]을 체크 해제해주어야 정상적인 연산이 이루어집니다.