Hvad du skal vide
- Med Hjem-siden i Plan visning, gå til Window >Bibliotek > [MR] fuldskærmsbaggrundsvideo mappe, og træk widgetten til siden.
- For at tilføje en video skal du gå til File > Tilføj filer til upload > videomappen > Åben.
Adobe Muse giver dig mulighed for at oprette websider ved hjælp af en lignende arbejdsgang som publikationer; du behøver ikke en dyb forståelse af koden, der bygger et websted eller en side, selvom kendskab til HTML5, CSS og JavaScript ikke vil skade. Selvom traditionel webvideo norm alt tilføjes gennem HTML5 Video API, opnår Adobe Muse det samme gennem widgets, der skaber den HTML 5, der kræves til specifikke opgaver, men bruger en almindeligt sproggrænseflade i Muse til at skrive koden, når siden udgives.
Sådan forbereder du en side til baggrundsvideo i Adobe Muse CC
Med widgetten installeret, kan du nu oprette siden, der vil bruge videoen.
- Før du starter, skal du oprette en mappe til dit Muse-websted. Inde i den mappe skal du oprette en anden mappe – vi bruger “media” – og flytte dine mp4- og webm-versioner af videoen til den mappe.
- Når du starter Muse, skal du vælge Fil > New Site.
- Når dialogboksen Layout åbnes, skal du vælge Desktop som Initial Layout og ændre Page Widthog Page Height værdier til 1200 og 900 . Klik på OK.
-
Dobbeltklik Master Page i planvisningen for at åbne mastersiden. Når mastersiden åbnes, skal du flytte sidehoved- og sidefodsguiderne til toppen og bunden af siden. Du behøver virkelig ikke en sidehoved og sidefod til dette eksempel.
Sådan bruger du fuldskærms-baggrundsvideowidget'en i Adobe Muse CC
At bruge widget'en er meget simpelt.
- Den første ting, du skal gøre, er at vende tilbage til planvisningen ved at vælge View > Plan Mode.
- Når planvisningen åbner, skal du dobbeltklikke på hjemmesiden for at åbne den.
- Åbn bibliotekspanelet – hvis det ikke er åbent i højre side af grænsefladen, skal du vælge Window > Library – og drej ned [MR] fuldskærmsbaggrundsvideo-mappen.
- Træk mappe-widgetten til siden.
-
Du vil bemærke, at Options beder dig om at indtaste navnene på mp4- og webm-versionerne af videoerne. Indtast navnene nøjagtigt, som de er stavet i den mappe, hvor du har placeret dem. Et lille trick for at sikre, at du ikke laver en fejl, er at kopiere navnet på mp4-videoen og indsætte den i områderne MP4 og WEBM af Options-menuen
Et andet trick: Det eneste, denne widget gør, er at skrive HTML 5-koden for dig. Du kan fortælle dette, fordi du ser i widgetten. I dette tilfælde kan du placere widget'en fra websiden på tapeboardet, og den vil stadig fungere. På denne måde forstyrrer det ikke noget indhold, du vil placere på siden.
Sådan tilføjer du video og tester en side i Adobe Muse CC
Selv om du har tilføjet koden, der skal afspille videoerne, ved Muse stadig ikke, hvor disse videoer er placeret.
- For at rette dette skal du vælge File > Tilføj filer til upload.
- Når Upload-dialogboksen åbnes, skal du navigere til mappen med dine videoer, vælge dem og klikke på Open.
-
For at sikre, at de er blevet uploadet, skal du åbne panelet Assets,, og du skal se dine to videoer. Bare lad dem stå i panelet. De behøver ikke at blive placeret på siden.
- For at teste projektet skal du vælge File > Forhåndsvisning af side i browser eller, fordi dette er en enkelt side, File > Eksempel på websted i browser. Din standardbrowser åbnes, og videoen afspilles.
- På dette tidspunkt kan du behandle Muse-filen som en almindelig webside og tilføje indhold til startsiden, hvorefter videoen afspilles under den.
Sådan tilføjes en videoplakatramme i Adobe Muse CC
Dette er nettet, vi taler om her, og afhængigt af forbindelseshastigheden er der en god chance for, at din bruger åbner siden og stirrer på en tom skærm, mens videoen indlæses. Det er ikke en god ting. Sådan håndterer du denne smule grimhed.
Det er en "bedste praksis" at inkludere en plakatramme af videoen, som vises, mens videoen indlæses. Dette er norm alt et skærmbillede i fuld størrelse af en ramme fra videoen.
- For at tilføje plakatrammen skal du klikke én gang på Browser Fill øverst på siden.
- Klik på Billedlinket, og naviger til det billede, der skal bruges.
- I området Fitting skal du vælge Scale to Fill og klikke på Center point i området Position. Dette sikrer, at billedet altid skaleres fra midten af billedet, når browserens visningsportstørrelse ændres. Du vil også se billedet fylde siden.
- Et andet lille trick er at have en ensartet fyldfarve, hvis plakatrammen tager et stykke tid at komme frem. For at gøre dette skal du klikke på Color-chippen for at åbne Muse-farvevælgeren. Vælg værktøjet pipet, og klik på en fremherskende farve i billedet. Når du er færdig, skal du klikke på siden for at lukke dialogboksen Browser Fyld.
-
På dette tidspunkt kan du gemme projektet eller udgive det.
Den sidste del af denne serie viser dig, hvordan du skriver HTML5-koden, der glider en video ind i en websides baggrund.
