Share
I denne opplæringen lager vi et galleri som viser alle bildefiler i en gitt katalog. En glidebryter brukes til å bla gjennom bildene enkelt.
Sett opp et nytt Flash AS3-dokument og en tom ActionScript-fil. Vi lager først hovedklassen; gi det navnet "Galleri" og lagre det som "Gallery.as". Nedenfor er koden for å sette opp første klasse:
pakke offentlig klasse Galleri offentlig funksjon Galleri (): void
I Flash kan vi nå sette dette som grunnklassen ved å skrive inn navnet i inntastingsboksen under Publiser innstillinger for dokumentet. Du kan prøve en "spor (" hallo verden ")" i Galleri-funksjonen for å teste om det fungerer.
Før vi fortsetter med hovedklassen, er det best å starte med glidebryteren. Koden er ganske lett å forstå og kan skinne litt lys på hvordan ting gjøres i AS3.
Lag to nye filmklipp: en glidebryter og et håndtak for glidebryteren. Glideren eller søkeren trenger ikke å bli eksportert til ActionScript, siden vi bare trenger å bruke noen funksjoner til håndtaket. Sett klassen for håndtaket som "Håndtak". Vi kan nå opprette en ny klasse kalt "Handle", og hvis lagret i samme katalog, vil Flash automatisk bruke denne klassen til håndtaket. Gi både et forekomstnavn som "glidebryter" og "theHandle".
Følgende er den fulle koden for håndtaket som jeg vil forklare i trinn. Den skal lagres som "Handle.as" i samme katalog som din .fla. På denne måten vil Flash utføre koden en gang til en forekomst med et klassenavn "Håndter" brukes.
Accentsconagua
pakke import flash.display.MovieClip; importer flash.events.MouseEvent; importere flash.events.Event; offentlig klasse Håndtak utvider MovieClip public var goToX: Number = x; Private var skyveknappen: MovieClip = MovieClip (foreldre) .slider; private var mousePos: tall = 0; offentlig funksjon Håndtering (): void buttonMode = true; addEventListener (MouseEvent.MOUSE_DOWN, moveHandle); stage.addEventListener (MouseEvent.MOUSE_UP, stopHandle); privat funksjon moveHandle (_e: MouseEvent): void mousePos = mouseX; stage.addEventListener (MouseEvent.MOUSE_MOVE, followHandle); privat funksjon stopHandle (_e: MouseEvent): void stage.removeEventListener (MouseEvent.MOUSE_MOVE, followHandle); privat funksjon followHandle (_e: MouseEvent): void var newPos: Number = stage.mouseX - mousePos; var orgX: Nummer = x; hvis (newPos < slider.x ) goToX = slider.x; else if ( newPos > (slider.x + slider.width) - bredde) goToX = (slider.x + slider.width) - bredde; ellers goToX = newPos; x = goToX; hvis (goToX! = orgX) dispatchEvent (nytt arrangement ("glidende", sant)); I de første par linjene oppretter vi noen variabler for å holde data vi kan bruke i hver funksjon i denne klassen. Glidebryteren inneholder en referanse til forekomsten "slider" på foreldrene. Vi trenger det for å riktig beregne x-posisjonen som håndtaket skal flyttes til. I konstruktøren setter vi "buttonMode" til ekte, så en håndpeker vises når du svinger over håndtaket. I tillegg legger vi til to eventlisteners for å lytte etter museventilhendelser.
offentlig klasse Håndtak utvider MovieClip public var goToX: Number = x; Private var skyveknappen: MovieClip = MovieClip (foreldre) .slider; private var mousePos: tall = 0; offentlig funksjon Håndtering (): void buttonMode = true; addEventListener (MouseEvent.MOUSE_DOWN, moveHandle); stage.addEventListener (MouseEvent.MOUSE_UP, stopHandle);
Når en mus ned hendelsen oppstår, er en ekstra lytter lagt til. Denne lytteren forblir aktiv så lenge drabevegelsen ikke er stoppet og kalles "followHandle" -funksjonen. Den er fjernet igjen når museklikk er over.
privat funksjon moveHandle (_e: MouseEvent): void mousePos = mouseX; stage.addEventListener (MouseEvent.MOUSE_MOVE, followHandle); privat funksjon stopHandle (_e: MouseEvent): void stage.removeEventListener (MouseEvent.MOUSE_MOVE, followHandle);
Denne siste funksjonen beveger faktisk håndtaket rundt. Variabelen "newPos" lagrer den nye posisjonen som håndtaket skal bevege seg på. Hvis imidlertid denne posisjonen er lengre enn langt til venstre eller høyre på skyvekontrollen, bør stillingen settes til maksimal mulig verdi. Hvis håndtaket er flyttet, sender vi en ny tilpasset begivenhet kalt "glidende", som vi senere kan bruke til å bevege seg rundt bildene.
privat funksjon followHandle (_e: MouseEvent): void var newPos: Number = stage.mouseX - mousePos; var orgX: Nummer = x; hvis (newPos < slider.x ) goToX = slider.x; else if ( newPos > (slider.x + slider.width) - bredde) goToX = (slider.x + slider.width) - bredde; ellers goToX = newPos; x = goToX; hvis (goToX! = orgX) dispatchEvent (nytt arrangement ("glidende", sant)); Hvis alt har gått bra til nå, bør du ha en fin funksjonell glidebryter som den nedenfor. Legg til en dynamisk tekstfelt under den som vil holde bildetummeret. Gi det et eksempelnavn som "countTxt", så vi kan adressere det senere i ActionScript. Fordi det ikke er noe å vise ennå har jeg fylt det med teksten "Loading" som også vil vise mens skriptet laster det første bildet.
Deretter skal vi opprette php backend script. Flash kan ikke lese innholdet i en lokal katalog, så vi må sende informasjonen fra php til Flash. Vi bruker XML fordi det er enkelt å skrive ut med php og enda enklere å lese igjen i AS3.
Følgende er php backend-koden, lagre den som "backend.php". Koden løper gjennom katalogen "img" og skriver en linje med XML for hver fil der inne. Før utskrift må vi filtrere ut "." og "..." kataloger. Siden katalogen bare inneholder bilder, er det ikke nødvendig med ytterligere kontroll.
". $ filnavn."\ n ";?>
Dette kommer til å produsere for eksempel:
file1.jpg
file2.jpg
file3.jpg
Før vi legger dette inn i Flash, la oss lage en klasse for å holde bildene våre individuelt. På samme måte som vi opprettet Handle-klassen kan vi nå lage en Img-klasse. Start med å lage en filmklipp om størrelsen du vil at bildene skal vises på. Gi den en margin på noen få piksler, og lagre litt plass på bunnen for beskrivelsesteksten. Legg til et dynamisk tekstfelt for beskrivelsen og gi det et forekomstnavn på "descr". Sørg for å sette registreringspunktet til filmklippet til senteret slik at vi enkelt kan skalere det senere. Eksporter den til ActionScript under klassenavnet "Img". Slett nå forekomsten fra scenen som vi kaller den direkte fra biblioteket.
Deretter legger vi inn informasjonen som php-filen returnerer til vårt Flash-prosjekt ved hjelp av ActionScript. Åpne Galleriklassen igjen. Følgende kode legger til to funksjoner til vårt prosjekt. For det første skaper det "imagesClip", en tom filmklip der vi lagrer de faktiske bildene senere. Ved å bruke "addChild" her legger filmklippet til scenen. Alt lagt til bilderClip senere vil også vises på scenen. For å faktisk laste XML-dataene oppretter vi en "URLLoader". Denne klassen kan hente resultatene og kjøre en funksjon når resultatene er i.
pakke import flash.display.MovieClip; importere flash.events.Event; importer flash.net.URLLoader; importere flash.net.URLRequest; offentlig klasse Gallery utvider MovieClip private var backend: String = 'http: // localhost / ... /backend.php'; private var xmlLoader: URLLoader = ny URLLoader; private var xdata: XML; offentlige varbilder: Array = new Array (); offentlig var imagesClip: MovieClip = ny MovieClip; offentlig funksjon Galleri (): void imagesClip.y = 180; addChild (imagesClip); xmlLoader.load (ny URLRequest (backend + "?" + ny dato (). valueOf ())); xmlLoader.addEventListener (Event.COMPLETE, loadImages); private funksjon loadImages (_e: Event): void xdata = new XML (_e.target.data); var jeg: tall = 0; for hver (var img: XML i xdata.img) images [i] = new Img (); i ++; imagesClip.addChild (bilder [i]);
Her bruker vi lastfunksjonen til URLLoader-klassen. For å forhindre caching av resultatene kan vi legge til en enkel dato til slutten av webadressen. Eventlisten kontrollerer når URLLoader er ferdig og kjører deretter loadImages-funksjonen.
xmlLoader.load (ny URLRequest (backend + "?" + ny dato (). valueOf ())); xmlLoader.addEventListener (Event.COMPLETE, loadImages);
Denne neste funksjonen løper gjennom alle
private funksjon loadImages (_e: Event): void xdata = new XML (_e.target.data); var jeg: tall = 0; for hver (var img: XML i xdata.img) images [i] = new Img (); i ++; imagesClip.addChild (bilder [i]);
For å gi våre Img-forekomster mer funksjonalitet, opprett en Img-klasse og lagre den som "Img.as". På samme måte som å laste XML kan vi laste selve bildet og vise det inne i Img-filmklippet. Lastingen skal ikke forekomme i konstruktøren, eller alle bilder vil prøve å laste samtidig. Vi lager en egen funksjon for å gjøre dette.
offentlig klasse Img strekker seg MovieClip public var id: Number; privat var src: streng; private var imageLoader: Loader = new Loader (); privat var hoved: Galleri; privat var orgWidth: Nummer = 0; privat var orgHeight: Number = 0;
I konstruktøren setter vi en referanse til hovedgalleriet, slik at vi senere kan få tilgang til elementer på scenen eller offentlige variabler og funksjoner i hovedklassen. Strengen "last" vil inneholde banen til bildet som php returnerte, vi lagrer det til en variabel slik at vi kan få tilgang til det senere.
offentlig funksjon Img (last: String, m: Galleri): void orgWidth = width; orgHeight = høyde; main = m; src = load;
Funksjonen "loadImage" laster bildet og når den er ferdig, kjører "displayImage" -funksjonen.
offentlig funksjon loadImage (): void imageLoader.load (ny URLRequest ("img /" + src)); imageLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, displayImage); DisplayImage-funksjonen kontrollerer bildene som vi opprettet og laster inn neste bilde. Det setter utjevningen til sant på Loader (som standard er utjevning satt til falsk på dynamisk lastede bilder). Når du begynner å skalere eller rotere et bilde, er det viktig å sette utjevningen slik at bildet fortsatt er dets kvalitet. Da registreringspunktet til Img-filmklippet er i midten, må vi beregne x- og y-posisjonen for hvor selve bildet skal plasseres. I mitt eksempel har jeg brukt en katalog med bilder med samme bredde og høyde. Hvis bredden og høyden på det lastede bildet er variabelt, er dette stedet å endre størrelsen på flyet. Like før du legger til det som barn, setter du beskrivelsesteksten til "src", som inneholder navnet på bildet.
privat funksjon displayImage (_e: Event): void if (main.images [id + 1]! = null &&! main.images [id + 1] .parent) main.images [id + 1] .loadImage (); Bitmap (imageLoader.content) .smoothing = true; imageLoader.x = main.spaceBetween / 2 - (orgWidth / 2); imageLoader.y = main.spaceBetween / 2 - (orgHeight / 2); descr.text = src; addChild (imageLoader);
Etter endringene vi har gjort til Img-klassen, må vi oppdatere måten forekomstene kalles i loadImages-funksjonen til galleriklassen. Vi må nå passere to argumenter når vi ringer til ny Img ().
Den første er banenavnet til bildet som må lastes, vi får dette fra xml. Den andre er en referanse til hovedgalleriet klassen; Vi kan bruke "dette" som peker på klassen vi jobber for. I stedet for å legge til bildene med addChild til bildeneClip-beholderen, oppretter vi en ny funksjon "goTo". Denne funksjonen vil finne ut hvilke bilder som skal plasseres på skjermen. Argumentet vi må passere er id-nummeret til bildet, det samme tallet som indeksnøkkelen i bildarammen. Når bildene lastes for første gang, setter vi fokus på det første bildet, hvorav id-nummeret er null.
private funksjon loadImages (_e: Event): void xdata = new XML (_e.target.data); var jeg: tall = 0; for hver (var img: XML i xdata.img) images [i] = new Img (img, dette); bilder [i] .x = 200 * i; bilder [i] .id = i; i ++; goTo (0);
For å bruke goTo-funksjonen må vi deklarere en variabel "imagesToShow" først. Dette vil angi mengden bilder vi vil laste samtidig på skjermen. For å bestemme hvilken retning brukeren ruller, kontrollerer vi bare om bildet vi skal ha et høyere eller lavere ID-nummer enn den siste.
privat funksjon goTo (imgId: Nummer): void var retning: Nummer; hvis (orgImgId! = imgId) hvis (imgId> orgImgId) retning = 1; ellers retning = -1;
Den neste "for loop" løser alle bildene som trengs på skjermen. For eksempel: Hvis vi stiller bilderToShow til 5, vil det løpe fra -2 til 2. Dette betyr at hvis vi overfører verdien av jeg til Img-klassen, kan vi bestemme hvor på skjermen den skal plasseres (-2 er langt igjen , 0 senter og 2 langt til høyre). Derfor kan vi skala bildene større jo mer sentralt de er plassert.
Det er en ekstra sjekk inkludert, så vi aktiverer ikke eksisterende bilder (den stopper ved første og siste). For hver av de aktive bildene kjører vi "makeActive" -funksjonen, som vi vil lage senere.
for (var jeg: Nummer = - Math.floor (imagesToShow / 2); i <= Math.floor(imagesToShow/2); i++ ) if( imgId + i < images.length && imgId + i >= 0) bilder [imgId + i] .makeActive (jeg, retning);
Like etter å ha lagt bildene vi trenger på skjermen, vil vi sjekke hvilke som ikke burde være der lenger og få dem fra scenen. Siden alle bildene er lagt til i bilderClip-beholderen, kan vi enkelt gå gjennom alle barna i den filmen. Hvis deres id ikke er innenfor de som skal være aktive, kjører vi "deActive".
for (var j: tall = 0; j < imagesClip.numChildren; j++ ) var tile : Img = imagesClip.getChildAt(j) as Img; if ( tile.id < imgId - Math.floor(imagesToShow/2) || tile.id > imgId + Math.floor (imagesToShow / 2)) tile.deActive (retning);
Neste linje oppdaterer teksten til det dynamiske tekstfeltet vi opprettet tidligere. Siden bildets ids begynner å telle til 0, legger vi til +1 til imgId, slik at det første bildet faktisk er nummer 1 etc. Vi kan få totalt antall bilder fra å få tilgang til lengden på bildene.
countTxt.text = imgId + 1 + "/" + images.length;
Til slutt vil vi sette "orgImgId" så neste gang funksjonen kjøres, kan retningen som rulles, bestemmes.
orgImgId = imgId;
Vi trenger nå funksjonene "makeActive" og "deActive" i Img-klassen. Disse vil enten legge bildet til scenen, eller ta det av. For nå vil vi bare legge til dem og plassere dem riktig. Senere vil vi også tween dem til riktig sted.
MakeActive-funksjonen kontrollerer først om den er lagt til bildeneClip allerede. Hvis det ikke finnes noen forelder, legger den seg til i bilderClip-beholderen. Foreldre er da bildeneClip. Deretter setter vi den synlige eiendommen til sann. Når deaktiveres, setter vi den på falsk, så det er bare normalt at vi vil at bildet vårt skal vises igjen når det blir gjort aktivt.
offentlig funksjon makeActive (posisjon: tall, retning: tall): void if (foreldre == null) main.imagesClip.addChild (dette); synlig = sant;
Det er en sjanse for at bildet selv ikke er lastet inn ennå. For å sjekke dette, kontrollerer jeg om mengden barn er mindre enn 3. Dette nummeret kan avhenge av mengden former eller andre filmklipp i Img. Hvis du føler deg usikker på denne metoden, vil et sikrere alternativ være å erklære en boolsk ved starten og sette den til sann i displayImage-funksjonen.
hvis (numChildren < 3 ) loadImage();
Det er ingen dybde i AS3, men når vi begynner å skalere og rotere bildene våre, må vi sørge for at bildet i midten ligger på toppen av de andre. Fordi vi passerte posisjonen som et argument i goTo-funksjonen, kan vi nå bruke det til å sette indeksen for bildet i bildeneClip. Indeksen til et barn kan sammenlignes med en dybde, men det vil ikke være noen problemer når du endrer det, siden de andre filmklippene flytter en indeks opp eller ned. Dette trinnet er unødvendig hvis du ikke planlegger å overlappe bildene.
parent.setChildIndex (dette, (parent.numChildren-1) - Math.abs (posisjon));
Til slutt bestemmer vi posisjonen til bildet. Den "ekstra" variabelen brukes her for å finne ut av hvor mye bildet er borte fra sentrum. "DefaultWidth" og "spaceBetween" er offentlige variabler satt i hovedgalleri-klassen, slik at vi kan få tilgang til dem fra hvor som helst. Siden alle bildene i katalogen min har samme bredde, angir jeg defaultWidth ved 195 og spaceBetween to 20. For å flytte bildet til den nye posisjonen, setter vi x-eiendommen til den nylig funnet x-verdien.
var ekstra: Nummer = Math.round (posisjon * (main.defaultWidth + main.spaceBetween)); var newX: Number = Math.round ((main.stageWidth / 2)) + ekstra; x = newX;
DeActive-funksjonen er ganske rett frem, det endrer synligheten til falsk. Retningen er allerede satt som et argument siden vi trenger det senere for å vite i hvilken retning å sende bildet når det tas av scenen.
offentlig funksjon deActive (retning: Nummer): tomrom synlig = false;
Nå skal de første bildene vises på scenen. Det mangler bare en funksjonalitet. Skyvekontrollen er ikke koblet til goTo-funksjonen ennå. Men siden vi allerede sender en tilpasset begivenhet når håndtaket er trukket, er det ikke veldig vanskelig å koble de to.
Legg til følgende linje i Gallery constructor-funksjonen. Denne hendelseslisten vil kjøre lysbildefunksjonen hver gang "glidende" hendelsen kalles av håndtaket.
theHandle.addEventListener ("skyve", lysbilde); Alt vi trenger lysbildefunksjonen å gjøre er å beregne hvilket bilde som skal vises i sentrum avhengig av hvor håndtaket er. I funksjonen "glidebryter" og "theHandle" er forekomstnavnene vi satt tidligere på filmklippene på scenen. For å finne ut hvilket bilde som skal gå til, bestemmer vi først prosentandelen av håndtakets posisjon over glidebryterens lengde. Så multipliserer det med totalt antall bilder bringer oss til riktig bilde id.
privat funksjon lysbilde (_e: Event): void var prosent: Nummer = (theHandle.goToX - slider.x) / (slider.width - theHandle.width); var imgId: Nummer = Math.round (prosent * (images.length - 1)); goTo (imgId);
Hvis du har klart å følge dette langt og holdt oversikt over hvilke klasser som skal importeres og hvilke variabler som skal erklære (eller fulgte kildefilene), bør du nå ha et fungerende eksempel.
For å fullføre denne opplæringen legger vi til tweening til bildene ved hjelp av TweenLite, en fri og lett tweening-motor. Standard tweening klassene levert av Adobe fungerer ikke bra når det skjer mye. Når de prøvde de, pleide de å krasje eller fryse mye, mens jeg ennå ikke har oppdaget slike problemer med TweenLite. Syntaksen til TweenLite er veldig enkelt. Jeg demonstrerer dette ved å sammenligne det med en vanlig Flash-tween; tweening en gjenstand fra sin nåværende x til 100 og endre alfa til 0:
ny Tween (objekt, 'x', Linear.easeOut, object.x, 100, 2, true); ny Tween (objekt, 'alfa', Linear.easeOut, object.alpha, 0, 2, true);
Nå er alternativet TweenLite alternativ syntaks:
TweenLite.to (objekt, 2, x: 100, alfa: 0, lettelse: Linear.easeOut);
La oss lage en ny funksjon der vi kan plassere alle tweening-handlingene. Gi det navnet "flyTo" og legg det i Img-klassen.
privat funksjon flyTo (newX: Number, removeAfter: Boolean, scale: Number = 1): void var tweeningOptions: Objekt = nytt objekt; tweeningOptions.x = newX; hvis (removeAfter) tweeningOptions.ease = Linear.easeIn; tweeningOptions.alpha = 0; tweeningOptions.scaleX = tweeningOptions.scaleY = 0.3; tweeningOptions.visible = false; else tweeningOptions.ease = Back.easeOut; tweeningOptions.alpha = 1; tweeningOptions.scaleX = tweeningOptions.scaleY = skala; tweeningOptions.rotation = (Math.random () * 20) - 10; TweenLite.to (dette, 0,4, tweeningOptions);
Det er 3 argumenter som trengs for denne funksjonen: x-verdien som vi tidligere har beregnet, om den skal fjernes etter tween og skalaen. Parameteren "removedAfter" vil bli brukt i deActive-funksjonen, slik at synligheten av bildet kan settes til falsk når det er nådd slutten av scenen. Skaleringsparameteren brukes kun til senterbildet; Vi viser det litt større enn resten.
La oss se på tweening-alternativene for når bildet er fjernet fra scenen. Først velger vi et løsningsalternativ, i dette tilfellet "Linear.easeIn" som gir normal, lineær bevegelse. For det andre forsvinner vi alfaverdien til null slik at bildet fades bort. Da skaler vi det til bare en liten prosentandel av bredde og høyde, slik at den blir mindre etter hvert som den når slutten. Til slutt, når tween er ferdig, setter vi synligheten til falsk.
tweeningOptions.ease = Linear.easeIn; tweeningOptions.alpha = 0; tweeningOptions.scaleX = tweeningOptions.scaleY = 0.3; tweeningOptions.visible = false;
Når et bilde blir gjort aktivt, er alternativer for tweening forskjellige. Vi setter lettet til "Back.easeOut" slik bildene ser ut til å fly litt for langt og deretter sprette tilbake; en veldig subtil effekt. Deretter endrer vi alfa tilbake til 1 og skaler bildet til skalaverdien vi passerte til funksjonen. Til slutt setter vi en tilfeldig rotasjon på -10 til 10 grader. Hvis beskrivelsen tekst ikke lastes etter denne handlingen, må du kontrollere at skrifttypen er innebygd.
tweeningOptions.ease = Back.easeOut; tweeningOptions.alpha = 1; tweeningOptions.scaleX = tweeningOptions.scaleY = skala; tweeningOptions.rotation = Math.round ((Math.random () * 20) - 10);
Nå må vi oppdatere funksjonene makeActive og deActive, slik at de bruker den nye flyTo-funksjonen.
I makeActive-funksjonen må vi legge til en x-verdi for bildet slik at det kan tweened fra den opprinnelige verdien. StandardWidth må settes i hovedgalleriet og inneholder bredden på scenen.
offentlig funksjon makeActive (posisjon: tall, retning: tall): void deactivating = false; hvis (forelder == null) x = (retning == 1? main.stageWidth + main.defaultWidth * 2: - main.defaultWidth * 2); alfa = 0; main.imagesClip.addChild (dette); synlig = sant; hvis (numChildren < 3 ) loadImage(); parent.setChildIndex(this, ( parent.numChildren-1 ) - Math.abs( position ) ); var extra : Number = Math.round( position * ( main.defaultWidth + main.spaceBetween ) ); var newX : Number = ( Math.round( ( main.stageWidth / 2 ) /* - ( main.defaultWidth / 2 )*/ ) + extra ); flyTo( newX, false, ( position == 0 ? 1.2 : 1 ) );
I deActive-funksjonen er alt vi trenger å legge til, et moveTo-verdi som inneholder x-verdien som bildet skal tween. Hvis vi finner dette til utenfor scenens bredde, vil bildet forsvinne like utenfor scenen.
offentlig funksjon deActive (retning: tall): void if (! deactivating) active = false; var moveTo: Number = (retning! = 1? main.stageWidth + main.defaultWidth * 2: parent.x - main.defaultWidth * 2); flyTo (moveTo, true); deaktiverer = sant;
Etter oppdatering av alt har vi nå et funksjonelt galleri. For å se filmklippene som forsvinner fra scenen, sjekk ut hele versjonen.
Den endelige versjonen er fortsatt lav på funksjonalitet. De lastede bildene må alle være av samme størrelse og har ikke større forhåndsvisning. Du kan legge til en resizing-funksjon og et alternativ for å vise en større forhåndsvisning av bildet når du klikker. Videre kan et alternativ til å bla gjennom venstre eller høyre med knapper eller med et tastaturhendelse legges til.
Når du forstår begrepet bruk av klasser for å skille og strukturere koden, vil det bidra til utvikling og gjøre tingene enklere i det lange løp. Jeg håper du likte å følge med!
