VYTVÁŘENÍ A ÚPRAVA SYMBOLŮ

3 VYTVÁŘENÍ A ÚPRAVA SYMBOLŮ Obsah lekce V této lekci se naučíte následující: Importovat obrázky vytvořené v aplikaci Illustrator a Photoshop Vytvářet nové symboly Upravovat symboly Pochopit rozdíly mezi různými typy symbolů Pochopit rozdíl mezi symboly a instancemi Používat pravítka a vodítka k umístění objektů na vymezené ploše Upravovat průhlednost a barvu, zapínat a vypínat viditelnost Aplikovat efekty prolnutí Aplikovat speciální efekty pomocí filtrů Umísťovat objekty v trojrozměrném prostoru ku Lekce03. K dokončení této lekce budete potřebovat přibližně hodinu a půl. Je-li to nutné, odeberte ze svého pevného disku složku s předchozí lekcí. Zkopírujte si sem slož- 86

Symboly jsou znovupoužitelné prvky uložené v panelu Knihovna (Library). Filmový klip, grafika a tlačítko jsou tři typy symbolů, které budete často vytvářet a používat pro speciální efekty, animace a interaktivní prvky. ADOBE FLASH PROFESSIONAL CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 87

Začínáme Nejdříve si prohlédněte hotový projekt, abyste viděli, co budete při osvojování práce se symboly vytvářet. 1 Poklepejte na soubor 03Výsledný.swf uložený ve složce Lekce03/03Výsledný, abyste si tento výsledný projekt mohli prohlédnout ve své prohlížeči. Uvidíte, že projekt tvoří statická ilustrace záběru z kresleného filmu. V této lekci použijete grafické soubory aplikace Illustrator, soubory importované z aplikace Photoshop a symboly tak, abyste pomocí nich vytvořili poutavý statický obrázek se zajímavými efekty. Osvojení způsobu práce se symboly je zásadním krokem na cestě k tvorbě jakékoli animace nebo interaktivního prvku. 2 Zavřete soubor 03Výsledný.swf. 3 V aplikaci Flash zvolte příkaz Soubor (File) Nový (New). V dialogovém okně Nový dokument (New Document) vyberte položku ActionScript 3.0. 4 Na pravé straně inspektoru Vlastnosti (Properties) nastavte šířku vymezené plochy na 600 obrazových bodů a její výšku na 450 obrazových bodů. Klepněte na tlačítko OK. 5 Zvolte příkaz Soubor (File) Uložit (Save), soubor pojmenujte 03_pracovníkopie.fla a uložte jej do složky 03Původní. Importování souborů aplikace Illustrator V lekci 2 jste se naučili, že v aplikaci Flash můžete kreslit objekty pomocí nástroje Obdélník (Rectangle), Elipsa (Oval) a jiných. U složitějších kreseb je však vhodnější vytvořit předlohu v jiné aplikaci. Adobe Flash Professional CS6 podporuje celou řadu grafických formátů, včetně souborů aplikace Adobe Illustrator. Proto můžete kresby vytvářet přímo v ní a poté je importovat do aplikace Flash. 88 LEKCE 3 VYTVÁŘENÍ A ÚPRAVA SYMBOLŮ

Při importování souboru aplikace Illustrator můžete nastavit také to, které vrstvy si přejete importovat a jak by je měl program Flash zpracovat. Nyní si zkusíte importovat soubor aplikace Illustrator obsahující všechny postavy nezbytné pro tvorbu snímku kresleného filmu. 1 Zvolte příkaz Soubor (File) Importovat (Import) Importovat na plochu (Import to Stage). 2 Vyberte soubor postavy.ai, který se nachází ve složce Lekce03/03Původní. 3 Klepněte na tlačítko Otevřít (Open). 4 V dialogovém okně Importovat na plochu (Import to Stage) zkontrolujte, že jsou vybrány horní vrstvy hrdina a robot. Chcete-li si prohlédnout cesty kreslení těchto vrstev, můžete rozbalit skupiny, které jsou skryty pod nimi. Chcete-li importovat pouze určité vrstvy, můžete u vrstev, které chcete vynechat, zrušit zaškrtnutí. 5 V nabídce Převést vrstvy na (Convert layers to) vyberte položku Vrstvy Flash (Flash Layers), zaškrtněte políčko Umístit objekty do původní polohy (Place objects at original position) a klepněte na tlačítko OK. Program Flash importuje grafiku aplikace Illustrator na vymezenou plochu a na časové ose zobrazí všechny vrstvy tohoto souboru. ADOBE FLASH PROFESSIONAL CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 89

