De video toevoegen aan Adobe Muse
Het meest interessante aspect van Adobe Muse is dat u hiermee webpagina's kunt maken met behulp van een vergelijkbare workflow als die voor het opmaken van publicaties. U hoeft geen grondige kennis te hebben van de code die een site of pagina maakt, maar vertrouwdheid met HTML5, CSS en JavaScript doet geen pijn.
Hoewel traditionele webvideo meestal wordt toegevoegd via de HTML5 Video API, realiseert Adobe Muse hetzelfde via zogenaamde widgets. Widgets maken de HTML 5 die vereist is voor specifieke taken, maar gebruiken een duidelijke interface in Muse om de code te schrijven wanneer de pagina wordt gepubliceerd.
In deze oefening gaan we een widget gebruiken die je gratis kunt downloaden van Muse Resources. Wanneer de widget wordt gedownload, hoeft u alleen nog het zip-bestand te openen en te dubbelklikken op het .mulib-bestand in de map Full-Screen Video. Hiermee wordt het in uw exemplaar van Adobe Muse geïnstalleerd.
Een pagina voorbereiden voor achtergrondvideo in Adobe Muse CC
Met de widget geïnstalleerd, kunt u nu de pagina maken die de video zal gebruiken.
Maak voordat u begint een map voor uw Muse-site. Maak in die map een andere map - ik gebruik " media "- en verplaats je mp4- en webm-versies van de video naar die map.
Wanneer u Muse select start Bestand> Nieuwe site. Wanneer het dialoogvenster Lay-out opent, selecteert u Desktop als de Oorspronkelijke lay-out en verander de Paginabreedte en Pagina hoogte waarden voor 1200 en 900. Klik OK.
Dubbelklik op de stramienpagina in de plattegrondweergave om de stramienpagina te openen. Wanneer de hoofdpagina opent, verplaatst u de kop- en voettekstgidsen naar de bovenkant en de onderkant van de pagina. Je hebt echt geen kop- en voettekst nodig voor dit voorbeeld.
03 of 05Hoe de Fullscreen achtergrondvideo-widget te gebruiken in Adobe Muse CC
Het gebruik van de widget is doodeenvoudig. Het eerste dat u moet doen, is terugkeren naar de Planweergave door te selecteren Beeld> Planmodus. Dubbelklik bij het planningsoverzicht op de Startpagina om het te openen.
Open het deelvenster Bibliotheek - als dit niet open is aan de rechterkant van de interface selecteren Venster> Bibliotheek - en draai de MR Fullscreen achtergrondvideo map. Sleep de widget naar de map naar de pagina.
Je zult de opties vraag je om de namen van de mp4- en webm-versies van de video's in te voeren. Voer de namen precies in zoals ze zijn gespeld in de map waarin u ze hebt geplaatst. Een klein trucje om ervoor te zorgen dat je geen fout maakt, is door de naam van de mp4-video te kopiëren en deze in de map te plakken MP4 en WEBM gebieden van de Optiemenu.
Een andere truc: Al deze widgets doen de HTML 5-code voor je schrijven. Je kunt dit vertellen omdat je het ziet <> in de widget. In dit geval kunt u de widget van de webpagina op het plakbord plaatsen en het zal nog steeds werken. Op deze manier interfereert het niet met inhoud die u op de pagina plaatst.
04 van 05Hoe voeg ik video toe en test ik een pagina in Adobe Muse CC
Hoewel je de code hebt toegevoegd waarmee de video's worden afgespeeld, heeft Muse nog steeds geen idee waar die video's zich bevinden. Selecteer om dit te verhelpen Bestand> Bestanden toevoegen voor uploaden. Wanneer de Upload dialoogvenster opent naar de map met uw video's, selecteert ze en klikt op Open. Om ervoor te zorgen dat ze zijn geüpload, opent u de Assets-paneel en je zou je twee video's moeten zien. Laat ze gewoon in het paneel. Ze hoeven niet op de pagina te worden geplaatst.
Om het project te testen selecteert u Bestand> Voorbeeldpagina in browser of, omdat dit een enkele pagina is, Bestand> Voorbeeldsite in browser bekijken. Je standaardbrowser wordt geopend en de video - in mijn geval een tropische regenbui - begint te spelen.
Op dit punt kunt u het Muse-bestand behandelen als een gewone webpagina en inhoud toevoegen aan de startpagina en de video eronder afspelen.
05 of 05Een kader voor een videoreposter toevoegen In Adobe Muse CC
Dit is het internet waar we het hier over hebben en, afhankelijk van de verbindingssnelheid, is de kans groot dat uw gebruiker de pagina opent en naar een leeg scherm staart terwijl de video wordt geladen. Dit is geen goede zaak. Hier is hoe om te gaan met dit stukje misselijkheid.
Het is een "Best Practice" om een ​​posterframe van de video op te nemen, die zal verschijnen terwijl de video wordt geladen. Dit is meestal een afbeelding op volledig scherm van een frame uit de video.
Klik eenmaal op om het posterframe toe te voegen Browser vullen bovenaan de pagina. Klik op de Afbeeldingslink en navigeer naar de afbeelding die moet worden gebruikt. In de fitting gebied, selecteer Schalen om te vullen en klik op de Middelpunt in de Positie Gebied. Dit zorgt ervoor dat de afbeelding altijd wordt geschaald vanuit het midden van de afbeelding wanneer de viewport-grootte van de browser verandert. Je zult ook zien dat de afbeelding de pagina vult.
Een andere kleine truc is om in ieder geval een effen - niet wit - opvullende kleur te hebben voor het geval het afficheframe enige tijd nodig heeft om te verschijnen. Klik hiervoor op de kleurchip om de Muse-kleurkiezer te openen. Selecteer het pipetgereedschap en klik op een overheersende kleur in de afbeelding. Wanneer u klaar bent, klikt u op de pagina om het dialoogvenster Browser vullen te sluiten.
Op dit punt kunt u het project opslaan of publiceren.
Het laatste deel van deze serie laat u zien hoe u de HTML5-code schrijft die een video naar de achtergrond van een webpagina verplaatst.
