Legge til videoen til Adobe Muse
Det virkelig interessante aspektet av Adobe Muse er at det lar deg lage websider ved hjelp av en lignende arbeidsflyt til det som brukes til å legge ut publikasjoner. Du trenger ikke en dyp forståelse av koden som bygger et nettsted eller en side, men en kjennskap til HTML5, CSS og JavaScript vil ikke skade.
Selv om tradisjonell nettvideo vanligvis legges til ved bruk av HTML5 Video API, oppnår Adobe Muse det samme gjennom det det kaller "widgets". Widgets lager HTML 5 som kreves for spesifikke oppgaver, men bruk et grensesnitt for enkeltspråk i Muse for å skrive koden når siden publiseres.
I denne øvelsen skal vi bruke en widget som du gratis kan laste ned fra Muse Resources. Når widgetnedlastingene er alt, trenger du å åpne .zip-filen og dobbeltklikke på .mulib-filen i Full-Screen Video-mappen. Dette vil installere det i din kopi av Adobe Muse.
Slik lager du en side for bakgrunnsbilde i Adobe Muse CC
Med widgeten installert, kan du nå opprette siden som vil bruke videoen.
Før du begynner, opprett en mappe for Muse-siden din. Inside den mappen opprette en annen mappe - jeg bruker " media "- og flytt din mp4 og webm versjoner av videoen i den mappen.
Når du starter Muse velger du Fil> Nytt nettsted. Når dialogboksen Layout åpnes, velg Desktop som Første oppsett og endre Sidebredde og Sidens høyde verdier til 1200 og 900. Klikk OK.
Dobbeltklikk Mastersiden i Planvisning for å åpne Mastersiden. Når hovedsiden åpnes, flyttes topptekstene og bunntekstene til toppen og bunnen av siden. Du trenger virkelig ikke en header og bunntekst for dette eksempelet.
03 av 05Slik bruker du fullskjerm video bakgrunnsbilde i Adobe Muse CC
Bruke widgeten er død enkel. Det første du må gjøre er å gå tilbake til Planvisning ved å velge Vis> Planmodus. Når planvisningen åpnes, dobbeltklikk på Hjemmeside å åpne den.
Åpne Bibliotekspanelet - hvis det ikke er åpent på høyre side av grensesnittet velg Vindu> Bibliotek - og snurre ned MR Fullskjerm bakgrunnsbilde mappe. Dra widgeten til mappen til siden.
Du vil legge merke til alternativer be deg om å skrive inn navnene på mp4 og webm-versjonene av videoene. Skriv inn navnene nøyaktig slik de staves 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 det inn i MP4 og WebM områder av Alternativer-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 av nettsiden til fortabellen, og den vil fortsatt fungere. På denne måten forstyrrer det ikke noe innhold du vil plassere på siden.
04 av 05Slik legger du til video og test en side i Adobe Muse CC
Selv om du har lagt til koden som vil spille av videoene, har Muse fortsatt ingen anelse om hvor disse videoene er plassert. For å fikse dette, velg Fil> Legg til filer for opplasting. Når Last opp dialogboksen åpner navigere til mappen som inneholder videoene dine, velg dem og klikk Åpen. For å sikre at de har blitt lastet opp, åpne Aktivitetspanel 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åndsvis side i nettleser eller fordi dette er en enkelt side, Fil> Forhåndsvisning Nettsted I Nettleser. Standard nettleseren din vil åpne og videoen - i mitt tilfelle en tropisk regnstorm - vil begynne å spille.
På dette tidspunktet kan du behandle Muse-filen som en vanlig nettside og legge til innhold på hjemmesiden, og videoen vil spille under den.
05 av 05Slik legger du til en videopostramme i Adobe Muse CC
Dette er nettet vi snakker om her, og avhengig av tilkoblingshastigheten er det en god sjanse for at brukeren kan åpne siden og stirre på en tom skjerm mens videoen laster. Dette er ikke en god ting. Slik håndterer du denne nestinessen.
Det er en "Best Practice" å inkludere en plakatramme av videoen, som vises når videoen laster. Dette er vanligvis et fullskjerm skjermbilde av en ramme fra videoen.
For å legge til plakatrammen klikker du en gang på Nettleserfylling øverst på siden. Klikk på Bildelink og naviger til bildet som skal brukes. I montering område, velg Skala til utfylling og klikk på Midtpunkt i Stilling område. Dette sikrer at bildet alltid skalere fra midten av bildet når nettleserens visningsportstørrelse endres. Du vil også se bildet fylle siden.
Et annet lite triks er at minst en har en solid-ikke-hvite fyll-farge bare i tilfelle plakatrammen tar en stund å vises. For å gjøre dette, klikker du på Fargebrikken for å åpne Muse Color Picker. Velg eyedropper-verktøyet og klikk på en overordnet farge i bildet. Når du er ferdig, klikker du på siden for å lukke dialogboksen Browser fylling.
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 nettsidebakgrunn.
