tutorial datum en tijd in flash.

datum en tijd in flash.

_{door vinTage op 07-11-2006}

Tijd en datum in flash

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

Geen behoefte aan uitleg, ga dan rechtstreeks naar
Het maken van een digitale klok
Het maken van een analoge klok
Een countdown die aftelt naar een bepaalde datum

De theorie

Ook flash is prima in staat om op zichzelf de datum en tijd te bepalen.
Een en ander is te realiseren door een Date constructor aan te maken in flash.
Dit klinkt wel duur, maar qua code is het niet meer dan tijdStip = new Date(); In onze variable tijdStip, zit een hele hoop informatie, die je er zonder problemen uit kan halen.
Hieronder geef ik een lijstje van de meest intresante gegevens en hoe je ze uit onze variable tijdStip kan halen.

actionscript code

//De constructor aanmaken.

var tijdStip = new Date();

//weekdag uitlezen. 

//Het resultaat is een nummer waar 0 zondag is, maandag 1, dinsdag 2 etc

var weekDag = tijdStip.getDay();

//Datum uitlezen. 

var datum = tijdStip.getDate();

//Maand uitlezen. 

//Het resultaat is een nummer waar 0 januari is, 1 is februari, 3 is maart etc.

var maand = tijdStip.getMonth();

//Jaartal uitlezen.

var jaar = tijdStip.getFullYear();

//Uren uitlezen.

var uur = tijdStip.getHours();

//Minuten uitlezen. 

var minuten = tijdStip.getMinutes();

//Seconden uitlezen.

var seconden = tijdStip.getSeconds();

//Milliseconden uitlezen.

var millieSecs = tijdStip.getMilliseconds();

getTime(); //Routeneerd het aantal milliseconden sinds januari 1, 1970, Universal Time.

Bovenstaande stukjes code zouden we al kunnen gebruiken door ze in een dynamisch textvak te laten zien.

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

In bovenstaande voorbeeldje heb ik onderstaande code gebruikt:

actionscript code

knop.onPress = function() {

tijdStip = new Date();

var dag = tijdStip.getDay();

var displayDag = Array("zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag");

var datum = tijdStip.getDate();

var maand = tijdStip.getMonth();

var displaymaand = Array("januari", "februari", "maart", "april", "mei", "Juni", "juli", "augustes", "september", "oktober", "november", "december");

var jaar = tijdStip.getFullYear();

var uur = tijdStip.getHours();

var minuten = tijdStip.getMinutes();

var seconden = tijdStip.getSeconds();

textVak.text = "Het is nu "+newline+displayDag[dag]+", "+datum+" "+displaymaand[maand]+", "+jaar+newline+" "+uur+":"+minuten+":"+seconden;

}

Aan dit voorbeeldje zal je weinig aan hebben in de praktijk, het was dan ook maar om te laten zien wat je met de Date() constructor kon doen.

Alle bovenstaande AS is gebaseerd op locale tijd.
Natuurlijk wil je niet altijd gebruik maken van de locale tijd.

actionscript code

//UTC staat voor Universal Time Coordinates.

getUTCDay();          // Weekdag (Dit kan 1 dag verschil maken bij ons, afhankelijk van waneer je kijkt)

getUTCDate();         // Datum (Dit kan 1 dag verschil maken bij ons, afhankelijk van waneer je kijkt)

getUTCMonth();        // Maand (Dit kan 1 maand verschil maken bij ons, afhankelijk van waneer je kijkt)

getUTCFullYear();     // Jaar (Dit kan 1 jaar verschil maken bij ons, afhankelijk van waneer je kijkt)

getUTCHours();        // Uur (Dit kan 12 uur verschil maken bij ons, afhankelijk van waneer je kijkt)

getUTCMinutes();      // Minuten (Dit kan 59 minuten verschil maken bij ons, afhankelijk van waneer je kijkt)

getUTCSeconds();      // Seconden

getUTCMilliseconds(); // Millieseconden (yeah right ^^)

Digitale klok

