Animovaný kurzor

23.1.2006· Autor: Ondřej Brichta· Počet komentářů: 11

Pokud nás už nebaví standardní kurzor tvaru šipky, není nic jednoduššího, než si nakreslit vlastní a použít jej ve flashových animacích. Že se jedná o velmi zajímavé řešení, které navíc není nijak složité, o tom se přesvědčíme v dnešním tutoriálu.

Pryč se šipkou!

Každý z nás jednou zjistí, že standardní kurzor nevyhovuje právě tvořené animaci. Klasickým příkladem může být akční hra, kde střílíme na cíl a chceme, aby se kurzor změnil v zaměřovač. My dnes budeme humánnější a vytvoříme si animovaný kurzor, který může vypadat například takto.

Ve Flashi existuje třída „Mouse“, která obsahuje několik metod a událostí, pomocí kterých snadno schováme původní kurzor a nahradíme jej jiným objektem. Při nahrazování kurzoru budeme vždy začínat metodou „hide()“. Pokud do některého ze snímků časové osy napíšeme výraz:

Mouse.hide();

a přehrávání se dostane k tomuto příkazu, zmizí v animaci symbol šipky kurzoru. Musíme si ale uvědomit, že zmizel pouze symbol šipky, fyzicky je kurzor stále přítomen. Pokud máme na scéně tlačítka, budou stále reagovat, pokud na ně myší najedeme, i když je kurzor neviditelný.

Opakem metody pro schování kurzoru je příkaz:

Mouse.show();

Jak jistě tušíme, díku tomuto příkazu se kurzor opět objeví.

Pokud jsme kurzor schovali, je dobré jej nahradit jiným objektem, jinak hrozí, že uživatele znechutíme tím, že prakticky nemá šanci provádět jakékoliv akce ve flashové animaci.

Vlastní kurzor

Princip nahrazení původního kurzoru je vcelku jednoduchý. Pokud je původní šipka neviditelná, stačí mít na scéně objekt, který budeme umisťovat na stejné souřadnice, jaké má ukazatel myši (schováním šipky došlo pouze k zneviditelnění tohoto symbolu, kurzor se stále pohybuje po scéně).

Vyzkoušíme si jednoduchý příklad. Na scéně si nakreslíme jakýkoliv tvar, klikneme na něj pravým tlačítkem myši a ze zobrazeného menu zvolíme položku „Convert to Symbol“. Převedeme kresbu na symbol MovieClip (MC). Otevřeme si panel vlastností „Properties“, klikneme na převedený symbol a na panelu vlastností napíšeme do políčka „Instance Name“ jméno symbolu (například „kurzor“).

Pokud jsme MC pojmenovali, můžeme jej nyní pomocí příkazů ActionScriptu (AS) ovládat a měnit jeho vlastnosti. My budeme chtít, aby se MC pohyboval stejně jako kurzor myši, to znamená, že jej potřebujeme umisťovat na stejné pozice, jaké má právě kurzor.

Klineme na první snímek časové osy, otevřeme si panel akcí a napíšeme sem tento skript:

Mouse.hide();
 kurzor.onMouseMove = function() {
 Mouse.hide();
 kurzor._x = _xmouse;
 kurzor._y = _ymouse;
 updateAfterEvent();
 };

První řádek jsme si již vysvětlili, jedná se o příkaz pro schování kurzorové šipky. Následuje událost „onMouseMove“ klipu „kurzor“. Tato událost nám říká, že když budeme pohybovat myší, vykoná se příkaz, který jsme určili ve funkci události.

První příkaz ve funkci zajistí opětovné schování kurzoru myši. Dali jsme ho sem z důvodu, že uživatel občas klikne pravým tlačítkem myši, nebo provede jinou akci, která může vést k zobrazení kurzorové šipky. My si zajistíme, že šipka bude opravdu neviditelná po celou dobu animace.

Následují dva příkazy, kterými měníme pozici MC „kurzor“ přesně podle polohy původního kurzoru myši. Zde si musíme uvědomit důležitou věc, MC „kurzor“ se přichytí ke kurzoru myši svým středem a následné události, které jsou vztažené ke kurzoru myši, se provádějí
vzhledem k tomuto bodu.

Pokud budeme mít na scéně tlačítka, budou reagovat až v okamžiku, kdy na ně najedeme středem přetahovaného MC „kurzor“.

Poslední metodou je „updateAfterEvent()“, která zajistí plynulý pohyb přetahovaného MC „kurzor“.

Animace kurzoru

V nadpisu jsme si řekli, že vytvoříme animovaný kurzor. Vzhledem k tomu, že místo kurzorové šipky máme MC, do kterého lze umisťovat animace, nebo další MC, je možností opravdu velké množství. My si vyzkoušíme jednu z nich, která bude spočívat ve spuštění animace kurzoru po kliknutí myši.

Můžeme pokračovat s kurzorem, který jsme vytvořili na začátku této lekce. Otevřeme si náš kreslený kurzor a hned do prvního snímku napíšeme akci:

stop();

Dále je to už jen na naší fantazii. Vytvoříme si v tomto MC animaci, kterou chceme po kliknutí zobrazit.

Pokud máme animaci hotovu, vrátíme se na hlavní scénu a připíšeme do prvního snímku skript:

kurzor.onMouseDown = function() {
 kurzor.play();
 };

Použili jsme zde událost „onMouseDown“, díky které detekujeme kliknutí myši. Pokud se tak stane, začneme přehrávat animaci v MC „kurzor“. A to je vše, nyní už jen otestovat a můžeme se pustit do vylepšování našeho prvního animovaného kurzoru.

Pokud se chcete nechat inspirovat, nebo si nejste stoprocentně jistí postupem, může se Vám hodit také videotutoriál s postupem tvorby animovaného kurzoru.

screenshot

Tento videotutoriál byl vytvořen pomocí programu Macromedia Captivate. Pokud budete mít jakékoliv připomínky k jeho provedení nebo obsahu, napište nám je prosím do komentářů pod článkem.

Zdrojový soubor této lekce je k dispozici zde.

Ondřej Brichta Vývojář flashových a mobilních AIR aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server

E-mail: ob(zavinac)obria.cz | Web: http://www.obria.cz |

Motto: <°))))><

Komentáře k článku  
aktivní kurzor BJMg | 11.3.2006 16:08
Re: aktivní kurzor OBr | 12.3.2006 9:53
Re: Re: aktivní kurzor BJMg | 12.3.2006 10:18
Re: Re: Re: aktivní kurzor OBr | 12.3.2006 11:39
dotaz leon | 20.4.2006 8:27
Re: dotaz OBr | 20.4.2006 15:46
hide? tesarm@gmail.com | 21.3.2007 18:27
Re: hide? OBr | 21.3.2007 18:32
Re: Re: hide? tesarm@gmail.com | 21.3.2007 19:41
zobrazení kurzoru dEsign-Sobík | 31.5.2007 11:27
oramovanie pola zmeny kurzora viper82 | 29.4.2008 11:33

Přihlášení uživatele