Poznámka: V souboru aplikace Illustrator můžete vybrat libovolný objekt, který je v něm zobrazený, a nastavit ho tak, aby se importoval jako symbol nebo bitmapový obrázek. V této lekci budete pouze importovat grafiku aplikace Illustrator, kterou pak ještě převedete na symbol, abyste viděli, jak celý postup probíhá. Seznámení se symboly Symbol je znovupoužitelný prvek, který můžete použít pro tvorbu speciálních efektů, animací nebo interaktivních prvků. Existují tři typy symbolů: grafika, tlačítko a filmový klip. Díky opakovanému použití stejných symbolů můžete zmenšit velikost souboru, a tedy i čas potřebný ke stažení většiny animací. Nezáleží totiž na tom, kolikrát daný symbol ve svém projektu použijete, protože aplikace Flash jeho data uloží pouze jednou. Symboly se ukládají do panelu Knihovna (Library). Přetáhnete-li symbol na vymezenou plochu, vytvoří aplikace Flash jeho instanci, přičemž originál ponechá v knihovně. Instance je tedy v podstatě kopie symbolu umístěná na vymezené ploše. Symbol si můžete představit jako původní negativ a instanci na vymezené ploše jako vyvolanou fotografii. Z jediného negativu tak můžete vytvořit tolik fotografií, kolik chcete. 90 LEKCE 3 VYTVÁŘENÍ A ÚPRAVA SYMBOLŮ

Použití aplikace Adobe Illustrator s programem Flash Aplikace Flash Professional CS6 umí importovat nativní soubory programu Illustrator a automaticky rozpoznat vrstvy, snímky a symboly. Máte-li s programem Illustrator větší zkušenosti, může být pro vás jednodušší navrhnout rozvržení v Illustratoru, poté je importovat do programu Flash a v něm dále přidat animace a interaktivní prvky. Svou kresbu v Illustratoru uložte ve formátu Illustrator AI, který poté můžete naimportovat do programu Flash pomocí příkazu Soubor (File) Importovat (Import) Importovat na plochu (Import To Stage) nebo Soubor (File) Importovat (Import) Importovat do knihovny (Import To Library). Další možností je zkopírovat kresbu v Illustratoru do schránky a vložit ji přímo do dokumentu Flash. Importování vrstev Pokud soubor importovaný z Illustratoru obsahuje vrstvy, můžete je importovat některým z následujících způsobů: převést vrstvy Illustratoru na vrstvy Flash, převést vrstvy Illustratoru na klíčové snímky Flash, převést jednotlivé vrstvy Illustratoru na grafické symboly Flash, nebo převést všechny vrstvy Illustratoru na jedinou vrstvu Flash. Importování symbolů Práce se symboly v Illustratoru je podobná jako v programu Flash. Ve skutečnosti můžete při práci se symboly v aplikacích Illustrator a Flash používat řadu stejných klávesových zkratek (například F8 pro vytvoření symbolu). Když vytváříte symbol v Illustratoru, můžete ho v dialogovém okně Volby symbolu (Symbol Options) pojmenovat a nastavit pro něj specifické volby pro Flash, včetně typu symbolu (jako je například filmový klip) či umístění vztažného bodu. Chcete-li v Illustratoru symbol upravit, aniž by došlo k narušení čehokoliv jiného, stačí na něj poklepat a poté upravit v izolovaném režimu, při kterém Illustrator ztlumí všechny ostatní objekty na ploše. Po ukončení izolovaného režimu dojde k aktualizaci vzhledu symbolu v panelu Symboly (Symbols) i všech jeho instancí. Pomocí panelu Symboly nebo ovládacího panelu programu Illustrator můžete jednotlivým instancím symbolů přiřadit názvy, přerušit vazby mezi symboly a instancemi, zaměnit instanci symbolu za jiný symbol nebo vytvořit kopii symbolu. Kopírování a vkládání kreseb Při kopírování a vkládání (či přetahování) kresby mezi aplikacemi Illustrator a Flash se objeví dialogové okno Vložit (Paste) s možnostmi nastavení tohoto importu. Soubor můžete vložit jako jediný bitmapový objekt nebo jej můžete vložit pomocí aktuálních předvoleb pro soubory AI [pro jejich změnu zvolte ve Windows příkaz Upravit (Edit) Předvolby (Preferences) a v systému Mac příkaz Flash (Flash) Předvolby (Preferences)]. Při vkládání kresby z Illustratoru můžete jednotlivé vrstvy převést na vrstvy Flash, podobně jako při importování souboru na vymezenou plochu nebo do knihovny. ADOBE FLASH PROFESSIONAL CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 91

