Photoshop & Flash: Sněžíme na sněhuláka - Grafika.cz - vše o počítačové grafice

Navigace:  » Úvodní stránka  » Rubriky  » Photoshop  

3. prosince 2007, 00.00 | V minulém článku jsme si ukázali, jak nakreslit sněhuláka. Nyní přišel
čas na to jej pořádně zasypat sněhem. A abychom netvořili pouze nudný statický
obrázek, vezmeme si na pomoc program Flash a vytvoříme sníh animovaný.
Postup v programu Flash je popsaný pro začínající uživatele.

Od minule bychom mohli mít přibližně takovýto obrázek.

Obrázek beze sněhu ale vypadá jako po oblevě. Abychom dostatečně navodili zimní atmosféru, musíme do něj přidat něco opravdu zimního. Sníh budeme přidávat později, takže zkusíme alespoň nějakou zimní texturu. Tuto jsem vytvořil ze štětců, které jsou volně ke stažení na internetu - seznam takových štětců naleznete například zde - Free Photoshop Brushes. Nebo samozřejmě stačí najít nějaký kus zmrzlého poškrábaného ledu a ten vyfotit.

Obrázek zkopírujte do dokumentu a nastavte mu krytí na Závoj (Screen). Hned vypadá lépe.

Tím s Photoshopem končíme a přesuneme se do programu Flash. Samozřejmě nezapomeňte obrázek před ukončením Photoshopu uložit pro internet, ve formátu GIF nebo JPEG. Nemáte-li s programem Flash moc velké zkušenosti, doporučuji pro začátek alespoň článek Photoshop & Flash: Ikonka složky v akci. Nebojte, vše bude popsáno krok po kroku.

Ve Flashi začneme pěkně od začátku - nastavením rychlosti animace (Frame Rate) na 25 snímků za sekundu a velikosti dokumentu na 400 x 320 pixelů (což je velikost podkladového obrázku).

Do dokumentu importujeme náš obrázek - File - Import a správně umístíme. Někam bokem (nad obrázek) nakreslíme naši první (a jedinou) sněhovou vločku. Buď nástrojem pro kreslení kruhů (Oval Tool), nebo jen pouhým kliknutím štětcem (Brush Tool). Druhá varianta má výhodu v tom, že nevznikne přesný kruh, ale malinko zdeformovaný. Takže sníh vypadá méně uměle. Barva je samozřejmě bílá.

Tuto sněhovou vločku rovnou uložíme jako symbol - stiskem klávesy F8. Typ necháme na Movie Clip, jméno měnit ani nemusíme.

Důležité je pojmenování instance, což najdete v paletce Instance pod vlastností Name. Toto jméno nastavíme například na "vlocka". Tento krok je důležitý, pokud bychom nenastavili tomuto objektu jméno, nemohli bychom s ním nijak pracovat (a to my samozřejmě chceme - chceme jej kopírovat).

A dáme se do programování. Pokud se tomu programování vůbec dá říkat. Klikněte pravým tlačítkem do prvního Framu (víc jich ani nemáme) a vyvolejte paletku Akce - Actions.

V prvním kroku nastavíme, aby se dokument nezvětšoval podle velikosti okna (abychom jej viděli vždy ve 100% velikosti) - fscommand ("allowscale", "false"); Až budeme za chvilinku testovat animaci, uvidíme tak i prostor okolo a snáze odhadneme případné chyby. Zároveň zastavíme opakované přehrávání funkcí  stop (); Všechny akce v tomto snímku se provedou pouze jednou.

Jako první budeme chtít, aby se naše sněhová vločka X krát rozkopírovala. Abychom měli vloček spousty. To obstarají následující tři řádky:

for (i=0; i<100; i++) {
 duplicateMovieClip ("_root.vlocka", "vlocka"+i, i);
}

Funkce for s nastavenými parametry zajistí, že se příkaz uvnitř provede celkem stokrát. Příkaz je zatím jediný - duplicateMovieClip. První parametr je název objektu, který chceme kopírovat (v našem případě vlocka), druhý parametr je nový název (který bude vlocka + číslo) a třetí parametr je vrstva.

Kdybychom teď spustili animaci (Ctrl + Enter), měli bychom sto vloček. Jenomže bychom to neviděli, protože by byly všechny na jednom místě. Takže další krok bude nastavení náhodné pozice. K tomu stačí následující řádek:  setProperty ("_root.vlocka"+i, _x, random(400));

