어도비 뮤즈 adobe muse 스크롤13 마스크 (Masks)

어도비 뮤즈 adobe muse 스크롤13 마스크

<adobe muse mask>

이 예에서 막대 그래프가 제 위치로 애니메이션됩니다. 

분홍색 화살표 그래픽이 위쪽으로 확장되고 그래프의 막대 위와 뒤로 물결 모양을 이룹니다. 

그래프에서 막대가 차트 아래쪽에서 길게 늘어나는 것처럼 보이지만 실제로는 

큰 흰색 사각형 뒤에서 나타나는 동작 스크롤 효과가 적용된 단색 사각형입니다

(페이지 배경색과 같은 흰색으로 채워짐).

이 예에서는 스크롤 효과와 함께 여러 기술을 사용합니다. 

요소는 [레이어] 패널을 사용하여 서로의 앞과 뒤에 배열됩니다. 

흰색 사각형이 그래프 요소 맨 위에 그려집니다. 흰색 사각형이 막대 그래프를 덮고 있을 때 

막대와 화살표가 마스크 처리된 것처럼 보기에서 숨겨집니다. 

흰색 사각형과 차트 표는 동작 스크롤 효과에서 0 설정을 사용하므로 페이지를 스크롤할 때

 제 위치에 남아 있습니다. 아래에 배열된 막대와 분홍색 화살표 그래픽에는 막대 그래프를 모았을 때 

위쪽과 보기로 이동되는 동작 스크롤 효과가 적용되었습니다.

비슷한 마스크 효과를 작성하려면 다음 단계를 수행하십시오.

1.

디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. 

