InDesign interactive

27
visuele communicatie InDesign Interactief Raoul Postel docent CROSSmedia maker | ontwerper grafisch vormgever webdesigner / developer ondernemer ar html css epub share pdf 3d vr dpi cmyk rgb px cms mbo hbo

Transcript of InDesign interactive

Page 1: InDesign interactive

visuele communicatie

InDesign Interactief

Raoul Postel

docent CROSSmedia maker | ontwerpergrafisch vormgeverwebdesigner / developerondernemer

ar

html

css

epub share

pdf

3dvr

dpicmyk

rgb px

cms

mbohbo

Page 2: InDesign interactive

InDesign & Automatiseren

automatiseren - laden vanuit database - xml - toc & bookmarks

Page 3: InDesign interactive

InDesign & Interactie

Interactieve Elementen - interactieve PDF - formulieren / buttons - animatie Flash-Indesign - audio / video

Page 4: InDesign interactive

Tablet Publishing - Adobe Content Viewer - InDesign DPS (Desktop Publishing Suite) - folio builder - multiple page layout - overlay interactiviteit

InDesign & Tablets (DPS)

Page 5: InDesign interactive

InDesign & Tablets (DPS)

Page 6: InDesign interactive

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

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

Les 2 hyperlinks (anchor | destination)

1. bestemming definieren 2. link toewijzen

InDesign interactie & PDF

Page 9: InDesign interactive

InDesign & interactieve PDF

Page 10: InDesign interactive

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

InDesign & HTML

Page 12: InDesign interactive

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

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

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

InDesign & HTML

Page 16: InDesign interactive

InDesign & HTML

Page 17: InDesign interactive

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

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

InDesign & EPUB

Page 20: InDesign interactive

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

InDesign & EPUB

Page 22: InDesign interactive

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

InDesign & EPUB

Page 24: InDesign interactive

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

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

InDesign & EPUB

Page 27: InDesign interactive

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