Hieronder leg ik even snel uit hoe je zelf een digitale klok kan maken.
Begin met het tekenen van je "klok".
Zodra je klaar bent met het tekenen van je klok moeten we twee dynamische tekstvelden maken, een voor de tijd en een voor de datum en dag.
Geef het tekstvak waar de tijd in moet komen, de instancenaam "tijd" en noem die waar de datum in moet komen "DD".
Zodra je alles hebt gemaakt hoeven we alleen nog het AS in een keyframe te plaatsen (in een frame in de tijdlijn, niet in een frame van een getekend object'.

Als je kiest voor een niet standaart font, zal je het font moeten embedden, anders zien de andere kijkers een ander font.

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

gebruikte actionScript voor dit horloge:

actionscript code

onEnterFrame = function () {

  var tijdStip = new Date();

  var dag = tijdStip.getDay();

  var displayDag = Array("zo", "ma", "di", "wo", "do", "vr", "za");

  var datum = tijdStip.getDate();

  var maand = tijdStip.getMonth()+1;

  var uur = tijdStip.getHours();

  var mins = tijdStip.getMinutes();

  var secs = tijdStip.getSeconds();

  if (length(uur) == 1) {

    uur = "0"+uur;

  }

  if (length(mins) == 1) {

    mins = "0"+mins;

  }

  if (length(secs) == 1) {

    secs = "0"+secs;

  }

  tijd.text = uur+":"+mins+":"+secs;

  DD.text = displayDag[dag]+" "+maand+"-"+datum;

};

Analoge klok

Om zelf een analoge klok te maken hebben we 4 tekeningetjes nodig.
De wijzerplaat en 3 wijzers, dus begin met het maken van deze 4 verschillende onderdelen, en maak van elk onderdeel een aparte movieclip.
Waar wel rekening mee gehouden moet worden is het registratie punt van de wijzers, deze moeten straks gaan draaien, en het zou een beetje raar zijn als het draaipunt ergens in het midden zou zitten van je wijzer :-)
Als je de wijzers gaat tekenen, begin dan op het kruisje in het midden van je werkblad en teken de wijzer recht omhoog.

Zodra je deze 4 gedeeltes hebt gemaakt moeten we alles op de scene plaatsen, handig is dus als we 4 layers aanmaken.
Op de onderste laag zetten we de wijzerplaat, op de 2e-, 3e en bovenste laag zetten we de wijzers.

Nu moeten we de wijzers nog een instancenaam geven, dus noem de secondewijzer "secondenWijzer", de minutenwijzer noem je "minutenWijzer" en de uurwijzer noem je "uurWijzer".

Het is nu nog een kwestie van de AS in een keyFrame te plaatsen in de timeline van de scene (dus niet aan een object) en onze klok zal werken.

(Bij deze mijn oprechte excuses aan die klok die ik mega vern**kt heb)

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

gebruikt ActionScript voor deze klok:

actionscript code

onEnterFrame = function () {

  var tijdStip = new Date();

  var uur = tijdStip.getHours()*30;

  var min = tijdStip.getMinutes()*6;

  var sec = tijdStip.getSeconds()*6;

  secondenWijzer._rotation = sec;

  minutenWijzer._rotation = min;

  uurWijzer._rotation = uur+(min/12);

};

countdown timer

Een swf die aftelt tot een bepaalde datum, als die bepaalde datum is bereikt kan je de swf "iets" laten doen zoals vuurwerk afschieten ofzo :D. Ik heb hieronder een voorbeeldje gemaakt dat aftelt tot oudjaarsavond 00:00:00 op 2010 (eind 2009 dus :-) ).
Maak een nieuw flashbestand aan en maak er een groot dynamisch tekstvak aan (multiline), geef dat tekstvak de instancenaam tekstVak.
Plaats de AS in een keyFrame en je hebt je countdown flash.
We maken in deze AS gebruik van de datum/tijd zoals we overal al gedaan hebben, maar ook nog van een andere datum, namelijk diegene waar we naar toe aftellen.
We kunnen zelf die datum bepalen door een nieuwe Date() constructor aan te maken en die te vullen met de gewenste datum.

ooit = new Date(jaar, maand, datum, uur, minuten, seconden, milliseconden);
Je hoeft niet persee alle waardes in te geven als je zelf een datum wilt zetten.
Als je niets invult dan is het automatisch de huidige datum.

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

gebruikte ActionScript voor deze countDown:

actionscript code

onEnterFrame = function () {

var ooit = new Date(2009, 11, 30, 23, 59, 59); //jaar, maand, datum, uur, min, sec 

var nu = new Date();

var ooitMsec = ooit.getTime();

var nuMsec = nu.getTime();

var milsecToGo = ooitMsec-nuMsec;

var secToGo = milsecToGo/1000;

var minToGo = secToGo/60;

var uurToGo = minToGo/60;

var dagToGo = uurToGo/24;

var jaarToGo = dagToGo/365;

tekstVeld.text = "Het duurt nog "

+Math.floor(jaarToGo)+" jaar "

+newline 

+Math.floor(dagToGo%365)+ " dagen, "

+newline

+Math.floor(uurToGo%24)+" uur, "

+newline

+Math.floor(minToGo%60)+" minuten "

+newline

+Math.floor(secToGo%60)+" seconden voordat het 2010 is.";

if (ooit == nu) {

delete onEnterFrame;

tekstVeld.text = "Het is nu 2010, tijd voor vinTage om deze swf te updaten naar 2020";

//je kan hier dus vanalles laten gebeuren...bv //vuurwerk.play(); 

}

};

Tot zover deze tutorial.
Ik hoop dat hij van enig nut kan zijn voor jouw flash creaties.
Ter verduidelijking kan je de door mij gebruikte fla bestanden downloaden.
Bij eventuele vragen kan je terecht op het forum.

Share |

Stem op deze tutorial

Reacties

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