Husk at du kan finde en gennemgang af de brugte termer og begreber i "Introduktion til Math i Flash".

Pre Script

I foregående tutorial sluttede vi af med at tilføje acceleration til vores objekt, ved gentagende at lægge en værdi til en variabel for velocitet, og videre lægge denne velocitet til vores objekts egenskaber vi ønskede at præge.

Introduktion

I denne tutorial vil vi lege lidt videre med acceleration og velocitet, og se på hvordan vi kan præge et objekts fart og retning dynamisk.

Teorien

Vi vil ved hjælp af piletasterne kunne styre en kugles trillende retning og fart. Når vi har en given retning ud fra piletasterne kan vi lægge en given acceleration til eller trække den fra en allerede eksisterende velocitet for et objekt.
Med andre ord kan vi gøre farten mindre eller højere i for et objekt på en given akse, ved at trække en værdi fra eller lægge den til vores fart objektet allerede har.

Eksemplet

Til denne tutorial skal vi bruge et simpelt stykke grafik. Jeg har valgt et cirkelformet objekt og givet det navnet ”bold” på scenen.


Figur 1 Opret et movieclip med din grafik.


Figur 2 Giv movieclippet instancenavnet "bold".

Du kan hente start fla filen her. Hvis du hellere selv vil lave din grafik kan du også sagtens gøre det.

Når du har hentet filen eller selv lavet den grafik du vil bruge, er vi klar på at se lidt på den kode vi skal bruge.

På vores Action Script frame åbner vi kode panelet (F9) og det første vi gør er at deklarere de variabler vi skal bruge i vores applikation.

Det første vi gør er ikke stængt nødvendigt men en god idé: Nemlig det at gemme en reference til sit movieclip i en variabel, som man har datatypet (bestemt til kun at kunne indeholde…) til moviclip data. På den måde ved Flash at ”bold” er et movieclip, og vil på den måde kunne give os ”code hinting” når vi arbejder med ”bold” variablen.

var bold:MovieClip = _root.bold;

De næste variabler vi sætter op er velkendte fra ”Den Efterfølgende Pil” og indeholder vores velocitet for x og y, samt accelerationen for x og y akserne.

1
2
3
4
var vy:Number = 0;
var vx:Number = 0;
var ax:Number = .5;
var ay:Number = .5;

I dette eksempel har jeg sat acceleration til 0,5 på både x og y aksen, men prøv endelig flere forskellige værdier af, og prøv eventuelt at give forskellige værdier på x og y, for at se hvilken effekt det måtte have.
Det næste vi skal have gjort er at definere den event funktion der skal flytte bolden i en given retning. Til det bruger vi ”bold”’s ”onEnterFrame” funktion og beder denne kalde funktionen ”flytBold”.

bold.onEnterFrame = flytBold;

Nu skal vi have defineret ”flytBold” funktionen for at Flash kan genkende ”flytBold” og for at vi kan få eksekveret den kode vi ønsker.

1
2
3
function flytBold():Void
{

Det første vi gør i ”flytBold” er at sætte en betingelse op, for at se om denne betingelse bliver mødt.
Det vil i praksis sig at vi bruger en ”if” statement til undersøge om brugeren trykker på en given tast.
Det første vi vil undersøge om er tilfældet, er om brugeren har højre piletast trykke ned.

1
2
3
if(Key.isDown(Key.RIGHT))
{

- det vi gør er altså at kalde en metode på ”Key” klasse der hedder ”isDown”. ”isDown” forventer ét parameter; den tast den skal se om er trykket ned, og sender en boolean værdi tilbage. En boolean kan kun være ”true” eller ”false”. Så vi får altså en besked tilbage om det er sandt eller falsk at højre piletast er ”nede”. I ”isDown” metoden bruger vi en såkaldt konstant som ”Key” klassen har, vi kunne også have brugt det nummer som piletasten har på keyboardet. Men da det kan være svært at huske hvilket nummer tasterne har, og for at vide sig helt sikkert, kan man bruge de konstanter ”Key” klassen har.

Nu har vi altså mulighed for at definere hvad der skal ske når brugeren har højre piletast trykket ned, og vi kan derfor forsætte inde i ”if” sætningen:

1
2
vx += ax;
}

Som du kan se lægger vi altså acceleration for x til velocitet for x. Det er selvfølgelig fordi at højre er samme retning som x stiger i koordinatsystemet i Flash.
Læs mere om koordinatsystemet i Flash i "Introduktion til Math i Flash".

Når vi har sagt ”if” kan vi også sige ”else if” som muligheden for at teste for om en efterfølgende betingelse er mødt, hvis ikke den første er.
Vi kan i vores tilfælde teste for om brugeren har venstre pil trykket ned, hvis han ikke har højre tast nede.
Det gør vi ved efter afslutningen af ”if” sætningen at skrive:

1
2
3
4
else if(Key.isDown(Key.LEFT))
{
  vx -= ax;
};

På præcist samme møde tester vi betingelsen for om venstre er nede og er den det (evaluere vores betingelse til ”true”) så trækker vi acceleration fra den allerede eksisterende hastighed på x aksen.

Det samme skal vi have gjort for pil op og pil ned, og da koden er helt den samme kun med variation i variabel og konstanternes navne vil jeg ikke gennemgå den igen, men blot vise den:

1
2
3
4
5
6
7
8
if(Key.isDown(Key.UP))
{
  vy -= ay;
}
else if(Key.isDown(Key.DOWN))
{
  vy += ay;
}

Det allersidste vi skal gøre, som du sikkert allerede har regnet ud, er at bruge vores velociteter til at præge vores objekt.
Det gør vi igen ved at lægge vx til ”bold”’s x egenskab og ligeledes med vy til y egenskaben:

1
2
bold._x += vx;
bold._y += vy;

Det var alt der skulle til for at give os accelerations kontrol over vores bold.

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
33
34
35
36
37
38
39
40
41
42
43
44
/***********************************************************
* Matematisk Mandag
* Basic 3: "Den trillende kugle"
* - Part 1
* <a href="http://www.flashforum.dk" title="www.flashforum.dk">www.flashforum.dk</a> (flashger)
***********************************************************/
/**********************************************************
* VIGTIGE FORMLER I DENNE TUTORIAL:
**********************************************************/
 
//--------------------VARIABLER---------------------------
var bold:MovieClip = _root.bold;
var vy:Number = 0;
var vx:Number = 0;
var ax:Number = .5;
var ay:Number = .5;
 
 
//--------------------EVENT HÅNDTERING--------------------
bold.onEnterFrame = flytBold;
 
 
//-----------------EKSEKVERENDE FUNKTION-------------------
function flytBold()
{
  if(Key.isDown(Key.RIGHT))
  {
    vx += ax;
  }
  else if(Key.isDown(Key.LEFT))
  {
    vx -= ax;
  }
  if(Key.isDown(Key.UP))
  {
    vy -= ay;
  }
  else if(Key.isDown(Key.DOWN))
  {
    vy += ay;
  }
  bold._x += vx;
  bold._y += vy;
}

Her er et link til et fungerende eksempel.

Her er et link til et fungerende eksempel.

(Det er muligt at du skal klikke en enkelt gang med musen på kuglen, før du kan bruge piletasterne. Inden da har flash filmen muligvis ikke fokus.)

Her er den færdige fil.
I næste part af ”Den Trillende Kugle” ser vi på hvordan vi tilføjer yderligere fysiske fænomener som friktion og tyngdekraft.