Aan de slag
Laat ik eerst even proberen duidelijk te maken wat de bedoeling is.
De eerste afbeelding laat een typisch menu zien waarin drie menukeuzes aanwezig zijn. Het kiezen van één van die drie opties via de afstandsbediening zal alleen de 'highlight' verplaatsen. In dit menu worden dus ook de teksten (Film 1, Film 2 en Film 3) als knoppen gebruikt. Hoewel geheel functioneel willen we dit toch mooier maken.
De volgende serie van drie menu's laat zien dat het mogelijk is voor elke menukeuze een ander menubeeld te gebruiken. Om de illusie te wekken dat we binnen één menu actief blijven laten we de achtergrondafbeelding hetzelfde. Maar omdat het niet meer is dan een grafische vertoning, dus ook het toegevoegde plaatje en de teksten, hoeft dat natuurlijk niet.
In tegenstelling tot het eerste menu worden hier de teksten niet als knoppen gebruikt maar zijn ze een onderdeel van de grafische weergave.
In deze serie menu's maken we onzichtbare knoppen die voor de navigatie gebruikt gaan worden.
In deze voorbeeldmenu's laat ik niet alleen het plaatje in het kader veranderen, ook de tekst wijzigt. Niet alleen de kleur maar ook de afmeting. Hierdoor komt de tekst van de geselecteerde optie een klein beetje naar voren hetgeen een mooi subtiel effect geeft. Bovendien heb ik ook nog een pijltje toegevoegd om extra duidelijk te maken welke keuze actief is.
Dit is slechts een voorbeeld maar het laat wel zien wat er allemaal mogelijk is. Het ontwerp van de menu's laat ik graag aan je eigen fantasie over. Zolang het voor de gebruiker maar duidelijk is welke menukeuze wordt geactiveerd zodra hij/zij op de afstandsbediening de keuze bevestigt. Nogmaals, de eigenlijke knoppen die voor de navigatie zorgen zijn onzichtbaar.
Menuontwerp in Studio
In Studio beginnen we met het ontwerpen van het eerste menu. Deze maken we helemaal klaar inclusief drie onzichtbare knoppen. Daarna kopiëren we dat menu twee keer en passen het tweede en derde menu naar wens aan. Pas daarna voegen we de drie video's (of 1 video met 3 hoofdstukken) toe en regelen we de noodzakelijke navigatie van de knoppen.
Plaats op de tijdlijn een afbeelding welke gaat dienen als achtergrond. Dat kan een foto zijn, een snapshot uit een video, een tekening of wat dan ook. Maak deze afbeelding minimaal tien seconden lang. Een menu zal 'loopen'. Op het moment dat de loop opnieuw begint kan er bij sommige DVD-spelers een korte hapering optreden. Tien tot twintig seconden is over het algemeen lang genoeg om een keuze te maken. De hapering zal dus niet of zelden optreden als het menu lang genoeg is.
Pas eventueel het effect 'vervagen' toe op de afbeelding. Dan steken de teksten en andere objecten mooi scherp af tegen deze achtergrond. Ook met andere effecten zijn menu's met een geheel eigen stijl te ontwerpen.
Als je een effect toepast schakel dan daarna wel 'automatisch renderen' uit in het menu Setup/Bewerken. Anders zal Studio bij elke wijziging van het menu opnieuw de afbeelding gaan renderen en dat leidt tot een hinderlijke vertraging.
Vervolgens gaan we de objecten (tekst/afbeeldingen etc.) aan het menu toevoegen middels de Title-editor. Kies daarvoor via de Gereedschapskist voor 'Titel maken' en klik op de knop 'TitelOverlay' waarna de Title-editor zich opent met de op de tijdlijn aanwezige afbeelding als achtergrond. Deze Titel komt straks in de tijdlijn op het Overlay-spoor te staan.
Ik had ook kunnen kiezen voor een Titel op 'Volledig scherm'. Dan had de Titel, waarin je de objecten zoals de knoppen plaatst, terecht gekomen op het Videospoor. In dat geval had ik de achtergrond in de Titel kunnen toevoegen. Dat heeft echter als nadeel dat ik niet de mogelijkheid zou hebben om in Studio allerlei effecten op deze achtergrond toe te passen zoals in de vorige alinea is uitgelegd. Dat had dan in de voorbewerking in een grafisch programma al moeten gebeuren. Voor de functionaliteit maakt het allemaal echter niets uit.
Plaats de gewenste teksten zoals een MenuTitel en de drie teksten voor de films die we met dit menu willen starten. Kies bij voorkeur een duidelijk lettertype. Sierlijke lettertypes of lettertypes met schreven zijn vaak moeilijk leesbaar op een TV. Kies de gewenste kleur(en), randen en schaduwen. Maak gebruik van de uitlijn-mogelijkheden van Studio om de teksten op een goede manier op het scherm te positioneren. Trek daarvoor een kader om de objecten die moeten worden uitgelijnd en klik dan op de knop 'uitlijnen' welke zich onderin het venster van de Title-editor bevindt.
Als je daarna ook nog eens de drie teksten groepeert (weer een kader om de objecten trekken en druk op de knop 'groeperen', ook te vinden onderin het venster van de editor) dan zullen verdere aanpassingen een stuk eenvoudiger uitvoerbaar zijn.
Nu gaan we, zoals in het voorbeeldmenu is te zien, nog een plaatje met een kader toevoegen. Gebruik ook hiervoor weer een foto of een snapshot van een video of een andere grafische afbeelding naar wens.
Klik in de Title-editor aan de rechterkant op de camera (afbeeldingen) en zoek de afbeelding die je wilt gebruiken voor het eerste menu. Dat plaatje heeft betrekking op de eerste menukeuze (Film 1). Sleep het in de editor en bepaal de afmeting en de plaats waar deze moet komen te staan.
Kies nu voor de 'knoppen' en sleep uit de verzameling een kader naar wens naar het plaatje en maak de afmetingen zodanig dat dit plaatje precies binnen het kader zichtbaar is.
Let op, een kader krijgt automatisch de eigenschap 'Pictogram' (een functionele knop). Omdat we geen van de huidige objecten als knop willen gebruiken moet je de eigenschap van dit kader wijzigen in 'Geen knop'.
Bekijk nog even of alle objecten in het menu op de gewenste plek staan.
De Title-editor van Studio heeft helaas niet zoiets als een hulpraster waarop je de objecten goed kunt uitlijnen. Daarom plaatsen we onder het kader nog even een hulplijn met behulp van het gereedschap 'Rechthoek toevoegen' dat je onderin het venster van de Title-editor kunt vinden. Bij het aanpassen van de volgende menu's heb je hier profijt van omdat we daar de kaders even moeten verplaatsen en weer terugzetten.
We sluiten nu de Title-editor door op OK te klikken en daarmee komt de TitelOverlay in de tijdlijn te staan op het Overlay-spoor. Het is niet onverstandig om nu het project op te slaan. Doe dit met een herkenbare naam, bijv. 'ontwerpfase1'.
Het ontwerp van (het eerste) menu is, grafisch gezien, nu helemaal klaar. Wat ons nu nog rest is het aanmaken van drie onzichtbare knoppen waarmee de navigatie wordt geregeld. Eén knop om 'Film 1' te starten, één knop om naar het tweede menu te gaan en één knop om naar het derde menu te gaan.
De (onzichtbare) knoppen
De in het menu geplaatste teksten zouden als knoppen kunnen worden gebruikt. Toch ga ik een drietal nieuwe knoppen aanmaken. Hoewel ik tot nu toe heb laten zien hoe je in Studio je menuscherm kunt ontwerpen, gebruik ik liever menuschermen die in een ander programma zijn ontworpen. De mogelijkheden om tekst mooi te maken in Studio zijn naar mijn mening veel te beperkt. Daarom ontwerp ik die schermen liever in een programma als Adobe Photoshop. Dan krijg je een afbeelding waar de teksten onderdeel van die afbeelding uitmaken en dus geen aparte objecten zijn die je als knop kan gebruiken.
We gaan nu in het eerste menuscherm knoppen aanmaken en maken daarna pas de andere twee menuschermen. Dat bespaart ons werk omdat we, na het maken van de knoppen, het gehele eerste menu twee keer gaan kopiëren. De knoppen zijn dan al aanwezig en we hoeven dan alleen de zichtbare objecten nog maar naar wens aan te passen.
Voor de duidelijkheid: per menu is het onnodig meer dan maximaal drie knoppen te maken. Ook als je meer dan drie menu-items (en dus meer dan drie menu's) hebt aangemaakt. Immers, per menu heb je een knop om de betreffende video te starten, een knop daarboven waarmee een ander (vorig) menu wordt aangeroepen en een knop daaronder waarmee eveneens een ander (volgend) menu wordt aangeroepen. De eventuele menu-items die zich verder dan één nivo vanaf de huidige geselecteerde knop bevinden zijn binnen het huidige menu onbereikbaar.
Dubbelklik op de TitelOverlay in de tijdlijn. De Title-editor wordt nu weer geopend.
Onder in het scherm selecteer je het rondje (ellips toevoegen). Plaats een klein rondje met een diameter van circa 0,5 cm aan de rechterkant van het ontwerpscherm ter hoogte van de eerste tekst (Film 1). In ieder geval zodanig dat je deze ook nog kunt terugvinden (selecteren) nadat dit object onzichtbaar is gemaakt.
Plaats daaronder nog eens twee rondjes achter de andere twee teksten. Dat kan eventueel ook door middel van kopiëren en plakken (bijv. met Ctrl-C en Ctrl-V) en dan naar de juiste plek slepen.
Je mag hier uiteraard ook kiezen voor bijvoorbeeld een kleine rechthoek of nog iets anders. Ik vind de ellips wel een goede keuze. Deze is goed onzichtbaar te maken en eenvoudig terug te vinden als dat nodig mocht zijn.
Wijzig nu het kenmerk van deze drie rondjes in 'Knop Standaard'.
De rondjes zijn al buiten het 'Safe-Margin' gebied geplaatst. Dat betekent dat ze op een normale TV waarschijnlijk niet zichtbaar zullen zijn. Maar een monitor of een moderne LCD TV laat wel het gehele gebied zien. Daarom gaan we ze ook nog eens onzichtbaar maken.
Eerst veranderen we het uiterlijk van de knoppen (knop Aa) in het tabblad 'Aangepast'.
Omdat we de knoppen volledig onzichtbaar willen maken zouden we kunnen kiezen voor 'Transparant' voor zowel de Opvulling, de Rand als de Schaduw. Het vervelende is echter dat Studio dan de knop niet meer goed kan 'vinden' en dus de navigatie niet goed is in te stellen. Daarom moet tenminste één van deze kenmerken zichtbaar zijn. We kiezen voor de rand.
We maken dus de Opvulling en de Schaduw transparant. De rand geven we een kleur die nagenoeg hetzelfde is als de afbeelding op de achtergrond (in mijn voorbeeld lichtgrijs). We geven de rand een waarde van 1 punt en de 'vervaging' zetten we op maximaal (30). Doe dit voor alle drie de knoppen. Je zult zien dat ze nagenoeg onzichtbaar zijn. Experimenteer met de kleuren als je ze toch nog kunt ontdekken.
Een menu bestaat uit twee lagen. Namelijk de achtergrond (inclusief alle objecten en dus ook de knoppen welke wij nagenoeg onzichtbaar hebben gemaakt) en de Subpicture-laag. In die laag bevinden zich de 'highlights' waarmee tijdens de navigatie zichtbaar wordt gemaakt welke knop is geselecteerd. Omdat de navigatie al in ons grafisch menu-ontwerp duidelijk wordt gemaakt willen we die highlights dus niet zichtbaar hebben.
Doordat de 'highlights' alleen op zichtbare knoppen werken, in dit geval op een zeer dunne en zeer wazige rand, zullen ze zelf ook nagenoeg onzichtbaar zijn. Om daar helemaal zeker van te zijn kun je de highlights nog volledig op transparant zetten.
Open daarvoor weer het eigenschappenvenster voor de knoppen. Klik eerst op de groene knop 'Actief' en zet in het eigenschappenvenster de 'Ondoorschijnendheid' op 0% (nul procent) en doe datzelfde voor de gele knop 'Geselecteerd'.
Als alles naar tevredenheid is klik dan nu weer op OK om de Title-editor te verlaten.
Wellicht is het verstandig om op dit moment het project weer op te slaan. Bijv. met de naam 'ontwerpfase2'.
Het tweede en derde menu maken
We hebben nu een compleet menu met drie (onzichtbare) functionele knoppen op de tijdlijn staan. Maar we hebben er drie nodig. Daarom gaan we dit complete menu tweemaal kopiëren. Selecteer op de tijdlijn zowel het eerste videospoor (de afbeelding) als het titelspoor (daar waar de TitelOverlay staat). De bekende methoden van Windows kunnen hiervoor worden gebruikt. Dus bijv. Ctrl+A of Ctrl ingedrukt houden en beide sporen aanklikken etc. Het kopiëren kan met Ctrl+C of via het menu Bewerken/Kopiëren of met rechtsklik op het spoor en dan kiezen voor kopiëren.
Ga nu naar het einde van het eerste menu (de End toets indrukken) en kopieer op één van de Windows manieren, bijv. met Ctrl+V of Bewerken/Plakken etc. Er verschijnt nu een tweede menu. Herhaal deze procedure nog eens zodat er een derde menu op de tijdlijn verschijnt.
De menu's aanpassen
We hebben nu drie identieke menu's waarvan we allereerst de tekst gaan aanpassen. Met die tekst willen we duidelijk maken welke actie wordt uitgevoerd als we op de afstandsbediening de keuze bevestigen.
Dubbelklik op de tijdlijn het eerste menu en klik op 'Menu bewerken' om de Title-editor te openen.
Selecteer de eerste tekst (Film 1) en vergroot de letter 4 punten. Let er op dat niet alleen het object waarin de tekst zich bevindt geselecteerd moet zijn maar de tekst zelf ook. Dat kan heel snel met de toetscombinatie Ctrl+A. Doordat we de drie teksten eerder al gegroepeerd hebben zal de tekst goed in positie blijven staan. Zonder deze groepering wil de tekst nogal eens verschuiven bij het groter maken en het is dan heel lastig om deze weer op de juiste plaats te positioneren. Als de tekst verdeeld gaat worden over twee regels dan moet je het kader iets groter maken met behulp van de 'sleepknoppen' die rondom het kader zichtbaar zijn.
In het tabblad 'Aangepast' bij 'Uiterlijken' kies je nu nog een passende kleur voor de 'Opvulling' van de tekst. Klik nu op OK om de Title-editor te sluiten.
Herhaal deze procedure voor het tweede en derde menu en dan uiteraard voor de teksten Film 2 respectievelijk Film 3.
Het vergroten van het lettertype is natuurlijk niet noodzakelijk. Maar op TV geeft dit een mooi subtiel effect. Net of de tekst iets naar voren komt.
Nu willen we de plaatjes in de kaders in het tweede en het derde menu nog aanpassen. Dubbelklik op het tweede menu en open weer de Title-editor. Eerst behandel ik hier de procedure voor een plaatje/kader dat een andere afmeting moet krijgen dan het al aanwezige plaatje. Plaats een ander plaatje en een kader volgens dezelfde procedure als in het hoofdstuk 'Menuontwerp' is uitgelegd.
Als de oriëntatie van het plaatje anders is (bijv. portrait in plaats van landscape) moet je de afmeting zo goed mogelijk afstemmen op het al aanwezige plaatje. Ook kun je dat aanwezige plaatje gebruiken om het nieuwe plaatje zo goed mogelijk te positioneren. Plaats vervolgens een kader om het nieuwe plaatje en vergeet niet het kenmerk van dit kader te wijzigen van 'Pictogram' naar 'Geen Knop'.
Selecteer nu het achterliggende overbodig geworden kader en druk op Delete en doe dat ook voor het niet meer van toepassing zijnde plaatje en de (eventuele) hulplijn.
Druk op OK om de Title-editor te sluiten.
Als het plaatje dezelfde oriëntatie en afmeting heeft is het van belang om het precies passend in het bestaande kader te plaatsen. Dat doen we in het derde menu. Dubbelklik nu op het derde menu en open weer de Title-editor.
Selecteer het kader en sleep dat een paar centimeter naar beneden. Selecteer het aanwezige plaatje door te klikken op een gedeelte dat nu boven het kader uitsteekt. Sleep het gewenste plaatje uit de afbeeldingenlijst aan de rechterkant van de Title-editor en plaats dat op het gedeelte van het 'oude' plaatje dat boven het kader uitsteekt. Op deze manier zal het nieuwe plaatje dezelfde afmetingen aannemen en meteen op de juiste positie staan. Sleep het kader weer terug waar het hoort. Hier ontdek je meteen het nut van de gemaakte hulplijn. Als het kader goed gepositioneerd is, verwijderen we deze hulplijn door hem te selecteren en op Delete te drukken.
Je kunt eventueel ook nog pijlen en/of andere objecten aan het menu-ontwerp toevoegen (zie mijn drie voorbeelden). Voor de functionaliteit maakt dat echter niet uit. Je eigen fantasie en artistiek inzicht bepalen hier het eindresultaat.
Druk op OK om de Title-editor te sluiten.
De drie menu's zijn nu helemaal klaar. Misschien het project weer even opslaan? Bijv. met de naam 'ontwerpfase3'.
Je ziet dat er vrij weinig mogelijk is in de Title-editor op grafisch gebied. Vandaar ook mijn eerdere opmerking dat ik liever mijn menuschermen in een ander programma ontwerp.
Stel dat je dat een volgende keer ook gaat doen. Dan heb je de Title-editor alleen nog maar nodig om de benodigde (onzichtbare) knoppen aan te maken.
In dat geval kun je een Titel op het videospoor plaatsen (het Overlay-spoor blijft dan ongebruikt) en in de Title-editor het plaatje als achtergrond opnemen waarna je de benodigde (onzichtbare) knoppen maakt. Vervolgens dit geheel weer een aantal keren kopiëren en dan hoef je in de duplicaat-menu's alleen nog maar de achtergrond te vervangen.
Video's toevoegen en navigatie regelen
Nu gaan we de gewenste video's achter de menu's op de tijdlijn plaatsen. Zoek de drie video's (of de video waarin je hoofdstukken wilt maken) en plaats deze in de juiste volgorde op de tijdlijn. Voor het voorbeeld heb ik een drietal korte scènes gebruikt.
Dubbelklik nu op het eerste menu en in het grote venster linksboven zie je op de plek waar de (onzichtbare) knoppen zijn geplaatst een aantal vraagtekens verschijnen.
In dit eerste menu moet de eerste knop worden gekoppeld aan de eerste video. Er zijn binnen Studio meerdere manieren om dit te regelen. Een gemakkelijke methode is door de gewenste knop (weergegeven met ??) naar het begin van de eerste video te slepen. Je ziet dan een roze vlaggetje met de tekst 'C1' verschijnen. De tweede en derde knop moeten worden gekoppeld aan het tweede respectievelijk derde menu. Dit doe je op dezelfde manier. Op die menu's zie je geen vlaggetje verschijnen maar in het bovenste venster verschijnen op de plek van de vraagtekens de aanduidingen 'M2' en 'M3'.
Ditzelfde herhalen we in het tweede menu maar we gaan dan uiteraard de eerste knop verbinden met het eerste menu, de tweede knop met de tweede video (of het tweede hoofdstuk) en de derde knop met het derde menu. Hoe de verbindingen in het derde menu gelegd moeten worden zal nu ongetwijfeld duidelijk zijn.
Tenslotte zetten we in ieder menu nog even een vinkje voor het item 'Teruggaan na ieder hoofdstuk'. Althans, als je wilt dat na het afspelen van een film (of hoofdstuk) er automatisch teruggekeerd wordt naar het menu in plaats van het weergeven van de volgende video of het volgende hoofdstuk.
Met behulp van de DVD-simulatie kan nu de werking van de knoppen worden getest. Het zal echter een beetje moeilijk gaan omdat de knoppen onzichtbaar zijn maar met een beetje goede wil moet het toch wel lukken. Bijv. als je in het eerste menu twee keer op de navigatieknop naar beneden klikt en dan op het startknopje (in het midden tussen de navigatieknoppen) zal het derde menu geactiveerd worden.
Als alles nu naar wens is, is het weer tijd om het project, dat nu in feite helemaal klaar is, nogmaals op te slaan. Bijv. met de naam 'finale'.
En nu zul je je afvragen waar dat mooie effect is gebleven zoals dat in het begin van deze workshop is beloofd. De navigatie gaat nog niet automatisch naar het tweede of derde menu en weer terug. We moeten nog steeds op de activeringsknop drukken.
Dat is dus precies het probleem. Dat kunnen we in Studio niet voor elkaar krijgen. Vandaar de uitstap naar PgcEdit. Maar eerst nog even de DVD-image maken.
DVD-image maken
Via het tabblad 'Film maken' kiezen we voor 'Schijf' en in de Instellingen kiezen we voor 'Schijfimage maken'. De andere instellingen stel je in op de waarden zoals je dat normaal ook zou doen. Uitvoerformaat 'DVD', de instelling 'Automatisch' kiest automatisch een passende bitrate en de 'Audiocompressie' zetten we op MPA (MPEG-1 Layer 2) of op Dolby Digital 2-kanaals als je de AC3 plug-in voor Studio hebt aangeschaft.
Vervolgens klik je op schijf maken, wacht rustig af tot de image is gemaakt en daarna kun je Studio afsluiten.
DVD-image testen
Alvorens verder te gaan kunnen we de gemaakte DVD-image en de werking van de menu's nog gaan testen. Je zult dan uiteraard hetzelfde probleem hebben als met de DVD-simulatie in Studio. De knoppen zijn nog steeds onzichtbaar en de navigatie werkt ook nog niet helemaal zoals we deze uiteindelijk willen hebben.
Om te kunnen testen heb je wel een programma nodig dat op de PC DVD's kan afspelen. Twee bekende programma's zijn WinDVD en PowerDVD.
In PowerDVD versie 5 open je de image door te kiezen voor 'Open DVD file on hard disk drive'. Je bladert nu naar de map waar Studio de image heeft opgeslagen en je zoekt de map genaamd VIDEO_TS. Deze kun je vinden in de mapstructuur waar Studio de tijdelijke bestanden aanmaakt (ingesteld bij 'Setup/Bewerken'). Dat zou bijv. kunnen zijn: X:\map voor tijdelijke bestanden\Auxiliary Files\Finale\DVD\VIDEO_TS
Als je deze opent dan zal PowerDVD je image gaan afspelen.
Let op! De besturing van het menu werkt ook met de muis op het weergavevenster. Je kunt de knoppen in het menuscherm aanklikken (als je ze kunt vinden). Toch is dit niet de juiste methode. Immers, als je de DVD op je TV afspeelt dan heb je ook niet de beschikking over een muis.
Aan de rechterkant van het bedieningspaneel van PowerDVD klik je op het pijltje om het paneel met de besturingstoetsen te openen. Als je deze gebruikt dan zal PowerDVD hetzelfde reageren als de afstandsbediening van je DVD-speler.
Na een geslaagde test gaan we over naar PgcEdit waarmee we de navigatie gaan aanpassen. Zowel het automatisch activeren van een knop, de Auto Action waarmee we van menu wisselen, alsmede het aanbrengen van enige verfijning in de 'routing' van de navigatie zodat we niet worden beperkt tot het twee knoppen naar beneden kunnen navigeren en dan weer twee knoppen omhoog. Maar daarover verderop meer.