Formát souboru FXG Formát souboru FXG je cross-platformový formát grafického souboru, který můžete použít ke snadnému přesouvání své kresby mezi aplikací Flash a dalšími grafickými programy společnosti Adobe, například Illustratorem. Chcete-li obrázek Flash exportovat jako soubor FXG, zvolte příkaz Soubor (File) Exportovat (Export) Exportovat obraz (Export Image) a vyberte možnost Adobe FXG. Obrázek FXG se importuje stejně jako kterýkoliv jiný externí soubor pomocí příkazu Soubor (File) Importovat (Import) Importovat na plochu (Import To State) nebo Soubor (File) Importovat (Import) Importovat do knihovny (Import To Library). O symbolech je možné uvažovat rovněž jako o kontejnerech. Jsou to vlastně jakési jednoduché kontejnery určené pro váš obsah. Symbol může obsahovat obrázek JPEG, importovanou kresbu aplikace Illustrator či kresbu, kterou jste vytvořili v aplikaci Flash. Symbol můžete kdykoliv otevřít a upravit, což znamená upravit či nahradit jeho obsah. Každý ze tří typů symbolů v aplikaci Flash se používá k jinému účelu. Již pouhým pohledem na ikonu symbolu, která se na zobrazuje vedle symbolu v panelu Knihovna (Library), poznáte, jde-li o grafiku ( ), tlačítko ( ) nebo filmový klip ( ). Symboly filmových klipů Symboly filmových klipů jsou jedny z nejčastěji používaných, nejvýkonnějších a nejflexibilnějších symbolů. Při vytváření animace budete většinou používat právě symboly filmových klipů. Na jejich instance můžete aplikovat filtry, nastavení barev a režimy prolnutí a vylepit tak jejich vzhled speciálními efekty. Za povšimnutí stojí také to, že jednotlivé symboly filmových klipů obsahují svou vlastní, nezávislou časovou osu. Symbol filmového klipu tak může obsahovat animaci podobně jako hlavní časová osa. Díky tomu lze pomocí nich vytvářet poměrně složité animace. Například motýl může přelétávat přes vymezenou plochu zleva doprava a při tom ještě nezávisle mávat křídly. A co je nejdůležitější, filmové klipy můžete také ovládat pomocí kódu jazyka ActionScript tak, aby reagovaly na akce provedené uživatelem. Filmový klip tak můžete například jednoduše uchopit a přetáhnout. Symboly tlačítek Symboly tlačítek se používají pro zajištění interaktivity. Obsahují čtyři samostatné klíčové snímky, které popisují vzhled tlačítka při různých interakcích s myší. Ovšem k tomu, aby tlačítka vůbec něco prováděla, je nutné jim přiřadit určitou funkcionalitu pomocí kódu jazyka ActionScript. Na tlačítka lze také aplikovat filtry, režimy prolnutí a nastavení barev. O tlačítkách se dozvíte více v lekci 6 při vytváření nelineárního navigačního schématu, prostřednictvím kterého bude uživatel vybírat, co chce sledovat. Grafické symboly Grafické symboly jsou nejzákladnějším typem symbolu. Přestože je také můžete používat při vytváření animací, v drtivé většině případů dáte nejspíše přednost symbolům filmových klipů. 92 LEKCE 3 VYTVÁŘENÍ A ÚPRAVA SYMBOLŮ

