Añadiendo el video a Adobe Muse
El aspecto realmente interesante de Adobe Muse es que le permite crear páginas web utilizando un flujo de trabajo similar al utilizado para diseñar publicaciones. No necesitas un conocimiento profundo del código que construye un sitio o una página, pero la familiaridad con HTML5, CSS y JavaScript no te hará daño.
Aunque el video web tradicional generalmente se agrega mediante el uso de la API de video HTML5, Adobe Muse logra lo mismo a través de lo que llama "widgets". Los widgets crean el HTML 5 requerido para tareas específicas, pero utilizan una interfaz de lenguaje sencillo en Muse para escribir el código cuando se publica la página.
En este ejercicio, usaremos un widget que puede descargar, de forma gratuita, de Muse Resources. Cuando se descargue el widget, todo lo que debe hacer es abrir el archivo .zip y hacer doble clic en el archivo .mulib en la carpeta Video de pantalla completa. Esto lo instalará en su copia de Adobe Muse.
Cómo preparar una página para el vídeo 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 Muse. Dentro de esa carpeta cree otra carpeta - yo uso " medios de comunicación ”- y mueva las versiones mp4 y webm del video a esa carpeta.
Cuando lanzas Muse selecciona Archivo> Nuevo sitio. Cuando se abra el cuadro de diálogo Diseño, seleccione Escritorio como el Diseño inicial y cambiar el Ancho de página y Altura de página valores a 1200 y 900. Hacer clic DE ACUERDO.
Haga doble clic en la página maestra en la vista de plano para abrir la página maestra. Cuando se abra la Página maestra, mueva las guías de Encabezado y Pie de página a la parte superior e inferior de la página. Realmente no necesitas un encabezado y pie de página para este ejemplo.
03 de 05Cómo usar el widget de video de fondo en pantalla completa en Adobe Muse CC
Usar el widget es muy simple. Lo primero que debe hacer es regresar a la Vista del plan seleccionando Ver> Modo plan. Cuando se abra la vista de plano, haga doble clic en Página de inicio Para abrirlo.
Abra el panel Biblioteca, si no está abierto en el lado derecho de la interfaz, seleccione Ventana> Biblioteca - y girar hacia abajo la MR Video de fondo a pantalla completa carpeta. Arrastre el widget a la carpeta a la página.
Notarás la Opciones pedirle 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 errores es copiar el nombre del video mp4 y pegarlo en el MP4 y WEBM áreas de la Menú de opciones.
Otro truco: todo lo que hace este widget es escribir el código HTML 5 por ti. Puedes decir esto porque ves <> en el widget. En este caso, puede colocar el widget fuera de la página web en la mesa de trabajo y seguirá funcionando. De esta manera no interfiere con ningún contenido que colocarás en la página.
04 de 05Cómo agregar video y probar una página en Adobe Muse CC
Aunque ha agregado el código que reproducirá los videos, Muse aún no tiene una pista de dónde se encuentran esos videos. Para solucionar esto, seleccione Archivo> Agregar archivos para subir. Cuando el Cuadro de diálogo de carga abre navega a la carpeta que contiene tus videos, selecciónalos y haz clic en Abierto. Para asegurarse de que se han cargado, abra el Panel de activos y deberías ver tus dos videos. Solo dejalos en el panel. No es necesario colocarlos en la página.
Para probar el proyecto seleccione Archivo> Vista previa de la página en el navegador o, porque esta es una sola página, Archivo> Vista previa del sitio en el navegador. Su navegador predeterminado se abrirá y el video, en mi caso una tormenta tropical, comenzará a reproducirse.
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 de él.
05 de 05Cómo agregar un fotograma de póster de video en Adobe Muse CC
Esta es la red de la que estamos hablando aquí y, dependiendo de la velocidad de conexión, es muy probable que su usuario pueda abrir la página y mirar una pantalla en blanco mientras se carga el video. Esto no es bueno. Aquí es cómo lidiar con este poco de maldad.
Es una "mejor práctica" incluir un cuadro de póster del video, que aparecerá mientras se carga el video. Esto suele ser una captura de pantalla de tamaño completo de un fotograma del video.
Para agregar el marco del póster haga clic una vez en Relleno del navegador en la parte superior de la página. Haga clic en el Enlace de imágen y navega a la imagen a utilizar. En el Adecuado área, seleccione Escala para llenar y haga clic en el Punto central en el Posición zona. Esto asegurará que la imagen siempre se escalará desde el centro de la imagen cuando cambie el tamaño de la ventana gráfica del navegador. También verás que la imagen llena la página.
Otro pequeño truco es tener al menos un color de relleno sólido, no blanco, en caso de que el marco del póster tarde un poco en aparecer. Para ello, haga clic en el chip de 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 muestra cómo escribir el código HTML5 que desliza un video en el fondo de una página web.
