액슈어(Axure) 따라하기 - Getting Started (2)

지난 포스팅(액슈어(Axure) 따라하기 - Getting Started (1))에 이어서 Getting Started 두 번째 포스팅입니다. 이 포스팅도 역시 Axure.com에서 제공하는 Documentation을 따라하면서 작성되었습니다. Axure.com의 Documentation에 youtube 영상이 너무 잘 되어 있어서 해당 영상만 보셔도 아주아주 충분합니다.

 

(참고) https://docs.axure.com/tutorials/basics/getting-started/ 

Getting Started with Axure RP · Axure Docs

 

Getting Started

1. Image 보이기 / 숨기기
2. Rectangle에 마우스 Enter / 마우스 Exit
3. Rectangle에 마우스 Enter / 마우스 Exit - Image 보이기 / 숨기기
4. Rectangle에 마우스 Enter / 마우스 Exit - Rectangle 색 수정
5. Project 공유하기

 

1. Image 보이기 / 숨기기

상단 Toolbar에 '눈'을 클릭하면 Image를 보이기 / 숨기기 상태로 수정할 수 있습니다.

<Image 보이기 / 숨기기>

 

2. Rectangle에 마우스 Enter - Image 보이기

Rectangle을 선택한 후에 INTERACTIONS를 클릭합니다.

<Rectangle에 마우스 Enter / 마우스 Exit 기능>

INTERACTIONS - Event Trigger로 Mouse Enter를 선택합니다.

<Event Trigger - 마우스 Enter>

Action으로 SHOW / HIDE를 선택합니다.

<WIDGET ACTIONS - 보이기 / 숨기기>

WIDGET으로는 Image를 선택합니다. <= 위에서 선택한 Action의 대상입니다.

<TARGET - Image 선택>

WIDGET SHOW / HIDE 중에 SHOW를 선택하고 OK를 클릭합니다.

<TARGET - Show 설정>

 

3. Rectnagle에 마우스 Exit - Image 숨기기

INTERACTIONS - Event Trigger로 Mouse Exit를 선택합니다.

<Event Trigger - 마우스 Exit>

Action으로 SHOW / HIDE를 선택합니다.

<WIDGET ACTIONS - 보이기 / 숨기기>

WIDGET으로는 Image를 선택합니다. <= 위에서 선택한 Action의 대상입니다.

<TARGET - Image 선택>

WIDGET SHOW / HIDE 중에 HIDE를 선택하고 OK를 클릭합니다.

<TARGET - Hide 설정>

Preview를 클릭하여 작업한 산출물을 확인합니다.

'버튼 연습' Rectangle 안에 마우스를 이동(Enter)하고 Rectangel 밖으로 마우스를 이동(Exit)시켜 봅니다.

<마우스 Enter - Image 보이기>

<마우스 Exit - Image 숨기기>

 

4. Rectangle에 마우스 over - Rectangle 색 수정

New Interaction 중에 Mouseover Style Effect를 클릭합니다.

<마우스 Over - Style Effect>

:mouseover에서 Fill Color에서 색상을 선택합니다.

<Style Effect - Fill Color>

Fill Color에서 색상 선택 후 OK를 클릭합니다. 색상이 적용된 Rectangle을 확인합니다.

<Mouseover - Rectangle 색 적용>

Preview를 클릭하여 작업한 산출물을 확인합니다.

'버튼 연습' Rectangle 안에 마우스를 오버(Over)해 봅니다.

 

※ 마우스 Over와 마우스 Enter의 차이 https://webclub.tistory.com/456

mouseover와 mouseenter 이벤트 차이

 

5. Project 공유하기

Share 클릭합니다.

<Share 클릭>

Project Name - 파일명을 입력하고 Publish합니다.

<Share 클릭 후 Publish>

Publish가 끝나면 Share Link가 생성됩니다.

<Share - Publish - Share Link>

 

지금까지 Axure의 기본적인 사용 방법을 알아보았습니다. 다음에는 조금 더 유용한 Interaction을 추가해보겠습니다.

<예제 파일과 링크>

예제 파일

Getting_Started_02.rp

0.36MB

예제 링크 - https://fzyaf0.axshare.com/

Untitled Document