Design Trainingen

4 Folio Overlays

<<< terug1 folio navigation & toc2 folio orientatie3 folio overlays4 folio builder5 folio DPS publiceren


Ter informatie: misschien valt het je op, dat door het toevoegen van een alternatieve layout er in het Koppelingen (links)-venster veel koppelingen zijn bijgekomen. Dit zijn tekstkaders die dezelfde eigenschappen bevatten. Indien je door de onderstaande stappen deze links doorbreekt (geel uitroep-teken) is dat niet erg. Deze waarschuwingen mag je negeren. Alleen links/koppelingen naar bestanden (afbeeldingen/media) blijven natuurlijk wel noodzakelijk.


Audio & Video

Audio

Voor het verwerken van geluid binnen een folio, is een .mp3 bestand nodig.

LET OP: indien je al een audio-bestand hebt staan, sla je de volgende 3 stappen over.

  1. Ga naar de pagina COVER (pagina 1 in pagina-venster)
  2. Plaats in InDesign het .mp3-bestand (audio /selfie_the_chainsmokers.mp3) op de pagina.
  3. Plaats deze ongeveer onder in het midden van de pagina.

Geluid instellingen
Wanneer een geluidbestand is geplaatst op een pagina, kunnen instellingen worden gemaakt binnen het Folio Overlays-palet.

  1. Selecteer het geluid-bestand.
  2. Open het Folio Overlays-venster, via: Venster (window)
  3. Kies: Audio
  4. Klik op het mapje achter Controller-­bestan­den.
  5. Kies de map met Audio-Controller afbeeldingen uit: aangeleverd_materiaal / audio
  6. Stel de opties in naar eigen voorkeur.


Video

InDesign kan .mov-bestanden plaatsen, maar geeft de voorkeur aan een .mp4 bestand.
Voor omzetten van .mov naar .mp4 gebruik je het programma Adobe Media Encoder.
In de bestanden-map is reeds een .mp4 aangeleverd.

  1. Ga naar de pagina 3,  iPad H (Horizontale Layout), THE SELFIE
  2. Verwijder het tekstvlak
  3. Plaats het video-bestand #SELFIE - The Chainsmokers.mp4
  4. Kies: Venster (window) / Interactief (interactive)
  5. Kies het Media-venster
  6. Speel de video af, door op de Play-button te klikken.
  7. Kies achter Poster voor: Vanaf huidige frame (From current frame).
  8. Kies vervolgens in het Folio Overlays-venster voor: video.
  9. Vink de opties Automatisch Afspelen en Op Volledig Scherm afspelen AAN

Plaats eventueel een zelfgemaakt afbeeling van een Play button boven op de video.

  1. Ga naar de pagina 4, SELFIE TIPS
  2. Plaats op beide layouts (iPad V en iPad H) het video-bestand How to Take the Perfect Selfie.mp4. Indien de video er al staat is dat niet nodig.
  3. Selecteer de video en kies binnen het Folio Overlays-venster voor: video.
  4. Laat hier Automatisch Afspelen en Op volledig scherm afspelen UIT
  5. Open het Media-venster
  6. Kies achter Poster voor: Van bestand (Choose File).
  7. Kies het bestand uit de map: Video / poster_howto.png

Video insluiten
Het gebruik van Video-bestanden levert een grote bestandsgrootte op. Het duurt bijvoorbeeld langer om het folio de eerste keer in te laden. Vanuit InDesign is het mogelijk om via HTML Invoegen (object) een Youtube-video in te sluiten (embedden). Verbinding met internet is dan wel noodzakelijk.


Hyperlink maken

Maak in InDesign op pagina 5 (beide layouts) een hyperlink op het APP-Store logo naar de 360Selfie-app in de App Store.

LET OP: indien de link er al staat begin dan met stap 5

  1. Trek met het Rechthoekkader-gereedschap een kader over het logo en de URL.
  2. Kies: Venster (window) / Interactief (interactive)
  3. Open het Hyperlinks-venster
  4. Geef een url in bij Interactiviteit (Interactivity)
  5. Open het Folio Overlays-venster en kies voor het deelvenster: Hyperlink.
  6. Geef aan dat de hyperlink moet worden geopend binnen de folio (open in Folio).


Afbeeldingsreeks

Met de optie Afbeeldingsreeks (Image sequence), kunnen diverse afbeeldingen boven elkaar worden geplaatst, waardoor je op de tablet middels swipen door de afbeeldingen kunt bladeren.

  1. Ga naar de pagina 7,  iPad H (Horizontale Layout), BAD SELFIES
  2. Verwijder op deze Horizontale Layout eventueel reeds geplaatste afbeeldingen
  3. Toon het Layers-venster (Layers) vanuit het Venster-menu (Window).
  4. Maak in je document een nieuw laag: image swipe
  5. Teken een afbeeldingskader zoals op onderstaand voorbeeld
  6. Kies binnen het Folio Overlays-venster voor: Afbeeldingen reeks (Image Sequence)
  7. Importeerd alle afbeeldingen uit de map:  panning_zooming / bad_selfies
  8. Verklein het afbeeldingskader naar het formaat zoals op onderstaande afbeelding
  9. Vink desgewenst de optie aan: Eerste afbeelding bij begin tonen (Show First Image Initially)
  10. Vink de opties aan: veeggebaar om de afbeelding te wijzigen (Swipe to Change Image)


Panorama (360º fotografie)

Maak van een QuickTimeVR-movie-bestand een 360° weergave. Deze Overlay is zeer geschikt voor presentaties van ruimtes, interieur en omgeving.

