4-17. 툴팁 만들기

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

4-17. 툴팁 만들기

1. 안내

이번 차시에 익히실 내용은 텍스트를 이용한 웹 자료를 플래시로 만들 때 유용한 기능입니다.

버튼으로 지정된 특정 영역 위에 마우스 커서를 올리면 설명문이 나오도록 하는 이른바 툴팁(Tool Tip ; 프로그램의 도구 아이콘에 마우스를 가져가면 그 도구에 대한 간단한 설명이 나오는)과 같은 기능입니다.


이를 초보적인 방법으로 구현하려면 버튼의 마우스 이벤트, 즉, Up, Over, Down, Hit라고 하는 4가지의 마우스 이벤트 중 Over를 적절히 잘 이용하면 되는 것입니다.

하지만 이 방법은 손이 많이 가는 단점이 있습니다.

여기서 제시하는 방법은 버튼과 무비클립을 결합한 한 쌍의 심볼을 이용하여, 이를 복제한 후 인스턴스 이름과 설명문만 바꾸어주면 되는, 원리상으로는 좀 난해한 면이 있지만 활용하기에는 아주 쉬운 방법입니다.

2. 완성된 작품과 예제 파일 다운로드

예제 웹페이지에 있는 완성된 예제를 보시면 * 표시가 된 낱말 혹은 어절이 있습니다. 그 위에 마우스를 올려놓으면 설명이 툴팁처럼 나타납니다.

실습을 위해 기초적인 작업을 해둔 예제 파일을 다운로드할 수 있도록 해두었습니다.

예제 파일을 다운로드해서 적당한 폴더에 저장을 하시고, 아래의 실습 과정을 따라 해보시기 바랍니다.

예제 파일 다운로드


tool_tip_ex.fla

3. 만들기

가. 무비 크기의 설정

여기서도 가로 800 * 세로 500 크기의 무비를 기준으로 만들기를 해보겠습니다.다운로드한 예제 파일을 불러옵니다.(Ctrl + O)




나. 투명 버튼과 툴팁 붙이기

(1) 라이브러리에서 ‘투명버튼’으로 등록된 버튼 심볼을 본문의 ‘프로그램 내장 방식’ 위에 올려놓습니다.

[Tip] 버튼의 크기가 맞지 않을 경우 [자유변형도구](Free Transform Tool )를 이용하여 조절합니다.




(2) 다시 라이브러리에서 ‘tooltip’으로 이름 붙여진 무비클립을 가져와서 ‘프로그램 내장방식’의 시작 부분 바로 위에 둡니다.

이 자리에 설명문이 나오게 됩니다.

‘폰 노이만’에도 투명 버튼을 가져다 놓습니다.

그리고 역시 ‘tooltip’ 무비클립을 문장 위쪽에 가져다 둡니다.






(3) 이와 같은 방법으로 설명이 필요한 낱말이나 어절에 버튼을 달아주고, 아울러 툴팁 무비클립을 위치시켜 줍니다.

 

4. 액션 분석

이번 강좌는 액션을 만들어가 가기보다는 만들어진 액션을 분석하고 활용해보는 쪽에 초점을 맞추어 진행하겠습니다.




가. 툴팁 무비 클립의 구조

툴팁 무비클립을 더블클릭해보면 다음과 같은 프레임 구조를 볼 수 있습니다.



그림에서 보이듯이 1프레임은 공백 키프레임, 2프레임에는 키프레임이 들어 있습니다.

2프레임의 스테이지에는 텍스트 박스(Dynamic Text 속성임)가 하나 그려져 있습니다. 이 박스의 크기만큼 설명을 넣을 수 있으며, 글자의 속성은 [속성 관리자]에 설정해놓은 속성을 따라가게 됩니다.

* 필요하다면 이 텍스트 박스의 속성을 변경하여 설명글의 길이와 줄수, 글자 속성(크기, 속성, 색상 포함)을 변경해줄 수 있을 것입니다.

그리고 이 텍스트박스에는 ‘tip’이라는 변수가 주어져 있습니다.

 

나. 투명 버튼의 속성 및 액션

(1) 속성

투명 버튼을 더블클릭해서 마우스 이벤트 부분을 살펴보면,

Up 프레임은 공백, Over, Down 프레임은 빨강색 테두리가 그려져 있으며, Hit 프레임은 면색이 채워져 있음을 볼 수 있을 것입니다.

이를 통해 알 수 있는 점은 보통 때는 보이지 않던 버튼이(설명글이 있음을 표시하기 위해 별도로 * 표시), 마우스를 올리거나 클릭하면 낱말 혹은 어절에 테두리 표시가 보이게 되는 것입니다.



