Analoge klok met Actionscript

Voor deze tutorial is een versie van Adobe Flash benodigd.

In deze tutorial leer je om een analoge klok voor je site of applicatie te maken. Ik zal in deze tutorial vooral gebruik maken van actionscript. De belangrijkste functies binnen het script zullen worden uitgelegt.

eindresultaat (wanneer je dezelfde wijzerplaat gebruikt):

Stap 1: De wijzerplaat
U kunt kiezen of u zelf een wijzerplaat tekent voor uw klok in Photoshop, of een plaatje van een bestaande klok bewerkt zodat de wijzers niet meer zichtbaar zijn en er in flash nieuwe wijzers in kunnen worden getekend. Het is handig om een plaatje te selecteren waarbij de wijzerplaat zo frontaal mogelijk staat. Wanneer u uw wijzerplaat heeft geselecteerd en bewerkt of getekend, open Flash en plak de wijzerplaat in een nieuwe layer.

Stap 2: Het tekenen en benoemen van de wijzers
Maak vervolgens boven de layer van de wijzerplaat 3 nieuwe layers voor de seconden, minuten en uur wijzer. Benoem de layers herkenbaar bijv('minutenwijzer').
Klik vervolgens de uur wijzer layer aan en teken hierin een uur wijzer, ik raad af om een plaatje te gebruiken, omdat deze snel vervormen wanneer ze geroteerd worden. Wanneer u klaar bent moet deze wijzer geconverteerd worden naar een movie clip met een naam zodat we deze vanuit het script kunnen aanroepen. Dit gebeurt op de volgende manier:

> Selecteer de wijzer met de rechter muisknop en klik op covert to symbol. Geef hem vervolgens de naam uur en selecteer type Movie Clip
bij registration selecteer de kant welke bij het draaipunt ligt van de wijzer. Druk op ok

Fig 1

> Wanneer u de wijzer nu aan klik met de muis zal u onderin bij properties zien dat het een movie clip is geworden, waaraan een instance naam gegeven kan worden dit is de naam die in actionscript gebruikt zal worden om deze wijzer aan te roepen.

Fig 2

> Wanneer u de wijzer nogmaal aanklikt ziet u ook een rondje en een kruisje staan. Het kruisje is de plaats die we net met registration hebben aangegeven als draaipunt voor actionscript het is dus zaak dat dit punt in het midden van de wijzerplaat staat. Het rondje is het draaipunt voor eigen bewerking met de free transform tool(de tool onder het pijltje).

Fig 3

> Als de uur wijzer op de juiste plek staat zoals in fig 3 en de juiste intance naam heeft is deze klaar zorg evoor dat de wijzers allemaal recht omhoog wijzen.

Nu moet precies hetzelfde gebeuren met de minuten en uur wijzer loop nogmaal deze stap door en geef deze wijzers de instance namen: seconden_mc en minuten_mc en zet ze in hun bijhorende layer.

Checklist

> Alle drie de bijhorende wijzers zijn getekend en geconverteerd tot movie clip?
> Alle drie hebben de juiste instance naam gekregen? namelijk: uur_mc, minuten_mc en seconden_mc
> Alle drie hebben hun kruis wanneer u deze aanklikt in het midden van de wijzerplaat staan?

Stap 3: Het script
Ok, dan is het nu tijd om over te gaan naar het script maak een nieuwe layer aan boven alle ander en noem hem actions. Als het goed is ziet uw timeline er nu uit zoals in figuur 4 op het a'tje na in de actions layer omdat we nog geen actions ingevoerd hebben.

Fig 4

Klik op het lege keyframe in de action layer en klik op actions onderin net boven properties, wanneer u dit niet ziet klik Window>actions. Nu ziet u hetzelde schermpje onderin als in figuur 5 dit is het actions menu in flash en hier zullen we ons script in typen. Dat wil zeggen vanaf het 1'tje in het rechter scherm.

Fig 5

Ik zal nu een beknopte uitleg geven hoe het script opgezet moet worden, wanneer u dit niet interesseerd kan u het onderstaande script kopieren en plakken op de zojuist beschreven plaats. Test door op ctrl + Enter te drukken of Control>Test movie wannneer het niet werkt dat wil zeggen dat de seconde wijzer geheel niet draait en niet dat de tijd verkeerd staat. Dan zijn de instance namen het eerste wat u dient te checken en loop nog even de checklist af bij stap 2. Het is mogelijk dat de tijd verkeerd staat dit houd per definitie in een afwijking van de wijzers van een x aantal * 90 graden, ga dit na door de tijd te vergelijken met de systeem tijd en pas de waarden aan;

