Photoshop & Flash tutoriál: Online vánoční přání - Grafika.cz - vše o počítačové grafice

12. prosince 2007, 00.00 | Chce to změnu. Ze všech stran se na nás dokola valí stále ty stejné a
ohrané vánoční motivy. Na letácích zasněžené texty, na pozadí rozostřené
vločky a všude červenobílé pruhy. Nic z toho v tomto článku nenajdete,
přestože je o tvorbě vánočního přání. Opět spojíme síly programů Photoshop a
Flash. Připraveni?

Nápad na dnešní přání vznikl náhodou, když jsem k jinému přání vybíral vhodný font pro napsání textu "veselé Vánoce". Protože byl text na dvou řádkách, dvě písmena "v" pod sebou začala nápadně připomínat vánoční stromek. Stačilo jen přidat třetí část větví, hvězdu, vše otočit o 180° a vánoční stromek byl na světě. Asi jako na tomto náhledu:

Jenže co s tím? Máme sice vánoční stromek, ale text je otočený a nečitelný. Pokud bychom přání tiskli, nebyl by žádný problém - každý by si jej otočil tak, jak by se mu to zrovna hodilo. Ale v počítači? Rozhodl jsem se tedy vytvořit interaktivní přání v programu Flash, dovolující každému natočit přání tak, jak chce. Ale začneme pěkně popořadě, nejprve musíme přání vytvořit v Photoshopu (nemusíme, ale bude to rychlejší).

