개요
Axure RP로 Flyout 메뉴와 커스텀 툴팁을 만드는 방법입니다. Flyout 메뉴란 마우스가 메뉴를 벗어나면 메뉴가 자동으로 사라지는 메뉴를 의미합니다. 이 내용은 Axure RP 공식 홈페이지에 올라온 내용을 제가 이해한대로 옮겨적은 글입니다.
실습 예제 파일 다운로드
실습을 위해 공식 홈페이지에 있는 예제 파일을 다운로드하시기 바랍니다.
예제 파일 다운로드
설정
예제 파일 중, Flyout menu 페이지를 엽니다. 이 페이지는 네 개의 메인 메뉴로 구성되어 있고 그 중 하나는 두 개의 서브 메뉴를 가지고 있습니다. 두 개의 서브 메뉴를 그룹핑하고 그룹명을 Flyout으로 짓습니다. 그리고 STYLE 탭에서 Hidden에 체크합니다.
Flyout 메뉴를 표시하는 인터랙션 부여하기
메인 메뉴 중 Help 위젯을 선택한 후, PROPERTIES 탭의 OnMouseEnter를 더블클릭하여 케이스를 추가합니다. Case Editor의 왼쪽 화면에서 Show를 선택하고 오른쪽에서 Flyout 그룹에 체크합니다. 그리고 아래쪽의 More Options에서 treat as flyout을 선택합니다. OK를 눌러 저장합니다.
미리보기
Preview 버튼을 눌러 미리보기합니다.
커스텀 툴팁
커스텀 툴팁도 위와 거의 동일합니다. Custom tooltip 페이지를 열고 이미지 위젯에 OnMouseHover 이벤트를 추가합니다. OnMouseHover 이벤트는 마우스가 1초 정도 위젯 위에 있을 때 동작합니다.