4-13. 사칙연산 계산기 만들기 -변수

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

4-13. 사칙연산 계산기 만들기

 

다음 그림과 같은 간단한 액션 스크립트와 변수를 사용하여 사칙연산을 하는 계산기를 만들어 봅시다.



예제 파일


03b계산기_원본.fla

가. 변수

액션 스크립트에서 변수는 다음과 같이 표시합니다.

가령 'a 라는 변수에 5를 대입하라'라고 한다면

a = 5

이 때의 = 은 대입하라는 의미이고, 같다는 의미는 아닙니다. 같다는 == 로 표시합니다.

이 예제의 핵심은 바로 이 변수를 적절히 사용하는 것입니다.

입력받은 두 수에 대하여 각각 aa, bb라는 변수에 대입하고, 사칙연산의 결과를 cc라는 변수에 대입해 봅시다.
그러면 사칙 연산은 다음과 같은 식으로 표현할 수 있을 것입니다.

더하기 : cc = aa + bb빼기 : cc = aa - bb곱하기 : cc = aa * bb나누기 : cc = aa / bb

 

나. 텍스트 유형 만들기

예제를 불러오기 해보면 모두 3개의 레이어로 구성되어 있습니다. 각각의 레이어를 선택해보면 스테이지의 개체가 선택되어 보이므로 레이어별로 쉽게 파악이 될 것입니다. ‘정적 텍스트’ 레이어에는 정적 텍스트들이 입력되어 있습니다.'변수 영역' 레이어에는 입력 텍스트와 동적 텍스트가 들어갈 영역입니다. ‘버튼’ 레이어에는 버튼들이 들어 있습니다.

텍스트 유형에 대해서는 앞서의 예제에서 한 설명을 상기해보십시오.

'변수 영역' 레이어를 선택하고, 첫 번째 수를 입력 받는 글 상자를 [입력 텍스트]로 하고, [변수]를 aa로 줍니다.

 

두 번째 수 역시 [입력 텍스트]로 하고 [변수]는 bb로 줍니다.결과 창은 [동적 텍스트]로 하고, [변수]는 cc로 줍니다.

 

다. 액션 스크립트 넣기

먼저 더하기 단추부터 생각해봅시다.

버튼을 누르면, aa와 bb의 값을 인수, 숫자로 인식시킨 다음 cc에 대입을 해주도록 하면 되잖겠습니까? 표준 모드에서 입력 방법을 차근차근 살펴보겠습니다.

1) 액션 창을 엽니다(F9).




2) 왼쪽 리스트에서 액션 >무비 제어에서 on을 더블클릭합니다.




3) 이벤트에서 [누르기]를 체크하고(이렇게 하면 마우스 왼쪽 단추를 누르면 이란 조건이 만들어집니다), [키 누르기]를 체크한 후 Enter키를 누르면 다음 그림과 같이 스크립트가 입력되게 됩니다.






4) [액션 >기타 액션 >evaluate]를 더블클릭합니다. evaluate는 변수나 수식 등을 직접 입력할 때 사용됩니다. 표현식 창에 cc= 을 입력합니다.






5) 앞서 입력 텍스트를 통해 입력받은 aa, bb 값은 문자일 수도 있습니다. 따라서 단순히 cc=aa+bb라고 하면 aa와 bb를 통해 입력된 숫자를 cc에서 나열하는 것으로 끝날 수도 있습니다.그래서 입력된 값을 숫자로 인식시켜주어야 합니다. 숫자로 인식시켜 주는 함수는 Number입니다. 이것은 꼭 기억을 해두어야 합니다.[액션 >인덱스]에서 n키를 누르면 n으로 시작하는 액션 항목으로 이동합니다. Number를 더블클릭합니다.






6) 빨강색으로 표시되는 부분은 구문 오류이거나 미완성임을 나타냅니다. 뭐가 잘못된 건가요? ;(세미콜론) 은 단위 액션 스크립트의 끝을 의미하는 기호입니다. 이것을 지워주고 이어붙여 주어야 겠지요? 다음과 같은 표현식이 되도록 합니다.

cc=Number(aa) + Number(bb);

7) 나머지 연산자 버튼은 위의 스크립트를 복사해서 연산자만 바꾸어주면 될 것입니다. 더하기만 Enter키를 쓰고 나머지는 keyPress"<Enter>" 부분을 지워줍니다. 1번째 라인을 클릭하고, 마지막 라인을 Shift 키를 누르고 클릭하면 범위 설정이 됩니다. 그리고 복사하기를 하십시오(Ctrl + C)두 번째의 빼기 버튼을 누르고 액션 스크립트 창에 붙여넣기를 한 후 스크립트 내용을 앞서 지적한 대로 수정합니다.

 

▶ 더하기 버튼 액션 스크립트

on(press, keyPress "<Enter>"){ // 마우스 왼쪽 단추를 누르거나, 키보드의 Enter키를 치면

cc=Number(aa) - Number(bb); // 입력 받은 aa와 bb의 값을 숫자로 인식시켜 더해서 cc에 대입

}

▶ 빼기 버튼 액션 스크립트

on(press) {

cc=Number(aa) - Number(bb);

}

▶ 곱하기 버튼 액션 스크립트

on(press) {

cc=Number(aa) * Number(bb);

}

▶ 나누기 버튼 액션 스크립트

on(press) {

cc=Number(aa) / Number(bb);

}

이렇게 하면 결과 동적 텍스트 창에는 처리된 결과값이 출력되게 됩니다.

 

8) 이제 마지막으로 지우기 버튼에 대한 액션 스크립트를 구현해보겠습니다.

지우기는 버튼을 누르거나 Delete키를 누르면 입력된 값을 모두 없는 것으로 만들어(이를 Null이라고 하지요) 버리면 됩니다. 즉 "(쌍따옴표) 둘을 찍어주면 됩니다.

 

▶ 지우기 버튼 액션 스크립트

on(press, keyPress"<Delete>") {

aa="";

bb="";

cc="";

}

 

9) Ctrl + Enter키를 눌러 테스트 해보세요.