Flash - animace hořící sirky - Grafika.cz - vše o počítačové grafice

Flash Sudakci sirka

Flash Sudakci sirka

V tomto dnešním tutoriálku si ukážeme jeden z dalších přírodních jevů a to - OHEŇ.

Kolega Danel Dostalík nedávno napsal článek o modelování ohně, resp. hořící sirky v 3DStudiu a já zde ukážu něco podobného, ovšem v programu Macromedia Flash.

Nejdříve si opět vytvoříme několik nových symbolů, v tomto případě Movie clipů:

Symbol "sirka" může být též grafika, ale abych řekl pravdu, tak mne trochu unavuje po nakreslení a stisknutí F8 ještě "překlikávat" na symbol "grafika", takže jsem ho nechal Movie clipem.

V tomto, výše zmiňovaném, symbolu si nakreslíme sirku podle svého uvážení:

V symbolu "popel 1" si nakreslíme, pomocí nástroje "štětec" a za použití jemného zkoseného hrotu, náznak odpadávajícího popela a to na cca 5 políčcích s tím, že na každém budeme tento popel modifikovat:

Do Movie clipu "popel 2" přetáhneme symbol "popel 1" a animujeme jeho pohyb shora dolů v 1. vrstvě. Vytvoříme vrstvu druhou, která bude postavená výše než 1., "popel 2" zduplikujeme, vertikálně otočíme, zmenšíme a rovněž vytvoříme animaci shora dolů s tím, že bude pouze na políčcích 3 - 9 oproti 1. vrstvě, kde bude animace probíhat na 1. až 10. políčku:

V Movie clipu "kouř" vytvoříme pomocí nástroje tužka a vyhlazení, náznak "čárky" dýmu. Celá animace kouře bude na políčcích 1-10 a půjde o "shape" animaci. Vytvořený pramínek na políčku 1. animujeme na políčko 5., kdy na obou (jak počátečním, tak koncovém) uzlu tuto kresbu pomocí Ctrl+B "rozbijeme". Na tomto 5. políčku pak pramínek mírně zdeformujeme a celé animaci přiřadíme "vlastnost" shape animace:

Na prvním políčku bude vypadat kouř takto:

A na pátém takto:

Koncový bod kompletní animace umístíme na políčko 10., kde zkopírujeme políčko 1., aby výsledné opakování této řady bylo co nejplynulejší.

A teď to nejdůležitější - symbol "oheň" .... zde vytvoříme pomocí "frame by frame" animace zdání plamene a jeho design závisí jen a jen na nás. Já jsem zvolil tuto cestu:

Všechny symboly jsou tedy hotovy a teď vytvoříme kompletaci:

V Movie clipu "final" si vytvoříme 4 nové vrstvy. V 1. (bráno od spodní části) bude sirka, ve 2. popel, ve 3. plamen a ve 4. kouř. U vrstvy se sirkou vytvoříme Motion tween od 1. do 58. políčka, kdy budeme sirku zplošťovat ve směru zleva do prava. Na políčcích 58 - 60 bude navíc dodána alfa a to100% --> 0%.

Ve vrstvě "popel" bude animace popela provedena stejně jako u vrstvy se sirkou s tím, že nedojde ke zplošťování, ale k posunu. Tento posun bude probíhat tak, že se budeme držet pohybu levého konce sirky. A ještě jeden rozdíl - celá animace (popela) nebude na políčcích 1 - 58, resp. 60, ale bude začínat až od políčka 3., tedy s jakýmsi zpožděním. Alfa bude vyřešena stejně jako v předchozí vrstvě.

Plamen se bude rovněž posunovat po hrotu sirky, ovšem bez deformace bude probíhat pouze v rozmezí 1 - 30. Od 31. políčka do políčka 58. se bude stále zmenšovat až na svou třetinovou velikost a na políčcích 58 - 60 dojde opět k aplikaci alfy 100% --> 0%.

První 3 vrstvy tedy máme hotovy:

Vrstva, kde se nachází kouř, bude animována až od políčka 60., kdy mezi 60. a 61. políčkem se náhle objeví (alfa 0% --> 100%) a od 62. do 80. bude unikat nahoru, kde bude (na tomto 80. políčku) opět aplikována alfa na 0%. Efekt tedy bude takový, že kouř se náhle zjeví, "odpluje" jakoby vzhůru a tam se opět ztratí, resp. rozplyne:

No .... a to je vše přátelé. Zbývá už jen umístit symbol "final" do hlavní scény a výsledek? Ten by měl být asi tento:

Jestli ještě někdo bude chtít "vyšperkovat" plamen a dodat mu zelený nádech, popř. odlesky, či upravit sirku tak, aby byl ještě vidět její ohořelý konec, tak se mu ruce nedrží.

A jen tak mimochodem - ten ohořelý konec jde pěkně vyřešit aplikací masky.

Hezký den a pevnou ruku při práci přeji já a můj - zdroják.