O que saber
- Com a página Home na visualização Plan, vá para Window >Biblioteca > [MR] Fullscreen Background Video pasta e arraste o widget para a página.
- Para adicionar um vídeo, vá para Arquivo > Adicionar arquivos para upload > pasta de vídeos > Open.
Adobe Muse permite que você crie páginas da web usando um fluxo de trabalho semelhante às publicações; você não precisa de uma compreensão profunda do código que cria um site ou página, embora a familiaridade com HTML5, CSS e JavaScript não prejudique. Embora o vídeo da Web tradicional seja geralmente adicionado por meio da API de vídeo HTML5, o Adobe Muse faz a mesma coisa por meio de widgets que criam o HTML 5 necessário para tarefas específicas, mas usam uma interface de linguagem simples no Muse para escrever o código quando a página é publicada.
Como preparar uma página para vídeo de fundo no Adobe Muse CC
Com o widget instalado, agora você pode criar a página que usará o vídeo.
- Antes de começar, crie uma pasta para o seu site Muse. Dentro dessa pasta, crie outra pasta – usamos “media” – e mova suas versões mp4 e webm do vídeo para essa pasta.
- Ao iniciar o Muse, selecione File > New Site.
- Quando a caixa de diálogo Layout for aberta, selecione Desktop como o Layout Inicial e altere a Page Widthe Page Height valores para 1200 e 900 . Clique em OK.
-
Clique duas vezes Master Page na visualização Plan para abrir a página Master. Quando a página mestra for aberta, mova as guias de cabeçalho e rodapé para a parte superior e inferior da página. Você realmente não precisa de um cabeçalho e rodapé para este exemplo.
Como usar o widget de vídeo em segundo plano em tela cheia no Adobe Muse CC
Usar o widget é muito simples.
- A primeira coisa que você precisa fazer é retornar à Plan View selecionando View > Plan Mode.
- Quando a Plan View abrir, clique duas vezes na Home page para abri-la.
- Abra o painel Library – se não estiver aberto no lado direito da Interface, selecione Window > Library – e gire a pasta [MR] Fullscreen Background Video.
- Arraste o widget de pasta para a página.
-
Você notará que as Options solicitam que você insira os nomes das versões mp4 e webm dos vídeos. Digite os nomes exatamente como estão escritos na pasta onde você os colocou. Um pequeno truque para garantir que você não cometa um erro é copiar o nome do vídeo mp4 e colá-lo nas áreas MP4 e WEBM do menu Opções
Outro truque: Tudo que este widget faz é escrever o código HTML 5 para você. Você pode dizer isso porque você vê no widget. Nesse caso, você pode colocar o widget da página da Web na área de trabalho e ele ainda funcionará. Dessa forma, não interfere em nenhum conteúdo que você colocará na página.
Como adicionar vídeo e testar uma página no Adobe Muse CC
Embora você tenha adicionado o código que reproduzirá os vídeos, o Muse ainda não sabe onde esses vídeos estão localizados.
- Para corrigir isso, selecione File > Adicionar arquivos para upload.
- Quando a caixa de diálogo Upload abrir, navegue até a pasta que contém seus vídeos, selecione-os e clique em Open.
-
Para garantir que eles foram enviados, abra o painel Assets,e você verá seus dois vídeos. Basta deixá-los no painel. Eles não precisam ser colocados na página.
- Para testar o projeto, selecione File > Preview Page In Browser ou, como esta é uma única página, Arquivo > Visualizar site no navegador. Seu navegador padrão será aberto e o vídeo será reproduzido.
- Neste ponto, você pode tratar o arquivo do Muse como uma página da Web normal e adicionar conteúdo à página inicial, e o vídeo será reproduzido abaixo dele.
Como adicionar um quadro de pôster de vídeo no Adobe Muse CC
Esta é a web que estamos falando aqui e, dependendo da velocidade da conexão, há uma boa chance de seu usuário abrir a página e ficar olhando para uma tela em branco enquanto o vídeo carrega. Isso não é uma coisa boa. Veja como lidar com esse pouco de maldade.
É uma “Prática recomendada” incluir um quadro de pôster do vídeo, que aparecerá enquanto o vídeo é carregado. Geralmente, é uma captura de tela em tamanho real de um quadro do vídeo.
- Para adicionar a moldura do pôster, clique uma vez em Preenchimento do navegador no topo da página.
- Clique no link Imagem e navegue até a imagem a ser usada.
- Na área Fitting, selecione Scale to Fill e clique no Center point em a área Posição. Isso garantirá que a imagem sempre será dimensionada a partir do centro da imagem quando o tamanho da janela de visualização do navegador for alterado. Você também verá a imagem preencher a página.
- Outro pequeno truque é ter uma cor de preenchimento sólida caso a moldura do pôster demore um pouco para aparecer. Para fazer isso, clique no chip Color para abrir o Muse Color Picker. Selecione a ferramenta conta-gotas e clique em uma cor predominante na imagem. Quando terminar, clique na página para fechar a caixa de diálogo Preenchimento do navegador.
-
Neste ponto, você pode salvar o projeto ou publicá-lo.
A parte final desta série mostra como escrever o código HTML5 que desliza um vídeo para o plano de fundo de uma página da web.
