Rotace objektu podle myši

7.12.2007· Autor: Ondřej Brichta· Přidat komentář

V dnešním tutoriálu si ukážeme jak umožnit konkrétním objektům otáčení podle kurzoru myši.

Otáčení za kurzorem

Mezi časté dotazy poslední dobou patří možnost otáčení objektu za kurzorem myši. Řešení tohoto efektu je velice rychlé a tak jej doplníme o další možnost - pohyb objektů ve směru natočení objektu.

Nejprve si připravíme MovieClip, u kterého chceme, aby se otáčel za kurzorem myši. MovieCLip umístíme na hlavní scénu a pojmenujeme jeho instanci jako „objekt":

instance name

Jakmile máme objekt pojmenovaný, přesuneme se do akcí prvního snímku hlavní časové osy a připravíme si následující skript:

function rotace():Void {
 var dif_x = _xmouse-objekt._x;
 var dif_y = _ymouse-objekt._y;
 var radiany:Number = Math.atan2(dif_x, dif_y);
 var stupne:Number = 180-radiany*180/Math.PI;
 objekt._rotation = stupne;
}
this.onEnterFrame = rotace;

Abychom mohli objektem otáčet podle polohy kurzoru, musíme znát úhel, o který se má objekt otočit. Tento úhel se rovná úhlu, který svírá kurzor myši a naším objektem, takže jediné, co potřebujeme zjistit, je velikost úhlu mezi kurzorem myši a naším objektem.

Pro zjištění úhlu mezi dvěma body využijeme metody třídy Math, která se nazývá „atan2". Tato metoda vrací velikost úhlu, který svírá bod o zadaných souřadnicích s bodem o souřadnici x=0,y=0. V našem případě tak stačí, pokud budeme metodě zadávat vzdálenost kurzoru myši od objektu. Výsledkem bude úhel mezi kurzorem a objektem.

Protože objektem rotujeme, nevrací vlastnost objekt._xmouse správné údaje (vzdálenost myši od objektu), musíme tak vzdálenost kurzor a objektu dopočítat „ručně" přes rozdíl pozice objektu a polohy kurzoru.

Nesmíme zapomenout, že metoda „atan2" vrací velikost úhlu v radiánech, proto musíme provést přepočet na stupně, které zadáváme pro rotaci objektu.

Pohyb objektů

Pokud bychom chtěli umožnit po kliknutí na plochu „vystřelení" objektu směrem k natočení, stačí, když využijeme Tween třídu a MovieClip, u kterého máme nastaven export pro ActionScript (více jsme se exportu objektů pro ActionScript věnovali zde: http://www.flash.cz/portal/clanek.aspx?id=779)

K „onMouseDown" události pak připojíme funkci, která zajistí „vystřelení" objektu ve směru natočení, což je v našem případě totožné jako vystřelit objekt na aktuální souřadnice kurzoru myši:

_obj_num = 0;
this.onMouseDown = function() {
 var newMC:MovieClip = _root.attachMovie("mc", "mc"+_obj_num, _root.getNextHighestDepth());
 newMC._x = objekt._x;
 newMC._y = objekt._y;
 moveObj(newMC, _xmouse, _ymouse, 24);
};
moveObj = function (obj:Object, cil_x:Number, cil_y:Number, doba:Number):Void {
 posunTyp = mx.transitions.easing.Regular.easeOut;
 posun1 = new mx.transitions.Tween(obj, "_x", posunTyp, obj._x, cil_x, doba, false);
 posun2 = new mx.transitions.Tween(obj, "_y", posunTyp, obj._y, cil_y, doba, false);
};