Efekt létající kuličky v Macromedia Flash 4

28. září 2000

V dnešním příkladě se naučíme vytvořit efekt létající kuličky, která se bude odrážet od ohraničení animace. Počátečním impulsem pro pohyb kuličky bude její uchopení a tažení myší. Vytvoření této animace vyžaduje již zkušenosti se skriptováním ve FLASH, ale i ti méně zkušenější by snad po důkladném přečtení návodu neměli mít problém animaci vytvořit.

Základem animace je movie clip, ve kterém je umístěno tlačítko. Princip animace spočívá ve zjištění aktuální pozice objektu, jeho posunutí oproti předchozí pozici a jeho posunování o neustále se zmenšující hodnotu posunutí.

Pro vytvoření této animace si vytvořte scénu o velikosti 300 x 150 px (CTRL+M) a nastavte Frame Rate na hodnotu 25 snímků za sekundu, aby animace probíhala plynuleji. Do scény si nakreslete kruh (bez okraje a s jakoukoli barvou výplně). Zvolte nástroj Paint Bucket (U) a jako barvu výplně nastavte kruhový přechod z bílé do zelené. Klepněte tímto nástrojem do levého horního rohu a vytvoříte tak efekt 3D kuličky. Označte tento objekt šipkou, uložte jej jako symbol (F8) – Movie Clip a pojmenujte jej "kulicka".

Otevřete si nyní knihovnu symbolů (CTRL+L) a klepněte na symbol "kulicka" pravým tlačítkem. Z nabídky zvolte Edit a ocitnete se v editaci tohoto objektu. Označte šipkou objekt a vytvořte z něj symbol (F8) – Button a pojmenujte jej "tlacitko". Tlačítko budeme potřebovat k tomu, abychom mohli s objektem "kulicka" pohybovat myší formou "táhni a pusť". Přepněte se ještě do editace objektu "tlacitko" a do polohy OVER vložte klíčový snímek (F6) a vedle kuličky vložte popis "táhni a pusť".

Přepněte se nyní do editace objektu "kulicka". Tento Movie Clip bude mít pouze dvě vrstvy, v první se bude nacházet pouze jeden klíčový snímek a v něm objekt "tlacitko" a v druhé vrstvě se budou nacházet dva klíčové snímky – první bude prázdný a v druhém se budou nacházet následující akce:

If ((dx + .5) < 1 and (dy + .5) < 1)
Go to and Stop (1)
End If
Set Variable: "x" = GetProperty("", _x)
Set Variable: "y" = GetProperty("", _y)
Set Variable: "x" = x + dx
Set Variable: "y" = y + dy
If (x > 292)
Set Variable: "dx" = dx * -1
Set Variable: "x" = 292
Else If (x < 8)
Set Variable: "dx" = dx * -1
Set Variable: "x" = 8
End If
If (y > 142)
Set Variable: "dy" = dy * -1
Set Variable: "y" = 142
Else If (y < 8)
Set Variable: "dy" = dy * -1
Set Variable: "y" = 8
End If
Set Variable: "nx" = px
Set Variable: "ny" = py
Set Variable: "px" = x
Set Variable: "py" = y
Set Variable: "dx" = dx * /:gravitace
Set Variable: "dy" = dy * /:gravitace
Set Property ("", X Position) = x
Set Property ("", Y Position) = y
Go to and Play (1)

Tyto akce možná vypadají na první pohled složitě, ale opravdu na nich nic složitého není. Pro lepší pochopení těchto akcí a jejich proměnných je třeba ještě do animace vložit další akce. Klepněte tedy nyní pravým tlačítkem na objekt "tlacitko" a z nabídky zvolte Properties. Do záložky Actions vložte následující akce:

On (Press)
Start Drag ("", lockcenter)
Set Variable: "dx" = 0
Set Variable: "dy" = 0
End On
On (Release)
Stop Drag
Set Variable: "dx" = px – nx
Set Variable: "dy" = py – ny
End On

Všechny akce jsou velice úzce spjaté, je tedy dobré probrat všechny akce v  tom pořadí v jakém se budou vykonávat. Na tlačítku umístěná akce nejdříve umožní po stisku tlačítka táhnutí objektu myší a poté stanový proměnné "dx" a "dy" a jejich hodnotu nastaví na nulu. Po puštění tlačítka myši se vykoná akce, která proměnným "dx" a "dy" přidělí nové hodnoty. Tyto hodnoty jsou v podstatě rozdílem souřadnic předchozí a nynější polohy objektu.

V tuto chvíli přejdeme na skript, který se nachází ve druhém snímku Movie Clipu. Zde je na prvním řádku podmínka, která říká že pokud je součet proměnné "dx", respektive "dy" s hodnotou 0.5 menší než číslo 1, pak se zbylé akce nevykonají a animace přejde na první snímek. V opačném případě pokračuje vykonávání akcí dále.

Na dalších řádcích se stanový proměnné "x" a "y" jejich hodnotu na aktuální souřadnice objektu "kulicka". Na dalších řádcích se stanový nové hodnoty proměnných "x" a "y" a to tím, že se k jejich hodnotě přičte ještě hodnota proměnné "dx", resp. "dy". Teď si dovolím přeskočit až na konec skriptu, kde jsou stanoveny hodnoty proměnných "nx", "ny", "px" a "py", je zde uvedena akce pro neustálé zmenšování hodnoty proměnné "dx", resp. "dy" pomocí koeficientu "gravitace", který je získáván z formulářového políčka a kde je pomocí funkce SetProperty stanovena nová poloha objektu "kulicka". Tímto způsobem napsaný skript by již fungoval a kulička by se pohybovala. Její pohyb by však nebyl ničím omezen a pokud by "vylétla" z viditelné plochy, nebyla by již možnost návratu. Proto je do skriptu přidáno ještě několik řádků, které vymezují krajní polohy možné dráhy objektu.

Je zde ošetřena možnost pohybu na všechny 4 strany. Hodnoty 292 a 142 reprezentují velikost scény, po které se může kulička pohybovat. Je to poloměr kuličky odečtený od celková velikosti scény. Pokud by se tedy objekt měl ocitnout mimo scénu, je velikosti posunutí "dx", resp. "dy" nastavena opačná hodnota (násobíme číslem -1) a hodnota polohy "x", resp. "y" je nastavena na maximální mezní hodnotu plochy po které se může objekt pohybovat. Na posledním řádku skriptu je akce, která zajistí neustálé opakování akce umístěné ve druhém snímku.

Nesmíme ještě zapomenout vložit formulářové pole do hlavní scény. Klepněte tedy na nástroj "text" a stiskněte tlačítko "ab" ve spodní části palety. Do horního pravého rohu vložte toto pole a klepněte na něj pravým tlačítkem. Z nabídky vyberte Properties a vložte název proměnné Variable = gravitace. Pokud do pole napíšete nějakou hodnotu, tak tato hodnota se v tomto poli přednastaví.

Tím je celá animace prakticky hotová a já doufám, že jste ji úspěšně zvládli, přesto, že v ní bylo o něco více programování než obvykle. Pro bližší prozkoumání příkladu doporučuji zdrojový FLA soubor ke stáhnutí.

Štítky: Články

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *