Aggiunta del video ad Adobe Muse
L'aspetto davvero interessante di Adobe Muse è che consente di creare pagine Web utilizzando un flusso di lavoro simile a quello utilizzato per disporre le pubblicazioni. Non hai bisogno di una conoscenza approfondita del codice che costruisce un sito o una pagina, ma una familiarità con HTML5, CSS e JavaScript non farà male.
Anche se i video web tradizionali vengono generalmente aggiunti tramite l'utilizzo dell'API video HTML5, Adobe Muse realizza la stessa cosa attraverso ciò che definisce "widget". I widget creano l'HTML 5 richiesto per attività specifiche, ma usano una semplice interfaccia in Muse per scrivere il codice quando la pagina viene pubblicata.
In questo esercizio, useremo un widget che puoi scaricare gratuitamente da Muse Resources. Quando il widget viene scaricato, tutto ciò che devi fare è aprire il file .zip e fare doppio clic sul file .mulib nella cartella Video a schermo intero. Questo lo installerà nella tua copia di Adobe Muse.
Come preparare una pagina per i video di sfondo in Adobe Muse CC
Con il widget installato, è ora possibile creare la pagina che utilizzerà il video.
Prima di iniziare, crea una cartella per il tuo sito Muse. Dentro quella cartella crea un'altra cartella - io uso " media "- e sposta le tue versioni mp4 e webm del video in quella cartella.
Quando avvii Muse select File> Nuovo sito. Quando si apre la finestra di dialogo Layout selezionare Desktop come il Layout iniziale e cambia il Larghezza della pagina e Altezza della pagina valori a 1200 e 900. Clic ok.
Fare doppio clic sulla Pagina master nella vista Plan per aprire la pagina Master. Quando si apre la pagina master, le guide di intestazione e piè di pagina si spostano in alto e in fondo alla pagina. Non hai davvero bisogno di un'intestazione e di un piè di pagina per questo esempio.
03 di 05Come utilizzare il widget video in background a schermo intero in Adobe Muse CC
L'utilizzo del widget è estremamente semplice. La prima cosa che devi fare è tornare alla vista Plan selezionando Visualizza> Modalità piano. Quando si apre la vista Plan, fare doppio clic su Pagina iniziale per aprirlo.
Apri il pannello Libreria: se non è aperto sul lato destro dell'interfaccia, seleziona Finestra> Libreria - e volteggiare il MR Video di sfondo a schermo intero cartella. Trascina il widget nella cartella della pagina.
Noterai il Opzioni chiedi di inserire i nomi delle versioni mp4 e webm dei video. Inserisci i nomi esattamente come sono scritti nella cartella in cui li hai posizionati. Un piccolo trucco per assicurarti di non commettere errori è copiare il nome del video mp4 e incollarlo nel MP4 e WEBM aree del Menu Opzioni.
Un altro trucco: tutto ciò che fa questo widget è scrivere il codice HTML 5 per te. Puoi dirlo perché vedi <> nel widget. In questo caso, puoi posizionare il widget fuori dalla pagina Web sul tavolo di montaggio e funzionerà ancora. In questo modo non interferisce con i contenuti che inserirai nella pagina.
04 di 05Come aggiungere video e testare una pagina in Adobe Muse CC
Anche se hai aggiunto il codice che riprodurrà i video, Muse non ha ancora la minima idea di dove si trovano quei video. Per risolvere questo problema, selezionare File> Aggiungi file per il caricamento. Quando il Carica finestra di dialogo si apre navigare nella cartella contenente i tuoi video, selezionarli e fare clic Aperto. Per assicurarti che siano stati caricati, apri il Pannello Risorse e dovresti vedere i tuoi due video. Lasciali nel pannello. Non è necessario che siano posizionati sulla pagina.
Per testare il progetto selezionare File> Pagina di anteprima nel browser o, perché questa è una singola pagina, File> Visualizza sito nel browser. Il tuo browser predefinito si aprirà e il video - nel mio caso un temporale tropicale - inizierà a suonare.
A questo punto, puoi trattare il file Muse come una normale pagina Web e aggiungere contenuti alla pagina iniziale e il video verrà riprodotto al di sotto di esso.
05 del 05Come aggiungere una cornice per poster video In Adobe Muse CC
Questo è il web di cui stiamo parlando e, a seconda della velocità di connessione, ci sono buone probabilità che il tuo utente possa aprire la pagina e guardare uno schermo vuoto mentre il video viene caricato. Questa non è una buona cosa. Ecco come affrontare questo pezzettino di cattiveria.
È una "Best Practice" per includere una cornice poster del video, che apparirà durante il caricamento del video. Generalmente si tratta di una schermata a schermo intero di una cornice del video.
Per aggiungere la cornice del poster, fare clic una volta su Riempimento del browser in cima alla pagina. Clicca il Collegamento immagine e vai all'immagine da utilizzare. Nel adattamento area, selezionare Ridimensiona per riempire e fare clic su Punto centrale nel Posizione la zona. Ciò garantirà che l'immagine venga sempre ridimensionata dal centro dell'immagine quando cambia la dimensione del viewport del browser. Vedrai anche l'immagine riempire la pagina.
Un altro piccolo trucco è di avere almeno un colore solido, non bianco, solo nel caso in cui il fotogramma del poster richieda un po 'di tempo per apparire. Per fare ciò, fai clic sul chip Colore per aprire il Selettore colori Muse. Seleziona lo strumento Eyedropper e fai clic su un colore predominante nell'immagine. Al termine, fare clic sulla pagina per chiudere la finestra di dialogo Riempimento browser.
A questo punto, puoi salvare il progetto o pubblicarlo.
La parte finale di questa serie ti mostra come scrivere il codice HTML5 che scorre un video sullo sfondo di una pagina web.
