Interaktivní grafika má být od grafika

Interaktivní grafika má být od grafika

Příprava interaktivních dokumentů spočívá jednak v přizpůsobení dokumentu pro prohlížení na počítači, případně na jiném zařízení, například mobilním telefonu a zároveň v přidání potřebné interaktivity.

Adobe InDesign CS5

Animace

V předchozích verzích bylo možné se v dokumentu pohybovat s využitím navigačních tlačítek nebo přidávat hypertextové vazby. Adobe InDesign CS5 významným způsobem rozšiřuje interaktivní prvky, které můžeme do dokumentu přímo v InDesignu přidat.

Tím základním novým prvkem jsou nepochybně animace. Pomocí panelu Animace můžete přidávat jednotlivým objektům „animace“ nebo ovlivňovat jejich chování vázané na událost. Animací může být jak změna polohy, tak i velikosti, otočení nebo krytí objektu. A událostí pak například zobrazení stránky, klepnutí na objekt, nebo může být tato událost vázaná na určité tlačítko.

<V panelu Animace máte přehled parametrů animaci včetně událostí, které je spouští>

Tlačítka, známá již z minulé verze, mohou nyní spouštět animace. Díky tomu můžete jednoduše vytvořit z obsahu dokumentu obsah interaktivní. A to například tak, že vytvoříte tlačítka z jednotlivých položek obsahu, aby se při najetí na ně spustila animace, nebo zobrazil textový rámeček s popisem.

Stavy objektů

Další novinku, kterou můžeme pomocí tlačítek měnit, jsou stavy objektu. Objekt můžeme jednoduše převést na vícestavový objekt v paletce Stavy objektů. Tato paletka pak ukáže seznam stavů objektu a vy můžete si vybrat, s jakým stavem budete v InDesignu pracovat a přiřadit každému stavu jeho obsah. Dalším způsobem, jak rychle vytvořit vícestavový objekt i s obsahem, je označit více objektů a nechat z nich vytvořit jeden vícestavový. Tlačítku pak přiřadíte funkci přechodu na další nebo předchozí stav. Tak můžete například vytvořit galerii obrázků.  Tlačítku lze také přiřadit přechod na vybraný stav. Pokud budeme opět mluvit o galerii obrázků, můžete vytvořit náhledy obrázků jako tlačítka a jeden vícestavový objekt pak bude zobrazovat daný obrázek ve zvětšení.  Stavy objektů využijete při exportu dokumentu do SWF.

Každý stav objektu se může lišit na svou velikostí, tahem i výplní, ale i druhem obsahu. V prvním stavu může objekt obsahovat obrázek, v druhém text a v dalším video. Jednotlivý stav objektu může obsahovat i více rámečků. Tedy nejen obrázek, ale i rámeček s popiskem k tomuto obrázku.

Náhled interaktivity

Z každého panelu se můžete rychle podívat na to, co jste vytvořili. V paletce Náhled si můžete spustit náhled stránky nebo celého dokumentu. Je možné si také vybrat jen některé objekty a nechat si ukázat v náhledu jak se bude nastavená interaktivita chovat a jestli je to tak, jak jste zamýšleli.

<Panel Náhled si můžete zvětšit dle potřeby nebo vybrat jen důležité objekty a zkusit zda vše funguje jak má>

Pokud si chcete užít vytvořenou interaktivitu naplno, můžete si dokument vyexportovat do souboru SWF nebo PDF. Soubor SWF dokáže využít mnohem více interaktivních prvků. Pokud se zamyslíte nad možnostmi, co Adobe InDesign CS5 dává v oblasti interaktivity, tak zjistíte, že je velmi snadné v něm vytvořit i jednoduchý web. A to bez jakékoli znalosti programování.

Adobe Flash Catalyst CS5

Novinkou mezi produkty řady CS5 je Flash Catalyst. Catalyst slouží pro snadné propojení aplikací Illustrator a Photoshop s Flashem. Lze ho použít, pokud chcete vytvořit jednoduché webové stránky, nebo pokud připravujete webové stránky nebo návrh grafiky aplikace pro další zpracování programátorem. Princip je takový, že vytvoříte grafiku v programech, které znáte, a v Catalystu jim pak přidáte základní interaktivitu. Způsob práce s grafikou je ale odlišný od InDesignu. Hned prvním rozdílem je, že grafiku z Illustratoru nebo Photoshopu pouze importujete. V programech samotných interaktivitu nepřidáváte, od toho je Catalyst. Pokud pak potřebujete něco v programech upravit, zavoláte si je přímo z Catalystu.

Stránky

V Catalystu samotném objekty nejspíš nebudete vytvářet, i když to v omezené míře možné je. Nejlepší způsob, jak pracovat, je importovat grafiku Illustratoru nebo Photoshopu. Catalyst strukturu z importovaného souboru zachová a umí pracovat s objekty, skupinami objektů i vrstvami. Ve Photoshopu nebo Illustratoru vytvoříte stránku se všemi prvky, které budete používat, a pak z této stránky vytvoříte další varianty s tím, že objekty dle potřeby modifikujete nebo skryjete. Animace připravíte pomocí palety Timeline, kde nastavíte, kdy se má jaký objekt při přechodu mezi stránkami zobrazit.

<Přechod mezi stránkami můžete nechat vytvořit automaticky, nebo je velmi snadno vytvořit, aby se objekty objevili uživateli ve správný čas> (Popisek pro Timeline)

Komponenty

Velkou vychytávkou Catalystu je tvorba komponent. Nejjednodušší je tlačítko, tomu pak můžete přidat různé akce. Třeba přechod na jinou stránku. Můžete ale také vytvořit z obdélníku políčko pro vložení textu, nebo datový seznam. Pokud vytvářená komponenta vyžaduje ovládací nebo obsahové prvky, interaktivní průvodce se na ně postupně vyptá a pak vytvoří funkční komponentu. Pokud navíc vytvoříte datový seznam, Catalyst může editovat jednotlivé položky seznamu, abyste v nich mohli listovat.

<Jednoduchý seznam můžete vytvořit přímo v Catalystu, pokud se k tomu dostane programátor, snadno pak komponentu napojí k databázi>   (Popisek pro Design Time Data)

A jaký je závěr                                 

Je asi zbytečné si nechat zakázky proklouznout mezi prsty. Pokud chcete vytvářet graficky poutavé interaktivní dokumenty, máte nyní hned několik možností a ty vychází z nástrojů, které dobře znáte. Ale vždy mějte na mysli, že dokument budou uživatelé jinak číst na papíře a jinak k němu budou přistupovat na počítači. Jestliže budete chtít vytvořit složitější aplikace, kde bude programátor dodělávat logiku a propojení pomocí Adobe Flash Professional CS5 nebo Adobe Flash Builder 4, pak pro něj dokážete připravit grafiku naprosto srozumitelnou. Produkty Adobe CS5 otevírají pro každého grafika nebo designéra nový prostor pro zakázky které může snadno zpracovávat.