01 de 05
Engadir o vídeo a Adobe Muse
O aspecto realmente interesante de Adobe Muse é que permite crear páxinas web usando un fluxo de traballo similar ao usado para publicar publicacións. Non precisa unha comprensión profunda do código que constrúe un sitio ou páxina, pero a familiaridade con HTML5, CSS e JavaScript non fará mal.
Aínda que o vídeo web tradicional xeralmente se engade mediante o uso da API de vídeo HTML5, Adobe Muse realiza o mesmo co que chama "widgets". Os widgets crean o HTML 5 necesario para tarefas específicas pero usan unha interface de linguaxe simple en Muse para escribir o código cando se publica a páxina.
Neste exercicio, imos usar un widget que pode descargar gratuitamente de Muse Resources. Cando as descargas de widgets, o único que tes que facer é abrir o ficheiro .zip e facer un dobre clic no ficheiro .mulib na carpeta de Vídeo Pantalla Completa. Isto instalarase na súa copia de Adobe Muse.
02 de 05
Como preparar unha páxina para o vídeo de fondo en Adobe Muse CC
Co widget instalado, agora podes crear a páxina que usará o vídeo.
Antes de comezar, cree un cartafol para o seu sitio Muse. Dentro dese cartafol creamos outro cartafol - Eu uso " medios " - e mova as súas versións mp4 e webm do vídeo nese cartafol.
Cando execute Muse, seleccione Ficheiro> Novo sitio . Cando se abre o cadro de diálogo Deseño, seleccione Escritorio como o Deseño inicial e cambie os valores de Ancho de Páxina e Alto da páxina a 1200 e 900 . Faga clic en Aceptar .
Fai dobre clic na páxina maestra na vista do Plan para abrir a páxina maestra. Cando se abra a páxina principal move as guías de cabeceira e pé de páxina á parte superior e inferior da páxina. Realmente non necesitas un encabezado e pé de páxina para este exemplo.
03 de 05
Como usar o widget de vídeo de fondo en pantalla completa en Adobe Muse CC
Usar o widget é morto simple. O primeiro que tes que facer é volver á vista do Plan seleccionando Ver> Modo de plan . Cando se abre a vista do Plan, faga dobre clic na páxina de inicio para abrilo.
Abra o panel da biblioteca - se non está aberto no lado dereito da interface, seleccione Fiestra> Biblioteca - e xira cara abaixo o cartafol de fondo de fondo en pantalla completa [MR] . Arrastra o widget ao cartafol cara á páxina.
Notarás que as Opcións solicitan que insiras os nomes das versións mp4 e webm dos vídeos. Insira os nomes exactamente como están escritos no cartafol onde os colocou. Un pequeno truco para asegurarte de non cometer un erro é copiar o nome do vídeo mp4 e pegarlo nas áreas MP4 e WEBM dende o menú Opcións .
Outro truco: todo este widget fai é escribir o código HTML 5 para ti. Podes dicir isto porque ves <> no widget. Neste caso, pode colocar o widget fóra da páxina web no rótulo e seguirá funcionando. Deste xeito non interfire con ningún contido que poñerás na páxina.
04 de 05
Como engadir vídeo e probar unha páxina en Adobe Muse CC
Aínda que engadiches o código que reproducirá os vídeos, Muse aínda non ten unha pista onde se atopan eses vídeos. Para solucionar isto, seleccione Ficheiro> Engadir ficheiros para cargar . Cando se abre o cadro de diálogo de Subida, navega ata o cartafol que contén os teus vídeos, selecciónelos e fai clic en Abrir . Para garantir que se cargasen, abra o panel de Activos e debes ver os teus dous videos. Só deixalos no panel. Non necesitan ser colocados na páxina.
Para probar o proxecto, seleccione Ficheiro> Vista previa Páxina no navegador ou, porque esta é unha única páxina, Ficheiro> Vista previa do sitio no navegador . O navegador predeterminado abrirase e o video - no meu caso unha tormenta tropical - comezará a xogar.
Neste punto, pode tratar o ficheiro Muse como unha páxina web regular e engadir contido á páxina de inicio e reproducirase o vídeo debaixo dela.
05 de 05
Como engadir un marco de póster de vídeo en Adobe Muse CC
Esta é a web que estamos a falar aquí e, dependendo da velocidade da conexión, hai unha boa oportunidade de que o usuario poida abrir a páxina e mirar unha pantalla en branco mentres se carga o vídeo. Isto non é bo. Vexa como tratar con este pouco de maldade.
É unha "mellor práctica" incluír un marco de póster do vídeo, que aparecerá mentres se carga o vídeo. Esta é xeralmente unha captura de pantalla de tamaño completo dun cadro do vídeo.
Para engadir o marco do póster faga clic unha vez no recheo do navegador na parte superior da páxina. Faga clic na ligazón Imaxe e navega ata a imaxe que se vai usar. Na área Fitting , seleccione Escalar para encher e prema no punto Centro na área Posición . Isto asegurará que a imaxe escale sempre desde o centro da imaxe cando cambie o tamaño da xanela do navegador. Tamén verás que a imaxe enche a páxina.
Outro pequeno truco é polo menos ter unha cor sólida, non branca, por si só o marco do póster tarda un pouco en aparecer. Para facelo prema no chip Color para abrir o selector de cor Muse. Selecciona a ferramenta de cortador e fai clic nunha cor predominante na imaxe. Cando remate, prema na páxina para pechar a caixa de diálogo Recheo do navegador.
Neste punto, podes gardar o proxecto ou publicalo.