배경 비디오를 만드는 방법 중 3 부

01 / 05

Adobe Muse에 비디오 추가

Muse에서는 무료 위젯 덕분에 배경 비디오를 쉽게 추가 할 수 있습니다.

Adobe Muse의 정말 흥미로운 점은 게시를 배치하는 데 사용되는 것과 유사한 워크 플로를 사용하여 웹 페이지를 만들 수 있다는 것입니다. 사이트 또는 페이지를 만드는 코드를 깊이 이해할 필요는 없지만 HTML5, CSS 및 JavaScript에 익숙하지 않아도됩니다.

전통적인 웹 비디오는 대개 HTML5 Video API를 사용하여 추가되지만 Adobe Muse는 "위젯 (widget)"을 통해 동일한 작업을 수행합니다. 위젯은 특정 작업에 필요한 HTML 5를 만들지 만, 페이지가 게시 될 때 Muse의 일반 언어 인터페이스를 사용하여 코드를 작성합니다.

이 실습에서는 Muse 리소스에서 무료로 다운로드 할 수있는 위젯을 사용하려고합니다. 위젯이 다운로드되면 .zip 파일을 열고 전체 화면 비디오 폴더에서 .mulib 파일을 두 번 클릭하면됩니다. 이렇게하면 Adobe Muse 사본에 해당 파일이 설치됩니다.

02 of 02

Adobe Muse CC에서 백그라운드 비디오 용 페이지를 준비하는 방법

먼저 새 사이트를 만들고 페이지 크기를 설정합니다.

위젯을 설치하면 비디오를 사용할 페이지를 만들 수 있습니다.

시작하기 전에 Muse 사이트의 폴더를 만드십시오. 그 폴더 안에 또 다른 폴더를 만듭니다. " 미디어 "를 사용하고 비디오의 mp4 및 webm 버전을 해당 폴더로 이동합니다.

Muse를 실행하면 파일> 새 사이트를 선택하십시오. 레이아웃 대화 상자가 열리면 초기 레이아웃 으로 데스크톱 을 선택하고 페이지 너비페이지 높이 값을 1200900으로 변경하십시오 . 확인을 클릭하십시오.

평면 뷰에서 마스터 페이지를 두 번 클릭하여 마스터 페이지를 엽니 다. 마스터 페이지가 열리면 머리글 및 바닥 글 안내선이 페이지의 위쪽과 아래쪽으로 이동합니다. 이 예제에서는 실제로 머리글과 바닥 글이 필요 없습니다.

03 of 05

Adobe Muse CC에서 전체 화면 배경 비디오 위젯을 사용하는 방법

비디오 이름을 추가하고 위젯이 나머지를 처리하도록하기 만하면됩니다.

위젯을 사용하는 것은 간단합니다. 가장 먼저해야 할 일은 보기> 계획 모드를 선택하여 평면보기로 돌아가는 것입니다. 평면 뷰가 열리면 홈 페이지 를 두 번 클릭하여 엽니 다.

라이브러리 패널을 엽니 다. 인터페이스의 오른쪽에서 열려 있지 않으면 윈도우> 라이브러리를 선택하고 [MR] 전체 화면 배경 비디오 폴더를 돌립니다. 위젯을 페이지의 폴더로 드래그하십시오.

옵션 을 사용하면 비디오의 mp4 및 webm 버전 이름을 입력하라는 메시지가 나타납니다. 이름을 입력 한 폴더의 철자와 정확히 일치하는 이름을 입력하십시오. 실수를하지 않도록하는 작은 트릭은 mp4 비디오의 이름을 복사하여 옵션 메뉴MP4WEBM 영역에 붙여 넣는 것입니다.

다른 하나의 트릭 :이 위젯은 HTML 5 코드를 작성하는 것입니다. 위젯에서 <> 를 볼 수 있기 때문에이를 알 수 있습니다. 이 경우 웹 페이지에서 위젯을 붙여 넣을 수 있으며 여전히 작동합니다. 이렇게하면 페이지에 배치 할 내용을 방해하지 않습니다.

04 / 05

Adobe Muse CC에서 비디오를 추가하고 테스트하는 방법

사이트 또는 페이지를 테스트 할 때 비디오가 재생됩니다.

동영상을 재생할 코드를 추가했지만 Muse는 여전히 해당 동영상이있는 위치를 알 수 없습니다. 이를 수정하려면 파일> 업로드 할 파일 추가를 선택하십시오. 업로드 대화 상자 가 열리면 동영상이 포함 된 폴더로 이동하여 파일을 선택한 다음 열기를 클릭하십시오. 동영상이 업로드되었는지 확인하려면 에셋 패널을 열고 두 개의 동영상이 표시되어야합니다. 패널에두면됩니다. 페이지에 배치 할 필요는 없습니다.

프로젝트를 테스트하려면 파일> 브라우저에서 페이지 미리보기를 선택하거나 단일 페이지이기 때문에 파일> 브라우저에서 사이트 미리보기를 선택 하십시오. 기본 브라우저가 열리고 비디오 (내 경우에는 열대성 폭풍우)가 재생됩니다.

이 시점에서 Muse 파일을 일반 웹 페이지로 처리하고 홈 페이지에 컨텐츠를 추가하면 비디오가 그 아래에서 재생됩니다.

05/05

Adobe Muse CC에서 비디오 포스터 프레임을 추가하는 방법

모든 비디오 프로젝트에 항상 포스터 프레임을 추가하십시오.

이것은 우리가 여기서 말하는 웹이며, 연결 속도에 따라 비디오가로드되는 동안 사용자가 페이지를 열고 빈 화면을 응시 할 가능성이 있습니다. 이것은 좋은 것이 아닙니다. 다음은 이러한 불쾌 함을 다루는 방법입니다.

동영상이로드되는 동안 표시 될 동영상의 포스터 프레임을 포함하는 것이 "우수 사례"입니다. 이것은 대개 비디오의 프레임을 전체 화면으로 촬영 한 것입니다.

포스터 프레임을 추가하려면 페이지 상단의 브라우저 채우기 를 한 번 클릭하십시오. 이미지 링크를 클릭하고 사용할 이미지를 찾습니다. 피팅 영역에서 채우기 위해 스케일을 선택하고 위치 영역에서 중심점 을 클릭합니다. 이렇게하면 브라우저의 뷰포트 크기가 변경 될 때 이미지가 이미지의 중심에서 항상 확장됩니다. 또한 이미지가 페이지를 채우는 것을 볼 수 있습니다.

또 다른 작은 트릭은 적어도 포스터 프레임이 나타날 때를 대비하여 흰색 채우기 색상이 아닌 단색을 유지하는 것입니다. 이렇게하려면 색상 칩을 클릭하여 Muse 색상 선택기를 엽니 다. 스포이드 도구를 선택하고 이미지에서 우세한 색상을 클릭하십시오. 작업이 끝나면 페이지를 클릭하여 브라우저 채우기 대화 상자를 닫습니다.

이 시점에서 프로젝트를 저장하거나 게시 할 수 있습니다.

이 시리즈의 마지막 부분에서는 비디오를 웹 페이지의 배경으로 슬라이드시키는 HTML5 코드를 작성하는 방법을 설명합니다.