(2) 액션 분석

투명 버튼에 적용되어 있는 액션은 다음과 같습니다.

on (rollOver) {

_root.msg.tip = "필요한 명령어를 컴퓨터 내부에 미리 넣어두는 방식";

_root.msg.gotoAndstop(2);

}

on (rollOut) {

_root.msg.tip = "";

_root.msg.gotoAndstop(1);

}

 

[설명]

on (rollOver) : 마우스 이벤트 중 Over 일 때, 즉 마우스를 이 버튼 위에 올리면 이어지는 이하의 { } 속 액션을 실행합니다.

_root.msg.tip = "필요한 명령어를 컴퓨터 내부에 미리 넣어두는 방식"; : 마우스 Over에 대한 명령을 받을 개체에 대한 경로가 절대주소로 지정되어 있습니다. 즉, _root의 하위에 있는 msg 클립(이것은 무비클립 심볼에 대한 인스턴스 이름)에 tip이라는 변수에 “ ” 속 내용이 표시되도록 대입한 것입니다.

_root.msg.gotoAndstop(2); : 대입된 값을 msg 무비클립의 2프레임으로 가서 멈추게 합니다. 2프레임에는 앞서 살펴본 바와 같이 Dynamic Text 박스가 있습니다. 그곳에 tip 변수에 대입된 설명글이 표시되게 되는 것입니다.

on (rollOut) : 마우스가 투명 버튼을 벗어나면 그 이하의 { } 속에 있는 액션을 실행합니다.

_root.msg.tip = ""; : tip 변수의 값을 초기화합니다. 즉 아무런 설명도 나오지 않도록 합니다.

_root.msg.gotoAndstop(1); : 초기화된 값을 가지고 1프레임으로 갑니다.

(3) 종합해서 말씀드리면 눈에 보이는 개체에만 가시적으로 액션을 적용하여 상호작용 혹은 동작을 일어나게 하는 일반적인 방법과는 달리, 이 방법은 하나의 체계화된 프로그래밍이라고 할 수 있습니다.

플래시 액션 스크립트의 깊은 곳에는 이와 같은 객체 지향 프로그래밍 기법이 있으며 프로그램 버전이 향상될수록 이러한 기법은 더 다양한 방법으로 구사할 수 있도록 배려하고 있다는 점을 알아두시면 좋을 것 같습니다.

 

다. 투명 버튼과 툴팁 무비클립의 활용

(1) 여러 군데에서 투명 버튼과 툴팁 무비클립을 활용하려면, 필요한 만큼 복제를 해서 사용하되, 반드시 인스턴스 이름을 구분이 되도록 해주어야 합니다.

* 인스턴스(Instance)란 앞서의 강좌에서 익히셨을 줄로 압니다만, 심볼(주로 무비클립)을 스테이지 상에서 구분하기 위해 붙이는 이름입니다. 가령 ‘백설공주와 일곱 난쟁이’의 경우 일곱 난쟁이가 무대에 등장했을 때 이를 구분하기 위해 ‘낸쟁이1’, ‘난쟁이2’ ... 와 같이 번호를 붙여 구분하는 것과 같습니다. ‘tootip’ 이라는 이름의 무비클립은 ‘난쟁이’라는 면에서 같은 성질이지만, 스테이지에 나서면 각각의 역할을 달리하므로 ‘난쟁이1’, ‘난쟁이2’ ... 하는 식으로 구분하듯이 ‘msg’, ‘msg2’, ‘msg3’ 등으로 구분되어야 한다는 것이지요.

(2) 따라서 msg로 붙여져 있는 인스턴스 이름은 설명에 따라 모두 다르게(동일한 설명문이라면 같아도 상관없음) 붙여져야 할 것입니다.

아래 그림에서 보인 바와 같이 ‘폰 노이만’에 연결된 설명문은 인스턴스 이름을 msg2로 붙여줍니다.



(3) 아울러 투명버튼에 적용된 액션 중에서 인스턴스 이름을 나타내는 경로와 설명문을 다음과 같이 수정해주어야 합니다

 

on (rollOver) {

_root.msg2.tip = "헝가리 출신으로 미국에서 활동한 과학자";

}

on (rollOver) {

_root.msg2.gotoAndstop(2);

}

on (rollOut) {

_root.msg2.tip = "";

_root.msg2.gotoAndstop(1);

}

 

라. 저장하고 확인하기

지금까지의 작업을 저장하고, Ctrl + Enter키를 쳐서 무비를 확인해보십시오.