Objecten laten bewegen via actionscript
blokje door vinTage op 10-11-2006
Objecten laten bewegen via ActionScript

In dit artikel probeer ik jullie duidelijk te maken hoe je flash objecten kan laten bewegen met actionscript.

De basis van deze tutorial ligt bij de _x en de _y as van het object wat je wilt laten bewegen.
_x is de horizontale positie op je scene (vanaf het registratie punt)
_y is de verticale positie op je scene (vanaf het registratie punt)

Met het registratie punt bedoel ik het kruisje wat er op het werkblad te zien is tijdens het maken/editten van je movieclip.
Om deze tutorial simpel te houden, maken we een movieclip met het registratiepunt in het midden!
(verderop in de tut komt dit van pas)

registratie punt



start

Okay, we willen dus een object van a naar b laten bewegen zonder dat we daar zelf iets voor moeten doen.
Het lijkt me slim om "iets" te maken wat we willen laten bewegen, dus klik (ctrl+f8) om een nieuwe MovieClip te maken :-).
Eenmaal aanbeland op het nieuwe werkbad teken je het "ik wil dit laten bewegen" figuurtje.

Als je je rondje, vierkantje, whatever'ietje hebt getekend, keren we terug naar de main scene, en sleep je het net ontworpen figuurtje uit de library (ctrl+f11) naar de bovenkant van onze scene.

Met je "object" nog geselecteerd, open je het ActionScript (f9) paneel en vullen we deze code in:
actionscript code

onClipEvent (enterFrame) {
  this._y ++;
}
 

Als je nu je fla published (ctrl+enter), dan zal je dat object naar beneden zien gaan ...

Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.

Jippy !! het beweegt al ;-)
Wat er uiteindelijk gebeurde was: "per frame cyclus" FPS werd ons object, 1 pixel naar beneden verplaatst.
Maar hij gaat wel langzaam....ah, daar kunnen we iets aan doen!

We kunnen de snelheid van het bewegen aanpassen op 3 manieren, namelijk
1 de FPS aanpassen van onze flash file
2 in plaats van "this._y++;" gebruiken we"this._y+= 2; // of een ander getal
3 we geven een variable mee via een onload.

De eerste optie valt in mijn ogen al uit, want ik wil duidelijk maken hoe je een figuur kan leten bewegen via actionscript, en de FPS zijn (tot nu toe) nog niet aan te passen via actionscript.
De tweede optie is bijna dezelfde als de derde optie, behalve dat de derde optie GELIJK word aangenomen zodra het object "geladen" is en hoeft dus niet op een stukje "andere" actionscript te wachten.
Met andere woorden, ik ga optie 3 toepassen :-p

We openen weer het actions paneel met onze movieclip geselecteerd en veranderen het script naar:
actionscript code

onClipEvent (load) {
speed = 5;
}
onClipEvent (enterFrame) {
this._y += speed;
}
 


Als je nu je fla published zie je dat onze movieclip al sneller naar beneden gaat (5 keer zo snel)



op en neer

We kunnen onze movieclip al van boven naar beneden laten bewegen, het lijkt me onzinnig om uit te leggen hoe je de movieclip horizontaal laat bewegen :-P (stiekeme hint: verander in je code de _y naar _x)

Om te zorgen dat onze movieclip niet "buiten beeld" gaat, kunnen we een if statement inbouwen.
Aangezien onze code nonstop word uitgevoerd(enterFrame), kunnen we dus ook nonstop kijken "waar" de movieclip zich bevind.
Dus we gaan een paar coordinaten opgeven waar onze clip zich aan moet houden.

actionscript code

//zodra de clip geladen is gebeurd er dit
onClipEvent (load) {
  speed = 5;
}
//verder word deze code nonstop uitgevoerd
onClipEvent (enterFrame) {
  this._y += speed;
  /*Stage.height is de totale hoogte van onze swf*/
  if (this._y>Stage.height) {
    //de instance was lager dan de onderkant van de swf
    speed = -5;
  }
  if (this._y<0) {
    //de instance was aan de bovenkant van de swf
    speed = +5;
  }
}
 


