Namalujte si vlastní obrázek ve FLASHi!

9. srpna 2000

•

Podle dnešního přikladu se naučíte vyrobit animaci, která vám dovolí nakreslit si pomocí myši do scény jakýkoli vlastní obrázek. To můžete výborně využít, pokud děláte FLASH animace pro děti anebo vyžadujete vysoký stupeň interaktivity.

Podstata tohoto příkladu spočívá v neustálém zjišťování pozice kurzoru a duplikování objektu přímky na tuto pozici. Pokud jste si zkusili vytvořit animaci Pohyblivé kostky na nitce ve FLASHi , pak pro vás bude tento příklad hračkou.

Celý příklad se bude skládat ze tří snímků. V prvním snímku nadefinujeme objekt, který bude kopírovat pozici kurzoru. V druhém snímku bude nadefinována hlavní akce, která zajistí samotné kreslení a ve třetím snímku bude pouze akce, která bude zajišťovat neustálé opakování druhého snímku.

Nejdříve si vytvořte novou scénu a její rozměry zadejte například 300×150 px (CTRL+M). Důležité pro plynulost vykreslování je nastavit vysokou hodnotu snímků za vteřinu (Frame Rate), nastavte tedy tuto hodnotu třeba na 60. Tato hodnota je velmi vysoká a u běžných animací by kladla příliš velké nároky na výkon CPU, proto tak velkou hodnotu Frame Rate vždy používejte s uvážením.

Nejdříve vytvořte "neviditelné tlačítko" (CTRL+F8, Buton), které využijeme pro kopírování pozice kurzoru. Objekt pojmenujte "tlacitko" a vložte klíčový snímek (F6) pouze do polohy HIT. Do snímku HIT vložte čtverec, který bude specifikovat aktivní plochu tlačítka.

Vraťte se zpět do hlavní scény a vytvořte Movie Clip (CTRL+F8), který pojmenujte "clip". Do tohoto Movie Clipu vložte objekt "tlacitko" a přidejte tomuto tlačítku následující akci (CTRL+I):

On (Press)
Set Variable: "/:mys" = 1
Set Variable: "/:x1" = 0
End On
On (Release)
Set Variable: "/:mys" = 0
End On

Tato akce vytvoří po stisknutí tlačítka myši proměnné "mys" a "x1" a přidělí jim hodnoty "1" a "0". A po puštění tlačítka přidělí proměnné mys hodnotu 0.

Po návratu do hlavní scény přetáhněte objet "clip" z knihovny do scény (CTRL+L), nedávejte jej však přímo do viditelné části, ale umístěte jej mimo hranice scény. Přidejte mu název Instance name = clip (CTRL+I). To je důležité, protože později se budeme na tento objekt odkazovat v akciích.

Vytvořte nyní nový Movie Clip (CTRL+F8), pojmenujte jej "cara" a nakreslete do něj čáru dle obrázku. Vraťte se do hlavní scény, vložte mimo zobrazitelnou část z knihovny objekt "cara" a pojmenujte ji jako Instance Name = cara (CTRL+I).

Tím jsou všechny objekty hotové a nyní přejdeme k programování akce, která bude zajišťovat kreslení. Vytvořte novou vrstvu a do prvního snímku vložte akci (CTRL+F):

Start Drag ("/tlacitko", lockcenter)

Tato akce zajistí, aby objekt "tlacitko" kopíroval středem pozici kurzoru, takže můžeme lehce zjistit aktuální souřadnice kurzoru.

Do druhého snímku vložte klíčový snímek (keyframe F6) a akci:

If (mys = 1)
If (x1=0)
Set Variable: "x1" = int(GetProperty ("tlacitko",_x ))
Set Variable: "y1" = int(GetProperty ("tlacitko",_y ))
Else
Set Variable: "x0" = int(GetProperty ("tlacitko",_x ))
Set Variable: "y0" = int(GetProperty ("tlacitko",_y ))
If (((x0-x1)*(x0-x1))>2 or ((y0-y1)*(y0-y1))>2)
Set Variable: "n1" = n1+1
Duplicate Movie Clip ("cara", "cara" &&; n1, n1)
Set Property ("cara" &&; n1, X Position) = x1
Set Property ("cara" &&; n1, Y Position) = y1
Set Property ("cara" &&; n1, X Scale) = (x0-x1)
Set Property ("cara" &&; n1, Y Scale) = (y0-y1)
Set Variable: "x1" = x0
Set Variable: "y1" = y0
End If
End If
Else
End If

Tato akce vypadá možná na první pohled složitě, ale není na ní nepochopitelného ani nelogického. Akce jsou rozděleny do stromové struktury a jejich vykonání je podmíněno splnění určité podmínky (IF).

První řádek zjistí, jestli je stlačeno tlačítko myši, pokud ne žádná akce neproběhne, pokud ano přejde na druhý řádek, kde je další podmínka. Pokud je má proměnná x1 hodnotu 0 (má vždy na začátku po prvním stisku tlačítka), pak přiřadí proměnným x1 a y1 aktuální souřadnice kurzoru. Pokud se proměnná x1 nerovná nule, tak se proměnným x0 a y0 přiřadí aktuální souřadnice kurzoru. Akce dál pokračuje další podmínkou, která zjistí vzdálenost mezi aktuální pozicí kurzoru a poslední zaznamenanou. Je zde specifikována nejmenší vzdálenost, při jaké se má kreslit další úsek čáry. Abychom nešli do záporných hodnot, je zde vypočítán čtverec vzdálenosti. Pokud je předchozí podmínka splněna, tak už je pokračování prosté – zduplikuje se objekt "cara", přičemž konec čáry bude vždy na aktuální pozici kurzoru a jeho začátek na poslední zaznamenané pozici. Na konci jsou pak proměnným přiřazeny nové hodnoty a tím celá akce končí.

Do třetího snímku vložte klíčový snímek (keyframe F6) a akci:

Go to and Play (2)

Tato akce zajistí prosté opakování snímku 2 a udělá tak malou smyčku, která je nutná pro neustálé zjišťování aktuální pozice kurzoru.

Nezapomeňte nakonec ještě vložit snímky 2 a 3 ve vrstvě, kde se nachází symboly, jinak by animace správně nefungovala.

Tím je dnešní příklad prakticky hotov a vy si k němu můžete stáhnout zdrojový soubor a prozkoumat tak všechny použité akce přímo v programu Macromedia FLASH 4.