. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK ActionScript

Analóg óra készítése Actionscripttel
  feltöltve: 2004.04.17 | szerző: caber_net | olvasva: 9576 alkalommal

 
A fejlesztőkörnyezet beállításai

Nyiss egy új moziklipet. A beállításokat rád bízom, mert a feladat szempontjából indifferens. Én a következőekkel indultam el:
• 400x400px;
• háttér:#ffffff;
• frame rate: tök mindegy, mert setInterval fogja működtetni a vekkert;
• nyisd meg az actions palettát (F9), és húzd fel jó magasra. Nem baj, ha ilyen fölösleges dolgok, mint a színpad, timeline, layerek és rajzoló eszközök stb. nem látszanak, nem lesz rájuk semmi szükség.

A kezdeti változók, és függvények létrehozása

Egy kört kell felosztanunk 12 (órák), illetve 60 (percek és másodpercek) részre úgy, hogy adott sugár mellett a függvényünk kiszámolja ezen pontok x és y koordinátáit. Elsőre talán rémisztőnek tűnhet, de nem kell más hozzá, csak egy kis trigonometria. Nézzük.

A fenti ábráról leolvashatjátok, hogy a középponttól való x és y irányú távolságok a mutató hossza és az általa bezárt szög függvényében a következőképpen alakulnak:

xDistOra = radius*sin(szog)
yDistOra = -radius*cos(szog)

Mivel Π radián egy fél kör, tehát 6 óra, ezért egy adott órához tartozó x és y különbségek:

xDistOra = radius*sin(Π/6)*órák száma
yDistOra = -radius*cos(Π/6)*órák száma

Perceknél és másodperceknél pedig:

xDistOra = radius*sin(Π/30)*percek száma
yDistOra = -radius*cos(Π/30)*percek száma

Ez actionscriptre lefordítva valahogy így néz ki:
xDistOra = function (radius, hour) {
var radius, hour;
return radius*Math.sin(Math.PI*hour/6);
};
yDistOra = function (radius, hour) {
var radius, hour;
return -radius*Math.cos(Math.PI*hour/6);
};
xDistPerc = function (radius, minute) {
var radius, minute;
return radius*Math.sin(Math.PI*minute/30);
};
yDistPerc = function (radius, minute) {
var radius, minute;
return -radius*Math.cos(Math.PI*minute/30);
};

Egy kis magyarázat az elnevezésekhez:
• xDistOra, xDistPerc: az adott órához vagy perchez tartozó x irányú távolság
• yDistOra, yDistPerc: az adott órához vagy perchez tartozó y irányú távolság
• radius: a mutató hossza
• hour: órák száma
• minute: percek száma

Ajánlatos definiálni a színpad közepét, hogy ha utólag megváltoztatjuk annak méretét, ne kelljen az egész scriptet átírni.
kozepX = Stage.width/2;
kozepY = Stage.height/2;

Majd felvesszük a kezdeti időpontot
//Date objektum létrehozása
ido = new Date();
//másodpercek, percek, és órák lekérdezése
masodperc = ido.getSeconds();
perc = ido.getMinutes()+masodperc/60;
ora = ido.getHours()+perc/60;
A perc és ora változók értékét azért növeltük meg, mert itt egy analóg óráról van szó, ami nem csak az egész értékeket mutatja.

A számlap rajzolása

//Először létrehozunk egy üres moziklipet
_root.createEmptyMovieClip("szamlap_mc", 0);
//Aztán TextFormat objektummal definiáljuk a számok betüstílusát.
stilus = new TextFormat();
stilus.color = 0x008800;
stilus.align = "center";
stilus.font = "Verdana";
stilus.bold = true;
stilus.size = 14;

A fő idősíkon createEmptyMovieClip segítségével létrehoztuk a számoknak később helyet adó moziklipet. Ennek a sémája kb így néz ki:
moziklip.createEmptyMovieClip("ujmoziklipInstanceName", szint);

Miután definiáltuk a stilus nevű TextFormat objektumot meghatároztuk annak tulajdonságait.
• color: szín
• align: igazítás
• font: betütípus
• bold: kövér
• size: méret
Még egy csomó tulajdonsága van a TextFormatnak. Érdemes ezért a Flash helpen belül az actionscript dictionary-ben a TextFormat kifejezésre, mint olyanra rákeresni.

Nem maradt más hátra, mint, hogy az üres mozinkat feltöltsük a számokat tartalmazó, és azoknak megfelelő pozicióban elhelyezekdő szövegmezőkkel. Ezt egy ciklus segítségével érhetjük el a leghatékonyabban.

//1-től 12-ig haladva
for (i=1; i<13; i++) {
//Az elején létrehozott függvények segítségével kiszámított poziciókon dinamikus szövegmezőket hozunk létre
xPos = xDistOra(130, i);
yPos = yDistOra(130, i);
szamlap_mc.createTextField("szam"+i+"_txt", i, xPos, yPos, 30, 20);

//Azokban kiiratjuk a megfelellő számokat
szamlap_mc["szam"+i+"_txt"].text = i;
//És formázzuk őket
szamlap_mc["szam"+i+"_txt"].setTextFormat(stilus);
}

//Az elkészült számlapot a színpad közepére helyezzük
szamlap_mc._x = kozepX;
szamlap_mc._y = kozepY;

Hogy megértsük a fentieket, vizsgáljuk meg ezt a sort:
szamlap_mc.createTextField("szam"+i+"_txt", i, xPos, yPos, 30, 20);
A createTextField-del létrehozott szövegmezőnél:
• "szam"+i+"_txt": instance name
• i: a szövegmezők szintje
• xPos: x irányú koordinátája
• yPos: y irányú koordinátája
• 30: szélesség
• 20: magasság

Ha most teszteled a mozit láthatod, hogy a számokat tartalmazó kör egy kicsit el van tolódva a középponttól. Ennek az az oka, hogy a dinamikusan létrehozott szövegmezők regisztrációs pontja (a moziklipeké is) a bal felső sarokban helyezkedik el. Ezért korrekciós tényezőket kell bevezetnünk, amik negatív irányba, a szövegmező méreteinek felével eltolják a számlap-moziklipet.

korrekcioX = szamlap_mc.szam1_txt._width/2;
korrekcioY = szamlap_mc.szam1_txt._height/2;
szamlap_mc._x = kozepX-korrekcioX;
szamlap_mc._y = kozepY-korrekcioY;

Így már sokkal jobb.

Mutatók készítése rajzoló API-jal

Itt most nem fogok belemenni a rajzoló API ismertetésébe, mert az meghaladja ezen segédlet kereteit. Lényege, hogy a hagyományos eszközök nélkül, actionscripttel tudunk rajzolni. Az egyes kódoknál magyarázatképpen fel fogom tüntetni, hogy azok mire valók.

//A 3 mutatóhoz tartozó moziklip létrehozása
_root.createEmptyMovieClip("masodperc_mc", 15);
_root.createEmptyMovieClip("perc_mc", 14);
_root.createEmptyMovieClip("ora_mc", 13);
//óra működtetése
frissites = function () {
masodperc += 1;
perc += 1/60;
ora += 1/3600;
//Másodpercmutató
with (masodperc_mc) {
clear();
lineStyle(1, 0xff0000, 100);
moveTo(kozepX, kozepY);
lineTo(kozepX+(xDistPerc(130, masodperc)), kozepY+(yDistPerc(130, masodperc)));
}
//Percmutató
with (perc_mc) {
clear();
lineStyle(2, 0x000000, 100);
moveTo(kozepX, kozepY);
lineTo(kozepX+(xDistPerc(120, perc)), kozepY+(yDistPerc(120, perc)));
}
//Óramutató
with (ora_mc) {
clear();
lineStyle(3, 0x000000, 100);
moveTo(kozepX, kozepY);
lineTo(kozepX+(xDistOra(100, ora)), kozepY+(yDistOra(100, ora)));
}
};

És akkor egy kis magyarázat, ahogy ígértem:
• clear(): Törli a moziklip tartalmát (magát az mc-t nem)
• lineStyle: Vonalstílus meghatározása. A zárójelben szereplő értékek jelentése sorrendben a következő: (vonalvastagság, szín, _alpha)
• moveTo(x, y): Ebbe a pontba mozgatja a képzeletbeli tollat
• lineTo(x, y): Eddig a pontig húz vonalat az előzőleg megadott lineStyle-lal

Utolsó lépésként pedig setInterval segítségével másodpercenként meghívjuk a fenti függvényt.

setInterval(frissites, 1000);

 
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .