Part 3 de com crear vídeo en segon pla

01 de 05

Afegint el vídeo a Adobe Muse

El vídeo de fons és fàcil d'agregar a Muse gràcies a un widget gratuït.

L'aspecte realment interessant d'Adobe Muse és que us permet crear pàgines web amb un flux de treball semblant al que s'utilitza per publicar publicacions. No necessiteu una comprensió profunda del codi que construeix un lloc o pàgina, però la familiaritat amb HTML5, CSS i JavaScript no farà mal.

Encara que generalment s'afegeix el vídeo web tradicional mitjançant l'ús de l'API de vídeo HTML5, Adobe Muse realitza el mateix a través del que s'anomena "widgets". Els widgets creen l'HTML 5 requerit per a tasques específiques, però utilitzen una interfície d'idioma senzill a Muse per escriure el codi quan es publica la pàgina.

En aquest exercici, anem a utilitzar un widget que podeu descarregar, de forma gratuïta, des de Muse Resources. Quan les baixades de widgets, tot el que heu de fer és obrir el fitxer .zip i feu doble clic al fitxer .mulib a la carpeta de vídeo de pantalla completa. Això ho instal·larà a la vostra còpia d'Adobe Muse.

02 de 05

Com preparar una pàgina per al vídeo de fons a Adobe Muse CC

Comencem creant un nou lloc i configurant les dimensions de la pàgina.

Amb el widget instal·lat, ara podeu crear la pàgina que usarà el vídeo.

Abans de començar, creeu una carpeta per al vostre lloc Muse. A l'interior d'aquesta carpeta, creeu una altra carpeta: utilitzo " mitjans " i mudeu les vostres versions mp4 i webm del vídeo en aquesta carpeta.

Quan executeu Muse, seleccioneu Fitxer> Nou lloc . Quan s'obre el quadre de diàleg Disseny, seleccioneu Desktop com a disposició inicial i canvieu els valors de l' amplada de pàgina i alçada de pàgina a 1200 i 900 . Feu clic a Acceptar .

Feu doble clic a la pàgina mestra en la vista del pla per obrir la pàgina Màster. Quan s'obre la pàgina mestra es mouen les guies de capçalera i peu de pàgina a la part superior i inferior de la pàgina. Realment no necessiteu cap encapçalat i peu de pàgina per a aquest exemple.

03 de 05

Com s'utilitza el widget de vídeo de fons en pantalla completa a Adobe Muse CC

Tot el que heu de fer és afegir els noms del vídeo i deixar que el widget manegi la resta.

L'ús del widget és simple mort. El primer que heu de fer és tornar a la vista del pla seleccionant Visualitza> Mode del pla . Quan s'obre la vista del pla, feu doble clic a la pàgina d'inici per obrir-lo.

Obriu el tauler de la biblioteca: si no està obert al costat dret de la interfície, seleccioneu Finestra> Biblioteca - i gireu cap avall a la carpeta de vídeo de fons de pantalla completa [MR] . Arrossega el widget a la carpeta a la pàgina.

Notaràs que les Opcions us demanen que introduïu els noms de les versions mp4 i webm dels vídeos. Introduïu els noms exactament tal com s'especifiquen a la carpeta on els col·labora. Un petit truc per assegurar-vos que no cometiu cap error és copiar el nom del vídeo mp4 i enganxar-lo a les àrees MP4 i WEB del menú Opcions .

Un altre truc: tot aquest widget és escriure el codi HTML 5 per a tu. Podeu indicar-ho perquè veieu <> al widget. En aquest cas, podeu col·locar el widget des de la pàgina web al tauler posterior i seguirà funcionant. D'aquesta manera, no interfereix amb cap contingut que inclogueu a la pàgina.

04 de 05

Com afegir vídeo i provar una pàgina a Adobe Muse CC

Hi ha un vídeo que es reprodueix quan prova el lloc o la pàgina.

Encara que hàgiu afegit el codi que reproduirà els vídeos, Muse encara no té cap pista on es troben aquests vídeos. Per solucionar-ho, seleccioneu Fitxer> Afegeix fitxers per carregar . Quan s'obre el quadre de diàleg de càrrega , navegueu fins a la carpeta que conté els vostres vídeos, seleccioneu-los i feu clic a Obre . Per assegurar-vos que s'han penjat, obriu el panell d'Actius i heu de veure els vostres dos vídeos. Només deixeu-los al tauler. No cal que es col·loquin a la pàgina.

Per provar el projecte, seleccioneu Fitxer> Pàgina de visualització prèvia al navegador o, ja que aquesta és una pàgina única, Fitxer> Vista prèvia del lloc al navegador . El vostre navegador predeterminat s'obrirà i el vídeo, en el meu cas una tempesta tropical, començarà a jugar.

En aquest moment, podeu tractar el fitxer Muse com una pàgina web regular i afegir contingut a la pàgina d'inici i el vídeo es reproduirà per sota d'ell.

05 de 05

Com afegir un marc de póster de vídeo a Adobe Muse CC

Afegiu sempre un marc de pòster a qualsevol projecte de vídeo.

Aquesta és la web que parlem aquí i, depenent de la velocitat de connexió, hi ha moltes possibilitats que el vostre usuari pugui obrir la pàgina i mirar una pantalla en blanc mentre es carregui el vídeo. Això no és bo. A continuació us indiquem com fer front a aquesta mena de maldat.

Es tracta d'una "Millor pràctica" per incloure un marc de pòsters del vídeo, que apareixerà mentre es carrega el vídeo. Normalment, aquesta és una captura de pantalla de mida completa d'un marc del vídeo.

Per afegir el marc del pòster, feu clic una vegada a la pàgina " Completar el navegador" a la part superior de la pàgina. Feu clic a l' enllaç Imatge i navegueu fins a la imatge que voleu utilitzar. A l'àrea Arranjament , seleccioneu Escalar a omplir i feu clic al punt Centre a l'àrea Posició . Això garantirà que la imatge s'escalfarà sempre des del centre de la imatge quan canvia la mida de la finestra del navegador. També veureu la imatge omplint la pàgina.

Un altre truc és que, com a mínim, tingueu un color de color sòlid i no blanc en cas que el marc del cartell trigui un temps a aparèixer. Per fer-ho, feu clic al xip Color per obrir el selector de colors Muse. Seleccioneu l'eina de comptagotes i feu clic en un color predominant a la imatge. Quan hagueu acabat, feu clic a la pàgina per tancar el quadre de diàleg de farciment del navegador.

En aquest moment, podeu desar el projecte o publicar-lo.

La part final d'aquesta sèrie us mostra com escriure el codi HTML5 que desplaça un vídeo a fons de la pàgina web.