어도비 뮤즈 스크롤4 스크롤 효과 패널 동작 스크롤 효과

어도비 뮤즈 스크롤4 스크롤 효과 패널 동작 스크롤 효과

 

 

스크롤 효과 패널을 사용하여 페이지 요소에 스크롤 효과 적용

<adobe muse : Using the Scroll Effects panel to apply scroll effects to page element>

이전 섹션에서 브라우저 채우기 이미지를 추가한 다음 페이지를 스크롤할 때

[브라우저 채우기] 메뉴의 [스크롤] 탭을 사용하여 브라우저 창에서 배경 채우기가

이동하는 방식을 제어하는 방법에 대해 알아보았습니다.

 

또한, 채운 배경 요소(예: 사각형 또는 텍스트 프레임)를 선택하고 [채우기] 메뉴의

[스크롤] 탭을 사용하여 페이지를 스크롤할 때 요소가 이동되는 키 위치,

방향 및 속도율을 설정하는 방법에 대해 알아보았습니다.

 

이 섹션에서는 Muse 작업 영역에서 스크롤 효과를 적용할 수 있는 세 번째 영역인

[스크롤 효과] 패널을 살펴보겠습니다.

[스크롤 효과] 패널에는 페이지를 스크롤하는 방법을 기준으로 하여 동작, 투명도,

슬라이드 쇼 위젯 및 Adobe Edge Animate 컨텐트를 제어하는 네 개의 다른 탭이 있습니다.

 

스크롤 효과가 서로 함께 적용되는 경우 및 일부 요소가 핀으로 고정되어 있거나,

100% 폭으로 설정되어 있거나 [레이어] 패널을 사용하여 서로 위와

아래에 정렬되어 있는 경우 다양하고 멋진 효과를 만들 수 있습니다.

 

 

 

 

스크롤 효과 패널을 사용하여 동작 스크롤 효과 적용

<adobe muse :  Applying motion scroll effects using the Scroll Effects panel>

 

[스크롤 효과] 패널에 있는 [동작] 탭의 인터페이스는 이전에 [브라우저 채우기] 및 [채우기]

메뉴에서 본 다른 두 스크롤 효과 예와 거의 비슷합니다.

[스크롤 효과] 패널의 [동작] 탭을 사용하여 페이지 요소에 스크롤 효과를

 적용하려면 다음 단계를 수행하십시오.

1.

디자인 보기에서 페이지를 편집하는 동안 [페이지] > [페이지 속성]을 선택합니다.

페이지를 스크롤할 수 있도록 길게 하려면 [최소 높이]를 훨씬 크게 설정합니다

(예: 2000픽셀). [확인]을 클릭하여 변경 사항을 저장하고 [페이지 속성] 대화 상자를 닫습니다.

 

2.

디자인 보기에서 페이지에 사각형 또는 텍스트 프레임을 그립니다.

 

3.

[채우기] 메뉴의 [채우기] 탭을 사용하여 바둑판식 또는 비 바둑판식으로 배열된 배경 이미지를 추가합니다. 또는 단색이나 그라데이션 채우기 색상만 선택합니다.

 

4.

[창] > [스크롤 효과]를 선택하여 [스크롤 효과] 패널을 엽니다(그림 7 참조).

 

 

그림 7. [스크롤 효과] 패널을 열어서 스크롤 효과 설정에 액세스합니다. 

 

5.

기본적으로 [동작] 탭(맨 왼쪽)이 표시됩니다.

페이지의 요소가 선택된 상태에서 그림 7에서와 같이 [동작] 확인란을 선택합니다.

 [동작] 확인란을 선택하면 T자 핸들이 위쪽 가장자리를 지나서 확장되는 요소에 추가됩니다.

기본적으로 T 핸들 컨트롤이 요소 위에 표시되지만 핸들을 클릭하고 드래그하여

 더 높이 확장하거나, 아래로 드래그하여 제어하는 요소의 위쪽 가장자리에 맞추거나,