[최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 

사이트 예에서 페이지의 최소 높이는 6076픽셀로 설정되어 있습니다. 

2.

페이지와 브라우저 채우기를 모두 흰색(또는 원하는 색으로 설정하지만, 

같은 색을 사용하여 마스크 사각형을 나중에 채움)으로 설정합니다. 

3.

[사각형] 도구를 사용하여 페이지에 큰 사각형을 그립니다. 

예에서 사각형 너비와 높이는 804 x 489픽셀입니다. 

4.

사각형 채우기 색상을 없음으로 설정합니다. 획 색상을 원하는 색으로 설정합니다. 

[획] 메뉴에서 사각형 왼쪽과 아래쪽 획 두께를 20으로 설정하고, 

위쪽과 오른쪽 획 두께를 0으로 설정하여 획을 숨깁니다. 

이렇게 하면 막대 그래프 차트의 기능이 만들어집니다(그림 51 참조).

  

 

그림 51. [획] 메뉴를 사용하여 사각형 왼쪽과 아래쪽에 획을 설정합니다. 

5.

사각형을 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 엽니다.

 키 위치를 설정하고 네 필드에 모두 0을 입력합니다. 

이 설정은 사각형이 키 위치에 도달할 때까지 앞뒤로 이동하지 않으므로 요소가

 제 위치에 그대로 남아 있음을 의미합니다(그림 52 참조). 

 

그림 52. 모든 필드에 0을 입력하여 사각형을 페이지에 "핀으로 고정"시킵니다. 

6.

[사각형] 도구를 사용하여 큰 사각형 두 개를 그립니다. 

첫 번째 사각형을 그려서 차트 왼쪽에 맞춥니다. 

이 예에서 사각형 너비와 높이는 657 x 1810픽셀입니다. 

7.

두 번째 사각형을 차트 아래에 그려서 맨 아래 가장자리에 맞춥니다. 

이 예에서 사각형 너비와 높이는 1002 x 1541픽셀입니다. 

8.

두 사각형의 채우기 색상을 흰색(또는 브라우저 채우기 색상과 같은 색상)으로 설정하고 획을

0으로 설정합니다. [선택] 도구를 사용하여 사각형을 차트의 양쪽에 맞춥니다(그림 53 참조).

 

그림 53. 큰 사각형 두 개를 그래프 차트 왼쪽과 아래쪽에 배치합니다. 

9.

사각형을 선택한 상태에서 마우스 오른쪽 단추를 클릭하고 

[개체] > [그룹]을 선택하여 두 마스크 사각형을 함께 그룹화합니다. 

10.

사각형 그룹을 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 엽니다. 

키 위치를 설정하고(예에서 1516픽셀) 네 필드에 모두 0을 입력합니다. 

이 설정은 흰색 사각형 그룹이 키 위치에 도달하기 전이나 후에 이동하지 않음을 의미합니다. 

이 그룹은 차트의 바깥쪽 표처럼 위치에 남아 있습니다. 

11.

[레이어] 패널을 사용하여 그룹을 일시적으로 숨기고 잠급니다. 

12.

아래로 스크롤하여 그룹 아래에 간격을 두고 [사각형] 도구를 사용하여 

너비가 모두 같은 사각형을 5개 그립니다. 예에서 막대 너비는 모두 74픽셀이며, 높이는 다양합니다. 

예제에서 왼쪽에서 오른쪽으로 이동하는 5개 사각형의 높이는 141, 188, 292, 444, 583입니다. 

사각형 모두 그래프 차트의 왼쪽과 아래쪽 가장자리를 정의하는 획과 동일한 녹색으로 채워집니다

(그림 54 참조).   

 

그림 54. 페이지를 따라 5개 사각형을 분산시킵니다. 

13.

사각형 위치(왼쪽에서 오른쪽)는 해당 X와 Y값으로 아래에 나열되었습니다. 

- X: 200 Y: 2622 

- X: 330 Y: 2797  

- X: 460 Y: 3081  

- X: 590 Y: 3304  

- X: 721 Y: 3499 

14.

그런 다음 왼쪽에 있는 사각형부터 시작하여 오른쪽 방향으로 사각형을 각각 선택합니다. 

각 사각형을 선택하고 [스크롤 효과] 패널의 [동작] 탭에 있는 

[동작] 확인란을 선택하고 다음 키 위치를 설정합니다. 

- 2099 

- 2321 

- 2709 

- 3084 

- 3441 

15.

사각형을 모두 선택한 상태에서 [스크롤 효과] 패널의 설정을 업데이트하면

 [시작 동작] 섹션이 스크롤 속도의 1배 비율로 위로 이동합니다. 

다른 모든 필드를 0으로 설정합니다(그림 55 참조).

  

 

그림 55. [스크롤 효과] 패널에서 5개 사각형에 대한 동작 값을 한 번에 설정합니다. 

16.

페이지에 투명한 PNG를 배치합니다. 예에서 PNG 파일은 위쪽으로 지그재그 방향으로 

이동하는 분홍색 화살표 그래픽입니다. 

이 예에 사용된 PNG 너비와 높이는 695 x 443픽셀입니다. 

페이지에 배치한 후에 X: 78 위치와 Y: 3427 위치로 이동합니다. 

17.

[레이어] 패널에서 PNG 파일을 첫 번째와 세 번째 막대 사각형 아래와 

두 번째, 네 번째, 다섯 번째 막대 위에 오도록 배열합니다(그림 56 참조). 

 

그림 56. PNG 화살표 이미지가 그래프에서 막대 사이에 배치되어 표시되도록 

[레이어] 패널을 사용하여 PNG 화살표 이미지를 배열합니다. 

18.

화살표 이미지를 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 열고 [동작] 확인란을 선택합니다. 

키 위치를 설정합니다(예제에서 3238픽셀).

 [시작 동작] 섹션에서 방향을 위쪽과 오른쪽으로 설정하고 두 

[시작 동작] 필드에 스크롤 비율의 .25배를 입력합니다.

 [최종 동작] 섹션의 두 필드를 0으로 설정합니다(그림 57 참조).  

 

그림 57. [스크롤 효과] 패널에서 동작에 대한 설정을 업데이트합니다. 

19.

[레이어] 패널에서 이전에 숨기고 잠근 두 개의 흰색 사각형 그룹을 표시하고 잠금을 해제합니다. 

그룹을 다른 요소 위로 이동하여 페이지의 다른 컨텐트 위에 표시되도록 합니다. 

그룹이 맨 위에 있으므로 차트의 프레임 내에서 위로 이동할 때 막대와 화살표 그래픽만 

표시하는 마스크 역할을 합니다. 

20.

[파일] > [브라우저에서 페이지 미리 보기]를 선택하여 페이지를 테스트합니다. 

막대를 마스크하는 두 개의 흰색 사각형이 차트 내에 있을 때까지 막대 그래프 요소를 숨기므로, 

페이지를 스크롤하여 막대 그래프 차트가 제 위치로 이동하는지 확인합니다. 

21. 브라우저를 닫고 Muse 작업 영역으로 돌아옵니다. 

스크롤 효과를 사용한 사이트 디자인의 예

스크롤 효과 기능이 어떻게 작동하는지 확인하려면 다음 웹 사이트를 참조하십시오.

- Deep Blue Scroll 

- Source Sans Pro 

 - 재미있는 패럴랙스 

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

 

어도비 뮤즈 adobe muse 스크롤13 마스크

<adobe muse mask>