Grafické symboly jsou ze všech symbolů nejméně flexibilní. Nepodporují totiž ActionScript a nelze na ně ani aplikovat filtry či režimy prolnutí. Pokud však budete potřebovat synchronizovat animaci uvnitř symbolu s hlavní časovou osou, budou se vám grafické symboly hodit. Vytváření symbolů V předchozí lekci jste si zkusili vytvořit symbol, který se bude používat pro nástroj Deco. V aplikaci Flash lze symboly vytvářet dvěma hlavními způsoby. První spočívá v tom, že ve vymezené ploše nemáte nic vybrané a zvolíte příkaz Vložit (Insert) Nový symbol (New Symbol). Aplikace Flash vás přenese do režimu úpravy symbolu, kde můžete začít kreslit nebo importovat grafiku pro svůj symbol. Druhou možností je vybrat stávající grafiku ve vymezené ploše a poté zvolit příkaz Změnit (Modify) Převést na symbol (Convert to Symbol) nebo stisknout klávesu F8. Vše, co je aktuálně vybrané, se automaticky umístí do nového symbolu. Používají se obě tyto metody a to, kterou z nich si vyberete, bude záviset na vašem způsobu práce. Většina návrhářů preferuje příkaz Převést na symbol (Confery to Symbol), protože veškerou grafiku mohou vytvořit na vymezené ploše a před začleněním jednotlivých složek do symbolů ji vidí pěkně pohromadě. Poznámka: Při použití příkazu Převést na symbol (Convert to Symbol) se ve skutečnosti nic nepřevádí, ale spíše se všechny vybrané prvky umístí do symbolu. V této lekci nejdříve vyberete jednotlivé části importované grafiky Illustratoru a poté různé části převedete na symboly. 1 Na vymezené ploše vyberte kreslenou postavu ve vrstvě hrdina. 2 Zvolte příkaz Změnit (Modify) Převést na symbol (Convert to Symbol) nebo stiskněte klávesu F8. 3 Symbol pojmenujte hrdina a jako Typ (Type) zvolte Filmový klip (Movie Clip). 4 Všechna ostatní nastavení ponechejte beze změny. Registrace (Registration) označuje vztažný bod vašeho symbolu. Ponechejte jej v levém horním rohu. ADOBE FLASH PROFESSIONAL CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 93

5 Po klepnutí na tlačítko OK se nový symbol s názvem hrdina objeví v panelu Knihovna (Library). 6 Dále vyberte kreslenou postavu ve vrstvě robot a také ji převeďte na symbol filmového klipu, který pojmenujte robot. Nyní máte ve své knihovně dva symboly filmového klipu a instanci každého z nich na vymezené ploše. Importování souborů aplikace Photoshop Nyní budete importovat soubor aplikace Photoshop, který bude sloužit jako pozadí. Tento soubor obsahuje dvě vrstvy s efektem prolnutí. Efekt prolnutí dokáže vytvořit zvláštní směsi barev mezi různými vrstvami. Uvidíte, že aplikace Flash dovede při importování souborů aplikace Photoshop zachovat všechny vrstvy i informace o prolnutí bez porušení. 1 Na časové ose vyberte horní vrstvu. 2 V horní nabídce zvolte příkaz Soubor (File) Importovat (Import) Importovat na plochu (Import to Stage). 3 Vyberte soubor pozadí.psd, který se nachází ve složce Lekce03/03Původní. 4 Klepněte na tlačítko Otevřít (Open). 5 V dialogovém okně Importovat na plochu (Import to Stage) zkontrolujte, zda jsou vybrány všechny vrstvy. U každé z nich by mělo být zaškrtnuté políčko. 6 V levém okně vyberte vrstvu záře (flare). 7 Na pravé straně zvolte ve volbách importu možnost Bitmapový obraz s upravitelnými styly vrstev (Bitmap image with editable layers styles). 94 LEKCE 3 VYTVÁŘENÍ A ÚPRAVA SYMBOLŮ

