Rotace objektů ve FLASHi na základě pohybu myši

13. srpna 2001

•

V dnešním článku vám ukáži na jednoduchém příkladu, jak lze používat pohybu myši k rotaci některých Movie clipů. Navíc je zde řešen převod mezi obloukovou (radiány) a úhlovou mírou (stupně), což zrovna může začínajícím „flashařům“ činit problémy. Tento příklad lze použít s nastavením patřičných parametrů na více umístěních na ploše. Záleží pouze na vaši fantazii.

Ponechal jsem základní velikost animace 550 x 400 px. Kombinací kláves CTRL+F8 vytvoříme nový Movie Clip s názvem „ukazatel“. Jako příklad jsem zvolil jednoduchou šipku o velikosti 100 x 200 px. Tu si můžeme nakreslit velmi jednoduchým způsobem. Důležité je, aby byla vodorovně a směřovala doprava. Nástrojem Rectangle Tool – (R) si namalujeme obdélník. Pomocí nástroje Pen Tool (P) si domalujeme trojúhelník. Zatím jej umístíme vedle, aby nedošlo k propojení těchto dvou obrazců. Kliknutím myši do plochy vytvoříme první bod odvěsny. Postupným kliknutím v ploše vytvoříme druhý a třetí bod. Abychom trojúhelník uzavřeli, klikneme myší opět do prvního bodu. Obrazec se nám vyplní aktuální barvou. Při kreslení úsečky stisk klávesy Shift nám zajistí, aby úsečka byla kolmá k ose x při vytváření přepony nebo pod úhlem 45 stupňů při vytváření odvěsen. Objekty nyní horizontálně zarovnáme na střed funkcí Align (Ctrl+K). Obdélník umístíme tak, aby levý okraj obdélníku začínal na středu (viz obrázek). Při přemístění trojúhelníku před obdélník si opět pomůžeme klávesou Shift, která nám zajistí vodorovný posun v ose x. Nyní zajistíme překrytí objektů. Označíme-li klávesou jeden objekt a při stisku Shift druhý, dojde k jejich spojení. Tím je šipka vytvořena. K vlastnímu prostudování nechávám možnost umístění dál od středu nebo zarovnání na střed plochy pomocí Align (CTRL+K).

Tím máme vytvořený Movie clip. Přepneme se do hlavní scény a z knihovny, kterou vyvoláme na spodní hraně nebo CTRL+L, přemístíme „ukazatel“do první vrstvy libovolně do plochy. Tím jsme vytvořili instanci, jejíž vlastnosti nastavíme v panelu Instance (CTRL+I), a pojmenujeme „sipka“. Klávesou F5 vložíme do políčka č.3 prázdný rámeček.

Vytvoříme druhou vrstvu (Insert Layer) a do prvního políčka vložíme následující akce, resp. zadávání vstupních hodnot v Actions scriptu (CTRL+ALT+A):

xo = 275;
yo = 200;
_root.sipka. _x= xo;
_root.sipka, _y= yo;

Hodnoty Xo, Yo nám označují střed otáčení šipky, který jsem si zvolil uprostřed pracovní plochy. Přesné umístění Movie clipu do plochy nastavíte zadáním hodnot _x a _y.

Abychom mohli do dalšího políčka vložit následující akce, klávesou F6 z něj vytvoříme klíčový rámeček. Do druhého políčka vložíme následující akce:

xm = _root._xmouse;
ym = _root._ymouse;
dx = xm-xo;
dy = ym-yo;
uhel = (Math.atan (dy/dx))*180/Math.PI;
if (dx>=0 and dy>=0) {
uhel = 360+uhel;
}
if ((dx<=0 and dy<=0)or(dx<=0 and dy>=0)) {
uhel = 180+uhel;
}
_root.sipka._rotation = uhel;

Zjištěním polohy kurzoru myši obdržíme hodnoty xm, ym. Vypočteme x-ové (dx) a y-ové (dy) rozdily mezi polohou myši a počátečním bodem. Abychom dostali úhel rotace ve stupních, výslednou hodnotu z ARC TAG (radiany = platí i pro ostatní goniometrické funkce) je nutné přenásobit konstantou (180/PI).

Podle hodnot dx a dy zjistíme, v kterém kvadrantu se poloha myši nachází a připočítáme k úhlu násobky pravého úhlu=90 stupňů. Nulová hodnota úhlu prochází bodem xo a oproti běžným zvyklostem je směr otáčení po směru hodinových ručiček. Pootočení Movie clipu zajistíme na poslední řádce.Do posledního, třetího klíčového políčka (F6) vložíme příkaz gotoAndPlay (2), který nám zajistí neustálé načítání polohy myši.

A nyní si můžete celou ukázku vyzkoušet stiskem CTRL+Enter. Zdrojový soubor je možné stáhnout zde.