어도비 뮤즈 adobe muse 스크롤11 스택 메뉴<Stacked menu>

어도비 뮤즈 adobe muse 스크롤10 스택 메뉴<Stacked menu>

스크롤 효과를 사용하여 흥미 있는 대화형 사이트 탐색을 만들 수 있습니다. 

여러 단추가 페이지의 표시 영역으로 날아온 다음 메뉴 모음을 만들 수 있게 정렬됩니다. 

이 예에서 네 개의 롤오버 단추는 페이지를 스크롤할 때 페이지 아래쪽에서 위쪽으로 

이동하고 세로 메뉴 모음을 표시할 위치에 잠깁니다.

네 개 단추가 정렬되면 배경 컨텐트(전구 그림, 색이 지정된 배경 영역, 텍스트 프레임 및 

대각선 방향의 모서리 줄무늬 형식)가 페이지 양쪽에서 날아와서 사이트 섹션을 만듭니다.

이 예에서 단추가 연결되어 있지 않지만 하이퍼링크 드롭다운 메뉴를 사용하여

링크를 추가하면 방문자가 이 링크를 클릭하여 새 페이지를 로드하거나 기준점 태그를 

사용하여 현재 페이지의 다른 위치로 이동할 수 있습니다.

비슷한 스택 메뉴를 작성하려면 다음 단계를 수행하십시오.

1.   

