Flash - vzhůru v let - Grafika.cz - vše o počítačové grafice

Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



Webdesign

Flash - vzhůru v let

5. října 2001, 00.00 | Animace letu ptáka, tedy pohybu jeho křídel - kombinace Frame by frame a Motion Tween. A výsledek - pouhé 3 kB!!!!!

A opět se zde setkáváme v našem malém seriálku o animaci v programu Macromedia Flash.

V dnešním tutoriálku si ukážeme, jak by asi měla vypadat animace ptáka, resp. jeho letu.

Vytvořit takovou animaci letu, aby byl pohyb křídel a trupu hodnověrný, není nic jednoduchého. Je velmi, velmi těžké pokusit se odpozorovat tento pohyb ze skutečného letu, neboť ať je lidské oko stavěné jakkoliv dobře, tak není schopno pořádně zachytit takové "zběsilé mávání". Jen tak pro ukázku si zkuste odpozorovat ze skutečné chůze psa, kolik noh a kterou má na zemi, než udělá jeden krok. Přeji vám při tom mnoho zábavy a předem si raději uvařte bylinky na uklidnění očí, neboť ty vás budou posléze velmi bolet.

No nic. Chůzi psa si probereme někdy příště, ale teď vzhůru ... vzhůru.

Nejdříve si ukážeme náš výsledek:

Velikost a barvu pozadí nechám opět na vás. Já, abych se zde vešel, tak jsem zvolil cca 200x200px a barvu bílou.

V knihovně symbolů si vytvoříme 2 nové - "final" - movie clip a "tělo" - grafika.

V symbolu "tělo" nakreslíme dle svých schopností tělo ptáka. Poté se "přepneme" do Movie clipu "final", kde si vytvoříme 3 nové vrstvy:

Jde jasně vidět, že každé křídlo budeme kreslit zvlášť.

Nejdříve si "přetáhneme" do druhé vrstvy "tělo" a zatím ho necháme statické. Ve zbylých dvou vrstvách si nakreslíme křídla tak, jak je vyznačeno na následujících obrázcích.

Vidíme, že celková animace je tvořena 8 snímky, což pro naší momentální potřebu zcela stačí. Křídla (jak přední, tak zadní) budou tvořena metodou "frame by frame", protože je to v tomto případě nejjistější a nejjednodušší metoda, jak kýženého efektu "mávání" dosáhnout. Velikost výsledného souboru nebude nijak vysoká - cca 3 kB.

Na rozdíl od křídel bude tělo animováno pomocí Motion Tween. Musíme si uvědomit, že při mávání křídel dochází k jakémusi opěru těla ptáka o vzduch, od kterého se pomocí křídel odráží - tělo proto musí v určitých intervalech klesat a stoupat. Tohoto efektu docílíme právě pomocí Motion Tween a to tak, jak je uvedeno na obrázku:

Pohyb těla jde tedy mírně dolů od 1. do 4. snímku, ovšem poté, když dochází k mávnutí křídel, jde tělo opět vzhůru.

V minulých dílech jsme řešili problém navazování opakované animace tím, že jsme první snímek animace kopírovali na poslední políčko, popř. naopak. V tomto případě to neuděláme (mluvíme o vrstvě "tělo"). Aby totiž bylo ono zmíněné stoupání a klesání těla patrné musíme odlišit první a poslední snímek tím, že poloha těla v horizontálním směru bude neměnná, ovšem ve vertikálním bude tento symbol posunut na prvním snímku o cca 3 mm výše. Následný skok mezi posledním a prvním snímkem nebude nijak rušivý, protože lidské oko bude upoutávat pohyb křídel.

Tímto by naše práce byla ukončena.

Knihovna symbolů by měla vypadat asi takto:

A pokud jste přímo četli a tvořili a náhodou vám program ukončil svou činnost bez uložení, tak si můj výtvor můžete "daunloudnout" ZDE.

Obsah seriálu (více o seriálu):

Tématické zařazení:

 » Rubriky  » Go verze  

 » Rubriky  » Webdesign  

Diskuse k článku

 

Vložit nový příspěvek   Sbalit příspěvky

 

Zatím nebyl uložen žádný příspěvek, buďte první.

 

 

Vložit nový příspěvek

Jméno:

Pohlaví:

,

E-mail:

Předmět:

Příspěvek:

 

Kontrola:

Do spodního pole opište z obrázku 5 znaků:

Kód pro ověření

 

 

 

 

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: