InDesign interactive
-
Upload
raoul-postel -
Category
Design
-
view
1.194 -
download
0
Transcript of InDesign interactive
![Page 1: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/1.jpg)
visuele communicatie
InDesign Interactief
Raoul Postel
docent CROSSmedia maker | ontwerpergrafisch vormgeverwebdesigner / developerondernemer
ar
html
css
epub share
3dvr
dpicmyk
rgb px
cms
mbohbo
![Page 2: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/2.jpg)
InDesign & Automatiseren
automatiseren - laden vanuit database - xml - toc & bookmarks
![Page 3: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/3.jpg)
InDesign & Interactie
Interactieve Elementen - interactieve PDF - formulieren / buttons - animatie Flash-Indesign - audio / video
![Page 4: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/4.jpg)
Tablet Publishing - Adobe Content Viewer - InDesign DPS (Desktop Publishing Suite) - folio builder - multiple page layout - overlay interactiviteit
InDesign & Tablets (DPS)
![Page 5: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/5.jpg)
InDesign & Tablets (DPS)
![Page 6: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/6.jpg)
Les 1 - database gegevens inladen - content vervangen dmv XML - TOC maken InDesign - TOC naar bookmarks PDF - bookmarks aanmaken in PDF
InDesign automatiseren
![Page 7: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/7.jpg)
Les 2 interactive PDF maken
- hyperlinks (url | email | anchor | destination) - pagina overgangen - video / audio (H.264 --> mp4 | mp3)
InDesign interactie & PDF
![Page 8: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/8.jpg)
Les 2 hyperlinks (anchor | destination)
1. bestemming definieren 2. link toewijzen
InDesign interactie & PDF
![Page 9: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/9.jpg)
InDesign & interactieve PDF
![Page 10: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/10.jpg)
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
![Page 11: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/11.jpg)
InDesign & HTML
![Page 12: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/12.jpg)
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
![Page 13: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/13.jpg)
Les 4 HTML export
- HTML5 - losse tekstkaders, geen kolommen - illustratiekader wordt afbeelding - video/audio (h2.64) blijft behouden - responsive (%) layout
InDesign & HTML
![Page 14: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/14.jpg)
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
![Page 15: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/15.jpg)
InDesign & HTML
![Page 16: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/16.jpg)
InDesign & HTML
![Page 17: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/17.jpg)
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
![Page 18: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/18.jpg)
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
![Page 19: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/19.jpg)
InDesign & EPUB
![Page 20: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/20.jpg)
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
![Page 21: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/21.jpg)
InDesign & EPUB
![Page 22: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/22.jpg)
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
![Page 23: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/23.jpg)
InDesign & EPUB
![Page 24: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/24.jpg)
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
![Page 25: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/25.jpg)
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
![Page 26: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/26.jpg)
InDesign & EPUB
![Page 27: InDesign interactive](https://reader034.fdocument.pub/reader034/viewer/2022050614/589ea6df1a28ab38288b51a7/html5/thumbnails/27.jpg)
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