Napravo od vrstvy aplikace Photoshop se objeví ikonka symbolu filmového klipu, která signalizuje, že tato importovaná vrstva bude převedena na symbol filmového klipu. Možnost Sloučený bitmapový obraz (Flatten bitmap image) nezachovává žádné efekty vrstev, jako je průhlednost nebo prolínání. 8 V levém okně vyberte vrstvu pozadí (Background). 9 Na pravé straně ve volbách importu vyberte opět možnost Bitmapový obraz s upravitelnými styly vrstev (Bitmap image with editable layers styles). 10 Ve spodní části dialogového okna vyberte v rozevírací nabídce Převést vrstvy na (Convert layers to) možnost Vrstvy Flash (Flash Layers) a zaškrtněte políčko Umístit vrstvy do původních poloh (Place layers at original position). Dále máte možnost změnit velikost vymezené plochy tak, aby odpovídala velikosti plátna aplikace Photoshop. Aktuální velikost plochy je však již nastavena na správné rozměry (600 450 obrazových bodů). 11 Klepněte na tlačítko OK. Obě vrstvy aplikace Photoshop se importují do aplikace Flash, kde se umístí do samostatných vrstev na časové ose. Obrázky aplikace Photoshop se automaticky převedou na symboly filmových klipů a uloží se do knihovny. Všechny informace o prolnutí a průhlednosti zůstanou zachovány. Pokud vyberete obrázek ve vrstvě záře, uvidíte, že v inspektoru Vlastnosti (Properties) je v části Zobrazení (Display) zvolena v nabídce Prolnutí (Blending) možnost Zesvětlit (Lighten). 12 Přetáhněte vrstvy robot a hrdina do horní části časové osy, aby překrývaly vrstvy pozadí. ADOBE FLASH PROFESSIONAL CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 95

Poznámka: Chcete-li soubor aplikace Photoshop upravit, nemusíte znova procházet celým procesem importování. Libovolný obrázek na vymezené ploše nebo v panelu Knihovna (Library) totiž můžete upravit v aplikaci Adobe Photoshop nebo jiném programu pro úpravu obrázků. Stačí, když klepnete pravým tlačítkem myši nebo se stisknutou klávesou Ctrl na obrázek na vymezené ploše či v panelu Knihovna a v místní nabídce zvolíte možnost Upravit pomocí aplikace Adobe Photoshop (Edit with Adobe Photoshop ) nebo Upravit pomocí (Edit with) a zvolíte jinou vámi preferovanou aplikaci. Program Flash danou aplikaci spustí, a jakmile provedené změny uložíte, váš obrázek se v aplikaci Flash okamžitě aktualizuje. Úprava a správa symbolů Nyní máte ve své knihovně několik symbolů filmových klipů a na vymezené ploše několik instancí. Se symboly v knihovně se vám bude lépe pracovat, pokud je uspořádáte do složek. Kromě toho můžete kdykoli upravit libovolný symbol. Chcete-li například změnit barvu paže jednoho z robotů, můžete snadno vstoupit do režimu úpravy symbolu a provést požadovanou změnu. 96 LEKCE 3 VYTVÁŘENÍ A ÚPRAVA SYMBOLŮ

