Pracovný list č.3 Adobe InDesign Vytvorenie interaktívnych dokumentov formátov SWF a PDF V tomto zadaní do dokumentu, ktorý bude určený pre elektronickú distribúciu a prezeranie na internete doplníme finálne interaktívne drobnosti (tlačidlá, hyperväzby a prechody stránok) vyexportujeme do súboru SWF formátu Flash. Neskôr dokument tiež vyexportujeme (vrátanie tlačidiel, hyperväzieb a prechodu stránok) do súboru Adobe PDF, ktorý zachová všetky interaktívne vlastnosti a poskytne ďalšiu možnosť ako dokument elektronicky distribuovať. Interaktívne prvky budeme vkladať do finálneho katalógu (Reklamný katalóg 2010. indd), ktorý je pôvodne určený pre tlač, ale môžeme vytvoriť aj úplne nový dokument. 1. Otvoríme súbor Reklamný katalóg 2010.indd 2. Aby sa nám panely a príkazy ponúk zobrazovali stále rovnako, je vhodné zvoliť príkaz Okno Pracovní plocha [ Rozšířené], a potom zvoľte Okna Pracovní plocha Obnovit Rozšířené. Nastavenie dokumentu pre použitie na internet Publikácie pre internet sa v mnohom odlišujú od publikácií určených pre tlač. Napríklad veľkosť stránky online publikácie je závislá na veľkosti monitorov počítačov, zatiaľ čo veľké množstvo tlačených dokumentov používa štandardnú veľkosť papiera. Farebný priestor sa tiež líši: zatiaľ čo tlačené dokumenty používajú farebný priestor CMYK, dokumenty pre internet používajú farebný priestor RGB. Vytvorenie nového dokumentu pre použitie na internet Začíname výberom takej veľkosti publikácie, ktorá je vhodná pre zobrazenie online. 1. Zvoľte príkaz Soubor Nový Dokument. 2. V zobrazenom dialógovom okne nastavíme, napríklad: Do poľa Počet stránek napíšeme 5. Odznačíme voľbu Protilehlé stránky. Z ponuky Velikost stránky vyberieme 1024x768px (štandard pre 17 monitory). V sekcii Sloupce napíšeme do poľa Počet 3. Klikneme na tlačidlo OK. Dokument uložíme pod nejakým vhodným menom, napr.: Soubor Uložit jako Priezvisko_prvky_dizajnu.indd Zmena priestoru prelínania priehľadnosti a jednotkového systému Pretože vytvorený dokument pre online zobrazenie exportujeme do súboru Flash (SWF), zmeníme priestor prelínania priehľadnosti dokumentu tak, aby bol kompatibilný, t.j. prevedieme všetky farby do spoločného farebného priestoru CMYK alebo RGB. Dokumenty formátu Flash používajú farebný priestor RGB, preto prevedieme východzí priestor CMYK do RGB. A keďže pracujeme s dokumentom, ktorého rozmery sú vyjadrené v pixeloch, tiež prepneme do iného jednotkového systému. 1. Príkazom Úpravy Prostor prolnutí pruhlednosti RGB dokumentu sa prepneme do farebného priestoru RGB (Obr.1.). 1
2. Príkazom Úpravy Předvolby Jednotky a kroky kláves otvoríme dialógové okno Předvolby. (Obr.2.) 3. V sekcii Jednotky pravítek potom z ponúk Vodorovně a Svisle vyberieme voľbu jednotiek Body. 4. Tlačidlom OK uložíme zmeny a so súborom môžeme ďalej pracovať. Obr.1. Pridanie navigačných tlačidiel Obr.2. Pri navrhovaní online publikácie je mnoho úkonov rovnakých ako pri práci na tlačových publikáciách formátovanie písma, vytváranie, zmena a usporiadanie textových a grafických prvkov, pridávanie a mazanie stránok a pod. Teraz pridáme do prakticky ukončeného dokumentu prvky, ktoré sa v tlačených publikáciách nenachádzajú tlačidlá, hyperväzby, a prechody stránkami. Ovládacie prvky pre pohyb v online dokumente, umožňujú ľahšie nájsť informácie v dokumente. V ďalšej časti prevedieme dva objekty na tlačidla Předchozí stránka a Následujíci stránka pomocou nich je možné v exportovaných dokumentoch SWF a Adobe PDF listovať. 1. Príkazom Soubor Otevřít otvoríme súbor Reklamný katalóg 2010.indd. 2. Príkazom Soubor Uložit jako uložíme súbor pod názvom Reklamný katalóg 2010 online.indd 3. Príkazom Okna Stránky si v paneli Stránky vyberieme ikonu šablóny B-rozloženie, čím zobrazíme túto vzorovú stránku do okna dokumentu. 4. Nástrojom Mnohoúhelník vytvoríme vedľa seba dva trojuholníky orientované opačným smerom (Obr.3.) a umiestnime ich v dolnej časti dokumentu. Poznámka: Ovládacie prvky pre pohyb medzi stránkami musia byť na všetkých stránkach online publikácie. Preto ak ich vytvoríme vo vzorovej stránke, máme istotu, že budú vyzerať a fungovať na všetkých stránkach rovnako. Obr.3. 5. Vyberiem najprv trojuholník orientovaný doľava (ľavý) a príkazom Objekt Interaktívní Převést na tlačítko (príp. z miestnej ponuky) prevedieme tento objekt na tlačidlo, čím sa zobrazí panel Tlačítka (Obr.4.). 6. V paneli Tlačítka do poľa Název napíšeme Predchádzajúca stránka. V ponuke Událost vyberieme možnosť Při uvolnění. Táto udalosť spustí akciu tlačidla Predchádzajúca stránka, akonáhle čitateľ exportovaných súborov Flash a Adobe PDF pri kliknutí stlačí a uvoľní tlačidlo myši. 2
Po určení názvu tlačidla a spúšťacej udalosti musíme ešte zvoliť akciu, ktorá sa spustí. 7. Klikneme na tlačidlo Akce a z ponuky ktorá sa objaví vyberieme voľbu Přejít na předcházejíci stránku. Tým sme nastavili tlačidlo tak, že ak naň čitateľ exportovaného súboru SWF klikne, zobrazí sa predchádzajúca stránka. Tento postup zopakujem a vytvoríme tlačidlo, ktoré bude stránkami listovať dopredu. 8. Nástrojom Výběr vyberieme trojuholník orientovaný doprava a prevedieme ho na tlačidlo príkazom Objekt Interaktivní Převést na tlačítko. 9. V paneli Tlačítka do poľa Názov napíšeme Následujúca stránka. Pridáme novú akciu pre Udalost - Při uvolnění a z ponuky vyberieme voľbu Přejít na následujíci stránku. 10. Panel Tlačítka zatvoríme a súbor uložíme Soubor Uložit. Pridanie prechodu stránok Obr.4. InDesign CS4 ponúka možnosť pridať efekty prechodov stránok v exportovaných súboroch SWF a Adobe PDF. Prechody stránok môžeme zobraziť v náhľadoch vo forme animácií Flash a skúšať nastaviť rôzne rýchlosti a smery prechodov. Pre prechod stránok sú efekty napr. otočenie stránky, rozplynutie, rozdelenie a pod. To znamená, že pri prezeraní online dokumentu kliknutím na tlačidlo prechodu medzi stránkami, ktoré sme vytvorili predtým, bude zmena jednej stránky na inú sprevádzaná vizuálnym efektom. 1. V paneli Stránky poklikáme na stránku 1 a tým ju zobrazíme do celého okna dokumentu. 2. Príkazom Okna Interaktivní Přechody stránek zobrazíme panel Přechody stránek (Obr.5.). 3. Z rozbaľovacej ponuky Přechod vyberieme napr. voľbu Rozplynutí a rýchlosť môže ostať Střední. 4. Z ponuky panela Přechody stránek zvolíme príkaz Aplikovat na všechny dvojstránky, a tým sa prechod Rozplynutí použije vo všetkých stránkach Obr.6. dokumentu (Obr.6.). Obr.5. Pridanie hyperväzby Ak pridáme do dokumentu hyperväzby a exportujeme ho do formátu Flash alebo Adobe PDF, potom kliknutím na takýto odkaz sa presunieme na iné miesto v tom istom dokumente, v inom dokumente alebo na webovú stránku. V ďalšej časti pridáme hyperväzbu, ktorá čitateľa exportovaných súborov (Flash, PDF) presunie na webovú stránku. Najprv vytvoríme cieľ hyperväzby a ten potom priradíme textovému alebo grafickému rámčeku. Tu vytvoríme hyperväzbu na textový rámček. 1. V paneli Stránky vyberieme poslednú stránku súboru Reklamný katalóg 2010.indd. 2. Príkazom Okna Interaktivní Hypervazby zobrazíme panel Hypervazby. 3. Z ponuky panelu zvolíme príkaz Nový cíl hypervazby a nastavíme voľby (Obr.7.): 3
V ponuke Typ zvolíme URL. Do poľa Název napíšeme Grafit-reklamné štúdio pri SPŠO. Do poľa URL zadáme http://www.spsosvidnik.sk. Obr.7. Obr.8. 4. Kliknutím na tlačidlo OK dialóg zatvoríme. Potom nástrojom Text (T) označíme text www.spsosvidnik.sk 5. Z ponuky panela Hypervazby zvolíme príkaz Nová hypervazba. 6. V dialógu skontrolujeme, či sú nastavené nasledujúce voľby: Ponuka Připojit k : Sdílený cíl. Ponuka Dokument: Reklamný katalóg 2010. indd. Ponuka Název : Grafit-reklamné štúdio pri SPŠO. Adresa URL je http://www.spsosvidnik.sk. Vzhled -Typ: Neviditelný rámeček. 7. Kliknutím na OK novú hyperväzbu uložíme a zavrieme dialóg. 8. Zavrieme panel Hypervazby a súbor uložíme. Export do formátu Flash Ak už sme ukončili pridávanie tlačidiel, prechodov snímok a hyperväzby, môžeme dokument exportovať do formátu Flash. Po exporte výsledný súbor otvoríme vo webovom prehliadači, príp. priamo v programe Adobe Flash Player, ktorý sa dá bezplatne stiahnuť zo stránky Adobe (www.adobe.com). 1. Zvolíme príkaz Soubor Exportovat. 2. V dialógu Exportovat v ponuke Uložiťvo formáte vyberieme voľbu SWF a súbor nazveme Reklamný katalóg 2010.swf a klikneme na tlačidlo Uložiť. 3. Nastavenia v dialógu Export do SWF necháme bez zmeny (Obr.9.). Zaškrtnutá voľba Generovat soubor HTML vytvorí spolu so súborom SWF aj verziu v jazyku HTML, čím umožníme zobrazenie súboruaj keby sme nemali nainštalovaný program Adobe Flash Player. Po exportu do SWF sa súbor otvorí. 4. Kliknutím na tlačidlo OK, dialógové okno zatvoríme a vytvoríme súbor SWF spolu s HTML. 5. V prehliadači vyskúšame ako fungujú tlačidla pre listovanie stránkami, prechody stránok a hypertextový odkaz (presunieme sa na zvolenú webovú adresu). 4
6. Keď exportujeme do súboru SWF, v sekcii Interaktivita je štandardne vybraná voľba Včetně interaktivního stočení stránky, ktorá zabezpečí animované listovanie stránkami, ak myš umiestnime v blízkosti rohoch stránky. Obr.9. Obr.10. Export do formátu Adobe PDF Rovnako ako exportované súbory Flash, môžu súbory Adobe PDF exportované z InDesignu CS4 obsahovať tlačidla, prechody stránok a hyperväzby. Naviac môžu obsahovať súbory SWF, QuickTime a súbory zvuku a sprostredkovať tak pôsobivý čitateľský zážitok. Teraz dokument exportujeme do súboru Adobe PDF, otvoríme ho v programe Adobe Reader alebo Adobe Acrobat Professional a vyskúšame interaktívne prvky. 1. Príkaz Soubor Exportovat. 2. V dialógu Exportovat z ponuky Uložiť vo formáte vyberieme voľbu Adobe PDF a súbor nazveme Reklamný katalóg 2010.pdf 3. V dialógu Exportovat Adobe PDF (Obr.10.) zaškrtneme požadované voľby, hlavne interaktívne prvky v sekcii Zahrnout (väčšinou postačuje štandardné nastavenie) a tlačidlom Exportovat vytvoríme PDF súbor, ktorý sa následne aj otvorí, pričom vyskúšame nami vytvorené interaktívne prvky. 4. Nakoniec súbor uložíme. Úlohy: Na rozšírenie našich zručností, je potrebné experimentovať s interaktívnymi prvkami a ich nastaveniami. 1. Otvorte súbor Priezvisko_Reklamný katalóg 2010.indd na ktorom ste prv pracovali. Vyskúšajte okrem prechodu stránok Rozplynutí aj ostatné prechody (Zatmívačka, Rozetřít, Zvětšit/Zmenšit zobrazení atd. Namiesto jedného prechodu pre všetky stránky, použite na rôzne stránky rôzne prechody. Zakaždým súbor exportujte a otestujte vaše zmeny. 2. Vytvorte viac tlačidiel s rôznymi akciami. V spodnej časti vzorovej stránky doplňte ďalšie tlačidlo a prideľte mu inú akciu, napr. prechod na prvú, príp. poslednú stránku dokumentu a pod. 5