I denne Basic Math tutorial skal vi først se på hvordan vi kan bruge Math.antan2 til at bestemme hvor meget et objekt skal drejes for at være på samme vinkel som f.eks. brugerens mus. Det kunne selvfølgelig være alt muligt andet end lige brugerens mus, f.eks. et objekt der repræsenterende brugerens ”rum skib” i et spil, og den følgende objekt var et fjendtlig skip.

I denne Basic tutorial vil vi dog holde os til en pil vi ønsker hele tiden skal drejer sig efter hvor musen befinder sig på skærmen.

Den vigtigste formler i denne tutorial er omregningen fra radianer til grader. Se ”Introduktion til Math. i Flash” samt Math.atan2 funktionen.

Til brug for denne tutorial er en simpel pil, eller et andet grafisk objekt. Du kan hente start fla filen her eller selv tegne noget grafik.

Sørg for at din pil har spidsen mod højre og at den ligger langs x-aksen, på den måde vil den have en start-vinkel på 0 grader.

Har den ikke det, vil der fra start være en forskydning på pilens rotation, så den ikke passer med musen.

Note: sørg for at holde registreringspunktet i midten af din grafik, da det er dette vi vil rotere grafikken omkring.

Efter at have placeret vores pilen på et separat lag på scenen og givet den instansnavnet ”pil” er vi klar til at gå ind i Action Script panelet og begynde at lave motoren der skal dreje pilen. Sørg for at du opretter koden på et frame, på et lag for sig.

Inde i vores Action Script panel, opretter vi først en række variabler som vi skal bruge i vores videre kode.
Vi opretter en reference til vores pil på scenen
var pil:MovieClip = _root.pil;

Herefter to variabler til at holde vores delta værdier: en til hver af akserne:

1

2


var deltaX:Number;

var deltaY:Number;

De sidste to variabler bliver navngivet henholdsvis ”radianer” og ”grader”. I disse to variabler kommer vi til at gemme vores radiantal og vores gradtal for pilens drejning:

1

2


var radianer:Number;

var grader:Number;

Nu hvor vi har vores data holdere på plads, kan vi begynde at se lidt på hvad det er vi egentligt gerne vil: nemlig at fortælle pilen at den hele tiden skal holde øje med hvor musen befinder sig på skærmen. Til dette skal vi bruge en eventhåndterende funktion, og fordi pilen er et instans af MovieClip klassen har den allerede indbygget en række eventhåndterende funktioner vi kan benytte os af. I vores tilfælde er vi interesseret i at pilen holder sig opdateret hele tiden, og til det kan vi bruge eventfunktionen ”onEnterFrame” som kaldes hver gang pilen renderes ind i et nyt frame. I vores tilfælde har vi kun ét frame, men derfor kaldes ”onEnterFrame” funktionen alligevel et antal gange i sekundet. I mit tilfælde har jeg sat den såkaldte frame rate til 30, hvilket vil sige at vores ”onEnterFrame” funktion bliver kaldt 30 gange i sekundet.

Og hvad skal der så ske disse 30 gange hver sekund?
I vores tilfælde vil vi gerne have at pilen skal drejes, så vi kan skrive at pilens ”onEnterFrame” funktion er lig med ”drejPil”.
pil.onEnterFrame = drejPil;

Funktionen ”drejPil” kender Flash selvfølgelig ikke, så den er vil nød til at fortælle Flash lidt mere om hvad er, for at vores pil kommer til at virke.

Det gør vi ved at oprette en ny funktion med navnet ”drejPil” og så i funktions definitionen fortælle Flash hvad det er der skal gøres hver gang denne kaldes.

1

2

3

4


function drejPil(Void):Void
{

// her kommer koden der drejer pilen

}

Det første vi skal gøre i vores funktion er at udregne værdierne for deltaX og deltaY:

1

2


deltaX = _xmouse - pil._x;

deltaY = _ymouse - pil._y;

Når vi har de to deltaværdier kan vi bruge Math.atan2 metoden og få et radiantal tilbage på hvor mange radianer vinklen er i den trekant der er mellem vores pils midte og vores mus.
radianer = Math.atan2(deltaY,deltaX);

For at vi kan bruge disse radianer til at dreje vores pil skal vi have omskrevet dem til grader, og som du sikkert allerede har læst i ”Introduktion til Math. i Flash” er det ret simpelt, da vi allerede kender forholdet mellem radianer og grader. (180 grader er lig med PI radianer).
grader = radianer*180/Math.PI;

Nu har vi altså fået vores grader bestemt og kan let og uden besvær fortælle ”pil” at den skal rotere til ”grader”.
pil._rotation = grader;

Den samlede kode ser således ud:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/***********************************************************
*     Matematisk Mandag
*     Basic 1: "Den Drejende Pil"
*     <a href="http://www.flashforum.dk" title="www.flashforum.dk">www.flashforum.dk</a> (flashger)
***********************************************************/
/**********************************************************
* VIGTIGE FORMLER I DENNE TUTORIAL:
* grader = radianer* 180/PI
* vinklen i en trekant = Math.atan2(deltaY,deltaX)
**********************************************************/
 
//--------------------VARIABLER---------------------------
var pil:MovieClip = _root.pil;
var deltaX:Number;
var deltaY:Number;
var radianer:Number;
var grader:Number;
 
 
//--------------------EVENT HÅNDTERING--------------------
pil.onEnterFrame = drejPil;
 
 
//-----------------EKSEKVERENDE FUNKTION-------------------
function drejPil():Void
{
  deltaX = _xmouse - pil._x;
  deltaY = _ymouse - pil._y;
  radianer = Math.atan2(deltaY,deltaX);
  grader = radianer*180/Math.PI;
  pil._rotation = grader; 
}

Den færdige fla fil kan hentes her.
Her kan du se hvordan eksemplet virker praksis.

Det næste vi skal se på er hvordan vi tilføjer velocitet og acceleration til pilen også, så vi ikke blot kan få den til at dreje, men også til at følge efter vores mus.