Tekst vakken, lettertypes en meer, alles over tekstvelden in flash.

_{door vinTage op 06-11-2006}

Tekstvakken en tekst in Flash.
Op het eerste gezicht lijkt er niets bijzonders aan, maar toch kan je met flash en zijn tekstvelden heel creative dingen doen.

Je kan ze bijvoorbeeld een opmaak geven, zodat, als je tekst in dat vakje wilt typen, de kleuren van de borders, tekst en achtergrond veranderen.
tekstvak opmaak

Je kan tekstvakken beveiligingen tegen invoer van bepaalde characters die je niet mag ingeven, of de tekstvakken juist alleen toestaan bepaalde characters te gebruiken.
restrict

Ook kan je je website voorzien van elk lettertype dat je zelf wilt en nog steeds dynamisch houden, zonder moeilijke truukjes te moeten uithalen met GDlib in php, of "niet" werkende CSS truckjes die zogenaamd linken naar andere font types.
fonts embedden

Kortom, dit is best een interessante tutorial.
Laat ik daarom maar stoppen met flash te promoten, en er wat meer over gaan vertellen.


Tekstvakken
Om te beginnen gaan we eens een formuliertje in elkaar draaien waar we wat mooiere tekstvakken gebruiken, in plaats van die simpele witte input veldjes.

Als voorbeeld gebruik ik hiervoor onderstaande "registratie formulier". (niet echt mooi, maar wel duidelijk (hoop ik) )
In dit voorbeeldje heb ik gelijk een beveiliging ingebouwd zodat je alles naar "waarheid" kan/moet invullen.
*In gebruikersnaam kan je alleen characters typen die toegestaan zijn, dus geen vreemde characters als ^`´<>|;,{}° etc.
*In email adres kan je alleen tekens ingeven die voor kunnen komen in een mailadres.
*in leeftijd kan je alleen cijfers geven.

En ? uitgespeelt met het formuliertje ? Dan zal ik nu vertellen hoe die tekstvak kleuren voor elkaar krijgt in flash.
We moeten om te beginnen wel textvakken hebben, dus begin maar alvast een paar dynamische tekstvakken te maken, en geef er een instancenaam aan.
Om mijn voorbeeld na te maken moet je de tekstvakken, "naam" en "email" als instancenaam geven.
Dan hebben we in een keyframe de volgende AS nodig, ik heb de code denk ik wel redelijk ondersteund met commentaar, alhoewel dat volgens mij niet echt nodig is :-)



Als je die code doorleest valt er weinig meer uit te leggen denk ik, maar voor degene die echt geen AS spreken komt hier een beetje uitleg.
Helemaal bovenin heb ik enkele variabelen gezet. Daarna worden de functies gezet door de triggers "onSetFocus", en "onKillFocus" dat niets meer of minder betekend dan "bij tekstvak actief" en "bij niet actief tekstvak".
Helemaal onderin maken we nog een functie aan, die zorgt ervoor dat de tekstvakken voorzien worden van de kleuren die we voor ogen hadden, zonder deze functie zouden de tekstvakken gewoon wit zijn TOT we er een actief maken.
Tot zover de opmaak van ons flash text velden.


Fonts embedden
Nu gaan we een mooi passend lettertype op je website maken, en omdat GDlib nogal wat server power vraagt en plaatjes niet dynamisch zijn, kunnen we dat ook in flash maken.
Pruts maar eens wat in onderstaande flash schermpje, je zal zien dat je zonder problemen "niet standaart" lettertypes dynamisch kan tonen op je website.

De lettertypes die ik gebruikte waren "Mingle" en "Broken 15"
Okay, het zijn mischien niet de lettertypes die jij mooi vind, maar ik wilde alleen maar laten zien dat je zonder problemen vreemde lettertypes kan gebruiken.
Hoe dit werkt ? Ah, dan moeten we de fonts "embedden", oftewel "inbouwen" in de flashmovie.
Dat klinkt mischien al moeilijk, maar het stelt niets voor, al wat er moet gebeuren is het textvak selecteren waar we het font willen embedden, en dan in het properties scherm van dat tekstvak op de knop "character" klikken (in flash 8 klik je op "embed").
Er opent dan een popup waarin we dan de radiobutton op "Specify Ranges" zetten, en dan selecteren we de types die we toestaan om te embedden.



restrict
Door middel van action script kan je ook bepalen welke tekens er (niet)gebruikt mogen worden, dat gaat via restrict"";
Bij het volgende flash tekstvakje kan je niet de letters L en U gebruiken, probeer maar om het welbekende 3 letterwoord te typen, waarin die 2 letters in voorkomen :-)

Het actionscript wat ik hier gebruikte was:
Ik heb het tekstvak alleen toestemming gegeven om hoofdletters te gebruiken en cijfers, en met de ^ L gaf ik aan dat die er niet inmocht, met een backslash kan je een volgend character uitsluiten, in mijn geval hierboven dus ^L^U

Stel dat je alleen maar wilt dat je de letters L en U zou mogen typen, en verder niets, dan doe je dat met:
Probeer hieronder maar eens iets anders te typen (het mag niet lijken op dat welbekende 3 letterwoord) :-)



Static vs dynamic tekst
Er zijn in flash 3 opties bij het aanmaken van een tekstveld, namelijk "static", "dynamic" en "input".
Als je de optie "static" neemt om tekst te laten zien, dan is die tekst ook echt statisch, je hoeft bij static tekst de fonts ook NIET te embedden(je hebt niet eens die optie).
Dat embedden doet flash vanzelf al, omdat flash static tekst ziet als een plaatje.
Dat flash static tekst ziet als een plaatje brengt gelijk al weer een probleem met zich mee, waar sommigen de meeste flashers vast al tegenaan gelopen zijn.
Vooral als je kleine lettertypes wilt gebruiken zul je het probleem ondervinden dat de tekst in de final swf niet zo duidelijk is.

Hier heb ik een klein voorbeeldje van gemaakt, oordeel zelf.

De static tekst staat bovenaan, de dynamic tekst eronder. tips om static tekst toch zo duidelijk mogelijk te maken zijn
* Gebruik bij voorkeur pixelfonts !
* Zet de x en y van je tekstvak op hele, even nummers !
* Neem voor de fonthoogte altijd 10 of 12 of een veelvoud daarvan.
*In Flash 8 (of hoger) heb je nog de mogelijkheid om via de properties inspector eea in te stellen.


Voila, we zijn nu aan het einde gekomen van deze tutorial. In deze tutorial is LANG niet alles aan de orde gekomen wat je met de textvelden in flash zou kunnen, maar de meest belangrijke dingen zijn denk ik wel gezegd.
Hopelijk hebben jullie iets aan deze informatie, mocht je nog ergens vastlopen, dan kan je hier de door mij gebruikte fla's oppikken.
Een nuttige aanvulling op deze tutorial is werken met strings in flash