Lägga till videoklippet till Adobe Muse
Den riktigt intressanta aspekten av Adobe Muse är att den låter dig skapa webbsidor med ett liknande arbetsflöde som det brukade utgöra publikationer. Du behöver inte en djup förståelse för koden som bygger en webbplats eller sida, men en kännedom om HTML5, CSS och JavaScript kommer inte att skada.
Även om traditionell webbvideo normalt läggs till med hjälp av HTML5 Video API, fullgör Adobe Muse samma sak genom vad det kallar "widgets". Widgets skapar HTML 5 som krävs för specifika uppgifter, men använd ett gränssnitt för enkel språk i Muse för att skriva koden när sidan publiceras.
I denna övning kommer vi att använda en widget som du gratis kan hämta från Muse Resources. När widgetnedladdningarna är allt du behöver göra är att öppna .zip-filen och dubbelklicka på .mulib-filen i mappen Full skärmvideo. Detta installerar det i din kopia av Adobe Muse.
Hur man förbereder en sida för bakgrunds video i Adobe Muse CC
Med widgeten installerad kan du nu skapa den sida som ska använda videon.
Innan du börjar skapar du en mapp för din Muse-webbplats. Inuti den mappen skapa en annan mapp - jag använder " media "- och flytta din mp4 och webm versioner av videon till den mappen.
När du startar Muse väljer du Arkiv> Ny webbplats. När dialogrutan Layout öppnas väljer du Desktop som den Initial layout och ändra Sidbredd och Sidhöjd värden till 1200 och 900. Klick ok.
Dubbelklicka på huvudsidan i planvy för att öppna huvudsidan. När huvudsidan öppnas flyttar sidhuvudet och sidfoten till toppen och längst ner på sidan. Du behöver verkligen inte en rubrik och sidfot för det här exemplet.
03 av 05Så här använder du fullskärmsbakgrunds videoband Widget i Adobe Muse CC
Att använda widgeten är död enkel. Det första du behöver göra är att återgå till Planvy genom att välja Visa> Planläge. När planvy öppnas dubbelklickar du på Hemsida för att öppna den.
Öppna bibliotekspanelen - om den inte är öppen på höger sida av gränssnittet välj Fönster> Bibliotek - och snurra ner MR Fullskärmsbakgrunds-video mapp. Dra widgeten till mappen till sidan.
Du kommer att märka alternativ be dig att ange namnen på mp4 och webm-versionerna av videon. Ange namnen exakt som de stavas i mappen där du placerade dem. Ett litet knep för att du inte gör ett misstag är att kopiera namnet på mp4-videon och klistra in det i MP4 och WEBM områden av Alternativmenyn.
Ett annat knep: Allt den här widgeten gör är att skriva HTML 5-koden för dig. Du kan berätta för detta eftersom du ser <> i widgeten. I det här fallet kan du lägga ut widgeten från webbsidan till pasteboarden och den kommer fortfarande fungera. På så sätt stör det inte något innehåll som du kommer att placera på sidan.
04 av 05Så här lägger du till video och testar en sida i Adobe Muse CC
Även om du har lagt till koden som spelar videon, har Muse fortfarande ingen aning om de videoklipp som finns. För att åtgärda det, välj Arkiv> Lägg till filer för uppladdning. När Överför dialogrutan öppnas navigera till mappen som innehåller dina videoklipp, välj dem och klicka på Öppna. För att säkerställa att de har laddats upp öppnar du Tillgångspanel och du bör se dina två videor. Lämna dem bara i panelen. De behöver inte placeras på sidan.
För att testa projektet välj Arkiv> Förhandsgranska sida i webbläsare eller eftersom det här är en enda sida, Arkiv> Förhandsgranska webbplats i webbläsare. Din standardwebbläsare öppnas och videon - i mitt fall en tropisk regnstorm - börjar spela.
Vid denna tidpunkt kan du behandla Muse-filen som en vanlig webbsida och lägga till innehåll på hemsidan och videon kommer att spela under den.
05 av 05Så här lägger du till en videoaffischram i Adobe Muse CC
Det här är webben vi pratar om här och beroende på anslutningshastigheten finns det en bra chans att din användare kan öppna sidan och stirra på en tom skärm medan videon laddas. Det här är inte bra. Så här hanterar du den här näsan.
Det är en "bästa praxis" att inkludera en affischram av videon som kommer att visas när videon laddas. Detta är vanligtvis ett skärmstorlek i full storlek av en ram från videon.
För att lägga till affischramen klicka en gång på Webbläsarefyllning längst upp på sidan. Klicka på Bildlänk och navigera till bilden som ska användas. I Passande område, välj Skala till fyllning och klicka på Mittpunkt i Placera område. Detta säkerställer att bilden alltid ska skala från mitten av bilden när webbläsarens visningsportstorlek ändras. Du kommer också att se bilden fylla sidan.
Ett annat litet knep är att åtminstone en har en solid-inte-vitfyllningsfärg bara om affischramen tar ett tag att visas. För att göra detta klickar du på Colour Chip för att öppna Muse Color Picker. Välj verktyget eyedropper och klicka på en övervägande färg i bilden. När du är klar klickar du på sidan för att stänga dialogrutan Webbläsarfyllning.
Vid denna tidpunkt kan du spara projektet eller publicera det.
Den sista delen av den här serien visar hur du skriver HTML5-koden som slider en video till en webbsidans bakgrund.
