indesign interactive
TRANSCRIPT
visuele communicatie
InDesign Interactief
Raoul Postel
docent CROSSmedia maker | ontwerpergrafisch vormgeverwebdesigner / developerondernemer
ar
html
css
epub share
3dvr
dpicmyk
rgb px
cms
mbohbo
InDesign & Automatiseren
automatiseren - laden vanuit database - xml - toc & bookmarks
InDesign & Interactie
Interactieve Elementen - interactieve PDF - formulieren / buttons - animatie Flash-Indesign - audio / video
Tablet Publishing - Adobe Content Viewer - InDesign DPS (Desktop Publishing Suite) - folio builder - multiple page layout - overlay interactiviteit
InDesign & Tablets (DPS)
InDesign & Tablets (DPS)
Les 1 - database gegevens inladen - content vervangen dmv XML - TOC maken InDesign - TOC naar bookmarks PDF - bookmarks aanmaken in PDF
InDesign automatiseren
Les 2 interactive PDF maken
- hyperlinks (url | email | anchor | destination) - pagina overgangen - video / audio (H.264 --> mp4 | mp3)
InDesign interactie & PDF
Les 2 hyperlinks (anchor | destination)
1. bestemming definieren 2. link toewijzen
InDesign interactie & PDF
InDesign & interactieve PDF
Les 3 interactieve PDF maken formulier: veld & knop
• tekst / check / radio / submit / sign / etc.
• clear form / print form
• labels voor PDF
• knop en rollover
formulier: data beheren (Acrobat Pro)
• verzenden met Acrobat distribute
• gegevens ontvangen en beheren met Acrobat Track
•Adobe Forms Central stopt dit voorjaar
InDesign formulieren
InDesign & HTML
Les 3 aavullende info knoppen
• button-actie (swf): werkt niet voor Acrobat op iPad
• hyperlinks-actie werkt altijd voor Acrobat op iPad
aavullende info animatie / video • flash-animatie: werkt niet in Acrobat op iPad/iPhone wel op alle andere apparaten stel altijd een video-poster in
• InDesign-animatie: werkt alleen als swf-export/epub blijft stilstaat in iPDF
• voor animatie is minimaal Acrobat versie 9 nodig
InDesign shockwave Flash
Les 4 HTML export
- HTML5 - losse tekstkaders, geen kolommen - illustratiekader wordt afbeelding - video/audio (h2.64) blijft behouden - responsive (%) layout
InDesign & HTML
InDesign & HTML
HTML met deze code begrijpt de browser een website <tag openen> content </tag sluiten>
<!doctype html>
<html> <head>
<title> grafische vormgeving en zo </title> </head>
<body> <p> inhoud van je website </p> </body>
</html
Les 4
InDesign & HTML
InDesign & HTML
Les 4 HTML export
1. ontgrendel master-items
2. bepaal de volgorde van de elementen met het Articles-panel
3. bepaal de omzetting van alinea-stijlen naar HTML-stijlen (edit all export tags): kop1 —> h1 subkop —> h2 broodtekst —> p
InDesign & HTML
Les 4 EPUB export 1 (voor variabele layout en interactie)
1. gebruik articles-panel voor de volgorde van afbeeldingen en tekstkaders
2. lijn afbeeldingen uit door te groeperen en Standard Rasterization
LET OP: layout is variabel en onvoorspelbaar!
InDesign & EPUB
InDesign & EPUB
Les 4 EPUB export 2 (met behoud van vormgeving) 1. groepeer layout in grote delen
2. gebruik 1 tekstkader waaraan alle objecten zijn verankerd: tekst-ankers
3. selecteer ALLE objecten op de pagina en kies Object Export Options
4. vink de Standard Rasterization AAN
LET OP: interactieve elementen en video worden gerasterd en werkt niet!
InDesign & EPUB
InDesign & EPUB
Les 4 EPUB export 3 (met behoud van vormgeving) 1. exporteer als ePub 3.0 fixed layout
LET OP: interactieve elementen en video werken prima
InDesign & EPUB
InDesign & EPUB
Les 4 HTML en EPUB export 1. alleen tekst en foto’s —> layout variabel / blijft selecteerbaar —> interactieve elementen/video blijven behouden —> noodzakelijke objecten en volgorde in Articles 2. layout als afbeelding —> layout blijft behouden / omgezet naar afbeelding —> interactieve elementen/video werken niet meer —> alle objecten als ankers aan 1 tekstkader —> tekstkader is referentiepunt voor alle objecten 3. een combinatie van beide
InDesign HTML & EPUB
Les 4 HTML en EPUB export
vormgeving met zelf bijsturen met CSS —> stylesheet koppelen in de export-opties —> kan gelijk zijn aan de stylesheet voor html
InDesign HTML & EPUB
InDesign & EPUB
Les 5 animatie (altijd SWF export) - motion tweening - motion presets - timing button/object states
LET OP: SWF-objecten staan altijd in de bovenste laag (kan niet gewijzigd worden)
InDesign animatie