19 maart 2017

HTML5 exporteren, direct vanuit InDesign? Jawel!

.
Keith Gilbert heeft een mooi script geschreven dat HTML5 kan exporteren op basis van FXL ePub.
Je vindt dat script hier.

Maar, een simpeler versie van het script werkt ook nog steeds prima, en dat kunnen we toevoegen aan het menu Bestand van InDesign!

LET OP! Lees wel de beperkingen, zo zijn objecten zichtbaar op het plakbord (maar dat is op te lossen via een 'Plakken In'!*) en is er geen standaard navigatie van pagina naar pagina (daar heb je het uitgebreidere script voor nodig).

*If you see the sample movie I posted in the article above, you’ll notice that the “victory boy” is animated to “fly in from bottom.” Note that this required some extra work because the script doesn’t clip/crop to the page boundaries (so you would normally be able to see the image outside the page frame before he slides in).The solution was to apply the animation, then cut the object to the clipboard and use Edit > Paste Into to place him inside a frame that is only on the page.

Maar, mocht je dit eenvoudige script willen toevoegen aan je menu, dan kun je het hier downloaden.
Unzip het bestand en plaats het daarna in de map InDesign/Script/startup scripts en herstart InDesign

Je ziet onder het menu Exporteren nu een extra menu 'Exporteer HTML5'.





Update 21 maart:
Om vergissingen tegen te gaan (vooral bij 'zware' documenten) word je gevraagd of je echt door wilt gaan:




Klik je op Annuleer, dan gebeurt er niets en zie je dit:



Klik je op OK, dan gaan we aan de slag. Je ziet een voortgangsbalk (bij 'lichte' documenten is het echter zo gepiept):




Als het exporteren gelukt is zie je een dialoog:





In dezelfde map als waarin het InDesign-document staat vind je nu de HTML-pagina's en de resources. Je kunt de eerste pagina ook hernoemen in index.html uiteraard.



LET OP!
Belangrijk: de achtergrond van een pagina is 'transparant' en niet wit. Zet dus op het alleronderste niveau (de onderste laag bijvoorbeeld helemaal onderop) een paginavullend vlak dat je vult met de kleur [Papier]!

TIP:
Wil je zelf navigatie toevoegen voor een document dat uit meerdere pagina's bestaat, gebruik dat een object of kader dat je simpelweg een standaard hyperlink geeft (géén knop!)
De namen van de hyperlinks moeten relatief zijn.
Het is de naam van je document, plus een getal.
LET OP: pagina 2 krijgt nummer 1, pagina 3 nummer twee enzovoort.

Bijvoorbeeld:
De naam van het InDesign-document is 'FiveDaysFromNowhere_EPUB'

Om een hyperlink naar pagina 2(!) te maken, geef je als link op:
FiveDaysFromNowhere_EPUB-1.html

Dus altijd een cijfertje minder achter de naam (_1, _2 enzovoort)

---
Update 21 maart:
Vind je dit vervelend handwerk , het maken van deze hyperlinks?
Gebruik dan ook dit script:
MaakNavigatieHTML5.jsx, dat je plaatst in de map InDesign/Scripts/startup scripts.

Je ziet nu een nieuw menu onder Object /Interactief / Maak navigatie voor HTML-export:





Dit maakt een laag aan Page Turn Buttons (dat ook de bovenster laag moet blijven) met de gewenste hyperlinks (bewaar wel eerste je document met de juiste naam!).



Je kunt deze dit script van Keith Gilbert en mijzelf (NL-versie) hier downloaden. Unzip het bestand en plaats het script in InDesign/Scripts/startup script.

---
Nu kun je naar HTML5 exporteren zoals hierboven beschreven.


Je kunt ook voor een standaard 1024 x 768 sjabloondocument van mij een sjabloon hier downloaden (gebruik de pijlen als objecten om je hyperlinks aan te hangen). Het sjabloon bevat een laag Achtergrond een kader waarop de kleur van de pagina-achtergrond bepaalt. Nu is dat wit (dat zul je ook in 99% van de gevallen willen), de geëxporteerde HTML5 is namelijk standaard zwart, en zwarte tekst op een zwarte achtergrond, die zie je niet**

**Je kunt ook in de map CSS het bestand myCustom.css aanpassen: verander in Background één of twee keer van #000000 (zwart) naar  #FFFFFF (wit): de tweede bepaalt de achtergrond van de pagina zelf, de eerste de achtergrond van de 'outer wrapper' oftewel de kleur die je 'om' de pagina ziet in de browser.










Geen opmerkingen: