Mouse Trail a Macromedia FLASH 4

17. dubna 2000

•

V dnešním díle seriálu se naučíme vytvořit „mouse trail“ neboli animaci, která bude sledovat pohyb kurzoru. Ve Flash se tento efekt používá hlavně jako upoutávka při nahrávání animace, uživatelé si pak hrají s myší a „nezlobí“.

K vytvoření tohoto efektu by jste již měli ovládat akce a to na celkem slušné úrovni. Přesto, pokud si nejste příliš jistí v programování nezoufejte, potřebné akce můžete ze zdrojového souboru zkopírovat do svého a pokud zachováte názvy proměnných, tak by všechno mělo správně fungovat.

Nejdříve tedy vytvořte novou scénu (CTRL+N) a nastavte jí parametry (CTRL+M). Dobré je nastavit Frame Rate (počet snímků za vteřinu) na trochu vyšší hodnotu než obvykle (doporučuji 24), velikost scény dejte 300 x 300 px a barvu pozadí nastavte černou.

Celý efekt spočívá v tom, že vytvoříme dva "Movie Clipy", první s názvem "Kurzor" bude obsahovat obrázek, který se bude zobrazovat na místě kurzoru. Druhý clip s názvem "Trail" bude ten první neustále duplikovat na aktuální pozici kurzoru.

Movie Clip "Kurzor"

Vytvořte nový Movie Clip (CTRL+F8) a pojmenujte jej "Kurzor". Pomocí kruhové gradientu nakreslete kolečko podle obrázku. Šipkou kolečko označte a uložte jej jako symbol s názvem "Svetlo" do knihovny (CTRL+L). Na pozici 15 vložte klíčový snímek a objekt "Svetlo" zmenšete na 10% původní velikosti. Mezi tyto dva klíčové snímky vložte animaci (motion twening) označte první klíčový snímek, CTRL+F, záložka Tweening. Do snímku 15 vložte akci "Stop" (CTRL+F, záložka Actions).

Přepněte se zpět do hlavní scény a otevřete knihovnu objektů (CTRL+L). Z knihovny přetáhněte do kamkoliv do scény Movie Clip "Kurzor". Označte jej šipkou, stiskněte pravé tlačítko a zvolte z nabídky "Properties". V záložce Definition pojmenujte tento objekt "Kurzor" (Instance name).

Movie Clip "Trail"

Vytvořte nový Movie Clip (CTRL+F8) a pojmenujte jej "Trail". Tento objekt bude sledovat polohu kurzoru a také bude duplikovat objekt "kurzor". Do prvního snímku vložte klíčový snímek (F6) a nadefinujte zde následující akce (CTRL+F, záložka Actions):

If (Pocet < 10)
Set Variable: "Pocet" = Pocet + 1
Else
Set Variable: "Pocet" = 1
End If
Begin Tell Target ("/")
Duplicate Movie Clip ("Kurzor", "Kurzor" & Trail:Pocet, Trail:Pocet + 100)
Set Property ("Kurzor" & Trail:Pocet, X Position) = GetProperty("Trail",_x)
Set Property ("Kurzor" & Trail:Pocet, Y Position) = GetProperty("Trail",_y)
End Tell Target

Tato akce zkontrolujte počet objektů ve scéně a pokud je jich zde méně než 10, tak zduplikuje objekt "Kurzor" na aktuální pozici kurzoru. Je zde stanovena proměnná "Pocet", pomocí funkce "GetProperty" je zjištěna souřadnice kurzoru a funkcí "Set Property" je tato souřadnice přiřazena ke zduplikovanému objektu "Kurzor".

Do druhého snímku tohoto objektu také vložte klíčový snímek a přidejte tuto akci:

Go to and Play (1)

Tato akce nám zajistí neustálé opakování prvního snímku a vytváření nových objektů.

Přepněte se zpět do hlavní scény a objekt "Trail" přetáhněte myší z knihovny do scény. Označte jej šipkou, stiskněte pravé tlačítko a zvolte z nabídky "Properties". V záložce Definition pojmenujte tento objekt "Trail" (Instance name).

Hlavní scéna

Vytvořte si novou vrstvu a pojmenujte ji "Akce". Do prvního snímku vložte tuto akci (CTRL+F, záložka Actions):

Start Drag ("/Trail", lockcenter)

Tato způsobí, že objekt "Trail" bude středem kopírovat pozici kurzoru.

Tím je celá animace hotová a vy si ji můžete hned odzkoušet stiskem kláves CTRL+ENTER. Velikost této animace je 1 kB takže se výborně hodí jako taková hračka pro ty, kteří čekají na stáhnutí větší animace.

A jako vždy vám nabízíme zdrojový soubor FLA ke stažení.

Předchozí článek 3D grafika vo Flashi? Ano - Vecta3D

Další článek Tipy a triky pro JavaScript 5.