Qué saber
- Con la página Inicio en la vista Plan, vaya a Ventana >Library > [MR] Fullscreen Background Video y arrastre el widget a la página.
- Para agregar un video, vaya a Archivo > Agregar archivos para cargar > carpeta de videos > Abrir.
Adobe Muse le permite crear páginas web utilizando un flujo de trabajo similar al de las publicaciones; no necesita una comprensión profunda del código que crea un sitio o una página, aunque la familiaridad con HTML5, CSS y JavaScript no le hará daño. Aunque el video web tradicional generalmente se agrega a través de la API de video HTML5, Adobe Muse logra lo mismo a través de widgets que crean el HTML 5 requerido para tareas específicas, pero usan una interfaz de lenguaje sencillo en Muse para escribir el código cuando se publica la página.
Cómo preparar una página para video de fondo en Adobe Muse CC
Con el widget instalado, ahora puede crear la página que usará el video.
- Antes de comenzar, cree una carpeta para su sitio de Muse. Dentro de esa carpeta, cree otra carpeta (usamos "media") y mueva sus versiones mp4 y webm del video a esa carpeta.
- Cuando inicie Muse, seleccione Archivo > Nuevo sitio.
- Cuando se abra el cuadro de diálogo Diseño, seleccione Escritorio como Diseño inicial y cambie el Ancho de páginay Altura de página a 1200 y 900 . Haga clic en Aceptar.
-
Haga doble clic Página maestra en la vista del plan para abrir la página maestra. Cuando se abra la página maestra, mueva las guías de encabezado y pie de página hacia la parte superior e inferior de la página. Realmente no necesita un encabezado y pie de página para este ejemplo.
Cómo usar el widget de video de fondo de pantalla completa en Adobe Muse CC
Usar el widget es muy simple.
- Lo primero que debe hacer es volver a la Vista del plan seleccionando Ver > Modo plan.
- Cuando se abra la Vista del plano, haga doble clic en la Página de inicio para abrirla.
- Abra el panel Biblioteca; si no está abierto en el lado derecho de la interfaz, seleccione Ventana > Biblioteca – y gira hacia abajo la carpeta [MR] Fullscreen Background Video.
- Arrastre el widget de carpeta a la página.
-
Notará que las Opciones le piden que ingrese los nombres de las versiones mp4 y webm de los videos. Ingrese los nombres exactamente como están escritos en la carpeta donde los colocó. Un pequeño truco para asegurarse de no cometer un error es copiar el nombre del video mp4 y pegarlo en las áreas MP4 y WEBM. del menú Opciones
Otro truco: todo lo que hace este widget es escribir el código HTML 5 por ti. Puedes saber esto porque lo ves en el widget. En este caso, puede colocar el widget de la página web en la mesa de trabajo y seguirá funcionando. De esta manera, no interfiere con ningún contenido que colocará en la página.
Cómo agregar video y probar una página en Adobe Muse CC
Aunque agregó el código que reproducirá los videos, Muse aún no sabe dónde se encuentran esos videos.
- Para solucionar esto, seleccione Archivo > Agregar archivos para cargar.
- Cuando se abra el cuadro de diálogo Subir, vaya a la carpeta que contiene sus videos, selecciónelos y haga clic en Abrir.
-
Para asegurarse de que se hayan subido, abra el panel de Activos,y debería ver sus dos videos. Solo déjalos en el panel. No es necesario colocarlos en la página.
- Para probar el proyecto, seleccione Archivo > Página de vista previa en el navegador o, dado que se trata de una sola página, Archivo > Vista previa del sitio en el navegador. Se abrirá su navegador predeterminado y se reproducirá el video.
- En este punto, puede tratar el archivo Muse como una página web normal y agregar contenido a la página de inicio, y el video se reproducirá debajo.
Cómo agregar un marco de póster de video en Adobe Muse CC
Esta es la web de la que estamos hablando aquí y, según la velocidad de la conexión, es muy probable que el usuario abra la página y mire una pantalla en blanco mientras se carga el video. Esto no es bueno. Así es como lidiar con este poco de maldad.
Es una "mejor práctica" incluir un marco de póster del video, que aparecerá mientras se carga el video. Suele ser una captura de pantalla a tamaño completo de un fotograma del vídeo.
- Para agregar el marco del póster, haga clic una vez en Browser Fill en la parte superior de la página.
- Haga clic en el Enlace de imagen y navegue hasta la imagen que se utilizará.
- En el área Ajuste, seleccione Escala para rellenar y haga clic en el Punto central en el área Posición. Esto asegurará que la imagen siempre se escale desde el centro de la imagen cuando cambie el tamaño de la ventana gráfica del navegador. También verá que la imagen llena la página.
- Otro pequeño truco es tener un color de relleno sólido en caso de que el marco del póster tarde en aparecer. Para hacer esto, haga clic en el chip Color para abrir el selector de color de Muse. Seleccione la herramienta cuentagotas y haga clic en un color predominante en la imagen. Cuando haya terminado, haga clic en la página para cerrar el cuadro de diálogo Relleno del navegador.
-
En este punto, puede guardar el proyecto o publicarlo.
La parte final de esta serie le muestra cómo escribir el código HTML5 que desliza un video en el fondo de una página web.
