본문 바로가기

Flash platform

Flash Actionscript3.0 ToolTip

Flex 에서는 기본적으로 component 옵션으로 tooltip 을 제공 하고 있지만, Flash 에서 툴팁을 만들어 쓰기란 여간 귀찬은

작업이 아닐수 없습니다. 그래서 Flash 기반의 쓸만한 tooltip 을 소개해 봅니다.

 

ToolTip.as

static 메소드로 이루어져 있는 하나의 툴팁 클래스로 스테이지나 오브젝트에 생성되는 모든 tooltip 들을 관리 합니다. 사용법은 간단합니다. 우선 사용 예제 부터 보시면 아래와 같습니다. 해당 target 에 대한 MouseEvent.MOUSE_OVER 만으로 이벤트를 처리 하게 됩니다.

Out 이벤트를 따로 처리할 필요가 없이 단지 Over 이벤트만 처리 하면 됩니다.


 

사용시 두단계를 거쳐야 합니다. 우선 첨부한 ToolTip.as 파일을 import 한 후에,

Tooltip 설명을 사용할 target 에 이벤트 리스너를 추가 합니다. ( tc_mc 를 target 으로 정했습니다.)

 

 

  1. import src.util.ToolTip;
  2. var toolTipAlign:String = "center";
  3. var toolTipAlpha:Number = .85;
  4. var toolTipDelay:int = 200;
  5.  
  6.  
  7. tp_mc.addEventListener(MouseEvent.MOUSE_OVER, Overhandler);

  8. ToolTip.init(stage,{text_align:toolTipAlign, opacity:toolTipAlpha, default_delay:toolTipDelay});  // Tooltip 초기화
  9. ToolTip.attach(evt.target, "")
  10. function Overhandler(evt:MouseEvent):void
  11. {
  12.          ToolTip.init(stage,{text_align:toolTipAlign, opacity:toolTipAlpha, default_delay:toolTipDelay});
  13.         ToolTip.attach(evt.target, "this is a sample");
  14.  
  15. }



1. ToolTip.init(툴팁의부모:stage,{text_align: 정렬값 , opacity:알바값, default_deday:툴팁이나타나는시간});

툴집을 위한 초기 값을 설정 합니다. 툴팁의 부모에는 툴집을 어디에 속하게 할 것인지 정하고(stage:Stage) 를 주로 사용합니다.

 

2. ToolTip.attach(툴팁을적용시킬target(tp_mc) ,"툴팁 설명" );

 

더 유동적으로 사용하고 싶은 분들은 소스를 훑어 보시면 될것 같습니다. 그리고 툴팁이 표시 되는 네모 상자가 마음에 안든다 하시는

분들도 reset_bg 메소드에서 그리고 있는 bg:Shape 를 자신이 라이브러리에서 만든 무비클립으로 Linkage 시켜 주던가,

graphics 클래스를 이용해서 좀 더 이쁘게 꾸밀수 있습니다.

테스트를 해 보니 몇가지 버그가 있어서 수정 합니다. 초기에 Mouse Over 했을때 Tooltip 이 발생안하는 것은 Tooltip 자체가 초기화가 안되어 있어서 (오브젝트를 Tooltip 으로 넘기고 바로 addEventListener 로 이벤트들을 걸어 주기 때문에 이벤트 발생 순서 상에 문제가 발생하게 됩니다. 그래서 강제로 초기화를 해 줘야 하는데 방법은 간단합니다.

위와 같이 Over 이벤트를 밖에 초기화 코드를 입력해 주시면 됩니다.