Macromedia FLASH 5 - změna kurzoru - Grafika.cz - vše o počítačové grafice

Flash kurzor

Flash kurzor

7. února 2001, 00.00 | Standardní systémový kurzor se k mnoha flash animacím příliš nehodí a pokud tvoříte například hru, pak je již tento kurzor naprosto nepřijatelný. V dnešním příkladu se naučíme postup, jak dát uživateli na výběr dokonce z několika typů kurzorů.

Standardní systémový kurzor se k mnoha flash animacím příliš nehodí a pokud tvoříte například hru, pak je již tento kurzor naprosto nepřijatelný. V dnešním příkladu se naučíme postup, jak dát uživateli na výběr dokonce z několika typů kurzorů.

Možnost výměny kurzoru je ve FLASH novou záležitostí, která se objevila až s příchodem páté verze tohoto programu. To mimo jiné znamená, že pokud možnosti výměny kurzoru využijete, bude funkční pouze na páté verzi FLASH prohlížeče. Celý princip výměny kurzoru je velmi jednoduchý a spočívá v tom, že funkcí "Mouse.hide()" skryjeme systémový kurzor a na jeho místo umístíme pomocí funkce "Drag" jakýkoli Movie Clip, který bude sledovat pozici systémového "neviditelného" kurzoru.

Na příkladu si tedy ukážeme jak systémový kurzor nahradit pěti dalšími kurzory, jejichž výběr záleží na uživateli. Vytvořte si tedy novou scénu o velikosti 300 x 150 px (CTRL+M) a nastavte počet snímků za vteřinu na 18 (Frame Rate). Scéna bude obsahovat pouze jeden snímek a bude složena ze čtyř vrstev -"background, buttons, symbols a cursor". Ve vrstvě "background" se nachází pouze nápisy, které nejsou důležité pro funkčnost proto se budeme věnovat další vrstvě "buttons".

Nejdříve je tedy třeba vytvořit tlačítko, pomocí kterého se budeme přepínat mezi jednotlivými kurzory. Přepněte se tedy do vrstvy "buttons", ve které nakreslete pomocí nástroje obdélník čtverec se zakulacenými rohy. Tento čtverec šipkou označte, uložte jako symbol (F8 - Button) a pojmenujte "tlacitko". Potom tento objekt čtyřikrát duplikujte (CTRL+D), pomocí paletky "Align" tlačítka zarovnejte a umístěte všech pět tlačítek do pravé spodní části scény. Akce těmto tlačítkům přiřadíme později.

Nyní je třeba vytvořit kurzor, což bude Movie Clip, který bude obsahovat pět klíčových snímků a v každém z nich se bude nacházet jiný obrázek kurzoru. Vytvořte si tedy nový symbol (CTRL+F8 - Movie Clip) a pojmenujte jej "cursor". V tomto symbolu se budou nacházet dvě vrstvy, první z nich pojmenujte "cursors" a vytvořte v ní pět za sebou jdoucích klíčových snímků (F6), přičemž do každého z nich vložte příslušný obrázek kurzoru (dávejte pozor na středový bod Movie Clipu, který bude zároveň i střed pro kurzor, takže obrázky umisťujte s ohledem na něj). V příkladu jsem použil pro každý kurzor jeden se symbolů nacházejících se ve fontu "FFDingbeats". Druhou vrstvu tohoto symbolu pojmenujte "actions" a do prvního snímku vložte akci: "Stop", zamezíme tím tak samovolnému přehrávání Movie Clipu. Přepněte se nyní zpět do hlavní scény, vytvořte si novou vrstvu "cursor" a vložte do ní z knihovny (CTRL+L) symbol "cursor". Objekt šipkou označte a v paletce "Instance" vložte jako jméno (Name) "cursor".

Klepněte na symbol "cursor" pravým tlačítkem a zvolte z nabídky položku "Actions". Do okna pro definování akcí vložte následující skript:

onClipEvent (load) {
Mouse.hide();
startDrag ("", true);
}

Na prvním řádku je nadefinováno, že akce se má spustit po stáhnutí tohoto symbolu. Na dalším řádku je pomocí funkce "Mouse.hide()" skryt systémový kurzor a funkcí "startDrag" zajistíme "přichycení" tohoto objektu na v tuto chvíli neviditelný kurzor.

Nyní si vytvořte novou vrstvu "symbols", ve které se budou nacházet symboly zvolených kurzorů a ty pak umístěte na tlačítka v takovém pořadí za sebou, v jakém se nachází v symbolu"cursor". Tato vrstva slouží jen pro vizuální informaci o tom, které tlačítko přepíná na který kurzor a na funkčnost příkladu nemá vliv.

Abychom zajistili možnost výměny kurzoru, je třeba na tlačítka nadefinovat akce, které přepnou Movie Clip "cursor" na příslušný snímek a tedy i kurzor. Na první tlačítko tedy nadefinujte akci:

on (release) {
cursor.gotoAndStop(1);
}

Na další tlačítka nadefinujte obdobné akce, jen s tím rozdílem, že funkci "cursor.gotoAndStop(x)" změníte vždy číslo snímku, na který animace přeskočí.
Tím je celý příklad hotov a vy máte možnost si jeho funkčnost otestovat stiskem kláves CTRL+ENTER. Kurzor nemusí být jen statický, jako v tomto případě, ale samozřejmě je možnost jej nahradit nějakým animovaným Movie Clipem. Pro bližší prostudování příkladu Vám doporučuji stáhnout si zdrojový FLA soubor.