Přílet textu po písmenech pomocí FLASH 5

13. června 2001

•

Efektní vypisování textu je dnes velmi oblíbené a efektní zpestření FLASH prezentací. Vy se dnes s pomocí tohoto článku naučíte vytvářet animaci, ve které bude vámi napsaný text přilétávat pěkně písmenko po písmenku.

Existuje mnoho dodatečných programů pro tvůrce Flash animací, které vám jednorázově vytvoří z textu, který mu zadáte, velmi zajímavou animaci – písmenka přilétávají, vypisují se, odlétávájí, a to vše po jednotlivých písmenech. Výsledný soubor však zabírá velmi mnoho místa a navíc je připraven pouze pro předem napsaný text. Náš příklad bude zcela flexibilní a malinký.

Vyjdeme ze zcela nové animace o rozměrech 300×80 s rychlostí 12 snímků za vteřinu (CTRL+M).

Vytvoříme objekt typu Movie Clip (dále jen MC), který si pojmenujeme „pis_anim“ (v panelu Instance). Ten nám poslouží jako vzor, který budeme duplikovat. V něm vytvoříme další MC „pis_stat“ (opět nezapomeňte vyplnit v panelu Instance), který bude obsahovat textové pole typu dynamic text do něhož napíšeme jen písmeno A. U jeho nastavení v panelu Text options dále vyplníme pole variable slovem „pismeno“ a zamáčkneme tlačítko „Include entire font outline“. Získáme tedy následující strukturu objektů a nastavení textového pole „pismeno“.

Nyní přichází náročnější část – vytvoření vlastní animace pro přilétnutí jednoho písmene. Docílíme toho animováním MC „pis_stat“ uvnitř MC „pis_anim“. My si však ukážeme pouze jednoduchou animaci, kterou si nakonec můžete podstatně vylepšit a docílit tak velmi zajímavých efektů za pomoci rotace a jiných transformací. Doporučuji však nevytvářet animaci „pis_anim“ delší než 10 snímků.

Náš efekt, který můžete vidět ve výsledné animaci, vytvoříme pomocí dvou snímků uvnitř MC „pis_anim“. První již máme vytvořen – obsahuje MC „pis_stat“. Nyní vytvoříme nový klíčový snímek na snímku č.7 a vrátíme se k úpravě prvního snímku. V něm zvětšíme objekt „pis_anim“ na velikost zhruba 400% a přidáme efekt alpha (na 0%) a vytvoříme pohybovou interpolaci (Motion tweening). Toho docílíme kliknutím pravého tlačítka myši na některém ze snímků mezi 1. a 7. a vybráním možnosti „Create tweening“. Na snímku č.7 vytvoříme následující akci:

removeMovieClip(this); // odstraní písmeno po skončení animace

Výsledný pohled na časovou osu při editaci „pis_anim“ nyní vypadá takto:

Pokud nyní přehrajeme celou animaci, měli bychom vidět pouze přilétávající písmeno A. To bude náš vzor pro další duplikáty. Aby nám nepřekážel, přesuneme jej do míst, kde nebude vidět, tedy někam za hranici plátna animace. Vrátíme se k hlavní časové ose. Nyní stačí pouze vložit dvě akce, které budou duplikovat MC „pis_anim“, a vytvořit textové pole pro vpisování vlastního textu. V prvním snímku přidáme následující akc:

xx=40;
yy=50;
mezera=4.8;
duplicateMovieClip (pis_anim, pis_anim+i, i); // zduplikuje vzor pis_anim do pis_anim1, pis_anim2,…
eval(pis_anim+i).pis_stat.pismeno=input.slice(i,i+1); // zmeni pismeno v pis_anim>>pis_stat
// nyni uz jen umistime pismeno
eval(pis_anim+i)._x=xx+i*mezera;
eval(pis_anim+i)._y=yy;

Proměnná „xx“ a „yy“, kterým přiřazujeme hodnoty 40 a 50 určují pozici prvního přilétajícího písmene. Proměnná „mezera“ určuje mezeru mezi jednotlivými písmeny.

Vytvoříme klíčový snímek na pozici 3 a vložíme další akci:

i = i+1;
if (i>input.length)// pokud jsme na konci slova, začít znovu
{ i=0; };

Nyní vytvoříme novou vrstvu, vložíme textové pole typu „Input text“ a přiřadíme proměnnou „input“ a to je vše. Nyní je animace měla být připravena přesně podle výše uvedeného vzoru. Zdrojový FLA soubor příkladu si můžete stáhnout zde.