[TUT] Analoge Klok

De Analoge Klok in AS

In deze tutorial ga ik je leren om een Analoge Klok te maken met behulp van actionscript. Welke onderdelen zal je hierdoor leren:

• Het opvragen van de datum in AS
  
• Uren, seconden en minuten opvragen uit de datum
  
• Het gebruik van _rotation
  
• Het defineren van de x en y positie van je MovieClip's
  
• Scripten op je frame, in plaats van op je MovieClip's
  

Een voorbeeldje van wat je kan maken:



Om te beginnen met het maken van een script raad ik je aan eerst goed na te denken wat je precies wilt. In dit geval is dat dus niet:"Ik wil een klok maken", maar meer 'technisch' denken. Bijvoorbeeld: "Ik wil de rotatie van de wijzers laten afhangen van de tijd". Nu je dit in je hoofd hebt heb je een beter beeld van wat je precies wilt gaan doen.

Eerst maken we de onderdelen van de klok:

• Secondenwijzer
  
• Minutenwijzer
  
• Urenwijzer
  

Dit is (grafisch) het enige wat we nodig hebben. De rest gaat allemaal gebeuren door het script wat we nu gaan maken. Dit gaan we wijzer voor wijzer maken. Laten we beginnen met de secondenwijzer:

Maak een nieuwe Symbol door Ctrl+f8 te drukken. Je kiest dan voor 'MovieClip'. De naam maakt in principe niet uit, maar geef hem voor de goede orde de naam 'secondenwijzer'.
Nadat je dit gedaan hebt zit op de stage van deze MC(=MovieClip). Hier kan je je wijzer gaan tekenen. In het midden van je Stage zie je een kruisje, dit heet je registration point, oftewel: dit is het 'midden' van je MC. Dit punt gebruikt ActionScript ook als middelpunt voor de rotatie, dus is het belangrijk dat je met dit punt werkt.
Trek een lijn van 1 pixel dikte vanuit het registration point loodrecht naar boven. Om loodrecht te tekenen kan je de shift toets ingedrukt houden. Als het goed is is dit ongeveer het resultaat:



Klik nu boven op 'Scene 1'om terug te gaan naar je main timeline. Je hebt nu de seconden wijzer gemaakt! Maar waar staat hij nu? Hij staat nu in je Library(ctrl+l). Zet hem nu in je stage door het uit je library te slepen naar je stage. Nu staat hij in je stage maar je moet er wel voor zorgen de Actionscript hem kan beinvloeden, en dus moet weten hoe de wijzer 'heet'. De naam die actionscript gebruikt heet de 'instance name', en die kan je definieren door hem in te vullen bij properties-->instance name (let op: je moet je MC wel eerst aanklikken, want onthoud altijd: computers kunnen zelf niet denken).Geef je secondenwijzer de instancename 'secWijzer'.



Herhaal deze stappen voor je urenwijzer en je minutenwijzer en vergeet niet:

• Je urenwijzer is korter dan je minutenwijzer, en je secondenwijzer is dunner dan beiden
  
• Houd rekening met het registration point
  
• Vergeet de instance name niet
  
  
  
  • Secondenwijzer: 'secWijzer'
    
  • Urenwijzer: 'uurWijzer'
    
  • Minutenwijzer: 'minWijzer'
    
  
  

Waneer je alle wijzers hebt gemaakt, en instancename hebt gegeven, zorg er dan voor dat ze allemaal op je stage staan(door ze te slepen uit je Library). Je mag ze netjes met registration point bij elkaar zetten, maar dit is nauwkeuriger te doen met ActionScript, dit zullen we dus ook maar doen. Hiermee is het grafische deel over, en kunnen we aan het script beginnen.

Zoals ik al zei is het eerste wat we doen het ordenen van de wijzers. De x positie van een movieclip bepaal je op de volgende manier:

secWijzer._x = Stage.width/2;

secWijzer._y = Stage.height/2;

uurWijzer._x = Stage.width/2;

uurWijzer._y = Stage.height/2;

minWijzer._x = Stage.width/2;

minWijzer._y = Stage.height/2;

Dit script komt op het frame(Klik op je frame in de timeline en schuif onderaan het 'actions' menu open. Hier komt het totale script te staan.

Als je nu je movie test(ctrl+enter), zul je zien dat ze allemaal netjes bij elkaar staan, en dat de middelpunten ook het middelpunt van je movie is. Dit komt door de Stage.height/2 en Stage.width/2.

Nu we dit hebben kunnen we de datum op gaan vragen. Deze datum moeten we 'onleden' in de uren, minuten en seconden. Dit moet niet een keer gechecked worden, maar de hele tijd door omdat de tijd veranderd. We zitten deze code dan in een onEnterFrame. Dat wil zeggen dat hij die code die daar binnen valt, elke keer uitvoerd(bij een framerate van 12 fps dus 12 keer per seconde)

this.onEnterFrame = function(){

var datum:Date = new Date();

var uren:Number = datum.getHours();

var minuten:Number = datum.getMinutes();

var seconden:Number = datum.getSeconds();

}

Als laatste moeten we dan de wijzers laten reageren op de tijd. Door middel van _rotation kan je de rotatie van een object bepalen. Dit gaat in graden. Hoe rekenenen we dan bijvoorbeeld de rotatie uit van de secondenwijzer? Eerst ga je na op een hoeveelste deel het zit ten opzichte van de minuut. Door het aantal seconden te delen door 60, en dat keer 360 te doen weet je hoeveel hij moet draaien. Bijvoorbeeld het aantal seconden zijn 30, je zit dus op een halve minuut, en de wijzer zou dus 180 graden moeten draaien. 30/60 = 0,5. 0,5 * 360 = 180. Dat klopt dus. Je script komt er dan als volgend uit te zien:

secWijzer._x = Stage.width/2;

secWijzer._y = Stage.height/2;

uurWijzer._x = Stage.width/2;

uurWijzer._y = Stage.height/2;

minWijzer._x = Stage.width/2;

minWijzer._y = Stage.height/2;

this.onEnterFrame = function() {

var datum:Date = new Date();

var uren:Number = datum.getHours();

var minuten:Number = datum.getMinutes();

var seconden:Number = datum.getSeconds();

secWijzer._rotation = (seconden/60)*360;

minWijzer._rotation = (minuten/60)*360;

uurWijzer._rotation = (uren/12)*360;

};

Als je je movie nu test zal hij het doen. Waneer hij het niet doet, of om het nog een keer door te kijken heb ik het .fla en .swf bestandje bijgevoegd. Ik hoop dat je alles begrijpt.