Cosa sapere
- Con la pagina Home nella vista Plan, vai a Window >Library > [MR] Video di sfondo a schermo intero cartella e trascina il widget sulla pagina.
- Per aggiungere un video, vai a File > Aggiungi file da caricare > cartella video > Apri.
Adobe Muse ti consente di creare pagine web utilizzando un flusso di lavoro simile alle pubblicazioni; non è necessaria una profonda conoscenza del codice che costruisce un sito o una pagina, anche se la familiarità con HTML5, CSS e JavaScript non farà male. Sebbene il video Web tradizionale venga solitamente aggiunto tramite l'API video HTML5, Adobe Muse realizza la stessa cosa attraverso i widget che creano l'HTML 5 richiesto per attività specifiche ma utilizzano un'interfaccia in linguaggio semplice in Muse per scrivere il codice quando la pagina viene pubblicata.
Come preparare una pagina per un video in background in Adobe Muse CC
Con il widget installato, ora puoi creare la pagina che utilizzerà il video.
- Prima di iniziare, crea una cartella per il tuo sito Muse. All'interno di quella cartella, crea un' altra cartella - usiamo " media " - e sposta le tue versioni mp4 e webm del video in quella cartella.
- Quando avvii Muse, seleziona File > Nuovo sito.
- Quando si apre la finestra di dialogo Layout, seleziona Desktop come Layout iniziale e cambia Larghezza paginae Altezza pagina valori a 1200 e 900 . Fare clic su OK.
-
Fai doppio clic Pagina principale nella vista Plan per aprire la pagina principale. Quando si apre la Pagina Master, sposta le guide Intestazione e Piè di pagina nella parte superiore e inferiore della pagina. Non hai davvero bisogno di un'intestazione e un piè di pagina per questo esempio.
Come utilizzare il widget video in background a schermo intero in Adobe Muse CC
Utilizzare il widget è semplicissimo.
- La prima cosa che devi fare è tornare alla vista Plan selezionando View > Modalità Plan.
- Quando si apre la vista in pianta, fai doppio clic sulla Pagina iniziale per aprirla.
- Apri il pannello Libreria – se non è aperto sul lato destro dell'interfaccia, seleziona Window > Library – e ruota la cartella [MR] Video in background a schermo intero.
- Trascina il widget della cartella sulla pagina.
-
Noterai che le Opzioni ti chiedono di inserire i nomi delle versioni mp4 e webm dei video. Inserisci i nomi esattamente come sono scritti nella cartella in cui li hai inseriti. Un piccolo trucco per assicurarti di non commettere errori è copiare il nome del video mp4 e incollarlo nelle aree MP4 e WEBM 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 dalla pagina web sulla bacheca e continuerà a funzionare. In questo modo, non interferisce con alcun contenuto che posizionerai sulla pagina.
Come aggiungere video e testare una pagina in Adobe Muse CC
Sebbene tu abbia aggiunto il codice che riprodurrà i video, Muse non sa ancora dove si trovano quei video.
- Per risolvere questo problema, seleziona File > Aggiungi file da caricare.
- Quando si apre la Finestra di dialogo Carica, vai alla cartella contenente i tuoi video, selezionali e fai clic su Apri.
-
Per assicurarti che siano stati caricati, apri il pannello Risorse,e dovresti vedere i tuoi due video. Lasciali nel pannello. Non hanno bisogno di essere inseriti nella pagina.
- Per testare il progetto, seleziona File > Anteprima pagina nel browser oppure, poiché si tratta di una singola pagina, File > Anteprima del sito nel browser. Si aprirà il browser predefinito e il video verrà riprodotto.
- A questo punto, puoi trattare il file Muse come una normale pagina web e aggiungere contenuto alla Home page, e il video verrà riprodotto al di sotto di esso.
Come aggiungere una cornice per poster video in Adobe Muse CC
Questo è il Web di cui stiamo parlando qui e, a seconda della velocità di connessione, ci sono buone probabilità che il tuo utente apra la pagina e guardi uno schermo vuoto mentre il video viene caricato. Questa non è una buona cosa. Ecco come affrontare questo po' di cattiveria.
È una "buona pratica" includere un fotogramma poster del video, che apparirà durante il caricamento del video. Di solito si tratta di uno screenshot a grandezza naturale di un fotogramma del video.
- Per aggiungere la cornice del poster, fai clic una volta su Riempimento browser nella parte superiore della pagina.
- Fai clic sul Link immagine e vai all'immagine da utilizzare.
- Nell'area Fitting, seleziona Scale to Fill e fai clic sul Punto centrale in l'area Posizione. Ciò garantirà che l'immagine verrà sempre ridimensionata dal centro dell'immagine quando le dimensioni del riquadro di visualizzazione del browser cambiano. Vedrai anche l'immagine riempire la pagina.
- Un altro piccolo trucco è avere un colore di riempimento a tinta unita nel caso in cui la cornice del poster richieda un po' di tempo per apparire. Per fare ciò, fai clic sul chip Color per aprire il Selettore colore Muse. Seleziona lo strumento contagocce 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 mostra come scrivere il codice HTML5 che fa scorrere un video sullo sfondo di una pagina web.
