Tässä yksi tapa. Alla koodi yksinkertaisimmillaan.

function ballPos(mc:MovieClip, xp:Number):Void
{
mc._x = xp;
var yp = 0;
do
{
yp++;
}
while(!mLine.hitTest(xp, yp, true));
mc._y = yp;
updateAfterEvent();
}

Katso esimerkki: Follow the Path | FLA

Ja vielä koodi kokonaisuudessaan:

mBall.onMouseMove = function():Void
{
// tarkistetaan, että ollaan rajatulla alueella
if(isInside())
{
ballPos(mBall, _root._xmouse);
}
}
 
function ballPos(mc:MovieClip, xp:Number):Void
{
// pallon x on sama kuin hiiren x
mc._x = xp;
// aloitetaan oikean paikan haku pystysuunnassa
var yp = 0;
do
{
yp++;
}
// suoritetaan lisäys kunnes saavutetaan muoto
while(!mLine.hitTest(xp, yp, true));
// asetetaan pallon koordinaatti
mc._y = yp;
updateAfterEvent();
}
 
// alustetaan pallon paikka
ballPos(mBall, mBall._x);
 
// alueen tarkistus
function isInside():Boolean
{
var xp = _root._xmouse;
if(xp < 0 || xp > Stage.width) return false;
return true;
}

Pallon x on siis koko ajan sama kuin hiiren x. Y:n arvo saadaan selville hitTestillä. Aloitetaan y-koordinaatista 0 ja lisäätään y:n arvoa while-loopissa joka “kierroksella” yhdellä. Kun while lauseen hitTest palauttaa arvon tosi, ollaan saavutettu muodon pinta ja päivitetään pallon y-koordinaatti. Olennaista on myös huomata, että kolmannen parametrin tulee olla true, koska haluamme testata osuman itse varsinaisen muodon kanssa (BoundingBoxin sijaan).

Sisältö

• Kulmat
• Projektio
• Linkit

Valmiina? Tästä se lähtee.

Trigonometria
Matematiikan haara, joka käsittelee kolmion sivujen ja kulmien suhteita toisiinsa.

Kulmat

Kulmia käytetään Flashissa kahdella eri tavalla. Niitä käytetään movieclip-objektien pyörittämiseen ja trigonometristen funktioiden apuna.

Positiiviset kulmat mitataan x-axelilta myötäpäivään ja negatiiviset vastapäivään. Kulmaa mitataan asteissa ja se voi saada arvon väliltä 0° – 360°.

Asteiden lisäksi on olemassa myös toinen varsin yleinen tapa mitata kulmia: radiaani. 360° on samakuin 2Π.

Math.PI;

Mihin radiaaneja sitten tarvitaan? Koska kaikki kulmiin liittyvä tehdään Flashissa – yhtä poikkeusta lukuunottamatta – radiaaneilla. Asteita käytetään vain, kun haluat muuttaa objektin rotaatiota stagella. Koska molempien kanssa on välttämätöntä kuitenkin työskennellä, on hyvä voida muuttaa toisinaan asteet radiaaneiksi ja toisinpäin.

Saattaa olla hyödyllistä luodan omat functiot muunnon toteuttamiseen:

function radToDeg(rad)
{
   var deg= (180/Math.PI)*rad;
   return deg;
}
 
function degToRad(deg)
{
   var rad = (Math.PI/180)*deg;
   return rad;
}

Projektio

Tämä osio antaa sitten konkreettisempaa apua pelien ja sovellusten suunnitteluun.

Katso valmis esimerkki |   Lataa työtiedosto koneellesi

Stagen keskellä oleva objekti osoittaa kokoajan hiiren kursoria kohti. Kun klikkaat hiirellä jonnekin stagella, objekti laukaisee “ammuksen”. Ammus liikkuu kohti paikka, jossa hiiren painallus tapahtui. Jotta tämän kaltainen liike saadaan aikaan Flashissa, ammuksen nopeus täytyy projisoida x- ja y-akselin mukaan.

Tiedämme siis x:n nopeuden (_root._xmouse) ja y:n nopeuden (_root._ymouse). Tämän tiedon avulla voimme selvittää tarvittavan kulman, joka sijoitetaan objektin _rotation-ominaisuuteen. Likaisen työn hoitaa Math.atan2()-metodi. Se palauttaa arvon radiaaneina. Tämä tarkoittaa siis sitä, että lukema täytyy muuttaa asteiksi, ennen kuin voimme käyttää sitä objektin kulman muuttamiseen stagella.

Math.atan2(y,x);

Jos stagella oleva objektimme olisi sijoitettu paikkaan 0,0 eli origoon, koodi näyttäisi seuraavalta:

Math.atan2(_ymouse,_xmouse);

Olettaen siis, että haluamme objektin osoittavan hiiren suuntaan. Usein (jos koskaan) emme kuitenkaan sijoita objekteja luodun esityksen vasempaan yläreunaan vaan muuaalle esitykseen ja tällaisessa tapauksessa koodiin joudutaan tekemään pieni muutos. Mutta vain pieni.