O obrazových formátech Aplikace Flash podporuje importování různých obrazových formátů. Dovede zpracovat soubory typu JPEG, GIF, PNG a PSD (Photoshop). Soubory JPEG se nejlépe hodí pro obrázky, které obsahují přechody a jemné odchylky, jako je tomu například u fotografií. Pro obrázky s velkými jednobarevnými plochami nebo s černobílými kresbami jsou nejvhodnější soubory GIF. Soubory PNG se používají pro obrázky zahrnující průhlednost a soubory PSD pro zachování všech informací o vrstvách, průhlednosti a prolnutí z aplikace Photoshop. Převod bitmapového obrázku na vektorovou grafiku Někdy je nutné převést bitmapový obrázek na vektorovou grafiku. Zatímco aplikace Flash pracuje s bitmapovými obrázky jako s řadami barevných teček (neboli obrazových bodů), s vektorovou grafikou se pracuje jako se sérií čar a křivek. Tyto vektorové údaje se pak vykreslují za běhu, takže rozlišení vektorové grafiky není na rozdíl od bitmapového obrázku pevně dané. To znamená, že i při přiblížení se vektorová grafika v počítači stále zobrazuje ostrým a vyhlazeným způsobem. Převod bitmapového obrázku na vektorový vede často k tomu, že vypadá jako plakát. Je to dáno tím, že se jemné přechody převedou do upravitelných, diskrétních bloků barev, což může vytvořit zajímavý efekt Pro převod bitmapového obrázku na vektorový jej nejdříve naimportujte do aplikace Flash. Pak jej vyberte a zvolte příkaz Změnit (Modify) Bitmapa (Bitmap) Vektorizovat bitmapu (Trace Bitmap). Nastavené volby určí, jak věrně bude vektorový obrázek odpovídat původnímu bitmapovému. Níže je vlevo zobrazen původní bitmapový obrázek a vpravo převedená vektorová grafika. Příkaz Vektorizovat bitmapu (Trace Bitmap) používejte s rozmyslem, neboť složitá vektorová grafika je často paměťově i výpočetně náročnější než původní bitmapový obrázek. ADOBE FLASH PROFESSIONAL CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 97

Přidání složek a uspořádání knihovny 1 V panelu Knihovna (Library) klepněte pravým tlačítkem nebo s klávesou Ctrl na prázdné místo a z místní nabídky zvolte příkaz Nová složka (New Folder). Rovněž můžete klepnout na tlačítko Nová složka ( ), které se nachází ve spodní části panelu Knihovna, nebo tento příkaz zvolit přímo z nabídky voleb v jeho pravém horním rohu. Ve vaší knihovně se vytvoří nová složka. 2 Tuto složku pojmenujte postavy. 3 Symboly filmových klipů hrdina a robot přetáhněte do složky postavy. 4 Obsah složek můžete sbalením skrývat a rozbalením zobrazovat a udržovat tak ve své knihovně pořádek. 98 LEKCE 3 VYTVÁŘENÍ A ÚPRAVA SYMBOLŮ

Úprava symbolů z knihovny 1 V panelu Knihovna (Library) poklepejte na symbol filmového klipu robot. Aplikace Flash vás přenese do režimu úpravy symbolu. V tomto režimu vidíte obsah svého symbolu, v tomto případě robota na vymezené ploše. Na horním vodorovném pruhu si můžete všimnout, že již nejste na ploše Scéna 1 (Scene 1), ale uvnitř symbolu s názvem robot. 2 Poklepáním na kresbu zahajte její úpravu. Bude zapotřebí poklepat na skupiny kreseb několikrát za sebou, než se propracujete ke konkrétnímu tvaru, který chcete upravit. 3 Zvolte nástroj Plechovka barvy (Paint Bucket). Vyberte novou barvu výplně a aplikujte ji na tvar v kresbě robota. ADOBE FLASH PROFESSIONAL CS6 OFICIÁLNÍ VÝUKOVÝ KURZ 99