Adicionando o vídeo ao Adobe Muse
O aspecto realmente interessante do Adobe Muse é que ele permite que você crie páginas da Web usando um fluxo de trabalho semelhante ao usado para distribuir publicações. Você não precisa entender profundamente o código que cria um site ou uma página, mas a familiaridade com HTML5, CSS e JavaScript não prejudicará.
Embora o vídeo tradicional da Web seja geralmente adicionado por meio do uso da API de vídeo HTML5, o Adobe Muse realiza a mesma coisa com o que chama de "widgets". Os widgets criam o HTML 5 necessário para tarefas específicas, mas usam uma interface de linguagem simples no Muse para gravar o código quando a página é publicada.
Neste exercício, vamos usar um widget que você pode baixar gratuitamente no Muse Resources. Quando o widget baixar, tudo o que você precisa fazer é abrir o arquivo .zip e clicar duas vezes no arquivo .mulib na pasta Vídeo em tela cheia. Isso irá instalá-lo na sua cópia do Adobe Muse.
Como preparar uma página para vídeo em segundo plano no Adobe Muse CC
Com o widget instalado, você pode criar a página que usará o vídeo.
Antes de começar, crie uma pasta para o seu site do Muse. Dentro dessa pasta criar outra pasta - eu uso “ meios de comunicação ”- e mova suas versões mp4 e webm do vídeo para essa pasta.
Quando você inicia o Muse, selecione Arquivo> Novo Site. Quando a caixa de diálogo Layout abrir, selecione Área de Trabalho Enquanto o Layout Inicial e mudar o Largura da página e Altura da página valores para 1200 e 900. Clique Está bem.
Clique duas vezes na Página Mestra na visão Plano para abrir a página Mestra. Quando a Página Mestra abrir, mova os guias Cabeçalho e Rodapé para a parte superior e a parte inferior da página. Você realmente não precisa de um cabeçalho e rodapé para este exemplo.
03 de 05Como usar o widget de vídeo em tela cheia no Adobe Muse CC
Usando o widget é absolutamente simples. A primeira coisa que você precisa fazer é retornar à Visualização do Plano selecionando Ver> Modo Plano. Quando a Vista do Plano abrir, clique duas vezes Pagina inicial para abri-lo.
Abra o painel Biblioteca - se ele não estiver aberto, no lado direito da interface, selecione Janela> Biblioteca - e rodopiar o MR Vídeos de fundo em tela cheia pasta. Arraste o widget para a pasta até a página.
Você vai notar o Opções peça para você inserir 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 erros é copiar o nome do vídeo mp4 e colá-lo no MP4 e WEBM áreas do Menu Opções.
Um outro truque: Tudo o que esse 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 fora da página da web na área de trabalho e ele ainda funcionará. Dessa forma, isso não interfere em nenhum conteúdo que você colocará na página.
04 de 05Como 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 tem a menor ideia de onde esses vídeos estão localizados. Para corrigir isso, selecione Arquivo> Adicionar arquivos para upload. Quando o Caixa de diálogo de upload abre navegue até a pasta que contém seus vídeos, selecione-os e clique em Abrir. Para garantir que eles foram enviados, abra o Painel Ativos e você deve ver seus dois vídeos. Apenas deixe-os no painel. Eles não precisam ser colocados na página.
Para testar o projeto, selecione Arquivo> Visualizar página no navegador ou, porque esta é uma única página, Arquivo> Visualizar site no navegador. Seu navegador padrão será aberto e o vídeo - no meu caso, uma tempestade tropical - começará a ser reproduzido.
Nesse 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 dela.
05 de 05Como adicionar um quadro de pôster de vídeo no Adobe Muse CC
Esta é a web que estamos falando aqui e, dependendo da velocidade de conexão, há uma boa chance de o usuário abrir a página e ficar olhando para uma tela em branco enquanto o vídeo é carregado. Isso não é uma coisa boa. Veja como lidar com esse problema.
É uma "Melhor prática" incluir um quadro de pôster do vídeo, que será exibido enquanto o vídeo é carregado. Isso geralmente é uma captura de tela em tamanho real de um quadro do vídeo.
Para adicionar o quadro de pôster, clique uma vez Preenchimento do navegador no topo da página. Clique no Link da imagem e navegue até a imagem a ser usada. No Apropriado área, selecione Escala para preencher e clique no Ponto central no Posição área. Isso garantirá que a imagem seja sempre dimensionada do centro da imagem quando o tamanho da viewport do navegador for alterado. Você também verá a imagem preencher a página.
Outro pequeno truque é pelo menos ter uma cor sólida de preenchimento não branco apenas para o caso de a moldura do cartaz demorar um pouco para aparecer. Para fazer isso, clique no chip Color para abrir o Seletor de Cores do Muse. 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.
