Over interactiviteit met InDesign
Interactiviteit in InDesign kun je binnen de pagina aanmaken, en zelfs voorvertonen in een venster met Flash-techniek of HTML-techniek. De voorvertoning moet je niet 100% vertrouwen. Je weet het pas zeker of alles werkt als je hebt geëxporteerd naar PDF of SWF of HTML of ePub.
Wil je testen binnen InDesign of de interactiviteit werkt, dan gebruik je het menu Venster, Interactief, voorvertoning ePub interactiviteit, of SWF-voorvertoning. Deze deelvensters kunnen een voorvertoning maken van de pagina waarop je staat, of van het hele document. Dan kun je ook testen of de knop werkt waarmee je naar een andere pagina wilt springen.
Kan ook met Acrobat
Het is verstandig om alles binnen InDesign te doen, maar bedenk dat je de interactiviteit ook met Acrobat Professional kunt instellen. InDesign maakt gebruik van de mogelijkheden van PDF. Soms maakt ie fouten. Die kun je dan in Acrobat nog corrigeren. Bijvoorbeeld een SWF-object dat een transparante achtergrond moest hebben: die maakt InDesign dekkend wit. Kun je mooi achteraf nog in Acrobat toch nog transparant maken.
Als je exporteert naar Flash, of ePubFixedLayout is dat moeilijker. Tot zelfs onmogelijk. Maar ja: wie exporteert nou nog naar Flash?
Teksten in interactieve publicaties
Denk er om dat als je iets publiceert dat bekeken wordt op het beeldscherm, dat je dan ook je vormgeving en je tekst aanpast. De meeste beeldschermen zijn nog steeds liggend. Dat wil zeggen: de lange kant is horizontaal gericht. Dat is anders dan bij de meeste printjes, die vaak gemaakt worden op staande A4-tjes. Bekijk je een interactief document op smartphones, dan is staande layout weer handig.
Andere letterkeuze
Ook mag je opnieuw nadenken over welke lettertypes je wilt gebruiken. Sommige lettertypes zoals Geneva of Verdana zijn speciaal ontworpen voor optimale leesbaarheid op het scherm (met de techniek van het jaar 1986). Andere lettertypes zoals Times zijn eigenlijk minder optimaal te lezen, en weer andere zoals Scala zijn zelfs beter leesbaar in print dan op het scherm. Ook scriptletters zoals Brush en Chancery doen het niet lekker op het beeldscherm, behalve dan in heel grote corpsen.
Denk er ook aan dat je de spatiëring van je letters bekijkt, want het scherm is relatief grof, vergeleken met een printje. Vaak komt het er op neer dat je de spatiëring wat ruimer maakt voor het beeldscherm, en dat je corps veertien of hoger gebruikt, wil het lekker lezen (deze tekst is al 18pt). Kort gesteld moet je er dus rekening mee houden, dat dezelfde hoeveelheid tekst voor een printversie minder pagina’s in beslag neemt dan voor het scherm.
Typekit of Skyfonts
Je kunt OpenType gebruiken, of TrueType, of zelfs Postscript fonts. Dat laatste liever niet, want die zijn niet altijd goed in te sluiten. Wel in PDF, niet in HTML. Google fonts zijn beschikbaar als webfont en binnen InDesign. En het kost niks, via de applicatie Skyfonts.
Typekit fonts zijn beschikbaar via je CC-abonnement. Daar heb je wèl voor betaald. En ze zijn ook beschikbaar als HTML. Ze geven iets minder problemen dan Skyfonts als het gaat om insluiten, en correcte weergave. Dat is belangrijk.
Andere tekst
Maak het de lezer enigszins gemakkelijk, en pas daarom de tekst aan. Schrijf ‘web-vriendelijk’: dus met kortere zinnen, en met minder woorden. Sla ook gerust sommige zaken over, of verwijs ernaar via een hyperlink. De gebruiker kan dan kiezen om meer detail-informatie te lezen als ie dat wil.
Plaatjes verankeren
Als je illustraties en teksten bij elkaar wilt houden, probeer dan te verankeren. Je kunt in InDesign een illustratie verankeren met dat blauwe knopje linksboven: sleep het blauwe blokje naar de tekst. Het staat dan op de juiste plek. Mocht je publiceren in een formaat waarbij de vorm niet helemaal vast staat, dan verloopt de tekst misschien wel. Het is fijn als de praatjes dan nog bij de juiste praatjes staan. De illustratie op pagina 4 is óók verankerd aan de tekst.
Objecten die geen plaatjes zijn
Als je moet werken met kaders, pijlen of dergelijke dingen, moet je ze misschien om laten zetten naar pixels. Want anders ben je ze kwijt in de export. Selecteer de groep en kies voor Object, Exportopties voor Object. Kies voor Container rasteren. Dan worden de objecten omgezet naar plaatjes. De groep pijlen hiernaast wordt omgezet naar PNG. Als je JPG kiest verlies je de transparante achtergrond.
Hyperlinks en bladwijzers
Met hyperlinks spring je naar andere pagina’s toe in je document. Of naar je email-programma. Of naar een (andere) webpagina. Typisch voor hyperlinks is dat ze verbonden zijn aan de tekst. Het schuift mee met de tekst. Dus als dit woord een hyperlink heeft, zit de interactiviteit altijd op die plek. Ook als de paragraaf op een andere plek komt te staan. Nadeel van hyperlinks is dat ze vrij klein zijn. Alleen de x-hoogte van de tekst is klikbaar. Een vinger is veel groter dan dat. Stop niet te veel hyperlinks bij elkaar in de tekst, want dan bedient het niet fijn meer, met de vinger.
Hyperlinks maak je aan via Venster, Interactief, Hyperlinks. Selecteer wat tekst, en kies voor Nieuwe Hyperlink (dat vind je in het menu van dat deelvenster). Een hyperlink is ook: mailto:peter@pixelsenpaginas.nl
Hyperlink naar bepaalde pagina
Je kunt met een hyperlink willen springen naar een pagina. Maar dat werkt niet altijd. Veiliger is om met een hyperlink te springen naar een tekstanker. InDesign noemt dat een hyperlinkdoel. Je maakt een nieuwe hyperlink aan die je brengt naar zo’n doel. Dat doe je op andere tekst op een andere bladzijde dan het doel. Zorg er wel voor dat je een visueel verschil maakt in de tekst. Zoals onderstrepen, of een andere kleur. Als je een hyperlink zelf wilt maken, selecteer je de tekst, en kies je bij het deelvenster Hyperlinks voor Nieuwe Hyperlink van URL, of Nieuwe Hyperlink. Kruisverwijzingen zijn ook een soort Hyperlinks. Die zijn ook klikbaar, maar met een bijzonder soort anker.
Knop naar een andere pagina
Je kunt met een knop ook naar een pagina springen. Best handig, maar een knop loopt niet mee met de tekst. Een hyperlink wèl. Een knop kun je weer veel groter maken dan een hyperlink. Dus makkelijker aan te tikken met grote vingers. Als je met een knop naar een andere pagina wilt, moet je eerst een nieuw Hyperlinkdoel aanmaken. De bovenste van deze twee knoppen hiernaast springt naar pagina 7 via de opdracht ‘ga naar pagina’ en de onderste gebruikt ‘ga naar doel’. Werkt allebei.
Hoe werken de knoppen?
Een knop is een object met een opdracht. Zodra er een opdracht aan een object is verbonden, is het een knop. Daarnaast heeft een knop de mogelijkheid om een mouse-over te hebben. Ook wel Rollover-state genoemd: zodra de muis er boven hangt, kan het uiterlijk veranderen. Zelfs het aanraakmoment (Click-state) kan een ander uiterlijk meekrijgen. Leuk voor computers, maar niet op tabletten en smartphones. Want dan is er geen Rollover-moment. En als je vinger op zo’n knop zit, zie je hem niet veranderen van kleur. Daarvoor is je vinger te dik.
Als je met het zwarte pijltje een object aantikt, kun je in het deelvenster Knoppen&Formulieren een actie er aan toekennen (via dat plusje). Dan is het al een knop geworden. Zodra het een knop is, heeft het een Normaal-state. Als je wilt, tik je ook de Rollover-state aan, en verander je de objecten van kleur (even dubbeltikken om in de rolloverstate te komen). En dat geldt ook voor de Klikstatus.
Knoppen die wat anders doen
Je kunt ook wat variëren met knoppen. Deze knoppen zijn zelf gemaakt in InDesign. Ze doen van alles wat, en hebben soms een wat gekke Rollover.
De eerste knop heeft een Rollover waarin het doorzichtige driehoekje verplaatst is. De tweede knop brengt je naar een webpagina. Dat kan betekenen dat je de applicatie verlaat. De derde knop toont en verbergt een andere knop, bij Rollover en Rolloff. Die knop is ingesteld om eerst onzichtbaar te zijn (verborgen totdat activering plaats vindt). Daar heb je op een tablet niets aan, want dan is er geen Rollover. De vierde knop heeft gewoon weer een aparte Rollover en brengt je naar de volgende pagina. Knoppen worden omgezet naar objecten, zonder dat je daar zelf nog iets voor moet doen bij Exportopties voor object.
Belangrijk: standaard staat een actie onder de gebeurtenis ‘bij loslaten of klikken’. Dat is goed. Die doet het namelijk altijd, ongeacht hoe je exporteert (natuurlijk kun je nog wel een actie kiezen die niet wordt ondersteund door het uitvoerformaat dat je kiest).
Knoppen tonen andere knopppen
Eventueel gebruik je het om andere knoppen te tonen of te verbergen. In die andere knoppen heb je dan slechts een afbeelding geplaatst. Door op knop BLIJ te drukken wordt plaatje 1 getoond. Door op knop BOOS te drukken wordt plaatje 1 en 3 verborgen en 2 getoond. Door op knop BANG te drukken worden plaatje 1 en 2 verborgen en 3 getoond.
BLIJ
BOOS
BANG
Start / stop de film
In het kader hieronder staat een filmbestand. Gebruik de knoppen onderin om de film mee te bedienen. De groene knop begint bij het begin, de oranje knop pauzeert de film, de grijze knop gaat verder waar je had gepauzeerd en de rode knop stopt hem helemaal. De gele knop speelt af vanaf een navigatiepunt dat op 9sec staat.
Objectstatussen
In een slideshow stop je meerdere objecten. Alleen een objectstate in een objectstate lukt niet. Maar je kunt wel een film toevoegen aan een state. Of een tekstkader. Of een scrollkader. Of een animatie.
De knopjes hieronder brengen je naar een andere Objectstate.
Als je dit wilt laten werken in een PDF, moet je
1.eerst de selectie van knoppen en objectstatussen exporteren naar SWF.
2.Daarna die SWF plaatsen op de pagina (en de originele knoppen en objectstatussen dan maar even verbergen).
3.Gebruik het deelvenster Media om Automatisch afspelen in te schakelen,
4.en om een betere poster te maken dan dat standaard Flash-icoon: dan zien we in InDesign wat het voor object is.
5.En dan een export maken naar interactieve PDF.
6.In de PDF moet je het witte kader weer op doorzichtig instellen.
Autoplay slideshow: IN5
Er is geen autoplay slideshow. Wel kun je dit instellen in het deelvenster Overlays. Maar dit wordt niet meegenomen in export naar ePubFXL. Ook niet in PDF. En zelfs niet bij Publish Online. Alleen een export met IN5 neemt autoplay mee als instelling. En Crossfade, en Loop. Eigenlijk is dit wel heel erg jammer. Echt een gemis in InDesign. Leve AjarProductions!
Informatiebuttons met actieve klikstatus
Soms wil je een informatieknop maken. Als de lezer er op tikt, komt een stukje tekst tevoorschijn, en is de informatieknop anders vormgegeven. Na nogmaals klikken op de knop komt ie weer in de normale status, en is de tekst verdwenen. Zoals hier. Je maakt dan geen knop aan van de informatieknop zelf, maar legt er een overheen, zonder kleur. Die knop laat dan een andere/volgende status zien van de informatietekst. Kijk nog eens naar “Knoppen tonen andere knopppen” op blz 10 en bedenk hoe je deze vorm kunt maken met knoppen die ingedrukt lijken te blijven. Of kruisvakjes die aangevinkt zijn als je het ene of het andere plaatje ziet.
De naam van buttons
De naam van objectstatus moet uniek zijn in je document. Anders functioneert het niet – dat geldt ook voor buttons. Als je hem dupliceert zal InDesign de naam al uniek maken. Maar controleer het altijd of de namen logisch zijn.
Als je gebruik maakt van Analytics, wordt de naam van de knop of slideshow ook gebruikt in de rapporten.
Videomateriaal
Video kan ingesloten worden in de publicatie. Een ePub wordt daar wel een zwaarder bestand van. Als je kiest voor Publish Online, wordt het bronmateriaal online gezet. En pas gedownload als de lezer de film afspeelt. Werk je met IN5, dan geldt het zelfde. Bij PDF wordt de video ingesloten.
Videoformaten
Vroeger was FLV de standaard. Nu is dat MP4, met H264-encoding. Zet eventueel je films om met Adobe Media Encoder.
Video met een loop, en autoplay
Dat kan niet altijd. Bij het ene formaat lukt het nog, en bij het andere niet. Autoplay is een optie in het deelvenster Overlays. En in het deelvenster Media. Daar zit ook de Loop-functie.
Anders dan rechthoekig
Een film afsnijden omdat je de zwarte randjes niet wilt zien? Lastig. Maar wel te doen. Je legt er een ander object bovenop. Het zit de eventuele controllers misschien in de weg: dan kun je niet bij de knop voor pauze, of start. Navigatiepunten waren oorspronkelijk voor FlashVideo bedacht, maar die doen het meestal toch wel. Zie ook “Start / stop de film” op blz 11.
Video die online staat
Als je een video wel wilt laten zien, maar niet wilt insluiten, moet ie online staan. PDF ondersteunt dat wel. HTML natuurlijk ook. Maar ePub niet: die wil alleen ingesloten video’s. Hoe verwijs je naar een online video? Eerst zoek je een video op bij Youtube, of Vimeo. Kopieer daar de insluitcode. Die begint met <iframe> en eindigt met </iframe>. Die code plak je als je het dialoog voor je hebt van het menu Object, HTML invoegen. Voor PDF maak je gebruik van het uitrolmenu van het deelvenster Media: video vanaf URL… Je moet dan het exacte pad van een Flashvideo invoeren. De film hieronder is trouwens zonder geluid. Dat je het maar weet…
Adobe Digital Editions is een uitzondering: versie 4.5 laat een online video ook gewoon zien.
Geluid
Soms wil je gewoon dat er een geluidje afspeelt na het laden van de pagina. Of je wil de lezer een langer geluidsfragment aanbieden. Die moet hij zelf starten, want autoplay is dan vervelend. Gebruik Mp3-formaat. De controllerbestanden kunnen worden aangewezen via het deelvenster Overlays.
Het maken van die Controllerbestanden was best een klusje.
Animaties
Dingen die bewegen op commando, of vanzelf als de pagina wordt vertoond. Lastig dat transparantie van teksten zelf wordt verwijderd. HTML ondersteunt het wèl, maar ePub niet. Gebruik exportopties van objecten om ze te laten rasteren naar PNG. Dan ziet het er goed uit. Want anders moet je transparantie vermijden.
Maak je eigen bewegingslijn
Je kunt een object ‘laten invliegen vanaf onderkant’. Die start met een Fade-in. Maar de beweging is vrij kort. Dat is dat groene lijntje. Met de witte pijl kun je de lengte ervan veranderen.
Je kunt ook een extra pad maken (gewoon met de pen of potlood). Deze selecteer je samen met je animerend object. En onderin het deelvenster Animatie druk je op.
Zet de versnelling of vertraging uit of aan
Als je een animatie kiest zoals Invliegen vanaf Onderkant zie je kleine puntjes op die groene lijn. Onderin met meer afstand, bovenin staan ze dichter op elkaar. Dichter op elkaar betekent langzamer. In de eigenschappen van het deelvenster Animatie kun je zien dat de snelheid gebaseerd is op Voorinstelling. Je kunt de snelheid op Geen zetten: dan is er geen snelheidsverandering.
Pas de animatieversnelling zelf aan
Als je zelf de versnelling of vertraging (easing) wilt kiezen, is dat lastig: je moet via het menu van het deelvenster eerst een export maken naar XML. Dan moet je in tekst en getallen (code) je versnelling programmeren. Bijna niemand vindt dit leuk.
Pas de tijdsduur aan
Animaties die te lang duren, zijn vervelend. Standaard duurt een animatie een seconde. In het deelvenster Animatie kun je instellen dat het nog korter mag. De blauwe ballen hebben dezelfde beweging maar in een korter tijdsbestek; de gele ballen het zelfde tijdsbestek maar gebruiken een andere vertraging of versnelling.
Pas de timing aan
Normaal komen animaties na elkaar. Als je wilt dat ze tegelijkertijd afspelen, moet je de animaties selecteren in het venster Timing. Dan tik je op de ketting onderin. Zonder ketting is het als een estafette; met ketting kunnen ze tegelijkertijd starten of nog met een kleine vertraging. De gele ballen zijn aan elkaar verbonden.
Animeren op commando
Soms heb je een animatie gemaakt die pas mag lopen als er op een knop wordt gedrukt. Zoals deze stopwatch. Elke animatie start niet van zichzelf. Dus alle vinkjes uit. Het vinkje ‘Bij knopgebeurtenis’ gaat aan via een extra actie die je toevoegt aan de knop bovenin. Gebruik het deelvenster Timing om te zorgen dat de wijzers tegelijk worden gestart en gestopt.
Gemaskeerde animatie
De tekst heeft eerst een animatie gekregen. Toen het vinkje uitgezet bij Gebeurtenis (dus niet meer automatisch afspelen bij laden van pagina). Daarna de tekst geknipt. En geplakt in een vierhoekig kader. Rond werkt niet. Je kunt nu niet meer de animatie van de tekst aanpassen. Daarna de groene knop aangetikt, en een extra actie toegevoegd aan de groene knop: start de animatie van Timing is Everything.
Animatie in ObjectStates
Je kunt ook een animatie maken in een status. Eerst moet je een object animeren. Daarna maak je van meerdere animerende objecten een Statusobject. Het vertonen van de statussen gaat gepaard met het starten van een animatie.
Animerende ofwel geneste animaties
Een wiel dat ronddraait en zich verplaatst in de breedte van het scherm. Dat doe je door met groepen te werken. Of door een animerend object te plakken in een ander object dat zelf ook beweegt.
Animaties uit Adobe Animate
Als je een animatie hebt gemaakt met Adobe Animate, bewaar die dan als .oam-bestand. Dan heb je een preview in InDesign. InDesign kan ook wel HTMLbestanden plaatsen, maar dat gaat zonder preview. Gebruik het deelvenster Overlays om autoplay en transparante achtergrond in te stellen.
Waarom zou je nog meer animatie gebruiken dan wat je in InDesign kunt maken? Omdat je niet zo veel interactie kunt programmeren in InDesign. Met Adobe Animate kan dat wèl.
Je kunt schuifkadertjes maken waarmee het gebruikte oppervlak van je publicatie groter wordt. Ook met InDesign kun je dergelijke schuifkaders maken (verderop meer daarover).
Het voorbeeld hiernaast is gemaakt met Adobe Animate, en bewaard als .oam. Omdat het eigenlijk HTML is (in een strak jasje) past het niet in een PDF. Wel in een ePub, en in Publish Online. IN5 heeft er nog moeite mee.
Animaties op basis van HTML
IN5 heeft liever gewoon HTML. Een stukje HTML plaatsen, dat kan immers ook. Maak een leeg nieuw kader aan. Gebruik het deelvenster Overlays. Kies voor Webinhoud. Blader naar een mapje met een HTML-bestand. Je krijgt in InDesign geen preview. Dus je moet testen in het uiteindelijke bestand. Zoals ePub of HTML. Of Publish Online.
Webpagina’s in iframes
Je kunt naar een website verwijzen in een iFrame: via Object, HTML invoegen. Of je maakt gebruik van Webinhoud, in het deelvenster Overlays. Hieronder heb ik een iframe gebruikt.
Webinhoud
In het deelvenster Overlays kun je een kader maken, en dit instellen als Webinhoud. Je moet dan een plaatselijke HTML aanwijzen, of een bestaande URL intypen. Hieronder is zo’n kader gebruikt, met verwijzing naar de Adobe website. Binnen InDesign heb je dus geen voorvertoning. En een extern HTML wil niet geladen worden.
Schuifbaar frame
Een kader met meer tekst dan wat er op je pagina past. Je benut daarmee het bruikbare oppervlak nòg meer. Bovendien moet de lezer met de vinger iets doen. Dat verhoogt de aandachtswaarde. En dus kan de boodschap beter overkomen.
AjarProductions, bekend van IN5, maakt een plugin. Gratis installeren via http://ajarproductions.com/scroll/. Daarmee kun je kaders maken die horizontaal of verticaal laten scrollen. Standaard wordt de scrollbar getoond in doorzichtig zwart. Maar als het nodig is, kun je die nog aanpassen in een CSS-bestand. Je moet zelf even bedenken hoe je het duidelijk maakt voor de lezer: onderste regel afsnijden, lijnen, fade-out, pijlen. Pas eventueel de voorkeuren bij Hulplijnen en Plakbord aan om een grotere plakbordruimte te maken.
In een scrollkader kun je ook meerdere objecten toevoegen: dan moet je eerst een groep maken. Die knip je, en plak je in het schuifbaar frame. Als het een groep is geworden, kun je via het lagendeelvenster er nog objecten aan toevoegen.
Je mag ook schuifframes maken binnen andere schuifframes. Of je voegt knoppen toe. of films.
Waar is Waldo?
Horizontaal en verticaal scrollen in één object
Je kunt ze zelf maken met InDesign. Horizontaal scrollen èn verticaal scrollen is voor ePub en HTML niet zo makkelijk. Misschien dat er een update nodig is voor de plugin UniversalScrollingFrames. Bovendien: het aantikken van het tabblad gaat niet. Je moet op de computer de scrollbar gebruiken. Allemaal niet zo gebruiksvriendelijk of logisch.
Een transparante achtergrond in het tabblad maak je door exportopties voor object in te stellen. Daar kies je voor omzetten naar PNG.
Voor tabbladjes is het misschien nog iets te vroeg (april 2016). Die deden het vroeger wel, in Digital Publishing Suite.
Voetbal is simpel. Het is echter moeilijk om simpel te voetballen. De Argentijnen kennen niet van jouw winnen maar je kunt wel van hun verliezen; das logisch. Als je sneller wilt spelen kun je wel harder lopen maar in weze bepaalt de bal de snelheid van het spel. In voetbal is het simpel: je bent op tijd of je bent te laat.
Als je te laat bent, moet je zorgen dat je op tijd vertrekt. Ik houd van creatieve spelers, Gianluca Vialli is een vedette, heerlijk om naar te kijken. Ik zal zo’n speler nooit proberen uit te schakelen door middel van een mandekker. Ik kijk welke spelers hem aanspelen, vervolgens probeer ik dat te verhinderen, waardoor hij geen ballen krijgt. Als hij de helft van de ballen krijgt, heb ik nog maar een half probleem. Ik heb wel eens gezegd: als je met 4-0 voor staat en er zijn nog tien minuten te spelen, kun je beter twee ballen op de lat schieten, zodat de mensen oei en ai roepen, want als je 5-0 maakt, is dat alleen maar voor de stand. Bij Marco van Basten weet je nooit wat hij doet, hij gaat links als je rechts verwacht en binnendoor als iedereen denkt dat je alleen buitenom kunt. Daar houd ik van.
Om goed te voetballen, heb je goede voetballers nodig, maar een goede voetballer heeft bijna altijd het probleem van een gebrek aan rendement. Hij wil het altijd mooier doen dan strikt noodzakelijk. Mensen zeggen ook dat een ploeg die met tien man speelt gevaarlijker is dan een ploeg met elf man. Hoe vaak heb je dàt nou niet gehoord?
Afbeeldingenreeks (image sequence)
Als die het ooit goed gaat doen: het is een serie losse foto’s die opgenummerd in een map klaar staan. Zoals een stop-motion filmpje. Door swipen kun je op handbediening vooruit of achteruit afspelen. De techniek is al van Adobe: ze hoeven alleen maar te zorgen dat ie ook werkt in een ePub. Bij export met IN5 speelt ie in ieder geval nog af.
Schuiven en Zoomen
Ooit was dit een leuke toevoeging bij het maken van apps: een foto waarin je op een tablet enorm kon inzoomen nadat je hem had aangetikt. Naar ePub doet het niks. En naar HTML ook niet. Hooguit Schuiven.