Share
Tijdens deze tutorial zal ik demonstreren hoe je een aangepaste timer maakt die het aftellen naar een bepaalde tijd ondersteunt.
In de onderstaande demo ziet u de tijd aftellen vanaf 1:00, een voortgangsbalk die de voortgang van de timer en een annuleerknop bijhoudt.
Zodra het aftellen vanaf 01:00 is voltooid of u op de knop Annuleren drukt, wordt er een filmclip van rechts weergegeven. Met deze filmclip kunt u een gewenste tijd invoeren en bepalen of de tijd omhoog of omlaag loopt. Een voortgangsbalk wordt dan toegevoegd en volgt de voortgang van de tijd. Als de tijd is verstreken of u drukt op de knop Annuleren, kunt u een nieuwe tijd invoeren.
Hier zullen we de aangepaste timer-klasse schrijven die onze hoofdfilm zal besturen.
Ga naar Bestand> Nieuw en kies Actionscript 3.0 Class. Bewaar dit bestand als "CountTimer.as".
Hier openen we het pakket en importeren we de klassen die we nodig hebben om deze klasse te schrijven.
Voeg het volgende toe aan "CountTimer.as"
pakket // Nodig voor de timer import flash.utils.Timer; import flash.events.TimerEvent; // We zullen dit TextField updaten met de tijd import flash.text.TextField;
Hier zullen we de variabelen declareren die de klasse nodig heeft en de constructorfunctie coderen.
Voeg het volgende toe aan "CountTimer.as".
public class CountTimer verlengt Timer // Het tekstveld waar de bijgewerkte tijd private tar targetText: TextField; // De richting van de timer, d.w.z. "up" of "down" private var direction: String; // Hoeveel minuten heeft de timer privé-var minuten: int; // Hoeveel seconden heeft de timer privé-var seconden: int; // Gebruikt in onze berekening om de timer te updaten private var totalSeconds: int; // De totale hoeveelheid tijd = (minuten + seconden) privé-var timeTotal; // Hoeveel van de tijd is privé var timeLoaded = 0 voorbijgegaan; // Stel in op true om de timer te testen. Private var test: Boolean = false; openbare functie CountTimer (min: int, sec: int, dir: String, targetTextField: TextField = null) notulen = int (min * 60); seconden = int (sec); timeTotal = minuten + seconden; super (1000, timeTotal); if (dir == "down") totalSeconds = minutes + seconds; else totalSeconds = 0; if (targetTextField! = null) targetText = targetTextField; direction = dir;
Hier hebben we enkele variabelen verklaard die we nodig hebben voor onze klas.
De Constructorfunctie heeft vier parameters; ze zijn als volgt:
Accentsconagua
min: Een geheel getal dat aangeeft hoeveel minuten u de timer wilt hebben.sec: Een geheel getal dat aangeeft hoeveel seconden u wilt dat de timer heeft.dir: Een tekenreeks die de richting van de teller vertegenwoordigt, kan een van de volgende zijn: "omhoog" of "omlaag".targetTextField: Een tekstveld dat wordt gebruikt om de bijgewerkte tijd weer te geven (dit is optioneel).Binnen de constructorfunctie stellen we de notulen variabele gelijk aan de opgegeven waarde van min * 60 (sinds 1 minuut is gelijk aan 60 seconden).
We hebben vervolgens de seconden variabele gelijk aan de sec.
Vervolgens stellen we de timeTotal variabele gelijk aan notulen + seconden.
Dan bellen we super() -- die de code van de constructorfunctie van de timer class - pass in 1000 milliseconden, en de timeTotal variabel. Door 1000 milliseconden te gebruiken, vertellen we de timer één keer per seconde aan te vinken en door in te geven timeTotal we vertellen de timer hoe vaak hij moet vuren.
We controleren vervolgens of het dir parameter is gelijk aan "omhoog" of "omlaag" en stel de totaalseconden variabele overeenkomstig. De totale seconden worden gebruikt in onze timeHandler () functie. We zullen dit met 1 verhogen of verlagen met elke timer dat de timer afgaat.
Vervolgens controleren we of de gebruiker in een TextField al dan niet geslaagd is voor de constructor en stelt de targetText variabel als ze dat deden; dit wordt gebruikt om de tijd weer te geven.
Eindelijk stellen we de richting variabel in de richting waarin de gebruiker is gepasseerd.
begin() FunctieHier coderen we het begin() functie voor onze timer.
Voeg het volgende toe aan de "CountTimer.as".
override public function start (): void super.start (); addEventListener (TimerEvent.TIMER, timerHandler);
Omdat we Timer hebben verlengd, overschrijven we de bestaande timer begin() methode. Hier bellen we gewoon Super start() (die de code van de klasse Timer uitvoert begin() methode) en voeg een EventListener toe om te detecteren wanneer de timer tikt.
timerHandler FunctieHier coderen we onze timerHandler () functie. Dit is waar we onze tijd bijwerken en weergeven. Deze functie wordt eenmaal per seconde gebeld.
Voeg het volgende toe aan de CountTimer-klasse.
private function timerHandler (e: TimerEvent): void // Update onze tijd Geladen variabele timeLoaded + = 1; if (richting == "up") // totalSeconds is = 0, om mee te beginnen. We voegen daar 1 toe. totaalseconden ++; else // totalSeconds = theNumber of seconds door min en sec toe te voegen; we trekken daar 1 van af totaal seconden -; // Hoe kunnen seconden er nog zijn. seconden = totalSeconds% 60; // Hoeveel minuten resteren minuten = Math.floor (totalSeconds / 60); // De minuten en seconden om weer te geven in het TextField. var minutenDisplay: String = (minuten < 10) ? "0" + minutes.toString() : minutes.toString(); var secondsDisplay:String = (seconds < 10) ? "0" + seconds.toString(): seconds.toString(); if (targetText != null) targetText.text = minutesDisplay + ":" + secondsDisplay; if (test=true) trace(minutesDisplay + ":" + secondsDisplay);
Binnen deze functie werken we onze timeLoaded variabele, die wordt gebruikt om de voortgang bij te houden van hoeveel tijd verstreken is.
Vervolgens controleren we of richting is gelijk aan "omhoog" of "omlaag" en pas onze aan totaalseconden variabele overeenkomstig.
We bepalen vervolgens hoeveel seconden en minuten er nog over zijn; vul de minutesDisplay en secondsDisplay met een extra nul indien nodig; werk het TextField bij (als er een is doorgegeven aan de constructor); en volg eventueel de tijd op als we onze hebben ingesteld test variable to true (handig om te testen als je geen TextField instelt).
De berekening die werd gebruikt om het te bepalen seconden variabele neemt de rest van totaalseconden / 60.De% (modulo) operator geeft ons de rest.
De berekening die werd gebruikt om het te bepalen notulen variabele neemt eenvoudig de totaalseconden/ 60, naar beneden afgerond met Math.floor ().
getTimeTotal () FunctieHier coderen we een functie die eenvoudig onze teruggeeft timeTotal variabele. Omdat we deze variabele privé hebben gemaakt, hebben we een manier nodig om er toegang toe te krijgen.
openbare functie getTimeTotal (): int return timeTotal;
getTimeLoaded () FunctieHier coderen we een functie die onze teruggeeft timeLoaded variabel. Nogmaals, omdat het privé is, hebben we een manier nodig om toegang te krijgen.
openbare functie getTimeLoaded (): int return timeLoaded;
getProg () FunctieDeze functie geeft ons de voortgang van onze tijd. Het is hoeveel van de totale tijd (die we in de constructor hebben ingesteld) is verstreken. We vermenigvuldigen met 100 zodat we een percentage tussen 1 en 100 krijgen.
openbare functie getProg (): int return Math.floor (timeLoaded / timeTotal * 100);
Hier beginnen we met het ontwerpen van de hoofdfilm die onze klasse "CountTimer" gebruikt.
Ga naar Bestand> Nieuw en maak een nieuw ActionScript 3.0-document.
Stel de grootte in op 320x220 px.
Sla dit document op als "Timer.fla". Ga naar Bestand> Nieuw en kies Actionscript 3.0 Class.
Bewaar dit bestand als "Main.as". We gaan onze CountTimer-klasse testen, dus voeg het volgende toe aan de "Main.as".
pakket import flash.display.MovieClip; importeer CountTimer; public class Main breidt MovieClip uit var countTimer: CountTimer; public function Main () countTimer = new CountTimer (1,30, "up"); countTimer.start ();
Zorg ervoor dat u de test variabele in "CountTimer.as" in waar, en stel de documentklasse in op "Hoofd".
Druk op ctrl-enter en test de film; u zou de getraceerde tijd moeten zien in het Output-venster.
Hier beginnen we met het ontwerpen van de hoofdfilm die onze gebruikt CountTimer klasse.
We zullen TweenLite in onze film gebruiken, dus als je geen exemplaar hebt, download het dan van greensock.com.
Selecteer het gereedschap Tekst en zorg ervoor dat de volgende eigenschappen zijn ingesteld in het "CHARACTER" -venster.
Klik nog steeds in het paneel "Teken" op "Inbedden" en zorg ervoor dat "UpperCase", "LowerCase", "Cijfers" zijn geselecteerd en onder "Voeg ook deze tekens toe"
dat je een ":" en een "%" hebt toegevoegd.
Teken een tekstveld op het podium en stel de volgende eigenschappen in onder het venster "POSITIE en GROOTTE".
Geef dit TextField de instantienaam "timer_txt"; zorg ervoor dat het type respectievelijk is ingesteld op "Klassieke tekst" en "Dynamische tekst".
Dit TextField zal worden gebruikt om het tijdstip aan te geven waarop de film voor het eerst begint.
Nu moeten we onze voortgangsbalk ontwerpen.
Ga naar Invoegen> Nieuw symbool. Geef het de naam "ProgressContainer" en zorg ervoor dat "Exporteren voor Actionscript" is aangevinkt en dat de klasse is ingesteld op "ProgressContainer".
Ga naar Venster> Componenten en sleep een ProgressBar-component naar de filmclip.
Stel de eigenschappen van de ProgressBar in op het volgende.
Onder "Componentparameters" stelt u de modus in op "handmatig".
Geef de ProgressBar de instantienaam "pb".
Selecteer het gereedschap Tekst en zorg ervoor dat de volgende eigenschappen onder het paneel "TEKENS" zijn ingesteld.
Teken een TextField in de filmclip.
Stel de volgende eigenschappen in op het TextField.
Geef dit TextField de instantienaam "progress_txt".
U kunt nu deze MovieClip sluiten.
Nu gaan we de groeiende en vervagende tekst ontwerpen die wordt weergegeven als de tijd is verstreken.
Ga naar Invoegen> Nieuw symbool. Geef het de naam "GrowFadeText" en zorg ervoor dat "Exporteren voor Actionscript" is aangevinkt en de klasse is ingesteld op "GrowFadeText".
Selecteer het gereedschap Tekst en zorg ervoor dat de volgende eigenschappen zijn ingesteld onder het paneel "Teken".
Sleep een TextField naar de MovieClip en stel de volgende eigenschappen in.
Voer de tekst "TIMER COMPLETE" in het tekstveld in. U kunt nu deze MovieClip sluiten.
Nu gaan we de MovieClip ontwerpen die van links naar binnen glijdt. Selecteer het gereedschap Rechthoek en stel de kleur in op wit. Sleep een rechthoek van de linkerbovenhoek van het werkgebied naar de rechterbenedenhoek.
Selecteer de rechthoek die u zojuist hebt gesleept en druk op F8.Geef hem de naam "countContainer" .Zorg ervoor dat "Exporteren voor Actionscript is ingeschakeld en dat Class is ingesteld op" countContainer ".
Stel de volgende eigenschappen in op de MovieClip.
Dubbelklik nu om naar de MovieClip te gaan.
Selecteer het gereedschap Tekst en zorg ervoor dat de volgende eigenschappen zijn ingesteld in het "CHARACTER" -venster.
Sleep een tekstveld naar het werkgebied en stel de volgende eigenschappen in.
Geef dit TextField de instantienaam "timer_txt" en zorg ervoor dat het type is ingesteld op respectievelijk "Klassieke tekst" en "Invoertekst".
Selecteer opnieuw het gereedschap Tekst en sleep een TextField naar het werkvlak. Stel vervolgens de volgende eigenschappen in.
Geef dit TextField de instantienaam "instructions_txt" en zorg ervoor dat het type respectievelijk is ingesteld op "Classic Text" en "Input Text".
Ga naar Venster> Componenten en sleep drie knoppen binnen deze MovieClip.
Geef de eerste knop de instantienaam "countDown_btn" en stel de volgende eigenschappen in.
Geef de tweede knop de instantienaam "cancel_btn" en stel de volgende eigenschappen in.
Geef de derde knop de instantienaam "countUp_btn" en stel de volgende eigenschappen in.
U kunt nu de MovieClip sluiten.
Nu we onze UI Designed hebben, kunnen we de code voor de hoofdfilm schrijven.
Als u meegaat, verwijdert u alle ActionScript in "Main.as" die u in stap 9 hebt gemaakt. Dat was om te testen; nu hebben we code nodig die werkt met onze nieuwe interface.
Hier openen we de pakketverklaring en importeren we de klassen die we gaan gebruiken.
Voeg het volgende toe aan "Main.as".
pakket import flash.display.MovieClip; import fl.controls.Button; import flash.text.TextField; import flash.events.TimerEvent; import flash.events.MouseEvent; import flash.text.TextFieldType; import flash.text.TextFieldAutoSize; importeer CountTimer; import com.greensock.TweenLite; import flash.events.Event; import fl.controls.ProgressBar;
Hier verklaren we onze variabelen en coderen we de Constructor.
Voeg het volgende toe de "Main.as"
public class Main breidt MovieClip uit // Een array om de minuten en seconden op te slaan in elementen [0] en [1] private var timeArray: Array; // Onze countTimer private var countTimer: CountTimer; // Een boolean die aangeeft of dit de eerste timer // is (die wordt gebruikt wanneer de film voor het eerst wordt gestart) private var firstTimer: Boolean = true; // De richting van onze timer kan "up" of "down" zijn. Private var direction: String; // De MovieClip die de tekst bevat die we laten groeien en vervagen private var growFadeText: GrowFadeText; // De MovieClip waarin onze progressBar private var progressContainer: ProgressContainer; // De minuten private var min: int; // De tweede private var sec: int; openbare functie Hoofd () min = 1; sec = 0; countTimer = new CountTimer (min, sec, "down", timer_txt); timer_txt.text = "1:00"; countTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerComplete); setupButtons (); addProgressContainer (0,70, "down"); countTimer.start (); stage.addEventListener (Event.ENTER_FRAME, UpdateProgress); cancel_btn.addEventListener (MouseEvent.CLICK, moveContainer);
Eerst hebben we de min en sec variabelen en geef ze door aan de countTimer; we stellen vervolgens de richting in op "omlaag" en stellen het doel TextField in op timer_txt.
We stellen vervolgens een aantal standaardtekst in voor het TextField, voeg een toe TIMER_COMPLETE gebeurtenis naar de Timer, voer een functie uit om onze knoppen in te stellen, voeg de ProgressBar toe, start de Timer en voeg een ENTER_FRAME gebeurtenis luisteraar naar het podium (die we zullen gebruiken om de voortgangsbalk bij te werken), en ten slotte een toevoegen KLIK gebeurtenis luisteraar voor onze cancel_btn.
timerComplete () FunctieVoeg het volgende toe aan "Main.as".
private function timerComplete (e: TimerEvent): void addGrowFadeText (154,130); if (firstTimer == true) TweenLite.to (growFadeText, 2.5, scaleX: 2, scaleY: 2, alpha: 0, onComplete: moveContainer); else TweenLite.to (growFadeText, 2.5, scaleX: 2, scaleY: 2, alpha: 0, onComplete: showTheControls);
Hier voegen we de tekst toe aan het podium door te bellen addGrowFadeText () we zullen deze functie binnenkort bekijken. We controleren dan de firstTimer variabele om te zien of dit de eerste timer is, of het gebruik van tweenLite is om te groeien en de tekst te vervagen en de moveContainer functie als de animatie voltooid is. Als het niet de eerste timer is, gebruiken we opnieuw tweenLite om de tekst te laten groeien en vervagen, maar bel de showTheControls () functie zodra de animatie is voltooid. We zullen de moveContainer en showTheControls functioneert kort.
setupButtons () FunctieVoeg het volgende toe aan "Main.as"
private function setupButtons (): void countContainer.countDown_btn.addEventListener (MouseEvent.CLICK, doTimer); countContainer.countUp_btn.addEventListener (MouseEvent.CLICK, doTimer); countContainer.cancel_btn.addEventListener (MouseEvent.CLICK, restoreControls); countContainer.instructions_txt.text = "Voer tijd in opmaak 1:30 en druk dan op CountDown of CountUp knop"; // We willen niet dat de gebruiker de tekst kan bewerken countContainer.instructions_txt.selectable = false;
Hier voegen we een aantal EventListeners toe aan onze knoppen, zetten de tekst voor onze instructions_txt en stel het zo in dat de gebruiker de tekst niet kan selecteren of bewerken. Ik heb hier een TextField gebruikt om deze al lange tutorial korter te houden, maar je zou waarschijnlijk een Label-component hier willen gebruiken en het met een TextFormat-object opmaken.
addProgressContainer () FunctieVoeg het volgende toe aan "Main.as"
persoonlijke functie addProgressContainer (xPos: int, yPos: int, dir: String): void progressContainer = new ProgressContainer (); progressContainer.x = xPos; progressContainer.y = yPos; stage.addEventListener (Event.ENTER_FRAME, UpdateProgress); addChild (progressContainer); if (dir == "down") progressContainer.pb.direction = "left"; else progressContainer.pb.direction = "right";
Hier maken we een nieuwe progressContainer en stellen deze in X en Y eigenschappen van de xpos en YPOS parameters die worden doorgegeven. Vervolgens voegen we een toe ENTER_FRAME gebeurtenis luisteraar die de UpdateProgress () functie, en we voegen het toe progressContainer naar het podium. Tot slot kijken we naar de dir parameter om te zien of deze gelijk is aan "down"; als dit het geval is, stellen we de richting van de ProgressBar in op "left", anders zetten we de richting van de ProgressBar op "right".
removeProgressContainer () FunctieVoeg het volgende toe aan "Main.as"
private function removeProgressContainer (): void if (progressContainer! = null) stage.removeEventListener (Event.ENTER_FRAME, updateProgress); removeChild (progressContainer); progressContainer = null;
Hier controleren we of het progressContainer bestaat; als dat niet het geval is, verwijderen we de ENTER_FRAME gebeurtenis luisteraar vanaf het podium, zodat het niet verder loopt. We verwijderen dan de progressContainer van het podium en stellen het in nul omdat we er klaar mee zijn.
UpdateProgress () FunctieVoeg het volgende toe aan "Main.as".
private function updateProgress (e: Event): void progressContainer.progress_txt.text = countTimer.getProg (). toString () + "%"; progressContainer.pb.setProgress (countTimer.getTimeLoaded (), countTimer.getTimeTotal ());
Hier hebben we de progress_txt's tekst om de voortgang van onze timer te tonen. We gebruiken de countTimer's getProg () methode die een geheel getal retourneert van welk percentage van de tijd is verstreken. Omdat het een int retourneert, gebruiken we AS3's ingebouwd toString () methode erop en voeg er een "%" -teken aan toe.
Vervolgens noemen we de setProgress () methode van de ProgressBar component op onze ProgressBar (pb). We komen binnen countTimer.getTimeLoaded () en countTimer.getTimeTotal () die gehele getallen retourneren. Raadpleeg voor meer informatie over de ProgressBar-component mijn Quick Introduction to the ProgressBar-component.
addGrowFadeText () FunctieVoeg het volgende toe aan "Main.as".
persoonlijke functie addGrowFadeText (xPos: int, yPos: int) growFadeText = new GrowFadeText (); growFadeText.x = xPos; growFadeText.y = yPos; addChild (growFadeText);
Hier maken we een nieuw exemplaar van GrowFadeText, stel het in X en Y eigenschappen zoals opgegeven, en dan voegen we deze toe aan de fase.
removeGrowFadeText () FunctieVoeg het volgende toe aan "Main.as".
private function removeGrowFadeText (): void if (growFadeText! = null) removeChild (growFadeText); growFadeText = null;
Hier controleren we om te zien of growFadeText bestaat. Als dat niet het geval is, verwijderen we het uit het werkgebied en stellen het in op nul.
moveContainer () FunctieVoeg het volgende toe aan "Main.as".
privéfunctie moveContainer (e: Event = null): void countTimer.stop (); removeChild (timer_txt); removeChild (cancel_btn); removeGrowFadeText (); removeProgressContainer (); countContainer.cancel_btn.visible = false; firstTimer = false; TweenLite.to (countContainer, 1, x: 0);
Hier stoppen we de timer en verwijderen we de timer_txt en cancel_btn. Vervolgens noemen we onze removeGrowFadeText () en removeProgressContainer () functies, stel de cancel_btn in de countContainer om onzichtbaar te zijn, stelt u de firstTimer variabele naar vals, en schuif de countContainer in het gebruik van TweenLite.
showControls () FunctieVoeg het volgende toe aan "Main.as":
private function showTheControls (): void showControls (); removeProgressContainer (); countTimer.stop (); countContainer.timer_txt.text = ""; countContainer.timer_txt.text = "";
Hier noemen we de showControls functie, die we binnenkort zullen bekijken. Vervolgens bellen we removeProgressContainer (), stop de timer en reset onze TextFields om leeg te zijn.
doTimer () FunctieVoeg het volgende toe aan "Main.as":
private functie doTimer (e: MouseEvent): void if (e.target == countContainer.countDown_btn) direction = "down"; else direction = "up"; if (countContainer.timer_txt.text! = "") timeArray = countContainer.timer_txt.text.split (":"); min = timeArray [0]; sec = timeArray [1]; countTimer = new CountTimer (min, sec, direction, countContainer.timer_txt); countTimer.start (); countTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerComplete); countTimer.addEventListener (TimerEvent.TIMER, UpdateProgress); hideControls (); addProgressContainer (0,70, richting); We controleren eerst welke knop werd ingedrukt. Als de countDown_btn werd ingedrukt, hebben we de richting variabele naar "down" anders hebben we de richting veranderlijk naar "omhoog". Daarna controleren we om het zeker te weten timer_txt is niet leeg. Als dit niet het geval is, gebruiken we de split () functie om de minuten en seconden in de timeArray.De split () functie neemt een tekenreeks en scheidt deze van alles wat je als parameter doorgeeft - hier hebben we de dubbele punt (:) - gebruikt en vervolgens elk "stuk" aan de array toegevoegd. Dus als je bent geslaagd "01:45", dan is het element van de array [0] "1"; element [1] zou "45" zijn.
We hebben vervolgens de sec en min variabelen.
Vervolgens maken we een nieuw exemplaar van de countTimer en pas in de min,sec,dir,en het TextField om te gebruiken.
We voegen er vervolgens twee toe TimerEvent luisteraars die ons bellen timerComplete () en UpdateProgress () functies.
Eindelijk noemen we de hideControls () functie en voeg de progressContainer naar het podium.
showControls () FunctieVoeg het volgende toe aan "Main.as".
private function showControls (): void countContainer.instructions_txt.visible = true; countContainer.countDown_btn.visible = true; countContainer.countUp_btn.visible = true; countContainer.cancel_btn.visible = false;
Hier hebben we gewoon de instruction_txt,countDown_btn,en countUp_btn zichtbaar zijn. We hebben vervolgens de cancel_btn zijn inzichtbaar.
hideControls () FunctieVoeg het volgende toe aan "Main.as".
private function hideControls (): void countContainer.instructions_txt.visible = false; countContainer.countDown_btn.visible = false; countContainer.countUp_btn.visible = false; countContainer.cancel_btn.visible = true;
Dit is het tegenovergestelde van de vorige functie; hier hebben we alleen de set ingesteld instruction_txt,countDown_btn,en countUp_btn onzichtbaar zijn. We hebben vervolgens de cancel_btn zichtbaar zijn.
restoreControls () FunctieVoeg het volgende toe aan "Main.as".
private function restoreControls (e: Event) showTheControls (); countTimer.stop ();
Hier noemen we de showControls () functie en stop de timer.
Voeg het volgende toe aan "Main.as"
// Sluit de klasse // Sluit het pakket
Hier sluiten we onze lessen en pakket af.
Hoewel niet absoluut noodzakelijk, stelt u de test variabele naar vals in de "CountTimer" .as ".
Zorg ervoor dat uw documentklasse is ingesteld op "Main" en test de film.
We hebben nu een veelzijdige Timerklasse die voor een aantal dingen kan worden gebruikt, van tijdslimieten voor tests tot tijden voor het instellen van levels op games.
Ik hoop dat je deze tutorial nuttig hebt gevonden en bedankt voor het lezen!
