What to Know
- Med Hjem-siden i Plan-visningen, gå til Window >Bibliotek > [MR] Bakgrunnsvideo i fullskjerm mappe og dra widgeten til siden.
- For å legge til en video, gå til Fil > Legg til filer for opplasting > videomappen > Open.
Adobe Muse lar deg lage nettsider ved å bruke en lignende arbeidsflyt som publikasjoner; du trenger ikke en dyp forståelse av koden som bygger et nettsted eller en side, selv om kjennskap til HTML5, CSS og JavaScript ikke vil skade. Selv om tradisjonell nettvideo vanligvis legges til gjennom HTML5 Video API, oppnår Adobe Muse det samme gjennom widgets som lager HTML 5 som kreves for spesifikke oppgaver, men bruker et vanlig språkgrensesnitt i Muse for å skrive koden når siden publiseres.
Hvordan forberede en side for bakgrunnsvideo i Adobe Muse CC
Med widgeten installert kan du nå opprette siden som skal bruke videoen.
- Før du begynner, lag en mappe for Muse-siden din. Inne i den mappen, opprett en annen mappe – vi bruker “media” – og flytt mp4- og webm-versjonene av videoen til den mappen.
- Når du starter Muse, velg Fil > New Site.
- Når dialogboksen Layout åpnes, velg Desktop som Initial Layout og endre Page Widthog Page Height verdier til 1200 og 900 . Klikk OK.
- Dobbeltklikk Hovedside i planvisningen for å åpne hovedsiden. Når hovedsiden åpnes, flytter du topp- og bunntekstguidene til toppen og bunnen av siden. Du trenger egentlig ikke topp- og bunntekst for dette eksemplet.
Hvordan bruke fullskjermsbakgrunnsvideowidgeten i Adobe Muse CC
Det er ganske enkelt å bruke widgeten.
- Det første du må gjøre er å gå tilbake til planvisningen ved å velge View > Plan Mode.
- Når planvisningen åpnes, dobbeltklikker du på hjemmesiden for å åpne den.
- Åpne bibliotekpanelet – hvis det ikke er åpent på høyre side av grensesnittet, velg Window > Library – og vri ned [MR] Bakgrunnsvideo i fullskjerm-mappen.
- Dra mappewidgeten til siden.
-
Du vil legge merke til at Options ber deg skrive inn navnene på mp4- og webm-versjonene av videoene. Skriv inn navnene nøyaktig slik de er stavet i mappen der du plasserte dem. Et lite triks for å sikre at du ikke gjør en feil er å kopiere navnet på mp4-videoen og lime den inn i MP4 og WEBM-områdene av Options-menyen
Et annet triks: Alt denne widgeten gjør er å skrive HTML 5-koden for deg. Du kan fortelle dette fordi du ser i widgeten. I dette tilfellet kan du plassere widgeten fra nettsiden på limbrettet, og den vil fortsatt fungere. På denne måten forstyrrer den ikke innholdet du vil plassere på siden.
Hvordan legge til video og teste en side i Adobe Muse CC
Selv om du har lagt til koden som skal spille av videoene, vet Muse fortsatt ikke hvor disse videoene er plassert.
- For å fikse dette, velg Fil > Legg til filer for opplasting.
- Når Opplastingsdialogboksen åpnes, naviger til mappen som inneholder videoene dine, velg dem og klikk Open.
- For å sikre at de er lastet opp, åpne Assets-panelet,og du bør se de to videoene dine. Bare la dem stå i panelet. De trenger ikke å plasseres på siden.
-
For å teste prosjektet, velg Fil > Forhåndsvisningsside i nettleseren eller, fordi dette er en enkelt side, Fil > Forhåndsvisning av nettstedet i nettleseren. Standardnettleseren din åpnes, og videoen spilles av.
- På dette tidspunktet kan du behandle Muse-filen som en vanlig nettside og legge til innhold på hjemmesiden, og videoen spilles av under den.
Hvordan legge til en videoplakatramme i Adobe Muse CC
Dette er nettet vi snakker om her, og avhengig av tilkoblingshastigheten er det en god sjanse for at brukeren din åpner siden og stirrer på en tom skjerm mens videoen lastes inn. Dette er ikke en god ting. Slik takler du denne biten ekkelhet.
Det er en «beste praksis» å inkludere en plakatramme av videoen, som vises mens videoen lastes inn. Dette er vanligvis et skjermbilde i full størrelse av en ramme fra videoen.
- For å legge til plakatrammen, klikk én gang på Browser Fill øverst på siden.
- Klikk Bildelinken og naviger til bildet som skal brukes.
-
I Fitting-området velger du Scale to Fill og klikker Center point i området Position. Dette vil sikre at bildet alltid skaleres fra midten av bildet når nettleserens visningsportstørrelse endres. Du vil også se bildet fylle siden.
- Et annet lite triks er å ha en solid fyllfarge i tilfelle det tar litt tid før plakatrammen vises. For å gjøre dette, klikk på Color-brikken for å åpne Muse-fargevelgeren. Velg eyedropper-verktøyet og klikk på en dominerende farge i bildet. Når du er ferdig, klikk på siden for å lukke dialogboksen Nettleserfyll.
-
På dette tidspunktet kan du lagre prosjektet eller publisere det.
Den siste delen av denne serien viser deg hvordan du skriver HTML5-koden som skyver en video inn i en nettsides bakgrunn.