Resultaat
Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.

WOOHOO ons figuur stuitert al op en neer !



diagonalen en variabelen

Nu we een op en neer stuiterende bal hebben, willen we mischien nog meer, want alleen op en neer is ook maar saai.
Met onderstaande code kan je je figuurtje door het hele veld laten stuiteren met verschillende snelheden en verschillende hoeken.
Dus selecteer je object weer en verander je code naar :
actionscript code

//zodra de clip geladen is gebeurd er dit
onClipEvent (load) {
  //we willen variabele snelheden met een maximum speed van 5 px per FPS
  speed = 5;
  //random snelheidje maken
  speedVer = Math.random()*speed; // _x as
  speedHor = Math.random()*speed; // _y as
}


//verder word deze code nonstop uitgevoerd
onClipEvent (enterFrame) {
  //laat je figuurtje nonstop bewegen
  this._y += speedVer;
  this._x += speedHor;
 
  /*ons figuur "binnen" de swf houden*/
 
  //de instance was lager dan de onderkant van de swf
  if (this._y>Stage.height) {
    speedVer = -Math.random()*speed;
  }
 
  //de instance was aan de bovenkant van de swf
  if (this._y<0) {
    speedVer = +Math.random()*speed;
  }
 
  //de instance was aan de linkerkant van de swf
  if (this._x<0) {
    speedHor = +Math.random()*speed;
  }
 
  //de instance was aan de rechterkant van de swf
  if (this._x>Stage.width) {
    speedHor = -Math.random()*speed;
  }
}
 


resultaat:
Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.




registratie punt

Zoals ik helemaal in het begin van deze tutorial al aangaf moesten we rekening houden met het registratie punt.
De reden daarvoor kan je al zien als je heel goed kijkt naar mn vorige voorbeeldje(s).
Je ziet namelijk als het balletje tegen de rand aankomt, dat hij dan voor de helft uit beeld is, dat komt omdat het registratie punt in het midden zit.
We kunnen dit "uit beeld gaan" voorkomen door in ons script de afmetingen van ons object mee te geven, die delen door 2 (want het gaat om het midden) en die "maat" optellen/aftrekken bij de randen.
Onderstaande actionScript zal het wel duidelijker maken:
actionscript code

//zodra de clip geladen is gebeurd er dit
onClipEvent (load) {
  //we willen variabele snelheden met een maximum speed van 5 px per FPS
  speed = 5;
  //random snelheidje maken
  speedVer = Math.random()*speed; // _x as
  speedHor = Math.random()*speed; // _y as
}


//verder word deze code nonstop uitgevoerd
onClipEvent (enterFrame) {
  //laat je figuurtje nonstop bewegen
  this._y += speedVer;
  this._x += speedHor;
 
  /*ons figuur "binnen" de swf houden*/
 
  //de instance was lager dan de onderkant van de swf
  if (this._y+(this._height/2)>Stage.height) {
    speedVer = -Math.random()*speed;
  }
 
  //de instance was aan de bovenkant van de swf
  if (this._y-(this._height/2)<0) {
    speedVer = +Math.random()*speed;
  }
 
  //de instance was aan de linkerkant van de swf
  if (this._x-(this._width/2)<0) {
    speedHor = +Math.random()*speed;
  }
 
  //de instance was aan de rechterkant van de swf
  if (this._x+(this._width/2)>Stage.width) {
    speedHor = -Math.random()*speed;
  }
}
 

Resultaat
Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.



Zo, dit was dan de basis van random motion, ofwel bewegen via ActionScript.
Mocht het je op een of andere manier niet lukken, dan kan je de door mij gebruikte motion.fla's downloaden.







Share |



Stem op deze tutorial


Reacties



Je bent niet ingelogged, je kan geen commentaar geven, of commentaren lezen over deze tutorial.

Uw link hier ?

sitemasters siteoptimo

html-site.nl webdesignersforum.nl actionscript.startpagina.be flash.startpagina.be macromedia.startpagina.be get firefox Nibbler report for www.vintagesworld.be uw advertentie hier?
contact

vt4 klussers....