요소 아래로 핸들을 드래그할 수 있습니다.

 

6.

T 핸들을 드래그하여 키 위치를 설정하면 스크롤한 페이지가 T 핸들의

위쪽에 닿기 전과 후에 발생하는 이동을 설정할 수 있습니다.

또는, [동작] 탭이 활성화된 상태에서 [스크롤 효과] 패널의 가운데에 있는

[키 위치] 필드에 숫자 값을 입력할 수 있습니다.

 

그림 7에서 키 위치는 200픽셀로 설정되어 있습니다.

T자 핸들의 위치는 요소의 키 위치를 나타냅니다.

페이지를 세로로 스크롤할 때 [시작 동작] 섹션의 설정이 적용되므로

요소의 위치가 디자인 보기에 표시된 대로 해당 위치와 일치합니다.

 

방문자가 페이지를 스크롤하거나 기준점 링크를 클릭하여 요소의 키 위치를 지나서

이동하면 [최종 동작] 섹션의 설정이 적용됩니다.

 [시작 동작] 섹션에는 세로와 가로 방향 화살표와 속도 옵션이 있습니다.

 

7.

세로 단추 중 하나를 클릭하여 세로 방향(위쪽 또는 아래쪽)을 선택합니다.

세로 방향 화살표 옆에 있는 필드에 속도 값을 입력하여 페이지 스크롤 속도를

기준으로 하여 발생하는 이동 속도를 설정합니다.

0을 입력하면 요소가 세로로 이동하지 않습니다.

소수점을 사용하여 백분율을 입력할 수도 있습니다.

예를 들어, .5를 입력하면 요소가 페이지 스크롤 비율에 비해

절반 비율로 세로 방향으로 이동합니다.

 

8.

요소가 키 위치에 도달하기 전에 이동하는 방향을 설정하려면 왼쪽 또는 오른쪽 화살표를 클릭하여 요소를 스크롤하는 가로 방향(왼쪽 또는 오른쪽)을 설정합니다. 가로 화살표 오른쪽에 있는 필드에서 가로 방향에 대한 속도 값을 설정합니다. 요소가 가로 방향으로 이동하지 않도록 하려면 초기 가로 속도 필드를 0으로 설정합니다,

 

9.

7-8단계를 반복하여 [최종 동작] 섹션의 동작 방향 및 비율을 설정합니다.

아래 표시된 예에서 키 위치가 500픽셀로 설정되어 있습니다.

브라우저에서 스크롤을 시작하면 페이지 스크롤 비율과 같은

1배 비율로 요소가 아래 위치로 이동합니다.

페이지가 키 위치로 스크롤할 때 요소가 해당 위치에 도착합니다.

페이지가 키 위치를 지나서 스크롤하면 요소가 페이지 스크롤 속도의 2배로

오른쪽으로 이동합니다(그림 8 참조).

 

그림 8. 시작 동작 설정으로 인해 요소가 제 위치로 이동합니다.

페이지를 계속 스크롤하면 요소가 최종 동작 설정을 기준으로 하여 오른쪽으로 이동합니다. 

 

10.

[미리 보기]를 누르거나 브라우저의 [파일] > [페이지 미리 보기]를 선택하여 스크롤 효과를 테스트합니다.

페이지를 아래로 스크롤하고 다시 위로 스크롤하여 요소 이동을 확인합니다.

 

11.

테스트를 마치면 Muse로 돌아가거나 [디자인] 단추를 클릭하여 페이지를 계속 편집합니다.

 

 

 

 

 

어도비 뮤즈 스크롤4 스크롤 효과 패널 동작 스크롤 효과

 

 

 

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

 

어도비 뮤즈 스크롤4 스크롤 효과 패널 동작 스크롤 효과

 

스크롤 효과 패널을 사용하여 페이지 요소에 스크롤 효과 적용

<adobe muse : Using the Scroll Effects panel to apply scroll effects to page element>

<adobe muse :  Applying motion scroll effects using the Scroll Effects panel>