Veel digitale camera's maken zelf al 360° afbeeldingen. Als deze naar losse png-afbeeldingen (kubus) kunnen worden geexporteerd, dan zijn deze direct bruikbaar in dit folio. Indien dit niet mogelijk is, dan kunnen 360° afbeeldingen worden gemaakt met speciale software, zoals Pano2VR.

  1. Ga naar de pagina 5,  iPad V (Verticale Layout), 360 SELFIE
  2. Teken, indien deze er nog niet staat, linksboven een tekstkader met daarin een paars pijl-draai symbool. Gebruik het font: Webdings 3.
  3. Verwijder de Alinea- en Tekenstijlen en geef de Tekenstijl: paars.
  4. Vergroot het teken tot de gewenste grootte uit het voorbeeld hieronder.
  5. Teken een leeg afbeeldingskader over de pijl (geen kleurvulling). Dit wordt de knop om de 360 View te activeren.
  6. Open het Folio Overlays-venster en kies: Panorama.
  7. Klik op het mapje achter Laad Afbeeldingen (Load Images) en selecteer in aangeleverd_materiaal de map panorama met de 360 weergave bestanden.
  8. Uitzetten: Gebruik eerste Afbeelding voor Poster (Use First Image for Poster). Anders komt de Poster over de pijl te staan.
  9. Kopieer en plak het kader plus alle instellingen naar de liggende versie (iPad H).


Schuifbaar Frame

Hoe maak je scrollbare kaders?

  1. Ga naar de pagina 6,  iPad H (Horizontale Layout), SELFIE FACTS
  2. Zet alle tabellen naast elkaar van links naar rechts. Vergroot ze een stuk, zoals in de afbeelding hieronder.
  3. Selecteer de tabellen, Groepeer de tabellen en Knip de tabellen (cmd/ctrl + X)
  4. Teken een nieuw kader op de plek waar het schuifbaar frame komt te staan
  5. Selecteer dit kader, klik rechtermuisknop en kies voor Plakken in Kader (Paste Into). LET OP: dat je een GROEP hebt geplakt, anders verschijnt de Plakken in Kader (Paste in Place)-optie niet
  6. Pas de positie desgewenst aan met het Direct selecteren-gereedschap
  7. Kies in het Folio Overlays-venster voor: Schuifbaar frame (Scrollable Frame)
  8. Kies bij Schuifrichting voor: Horizontaal
  9. Plaats op de Verticale pagina (IPad V) ook een schuifbaar frame. Zet hier alle tabellen, paginabreed, onder elkaar.
  10. Pas het kader aan en Kies voor Schuifrichting: Verticaal


EXTRA OPTIES

Eigen schuif symbool (scroll bar)
Binnen het deelvenster Schuifbaar frame, is het mogelijk Schuifindicators mee te geven. Het is ook mogelijk met een eigen symbool aan te geven dat de tekst kan worden geschoven. Groepeer een zelfgemaakte vorm met het tekstkader en plak deze binnen in het kader.

Groepen schuiven (bijv. info-tab die uit de rand van het scherm schuift)
Niet alleen tekst, maar ook tekstkaders en illustraties kunnen als één groep worden verschoven.

  1. Groepeer het tekstkader samen met de afbeeldingen daarnaast.
  2. Verwijder de tekst in het tekstkader binnen de pagina en plak de groep in het lege kader.
  3. Geef aan dat deze horizontaal moet schuiven.

Pannen en Zoomen

Een grote afbeelding in een klein kader plaatsen, maar toch in zijn geheel kunnen bekijken door te schuiven of in te zoomen (pannen-zoomen).

De optie Pannen en zoomen heeft weinig instellingen, maar kan voor leuke resultaten zorgen.

  1. Ga naar de pagina 6,  iPad H (Horizontale Layout), SELFIE FACTS
  2. Selecteer de afbeelding links op de pagina of plaats in een kader het bestand: selfie-infographic_1.jpg. De afbeelding is groter dan het kader. Laat dit ook zo.
  3. Plaats de afbeelding in het midden met de uitlijn-opties.
  4. Open binnen het Folio Overlays-venster: Pannen en Zoomen en kies voor: Aan
  5. Selecteer het kader, kopieer en plak dit ook op de staande versie (iPad V).

NB: horizontale layout is in de vorige opdracht al gevuld met een Afbeeldingsreeks.

Doe dit ook voor de Verticale Layout op pagina 7: BAD SELFIES.

  1. Selecteer op de Verticale Layout met de Direct Selecteren tool (witte pijltje) de eerste Bad Selfie.
  2. Zet bovenin de optie-balk het verschalingspecentage op 100%
  3. Centreer bovenin de optie-balk de afbeelding in het afbeeldings-kader. Je ziet nu maar een stukje van de Bad Selfie foto.
  4. Open binnen het Folio Overlays-venster het deelvenster: Pannen en Zoomen en kies voor: Aan
  5. Doe dit ook met alle andere foto's op de verticale pagina.


Webinhoud laden

Je kunt webinhoud op in een folio laten zien. Meestal link je direct naar een bowser, maar in sommige gevallen is het handig om een website in het folio te laden. Bijvoorbeeld bij een contactformulier of enquete. Het verzenden van een formulier vereist meestal een webserver. Een folio wordt meestal offline gebruikt en dus werkt het formulier niet.

  1. Ga naar de pagina 8,  iPad V (Verticale Layout), ENQUETE
  2. Sleep een kader ter grootte van het licht-paarse vlak, zoals hieronder in de afbeelding. Laat op de horizontale pagina het reeds gemaakt formulier staan
  3. Open binnen het Folio Overlays-venster het deelvenster: webinhoud (webcontent)
  4. Voer deze url in: http://files.postelontwerpen.nl/folio/enquete_folio.php

Maak stap 4