디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. 
[최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에서 페이지의 
최소 높이는 7465픽셀로 설정되어 있습니다.

2.  

  페이지 채우기 색상을 없음으로 설정하고 브라우저 채우기를 단색 채우기로 설정합니다. 
예에서 브라우저 채우기는 옅은 황갈색으로 설정되어 있습니다.

3.   

[텍스트] 도구를 사용하여 새 텍스트 프레임을 만듭니다. 단어 Home을 입력합니다. 

제어판에서 서식 옵션을 사용하여 배경색을 텍스트 프레임에 추가합니다. 

서식 옵션을 업데이트하여 텍스트 스타일을 지정합니다. 

단추 양쪽에 있는 핸들을 사용하여 너비와 높이를 약 300픽셀 x 115픽셀로 확장합니다

(그림 37 참조).

그림 37. 제어판의 옵션을 사용하여 텍스트 프레임에 스타일을 지정합니다.

4.    

[상태] 패널을 엽니다. [롤오버] 상태를 선택하고 다른 채우기 색상(또는 스타일 지정)을 추가하여 
롤오버 단추를 만듭니다(그림 38 참조).  

그림 38. [롤오버] 상태를 선택하고 단추에 스타일을 지정하여 표준 상태와 다른 모양을 표시합니다.

5.    

롤오버 상태를 업데이트한 후에 [표준] 상태를 다시 선택합니다.

6.   

 [스크롤 효과] 패널의 [동작] 탭을 엽니다. 단추를 선택한 상태에서 [동작] 확인란을 선택합니다. T 핸들을 드래그하거나 숫자 값을 입력하여 키 위치를 설정합니다. 스크롤 비율의 .75 비율로 이동하도록 [시작 동작] 섹션을 설정합니다. 다른 모든 필드를 0으로 설정한 상태로 둡니다(그림 39 참조).

그림 39. [동작] 탭에서 스크롤 효과를 사용한 다음 이동 방향과 비율을 설정합니다.

7.    

Option/Alt 키를 누른 채 홈 단추를 페이지 아래로 드래그합니다. 그러면 단추의 복제본이 만들어집니다. 복제본이 원본 홈 단추에 맞춰 세로로 정렬되었는지 확인합니다. 두 요소가 정렬되고 복제본이 선택된 상태이면 진한 파란색 스마트 안내선이 가운데에 일시적으로 표시됩니다(그림 40 참조).  

그림 40. Option/Alt 키를 누른 채 단추 복제본을 드래그하여 세로로 정렬합니다.

8.   

 원래 단추에서 약 460픽셀 아래에 위치하도록 복제본 단추를 페이지 아래로 이동합니다

9.   

 7-8단계를 반복하여 단추를 두 번 이상 복제하여 페이지에 일정한 간격으로 총 4개 단추를 만듭니다. 'Products, Photos, Contact Us' 레이블을 사용하는 텍스트 내용을 업데이트하려면 [텍스트] 도구로 위에서 두 번째, 세 번째, 네 번째 단추를 편집합니다(그림 41 참조).

그림 41. 텍스트 프레임의 텍스트를 편집하여 각 단추 레이블을 고유하게 만듭니다.

첫 번째 홈 단추를 복제할 때 텍스트 프레임의 스타일과 해당 내용뿐만 아니라 
스크롤 효과 설정이 복사됩니다. 복제된 단추 중 하나를 선택하고
[스크롤 효과] 패널을 보면 [동작] 탭의 설정이 홈 단추에 적용된 설정과 일치하며,
각 단추의 키 위치가 이전 단추에서 460픽셀 아래
(페이지에서 각 단추 사이의 간격과 동일한 간격)에 있는 것을 알 수 있습니다.

10. 

높이와 간격을 추가하여 4개 단추가 최종 위치에 정렬되면 4개 단추의 총 높이를 계산합니다.
예에서 단추는 각각 116픽셀 높이이며, 각 단추 사이의 간격은 4픽셀입니다.
즉, 세로 메뉴 모음의 총 높이(모아 놓았을 때)는 476픽셀입니다.
[사각형] 도구를 사용하여 원하는 페이지 섹션의 너비 및 메뉴 모음과 같은 높이의 사각형을 그립니다.
이 예에서 사각형 너비와 높이는 931 x 476픽셀입니다.

11. 

예에서 디자인을 복제하려면 사각형의 채우기 색상을 단추의 표준 상태보다
밝은 음영의 연분홍으로 설정할 수 있습니다. 제어판에서 모퉁이 반경 값을 입력하여 둥근 모퉁이를
만들 수도 있습니다. 이 예에서 네 모퉁이 모두 10픽셀로 설정되어 있습니다(그림 42 참조).

 

그림 42. 사각형을 선택한 상태에서 둥근 모퉁이에 대한 모퉁이 반경을 설정합니다.

12. 

[선택] 도구를 사용하여 사각형 위쪽 가장자리가 페이지 위쪽에서 약 5094픽셀 거리가 되도록
사각형을 맞춥니다. 또한 사각형 왼쪽이 단추 왼쪽에 세로로 맞춰졌는지 확인합니다.
예에서 사각형과 단추가 모두 페이지 왼쪽에서 14픽셀 위치에 있습니다.
요소를 선택하고 [변형] 패널을 열 때 이러한 설정을 볼 수 있습니다.
X 값은 왼쪽으로부터의 거리(14픽셀)이고 Y 값은 페이지 위쪽으로부터의 거리(5094픽셀)입니다.

13. 

사각형을 선택한 상태에서 [스크롤 효과] 패널을 열고 [동작] 탭에서 [동작] 확인란을 선택합니다. 
키 위치를 4979로 설정합니다.

14. 

스크롤 속도의 1배 비율로 오른쪽으로 이동하도록 [시작 동작]을 설정합니다. 
동작 탭의 다른 모든 필드는 0으로 설정된 상태로 둡니다(그림 43 참조).

그림 43. 왼쪽에서 날아와 오른쪽으로 이동하도록 하여 사각형이 페이지로
이동하도록 스크롤 효과를 적용합니다.

15. 

사각형이 4개 단추 뒤에 배열되었는지 확인하려면 사각형을 선택한 상태에서
 [개체] > [맨 뒤로 보내기]를 선택합니다.

16. 

[파일] > [배치]를 선택하고 이미지 파일을 찾아서 선택한 다음 페이지를 한 번 클릭하여 배치합니다.
이 예에서는 전구 이미지를 표시할 수 있게 투명도가 있는 PNG가 배치되었습니다.
전구는 메뉴 단추가 포함되는 영역으로부터 오른쪽 위에 위치한 큰 사각형 위에 배치됩니다.
이 예에서 이미지는 왼쪽에서 501픽셀 위치에 배치되고(X 위치) 페이지 위쪽에서
5245픽셀 위치에 배치됩니다(Y 위치).

17. 

배치된 이미지가 4개 단추 뒤에 배열되었는지 확인하려면 이미지를 선택한 상태에서
 [개체] > [맨 뒤로 보내기]를 선택합니다. 목표는 배치된 이미지를 큰 사각형 위와 4개
단추 뒤에 표시하는 것입니다.

18. 

배치된 이미지를 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 열고 [동작] 확인란을 선택합니다. 
키 위치를 원하는 값으로 설정합니다. 예에서 4979픽셀로 설정되어 있습니다.

19. 

[시작 동작] 섹션에서 스크롤 비율의 .75배 비율로 이동하도록 오른쪽 값을 설정합니다.
다른 방향 값을 0으로 설정합니다(그림 44 참조).

그림 44. 사각형과 같은 속도로 오른쪽으로 이동하도록 [시작 동작]을 설정합니다.

20. 

[텍스트] 도구를 사용하여 텍스트 프레임을 만듭니다.
예제 파일에서 텍스트 프레임에
'Stack linked text frames with high contrast roll-overs to create unusual menus.'가 입력되어 있습니다.
하지만 원하는 텍스트 내용을 입력할 수 있습니다.
제어판의 서식 옵션을 사용하여 텍스트에 원하는 스타일을 지정합니다.
이 예에서는 텍스트 프레임에 배경 채우기 색상이 적용되지 않았습니다.

21. 

[선택] 도구를 사용하여 텍스트 프레임을 배치된 이미지 오른쪽에 배치합니다.
이 예에서 텍스트 프레임은 X 값이 357픽셀(왼쪽에서)로 설정되어 있고
Y 값이 5136픽셀(위쪽에서)로 설정되어 있습니다. 실제 위치는 텍스트 내용과
텍스트 프레임에 적용한 서식 옵션에 따라 다릅니다.

22. 

텍스트 프레임을 선택한 상태에서 [개체] > [뒤로 보내기] 옵션을 사용하여
텍스트 프레임을 배열하거나 [레이어] 패널에서 이동하면 텍스트 프레임이 4개 단추 뒤와
큰 사각형 위에 표시됩니다.

23.

 [스크롤 효과] 패널에서 [동작] 확인란을 선택합니다.
T 핸들을 드래그하거나 값을 입력하여 키 위치를 설정합니다.
예에서 키 위치는 배치된 이미지(전구 그림)에 사용된 것과 같은
키 위치 값인 4979픽셀로 설정되어 있습니다.

24. 

[시작 동작] 섹션에서 스크롤 비율의 절반(.5) 비율로 왼쪽 방향으로 이동하도록
텍스트 프레임을 설정합니다. 다른 모든 필드를 0으로 설정합니다(그림 45 참조).

그림 45. 텍스트 프레임은 느린 비율로 왼쪽(사각형과 배치된 이미지의 반대 방향)으로
이동하도록 설정되어 있습니다.

기본 스택 메뉴 섹션이 이제 완료되었습니다.
하지만 추가할 수 있는 디자인 요소가 한 개 더 있습니다.
여기에는 회전한 사각형을 사용하여 사선 줄무늬 효과를 추가한 [슬라이딩] 메뉴 예제와
같은 방식으로 큰 사각형의 오른쪽 아래 모퉁이 위에 회전한 사각형을
여러 개 추가하는 작업이 포함됩니다.

25. 

[사각형] 도구를 사용하여 다양한 너비의 사각형을 여러 개 그립니다.
사각형을 브라우저 채우기에 적용된 배경색과 같은 색상으로 채웁니다.
이런 방식으로, 큰 사각형이 오른쪽으로 이동하여 그 뒤에 배치될 때까지 사각형이 표시되지 않습니다.
이러한 사각형 대각선 집합을 그룹화하여 단일 요소로 작업할 수 있습니다(그림 46 참조).

그림 46. 큰 사각형의 오른쪽 아래 모퉁이를 지나는 
사선 줄무늬가 만들어지도록 일련의 사각형을 회전합니다.

26.

 필요한 경우 [레이어] 패널을 사용하거나 [개체] > [맨 뒤로 보내기]를 선택하여 
큰 사각형이 맨 뒤 즉, 페이지에서 다른 모든 요소의 뒤에 표시되도록 배열합니다.

27. 

[미리 보기]를 클릭하여 브라우저에서 페이지를 미리 보고 아래로 스크롤하여 스택 메뉴가
제 위치로 이동하는지 확인하여 진행 상황을 정기적으로 테스트합니다.
테스트를 마치면 Muse로 돌아갑니다. 

 

어도비 뮤즈 adobe muse 스크롤10 스택 메뉴<Stacked menu>

 이 내용은 ADOBE 홈페이지  어도비 뮤즈<adobe muse> 도움말을 가지고 왔습니다.