Začneme novým dokumentem s tmavě modrým pozadím (#32373F). Velikost jsem pro účely článku zvolil 400 x 300 pixelů. Nastavíme světlejší barvu (#C5C7CC) a nástrojem Text napíšeme slova bez písmen v - tj. "eselé ánoce". Aby byla šířka obou řádků stejná, zvětšíme proklad písmen prvního řádku. Rovněž zmenšíme velikost řádkování (obě vlastnosti jsou na náhledovém obrázku označeny).

Font zvolíme co nejjednodušší bezpatkový. Protože později budeme potřebovat, aby byly všechny části stromečku přibližně stejně široké, hodí se, pokud bude mít font více řezů. V mém případě jsem použil font Helvetica, stejně dobře ale poslouží i starý dobrý Arial. Což není nic jiného, než zkopírovaná Helvetica - viz článek „poznejte rozdíly mezi těmito fonty“ - arial or helvetica?.

Pro písmena v zvolíme přibližně barvu stromu - světle zelenou #C5ED64. Aby byla i nejmenší část stromečku (poslední v) stejně široká jako ostatní, zvolíme u posledního písmene tučnější řez. Pokud font tučný řez nemá, pomůže nám funkce Umělé tučné písmo.

Hvězdu rovněž vytvoříme fontem. Opět napíšeme do nové textové vrstvy písmeno v, vrstvu zkopírujeme (Ctrl + J) a otočíme (Ctrl + T) o 72°, protože chceme mít pěticípou hvězdu (360/5 = 72). Vrstvu vhodně posuneme...

...a stejným způsobem to uděláme ještě třikrát.

Poslední část je podstavec - což je znak mínus.

Abychom se ujistili, že stromeček opravdu vypadá tak, jak má, otočíme všechny vrstvy o 180°. V menu Úpravy - Transformovat (Edit - Transform).

Aby byla pohlednice ohraničená, nakreslíme úplně dospod obdélník (stejnojmenným nástrojem) barvy pozadí (#32373F), s efektem vrstvy Vytažení (Stroke) velikosti 1 px, barvy #4D5259. Stejně tak můžeme přidat opadané jehličí - což je několikrát zkopírovaná textová vrstva s písmenem "v". Tím je pohlednice hotová.

Do Flashe ale zatím ještě neskáčeme. Chvíli zůstaneme ještě v Photoshopu - vytvoříme si totiž kurzor. A to hned dva. Jeden normální (šipku), který bude zobrazen celou dobu, a druhý se šipkami, který bude zobrazen po čas otáčení pohlednice.

Začneme šipkou. Aby se nám tvar přichytával přesně na pixel, zobrazíme každý pixel mřížku - jak na to je popsáno například v článku Photoshop tutoriál: Tvorba ikonky složky. Zvolíme nástroj Pero (Pen Tool), nastavíme bílou barvu a naklikáme tvar podobný tomuto (nahoře je zobrazen ve 100% velikosti).

Šipky znázorňující otáčení nebudou o moc složitější. Začneme koncem šipky - opět nástrojem Pero (Pen Tool)...

...a dokreslíme zahnutý ocásek. Zde je již potřeba použít zakulacené body - ty nakreslíme tak, že myší klikneme a táhneme (jsou vpravo uprostřed).

Zvolíme nástroj pro výběr cesty (černá šipka), označíme obě cesty (začátek šipky a ocásek), zkopírujeme, vložíme a otočíme (Ctrl + T) o 180°. Posuneme tak, aby šipky pěkně navazovaly, a jsme hotovi.

Všechny (tři) obrázky uložíme. Pozadí jako GIF (víc barev než 256 stejně nemá), kurzor jako PNG24 - s průhledností. Jednou pouze šipku, podruhé šipku i ze symbolem otáčení. Tím jsme s Photoshopem skončili a můžeme se přesunout do Flashe.

Zde jako obvykle nejprve nastavíme rychlost přehrávání na 25 fps (snímků za sekundu), velikost dokumentu podle obrázku (400*300 px) a barvu pozadí tmavě modrou (#32373F).

Vložíme obrázek pozadí a pro lepší výsledek jej převedeme do vektorů (tím bude i velikost dokumentu znatelně menší). Což neznamená nic jiného, než opět vytvořit jednu textovou vrstvu za druhou a přesně ji umístit podle podkladového obrázku. Nebojte, je to rychlé (a v novějších verzích programů se jistě textové vrstvy zachovají, jen jsem ještě neměl možnost to vyzkoušet). Nezapomeňte nakreslit i obrys a poté všechny vrstvy vložit do nového symbolu - vše označit a stisknout zkratku F8, typ Movie Clip. Tuto instanci pojmenujeme "veselevanoce". A přesně zarovnáme na střed dokumentu (paletka Align).

Vložíme i obrázek kurzoru, který taktéž převedeme na symbol (F8) a pojmenujeme "cursor".

Tento symbol dáme editovat (dvakrát kliknout na obrázek), vložíme nový snímek (2x F7) a do něj vložíme obrázek kurzoru se symbolem otáčení. Do obou snímků přidáme akci stop(); - aby se obrázky nestřídaly. To zabezpečí jiný skript. Na ukázkovém obrázku vidíte, že akce jsou v nové vrstvě - to ale není nutné.

Vrátíme se zpět do editace celého dokumentu a u prvního snímku vyvoláme paletku Akce - Actions.

Než se dáme do zápisu kódu, vysvětlíme si v rychlosti princip fungování naší pohlednice. V tomto prvním snímku si nastavíme důležité proměnné, se kterými budeme později pracovat. K tomu si později vytvoříme další symbol, který bude neustále dokola provádět určenou akci, a dále vytvoříme tlačítko přes celou plochu, které bude zkoumat, zda-li je stisknuté tlačítko myši. Pokud nebude, bude akce provádět pouze to, že zobrazí kurzor na místě pozice myši. Pokud tlačítko stisknuté bude, bude akce zároveň otáčet obrázkem podle x-ové pozice myši. Připraveni? Jdeme to napsat jazykem, kterému Flash rozumí.

V prvním snímku tedy nastavíme všechny potřebné věci. Jednak vypneme zvětšování dokumentu funkcí allowscale, dále nastavíme proměnné. První proměnná tocit bude obsahovat informaci, zda máme s obrázkem točit. Nula znamená netočit, jednička znamená točit. Tuto proměnnou budeme později měnit podle stisknutého tlačítka myši (stisknuté = točit, nestisknuté = netočit). Druhá proměnná startdrag_x bude obsahovat pozici, ve které jsme myš stiskli. Prozatím ji necháme na nule. Třetí proměnná rotate pak bude obsahovat úhel, ve kterém byl obrázek, než jsme stiskli myš.

Aby byl na první pohled patrný vánoční stromeček, otočíme pro začátek obrázek o 180°. To provede řádek veselevanoce._rotation = 180;. Předposlední řádek zajistí, že nebude vidět systémový kurzor - místo něj budeme chtít zobrazit náš vlastní (později), poslední řádek pak zastaví přehrávání. Vše máme nastaveno – jestli dobře, se ukáže později.

Pokračujeme slíbeným tlačítkem přes celou plochu. Nejprve nakreslíme obdélník jakékoliv barvy, převedeme jej na symbol - F8, typu Button. Tento symbol dáme editovat a přesuneme první snímek na poslední místo, na místo Hit. Tento snímek určuje "klikatelnou" oblast tlačítka. Tím bude naše tlačítko neviditelné.

Což poznáme i tak, že v dokumentu bude zobrazeno světle modrou barvou.

Tomuto tlačítku rovněž přidáme akci, resp. hned dvě. První, pokud uživatel stiskne tlačítko myši - on(press). V tom případě nastavíme proměnnou tocit na 1, přepneme kurzor (na druhý frame) a uložíme si x-ovou pozici kliknutí a úhel natočení textu.

Pokud uživatel myš pustí - on(release), bude kód o dost jednodušší. Stačí přepnou proměnnou tocit zpět na 0 a zobrazit první kurzor (první frame).

Tudíž proměnné máme nastavené, už se nám mění podle kliknutí myši, ale program stále nic nedělá. To hlavní přijde nyní. Vytvoříme libovolný symbol - například obdélník, který převedeme na symbol zkratkou F8 a vyvoláme akce.

Tentokrát už budeme chtít provádět akci každý snímek, proto začneme kódem onClipEvent(enterFrame). Nejprve nastavíme pozici symbolu kurzoru podle pozice myši - která je uložena v proměnných _xmouse a _ymouse. Dále otestujeme, zda je proměnná tocit nastavená na 1. Pokud ne, neprovede se nic, pokud ano, nastavíme úhel natočení podle počátečního kliku myši mínus aktuální polohy myši.

Nyní již můžeme aplikaci spustit stiskem Ctrl + Enter a začít testovat. Pokud jsme vše dobře nastavili a napsali, měli bychom být schopni kliknutím a tažením otočit pohlednici. Na ukázce vidíte, že se to povedlo.

Proto přidáme malé vylepšení v podobě přichytávání na úhly 0° a 180°. Ať je to točení jednodušší. Nejprve otestujeme, zda je úhel někde okolo hodnot 0° nebo 180°, a pokud ano, nastavíme jej na toto číslo přesně. V ukázce jsem nastavil rozmezí na 10° na každou stranu. Za zmínku jistě stojí, že úhel je uložen v rozmezí -179 až +180°.

Dvě podmínky if pod sebou je možné spojit operátory || resp &&, já jsem tento zdlouhavý zápis použil především proto, aby se mi kód pěkně vešel do screenshotu (a pro začátečníky bude jistě jednodušší k pochopení).

Zde je ukázka, jak vše funguje v praxi. Při pohybu myši v x-ovém směru se pohlednice normálně otáčí do té doby, než se úhel natočení přiblíží k některé z hraničních hodnot. Pokud se tak stane, pohlednice se doslova přichytne na přesný úhel.

Zde si vše můžete vyzkoušet v praxi.

Nakonec jsem ještě "tak nějak" přidal jehličí z původního obrázku v Photoshopu. Původní plán byl udělat jej tak, aby zůstalo přichytnuté na krajích pohlednice a při otáčení se přesypávalo. To se ukázalo jako nadlidský úkol, takže se pohybuje dosti náhodným způsobem a dřív nebo později se všechno z pohlednice vysype ven (což ale můžete brát jako záměr).

Pro případné rýpaly pak přidám poznámku, že v náročnější aplikaci by bylo lepší kurzor neschovávat, protože si nemůžeme být jisti, zda opravdu aplikace poběží rychlostí 25 snímků za sekundu, a není nic horšího než cukavý pohyb kurzoru. V tomto případě by tedy bylo nejlepší nechat standardní systémový kurzor a pouze v případě otáčení přidat doprava dolů symbol šipek.

Jinak pokud jste si všimli podobnosti s článkem Photoshop & Flash: Sněžíme na sněhuláka, pak jste si všimli správně. I zde jsme v prvním snímku animace nastavili proměnné, v pomocném symbolu stále dokola přehrávali všechny akce a v neviditelném tlačítku přes celou plochu spouštěli akce další.

Poznámka na konec: Nejenom, že v pohlednici máme nápis Veselé Vánoce a vánoční stromeček, ale při vhodném pootočení ještě i kometu! Co víc si přát...

Autor článku Václav Krejčí se zabývá grafikou a GUI designem, své zkušenosti nejnověji zúročil v knize "Adobe Photoshop: design grafiky GUI", věnované tvorbě grafických uživatelských rozhraní.