Takže když nyní spustíme animaci (Ctrl + Enter), což určitě udělejte, už opravdu nahoře uvidíme sto vloček, různě rozmístěných po celé šířce dokumentu. To je dobrý začátek.

Nyní vločkám nastavíme různou velikost - vlastnosti _xscale a _yscale. Nejprve náhodně nastavíme jednu - setProperty ("_root.vlocka"+i, _xscale, random(300));, druhou nastavíme podle této.

Zde je opět náhled, jak vypadá naše animace po spuštění (Ctrl + Enter). Zatím nikde nic nesněží, ale sníh je již připravený.

Tím jsme s akcí v prvním snímku animace skončili. Protože na konci obsahuje funkci stop();, provede se akce pouze jednou, a s tím by se nám sněžilo špatně.

Vytvoříme proto nový objekt, stačí malý obdélník, který opět převedeme na symbol (F8) a pravým tlačítkem vyvoláme paletku akce - Actions (jak správně hádáte, v tomto objektu budou uloženy všechny akce).

Ihned se vytvoří funkce onClipEvent(enterFrame), která nás informuje o tom, že cokoliv do této funkce napíšeme, se bude provádět každý snímek (tj. stále dokola). To přesně chceme. A protože chceme, aby sníh padal dolů, dáme dokupy funkci, která postupně projede jednu vločku za druhou a změní ji hodnotu _y (pozici Y) podle vlastnosti _xscale (tj. podle velikosti vločky). Ve výsledku to bude mít za následek to, že velké vločky poletí rychle, zatímco malé budou padat pomalu. Zde je již slíbený kód:

for (i=0; i<100; i++) {
 setProperty ("_root.vlocka"+i, _y, eval("_root.vlocka"+i+"._y") +eval("_root.vlocka"+i+"._xscale")/10);
}
 

Ihned kód otestujeme. Stiskem zkratky Ctrl + Enter spustíme animaci a pokud jste vše nastavili podle návodu, mělo by začít sněžit. Ovšem jen jednou. Vločky proletí přes obrázek a poté padají dolů a dolů a dolů ...

To je potřeba opravit. Přidáme proto kód, který otestuje, zda se vločka nenachází již mimo plochu (zda není hodnota vlastnosti _y větší než 320). Pokud ano, nastavíme ji znovu náhodnou velikost, náhodnou pozici a tentokrát už i náhodnou průhlednost (_alpha). Celý kód vypadá takto:

if (eval("_root.vlocka"+i+"._y")>320) {
  setProperty ("_root.vlocka"+i, _x, random(400));
  setProperty ("_root.vlocka"+i, _y, -20);
  setProperty ("_root.vlocka"+i, _xscale, (random(10)+1)*10);
  setProperty ("_root.vlocka"+i, _alpha, (random(10)+1)*10);
  setProperty ("_root.vlocka"+i, _yscale,   eval("_root.vlocka"+i+"._xscale"));
}


Ve výsledku pak bude animace vypadat tak, že nejprve v rychlosti proletí velké neprůhledné vločky (obrázek 1), které se následně změní na menší, průhledné a tak budou sněžit až donekonečna (obrázek 2).

Abychom mohli toto velké sněžení ze začátku vyvolat kdykoliv, přidáme tlačítko, které po najetí změní všechny vločky na velké. Nakreslíme obdélník přes celou plochu, převedeme jej na symbol (F8), v tomto případě ale tlačítko - Button. Dvakrát na symbol klikneme pro jeho editaci a první snímek posuneme až na poslední místo - Hit. Tlačítko tím bude neviditelné, pouze "klikací" oblast bude vymezena obdélníkem.

Do tlačítka zkopírujeme akci z prvního snímku animace s tím, že vše bude umístěno ve funkci on(rollOver). Akce se tedy vykoná pokaždé, když nad tlačítko uživatel najede myší.

Naposledy otestujeme animaci stiskem Ctrl + Enter. Tlačítko funguje, tudíž animaci vyexportujeme stiskem Shift + F12 a rozešleme všem známým a kamarádům.

Nakonec je zde samozřejmě náhled na vyexportovanou animaci. I s vánoční koledou ;)

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í.