>wanneer de uur wijzer bijvoorbeeld 3 uur aangeeft en het is 9 uur dan zit er een afijking in van 180 graden en x bij 3 en 4 word dan: 180.
>wanneer de minuten aanwijzer bijvoorbeeld kwart over aan geeft en het is half dan wordt - x bij 1: + 90.

1. Rotationmin = (minuten/60)*360 - x
2. Rotationsec = (seconden/60)*360 - x
3. Rotationuur = (hours/12)*360 - x + 30*(minuten/60)
4. Rotationuur = ((hours-12)/12)*360 - x + 30*(minuten/60)

script(kopieer):

onEnterFrame = function(){
var tijd:Date = new Date
var hours = tijd.getHours()
var minuten = tijd.getMinutes()
var seconden = tijd.getSeconds()
Rotationmin = (minuten/60)*360 - 90
Rotationsec = (seconden/60)*360 -90
minuten_mc._rotation = Rotationmin
seconden_mc._rotation = Rotationsec
if (hours <= 12){
Rotationuur = (hours/12)*360 - 180 + 30*(minuten/60)
uur_mc._rotation = Rotationuur
}
else if (hours > 12){
Rotationuur = ((hours-12)/12)*360 - 180 + 30*(minuten/60)
uur_mc._rotation = Rotationuur
}

}

Ik hoop dat u de klok op een creatieve manier in uw eigen projecten kan verwerken

Stap 4: (optioneel script uitleg)
De Klok moet minstens elke seconde een keer ververst worden te aanzien van de seconde wijzer. Met het statement:
onEnterFrame = function(){ script } welke het het script omsluit laat ik het script een x aantal keer runnen per seconde dit is evenredig met het aantal het frames per second wat kan worden ingesteld in het timeline menu.

Ik maak eerst een nieuwe variable tijd aan en geef het type aan van date. Vervolgens definieer ik dit als nieuw datum object. > var tijd:Date = new Date

Vervolgens definieer ik de var hours, minuten en seconden waarin ik met behulp van tijd de uren minuten en seconden in oplsla die overeenkomen met die van de systeemklok >
var hours = tijd.getHours()
var minuten = tijd.getMinutes()
var seconden = tijd.getSeconds()

Nu bereken ik de gewenste rotatie van de minuten en seconden wijzer en geef ik deze waarden door>
Rotationmin = (minuten/60)*360 - 90
Rotationsec = (seconden/60)*360 -90
minuten_mc._rotation = Rotationmin
seconden_mc._rotation = Rotationsec

Door de 24 uurs klok moet er een kleine aanpassing komen in de berekening van de rotatie van de uur wijzer, wanneer de tijd over de 12 uur komt moet er een andere berekening gelden dit gebeurt dmv een if- statement. .
if (hours <= 12){
Rotationuur = (hours/12)*360 - 180 + 30*(minuten/60)
uur_mc._rotation = Rotationuur
}
else if (hours > 12){
Rotationuur = ((hours-12)/12)*360 - 180 + 30*(minuten/60)
uur_mc._rotation = Rotationuur
}

Reageer
De vragen en reacties kunnen door tijdgebrek helaas niet altijd beantwoord worden door de auteur van de tutorial. Help elkaar daarom, en houdt het vriendelijk. Plaats geen rare reacties, anders riskeer je een ban voor de website. Voor overige vragen, zie ons Photoshop Forum.
Naam:
E-mail: (niet verplicht)
BBCode:
Reactie:
Code: (tegen spam)*

Reacties (10)

Geschreven door Pancho, op 10-12-2008 17:50 Wat is dat ''Flash'' voor iets? , dat snap k namelijk niet echt wat dat is (stap 1)

Geschreven door MrX, op 08-08-2008 16:02

Geschreven door Turiontjheee, op 23-10-2007 18:53 Kijk Zoiets is wel leuk, zou dit wel binnenkort op mijn site proberen lijkt me wel leuk, beetje reclame omheen