4-11. 텍스트 입력과 출력 - 텍스트 유형, 변수

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

4-11. 문자 입력 받아 출력하기

이름과 주소를 입력 받아 출력하는 예제입니다.




(1) 텍스트 유형 3가지

텍스트 유형은 모두 3가지가 있습니다. [정적 텍스트, 동적 텍스트, 입력 텍스트]가 그것입니다.
이를 경우에 따라서 적절하게 잘 활용하는 것이 이번 강좌의 핵심입니다.

- 정적 텍스트
위의 예제에서 입력창 위에 표시된 '받는 사람', '주소', '우편번호'는 단지 화면상에 표시되는 것으로 그 임무를 다합니다.

- 입력 텍스트
입력창에 입력되는 문자는 [확인] 단추를 눌렀을 때 편지 봉투 위에 나타나야할 문자입니다. 따라서 이 문자는 '입력 텍스트'가 되어야 하고, 입력된 결과를 처리를 하기 위해서는 [변수]를 필요로 합니다.

- 동적 텍스트
입력된 문자를 화면 상에 표시할 때 사용합니다. 또한 이 유형은 웹페이지나 쇽웨이브 파일에서 선택이 가능하게 됩니다.

동적 텍스트와 입력 텍스트는 인스턴스 이름을 가질 수 있습니다.
세 가지 유형 모두 글자의 속성(크기, 속성, 색상 등)을 지정할 수 있습니다.
입력 텍스트를 통해 입력받은 텍스트는 동적 텍스트로 출력하며, 속성은 각각 다르게 지정할 수 있습니다.




(2) 텍스트 입력 및 출력 환경 만들기

예제 파일 

03b봉투입력_원본.fla




1) 예제를 열어보면 다음과 같이 타임라인과 레이어가 구성되어 있습니다.
이 예제의 핵심 기능은 문자 레이어에서 구현할 것입니다. 따라서 '문자' 레이어만 남기고 나머지 레이어는 자물통을 채워 편집이 되지 않도록 합니다.





2) '받는 사람', '주소', '우편번호' 등은 이미 정적인 텍스트로 입력이 되어 상태입니다.
'문자' 레이어에 텍스트 입력 상자를 다음과 같이 만듭니다.
텍스트 도구를 선택하고, [속성]창을 이용하여 텍스트 유형을 [입력 텍스트]로 설정해줍니다.

그리고, 필요에 따라 각 텍스트의 속성을 설정해줍니다.(글꼴, 크기, 색상 등)




3) 스테이지에서 마우스를 드래그하여 항목 입력 4개에 대한 입력창을 각각 그려줍니다.
검붉은 색의 입력 상자 배경을 그려두었으므로 그 규격에 맞게 그려주시면 되겠습니다.
단지 커서의 위치를 잘 보시고, 실제로 입력할 때 배경 상자와 어울리게 위치를 조정해주면 좋을 것입니다.





4) 입력 텍스트 영역을 선택한 후 각각 다음과 같이 변수를 줍니다.
받는 사람 : name
주소 : juso
우편번호 2개 : zip1, zip2


우편번호의 경우, 두 개의 입력상자를 선택하고 [최대 문자]를 3으로 줍니다. 우편번호 한 영역이 3자리로 되어 있기 때문에 입력 오류를 막을 수 있는 최소한의 제약입니다.





5) 이제 입력받는 내용을 출력할 프레임에 텍스트 영역 설정을 하도록 합니다.
'문자' 레이어의 10프레임을 선택한 후 작업합니다.
이번에는 텍스트 도구를 선택하고, 속성에서 [동적 텍스트]를 선택합니다.
그리고 스테이지에서 다음 그림과 같이 텍스트 상자를 그려줍니다.

출력될 글자의 속성은 앞서 입력받을 때의 글자 속성에 관계없이 설정하면 됩니다. [속성]창을 이용하여 각각의 출력 글자들에 대한 속성을 설정해주십시오.




6) 입력상자를 선택하고, 앞서 부여해준 변수를 [속성]창을 이용하여 입력해줍니다.





7) 주소 출력창의 경우, 주소가 길어져 두 줄 정도가 될 수 있으므로, [속성]창에서 줄 유형을 [여러 줄]로 해줍니다.
 




(3) 액션 스크립트

1프레임과 10프레임에는 자동 재생과 루프를 막기 위해 'Stop' 액션을 미리 넣어두었습니다.
단추 레이어의 자물통을 풀어주고 액션 스크립트 창을 열어(F9) 작업합니다.

(1) '확인' 단추
1프레임에서 [확인] 단추를 누르거나 Enter키를 치면 재생하도록 하면 되겠습니다.


on (press, keyPress "<Enter>") {  // 마우스를 누르거나 키보드의 Enter키를 치면
gotoandplay(2);  // 2프레임으로 가서 재생하라
}

(2) '새로 쓰기' 단추
10프레임에 있는 새로쓰기를 선택합니다.
이 단추에는 1프레임으로 가서 입력항목의 내용을 비워주면 되겠습니다.

on (press, keyPress "<Delete>") {  // 이 단추를 누르거나 키보드의 Delete키를 누르면
gotoandstop(1); // 1프레임으로 가서 멈춘다.
// 변수들의 값을 초기화(입력이 없는 상태로) 한다.
name=""
juso=""
zip1=""
zip2=""
}

Ctrl + Enter 키를 쳐서 확인해보십시오.