Strings bewerken

_{door furax op 03-11-2006}

Wat gaan we doen?
In deze tutorial zal ik jullie tonen hoe je bepaalde informatie uit tekstvelden kan halen, of de inhoud van de tekstvelden aanpassen.
Opmerking: De mensen die weten wat het verschil is tussen de soorten tekstvelden, en die al de basis van flash kennen, kunnen meteen doorgaan naar hier, de andere lezen even door.

inleiding:
Kortom, we gaan strings bewerken. Voor de mensen die niet weten wat een string is: dat is simpel gezegd een tekenreeks die je (of beter, die actionscript) als tekst beschouwt.

Voor we aan deze tutorial beginnen leg ik eerst even kort uit welke soorten tekstvelden er zijn in flash.
Dat zijn er namelijk 3:

statische tekstvelden: deze tekstvelden worden gebruikt om gewoon vaste tekst weer te geven in je flash file. Meestal is gewone lopende leestekst, static tekst. Dit is dan ook het meest voorkomend.

dynamische tekstvelden: deze worden gebruikt wanneer je (zoals de naam al zegt) tekst dynamisch wilt hebben, met andere woorden, wanneer die tekst zich moet kunnen aanpassen. Een goed voorbeeld hiervan is wanneer je ergens inlogt er er daarna verschijnt: welkom "naam". Hier is die "naam" een dynamisch tekstveldje, omdat die telkens een andere inhoud krijgt.

input tekstvelden: Hier wordt van de gebruiker verwacht om iets in het veldje in te vullen, bijvoorbeeld een login, of een geboortedatum... De inhoud van dit veldje wordt opgeslagen in een variabele, en die kan op zijn beurt weer gebruikt worden in de actionscript code, hetgeen wij zo meteen gaan doen.


Voorbereiding:
Om te beginnen maak je een nieuw flash document aan. De grootte en framerate maken in principe niet zoveel uit.
Ik heb het als volgt gedaan:


Zo, nu kunnen we eindelijk aan de slag.
Om te beginnen nemen we meteen een goede gewoonte aan:
Schrijf zoveel mogelijk je actionscript op een frame, en maak hier ook een apparte laag voor aan. Dit is veel overzichtelijker dan wanneer je al je code op de buttons of movieclips zelf gaat plaatsen. Hier komen we later wel op terug, eens we aan het scripten slaan.


Vooraleer we beginnen te scripten, gaan we eerst onze "layout" opbouwen (hoewel we hier niet echt van een layout kunnen spreken).
We gaan gewoon 10 statische tekstveldjes maken, en deze als volgt schikken:

Voor wie nog niet weet hoe hij/zij dit doet:
je neemt je tekst tool (of druk op de letter "t"), vervolgend klik je op je stage en typ je je tekst in. Vervolgens zorg je ervoor dat je in het properties palet (onderaan meestal) instelt dat dit statische tekst is. De rest qua grootte en dergelijk kan je vrij aanpassen.
Dan bekom je zoiets:


Eens dit gedaan is, nemen we opnieuw het tekst tool, en sleep je een tekstkadertje onder of naast "voer tekst in", pas dit een beetje aan qua grootte, totdat het in je layout past. Nu ga je terug naar je properties palet en deze keer stel je het in op "input text". Want we willen tenslotte dat de gebruiker hier een woord kan invullen.
Ook vullen we in het veldje "var" een variabele naam in, zodat we die kunnen gebruiken in ons actionscript code, deze variabele zal dus de tekst bevatten die de gebruiker in het veldje heeft getypt.


Vervolgens maken we 9 dynamische veldjes, opdezelfde wijze als voordien en plaatsen we die naast onze statische veldjes van daarnet. Om sneller te werken, maak je gewoon eentje en kopieer deze dan 8 keer. Dan bekom je uiteindelijk zoiets:


Nu gaan we bij elk van die 9 dynamische tekstveldjes een variabelenaam invoeren zoals we daarnet deden bij ons invulveldje. Kies hiervoor logische namen, zo heb je later geen problemen. Ik koos voor uitvoer1, uitvoer2, enz....

Nu zijn we er bijna, er rest ons alleen nog 2 knopjes te maken, namelijk "reset" en "ok".
Teken gewoon een cirkeltje of een vierkantje op je stage, selecteer het, druk op F8 om om te zetten naar een symbool, geef het een logische naam, en vervolgens wanneer het is omgezet naar een symbool, geef je het een "instancenaam", dit doe je onderaan in je propertiespalet.
Kies ook hier weer voor een logische naam, zoals "ok" en "reset".


