어도비 뮤즈 adobe muse 스크롤7 Adobe Edge Animate 탭 작업

스크롤 효과 패널의 Adobe Edge Animate 탭 작업

 <adobe muse : Working with the Adobe Edge Animate tab of the Scroll Effects panel>

 

Adobe Edge Animate는 HTML5 기반 웹 애니메이션을 

만들 수 있는 직관적인 디자인 도구입니다. 

Edge Animate의 인터페이스를 사용하면 반복 동작 그래픽 및 

기호를 사용하여 컴포지션을 작성할 수 있습니다. 

Adobe Edge Animate를 사용하여 만든 애니메이션을 OAM 파일로 내보낸 

다음 Muse 사이트 페이지에 배치할 수 있습니다. 

Edge Animate에서 만든 애니메이션은 플러그인 없이 브라우저에서 재생할 수 있습니다. 

Adobe Edge Animate에서 애니메이션을 구성할 때 요소를 스테이지로 

드래그하고 타임라인을 사용하여 요소의 이동을 조작합니다. 

요소를 기본 타임라인에 직접 추가하는 것 외에도 고유한 내부 타임라인을 

사용하여 재생하는 하위 요소로 중첩된 요소를 만들 수도 있습니다.

Adobe Edge Animate 작업에 대해 자세히 알아보려면 Adobe Edge Animate 제품 페이지를

 참조하십시오. 또한, Adobe TV에서 Adobe Edge Animate 비디오 자습서를 보십시오.

Adobe Edge Animate 스크롤 동작 기능을 사용하기 위해 첫 단계에 

이러한 목적을 위한 컴포지션 디자인이 포함됩니다. 

기본 타임라인에 배치된 애니메이션에 영향을 주기 위해 OAM 파일에 

스크롤 효과를 적용할 수 있습니다. 페이지가 스크롤될 때 이동할 항목만 기본 타임라인에 있도록 

애니메이션을 전략적으로 디자인하고 중첩된 기호 타임라인으로 애니메이션에 

다른 모든 것을 배치하여 대화형 애니메이션을 만들 수 있습니다. 

방문자가 페이지를 스크롤할 때 스크롤 효과 설정은 

기본 타임라인에서 애니메이션 요소 재생만 제어합니다. 

[스크롤 효과] 패널에서 [슬라이드 쇼] 탭을 사용하려면 다음 단계를 수행하십시오.

1.

Adobe Edge Animate에서 OAM 파일을 내보낸 다음 사이트 폴더에 저장합니다. 

2.

Muse를 실행하고 페이지를 두 번 클릭하여 디자인 보기에서 엽니다. 

[페이지 속성] 대화 상자에서 최소 높이 설정을 업데이트하거나 페이지 컨텐트를 추가하여 

더 긴 페이지를 만들어서 스크롤하기에 페이지 길이가 충분한지 확인합니다.

3.

[파일] > [배치]를 선택하고 사이트 폴더에서 OAM 파일을 찾아서 선택합니다.

4.

[스크롤 효과] 패널을 엽니다. [Adobe Edge Animate] 탭(왼쪽에서 네 번째 탭)을 클릭하여 

이 섹션에 대한 설정을 검토합니다. 

5.

OAM 파일을 선택한 상태에서 [Edge Animate] 확인란을 선택합니다(그림 17 참조).  

 

그림 18. 페이지가 특정 위치로 스크롤될 때 재생을 시작하도록 Edge Animate 애니메이션을 

설정하거나 페이지가 특정 거리(픽셀 단위)를 스크롤할 때마다 프레임을 전환하도록 설정합니다.   

 

그림 18에서 키 위치는 50픽셀로 설정되어 있습니다. T 핸들을 드래그하거나 키 위치 필드에 

다른 값을 입력하여 키 위치를 조정할 수 있습니다.

키 위치를 설정한 후에 다음 두 가지 옵션을 사용하여 애니메이션 재생을 제어할 수 있습니다. 

자동재생 : 이 옵션을 선택한 경우에는 기본 타임라인의 프레임 수에 관계없이 

브라우저가 키 위치로 스크롤되면 바로 기본 타임라인의 애니메이션이 재생을 시작합니다. 

페이지가 키 위치 위로 스크롤될 때까지 애니메이션이 계속 재생됩니다.

프레임 전환 간격: 이 옵션을 선택한 경우에는 페이지가 특정 픽셀 수를 지나서 

스크롤될 때마다 기본 타임라인 애니메이션이 1 프레임씩 넘어갑니다. 

예를 들어, 3000픽셀 이상인 페이지를 만들고 숫자 10을 입력하면 기본 타임라인

 애니메이션은 페이지가 스크롤되는 10픽셀마다 1 프레임 비율로 재생됩니다. 

방문자가 페이지를 빠르게 아래로 스크롤하면 애니메이션 비율이 늘어납니다.

참고: 

컴포지션의 기본 타임라인에서 중첩되었거나 연결된 모든 Adobe Edge Animate 

컴포지션은 스크롤 동작 효과 설정이 적용되지 않습니다.

 따라서 페이지를 스크롤하기 위한 방문자의 상호 작용에 관계없이 일관되게 

이동하는 반복되는 중첩된 요소나 고정 배경을 갖도록 선택할 수 있습니다.

 

 

6.

[스크롤 효과] 패널의 [Edge Animate] 탭에서 설정을 선택한 후에 

[파일] > [브라우저에서 페이지 미리 보기]를 선택하거나 [미리 보기] 단추를 클릭합니다. 

위아래로 스크롤하며 페이지를 테스트하여 기본 타임라인에 추가된

 Edge Animate 애니메이션 컨텐트 재생을 확인합니다.

7.변경해야 하는 경우에는 Muse로 돌아가거나 [디자인] 단추를 클릭하고 

[스크롤 효과] 패널에서 설정을 업데이트합니다.

스크롤 효과 패널의 Adobe Edge Animate 탭 작업

 <adobe muse : Working with the Adobe Edge Animate tab of the Scroll Effects panel>

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