Math.atan2(_ymouse-objekti._y,_xmouse-objekti._x);

Näin saamme laskettua oikean kulman hiiren ja objektin suhteen. Alla esimerkki toimivasta koodista.

m = stagella olevan objektin esiintymänimi

_root.onMouseMove = function()
{
	m._rotation = getDeg(m);
	updateAfterEvent();
}
 
function getDeg(obj)
{
	var ang = Math.atan2(_ymouse-obj._y,_xmouse-obj._x) * 180/Math.PI;
	return ang;
}

Ammuksen laukaisuun ja liikuttamiseen tarvitaan seuraavanlainen koodi:
d = objektin syvyys

_root.onMouseDown = function()
{
	var mc = _root.attachMovie("n","n"+d,d);
	mc._x = m._x;
	mc._y = m._y;
	mc._rotation = getDeg(m);
	arr.push(mc);
	d++;
}
 
_root.onEnterFrame = function()
{
	for(var i=0;i

Käytin tässä esimerkissä attachMovie-metodia lisäämään objektin esiintymän stagelle kuvaamaan ammusta. Laukaistut ammukset tallennetaan taulukkoon, joka käydään jokaisella framella läpi ja tehdään tarvittavat siirrot. Ammuksen liikkumisen kannalta olennaien osuus on seuraava:

var rot = arr[i]._rotation * PI/180;
var sx = Math.cos(rot)*speed;
var sy = Math.sin(rot)*speed;
arr[i]._x += sx;
arr[i]._y += sy;

Muuttujaan “rot” tallennetaan tarkistelun kohteena olevan ammuksen kulma, joka muutetaan radiaaneiksi Math.cos()-metodia varten. Math.cos() palauttaa objektin x-nopeuden ja Math.sin() vastaavasti y-nopeuden. Näiden funktioiden palauttamat arvot kerrotaan sitten vielä halutulla nopeuskertoimella, jonka jälkeen arvot sijoitetaan objektiin.

Linkit

Kuten jo alkuun heti mainitsin, pyrin kokoamaan tälle sivulle vain tarvittavan tiedon alkuun pääsemiseksi. Kuten varmaan huomasit mm. pythagoraan lause ja trigonometriset funktiot jäivät kokonaan pois tai ainakin vähälle huomiolle. Tämä ei kuitenkaan tarkoita sitä, etteikö niitä voisi hyödyntää myös Flash- sovelluksissa. Jos haluat opiskella lisää trigonometriaa, netistä löytyy paljon luetaavaa aiheeseen liittyen.

• Google kertoo: trigonometria

• getURL()
• Popupin avaaminen Flashista

getURL()

Kun käytät getURL():a esityksessäsi kutsumaan JavaScript-funktiota HTML-sivulla, jonne Flash-esityksesi on embeddattu, voit käyttää seuraavaa syntaksia:

_root.getURL("javascript:funktioNimi([parametrit])");

Esimerkiksi:

_root.getURL("javascript:alert('Tämä on varoitus')");

Popupin avaaminen Flashista

Popupin avaaminen Fashista aivan samalla tavalla kuin jo edellä mainittiin. HTML-sivulle kirjoitetaan seuraava skripti.

<script type="text/javascript"><!--mce:0--></script>

Fashista voit siis kutsua openwin- funktiota seuraavasti:

_root.getURL("javascript:openwin('polku/tiedosto.html', 'ikkunannimi', 'width=760, height=420')";

Katso valmis esimerkki |   Lataa työtiedosto koneellesi

Analogisen kellon toteuttaminen Flashilla saattaa kuullostaa hankalalta ja aikaa vievältä projektilta, mutta toteutus on itseasiassa varsin yksinkertainen. Koodiakaan ei tarvita kuin muutama rivillinen. Seuraava koodi kirjoitetaan esityksen ensimmäiseen frameen:

_root.onEnterFrame = function()
{
   var aika:Date = new Date();
 
   tunti = aika.getHours();
   minuutti = aika.getMinutes();
   sekunti = aika.getSeconds();
 
   if (tunti>12)
   {
      tunti -= 12;
   }
 
   secondAngle = 360*sekunti/60;
   minuteAngle = 360*minuutti/60;
   hourAngle = 360*tunti/12 + minuteAngle/12;
 
   sek._rotation = secondAngle;
   minute._rotation = minuteAngle;
   hour._rotation = hourAngle;
}

Tee stagelle kellon tausta.

Sekä kellon viisarit. (sekuntiviisari, minuuttiviisari ja tuntiviisari)

Tee jokaisesta viisarista oma movieClippi ja anna niille esiintymänimet “sek“, “minute” ja “hour“. HUOM! Huomaa, että movieClipin rekisteripisteen täytyy olla viisarin alaossa, ja että jokaisen viisarin pitää olla pystyasennossa. Älä kuitenkaan pyöritä itse movieClippiä, koska muuten kellosi ei toimi oikein.

Siirrä viisarit kellon keskelle siten, että jokaisen viisarin rekisteripiste on täsmälleen kellon keskiosassa.

Siinä se.