Het eigenlijke scripten
Nu eindelijk al het voorbereidende werk achter de rug is, kunnen we starten met het eigenlijke scripten.

Open daarvoor je actions panel, door op F9 te drukken of door in het menu window-actions te kiezen.
selecteer vervolgens de eerste keyframe op je timeline op de laag actions, precies zoals we dit in het begin hebben opgemaakt.

Het eerste wat we zullen doen is de reset knop laten werken.
Dit doen we door middel van de volgende code:


Deze code zorgt ervoor dat bij het klikken op de knop "reset" de code wordt uitgevoerd.
We zorgen dus dat bij het klikken op de knop "reset" de inhoud van je invoerveld de tekst "" wordt. Aangezien er niets tussen "" staat, zal er ook niets meer in de veldjes getoond worden.
Indien je jouw veldje anders hebt genoemd, vervang je de naam door jouw variabelenaam uiteraard.
Als je wilt kan je dit al eens testen door ctrl+enter te doen op je toetsenbord, en zo je bestand te bekijken als swf. vul eens iets in in je invulveldje en klik vervolgens op je reset knop, als het goed is zal je tekst nu verdwenen zijn, precies zoals we willen.



Ok, nu gaan we beginnen met de functies schrijven, want we willen tenslotte toch dat er iets gebeurd wanneer we op onze "ok" knop klikken.

Open terug het actions panel (F9) en typ onder de vorige code:



We maken de functie "deel1" aan, die gaat nu op dit moment nog niet worden uitgevoerd, want we hebben die nog nergens aangeroepen, dit is voor straks.
Hetgeen deze functie doet is: het kijkt naar de inhoud van de variabele "invoer" (ons invulveldje) en toont daarvan het teken op plaats "0" in het veld "uitvoer1". Waarom plaats 0? Wel omdat actionscript bij een strind vanaf 0 begint te tellen, en omdat we het eerste teken willen tonen, moeten we bij 0 beginnen.

daaronder typ je:



Weer maken we een funcie aan.
Deze zorgt ervoor dat het teken op de laatste plaats van het invulveldje wordt weergegeven in het tweede dynamisch veldje. Het maakt niet uit hoelang het woord in dat veldje is, want we zeggen dat hij eerst moet kijken hoelang het woord is (length) en daarvan neemt het het teken op de (length-1)ste plaats, want zoals gezegd, begint actionscript vanaf 0 te tellen.

Nu heb je het syteem wel een beetje door denk ik.
Daarom ga ik nu de rest van de functies allemaal ineens tonen, en pas daarna een beetje uitleg geven.

typ dus terug in je actions panel, de volgende functies:


functie3: geeft het aantal tekens in je ivulveld weer.
functie4: geeft de ASCII-code weer van het teken op de voorlaatste plaats.
functie5: door 2 extra variabelen aan te maken, zorgen we ervoor dat eerst, de eerste letter van het woord wordt gehaald, en daarna de laatste letter, vervolgend wordt hetgeen er nog rest getoond in het veldje "uitvoer 5"
functie6: hierdoor gaan we alle letters in hoofdletter plaatsen en weergeven in "uitvoer6"
functie7: zelfde als functie 6 maar dan alles naar kleine letters.
functie8: Hier nemen we eerst de eerste letter appart, en zetten we die om naar een hoofdletter, vervolgens nemen we de rest van de string en zetten die om naar kleine letters.
functie9: Hier word er naar de index positie gekeken van de letter "b", als de index -1 is, betekend dit dat er géén "b" in de invoer zit.


Ziezo, nu hebben we alle functies die we nodig hebben aangemaakt, nu moeten we er nog voor zorgen dat deze worden uitgevoerd, wanneer we op de knop "ok" klikken.
Dit doen we als volgt:
Ga terug naar je actions panel en typ volgende code:



Dus nu wanneer je op de knop "ok" klikt, worden alle functies die we daarnet geschreven hebben uitgevoerd.

Hieronder een werkend voorbeeld van wat ik jullie probeerde uit te leggen.



einde

Ziezo, dit was alles wat ik te vertellen had.
Ik hoop dat jullie iets bijgeleerd hebben, en indien er vragen zijn, aarzel dan niet om die te stellen.
Grtz
furax