Tekstvakken en tekst

Tekst en tekstvelden in flash

Op het eerste gezicht lijkt er niet 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.
tekstvakken

Je kan tekstvakken zelfs ook als een soort van beveiliging gebruiken, voor als je bijvoorbeeld bepaalde lettertekens niet mag ingeven (denk aan slashes etc in php verhalen).
beveiligen

Ook kan je je website voorzien van elk lettertype dat je zelf wilt, zonder moeilijke truukjes te moeten uithalen met GD in php, of "half" werkende linkjes naar font types toe.
embed

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

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.
Ik gebruik hiervoor onderstaande voorbeeldje.
In dit voorbeeldje heb ik al gelijk een soort van beveiliging in gebouwd.

• Je kan namelijk nog niet verzenden voordat er werkelijk tekst staat in de *required velden.
• Ik heb de "verzenden" knop gedisabled zolang er geen teksten staan ("Vul eerst alle vakken in !" moet ook veranderd worden qua tekst).
• Ook ben je verplicht om eerst naam en email in te vullen, alvorens je "bericht" kan invullen

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 instance naam aan.
Om mijn voorbeeld na te maken moet je de tekstvakken, "naam", "email" en "bericht" noemen.

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 :-)

//zet hier de borderkleur, backgroundkleur en fontkleur, en evt andere settings
border1 = 0xCCCCCC; //borderkleur van niet actief tekstvak
border2 = 0x999999; //borderkleur van actief tekstvak
bgKleur1 = 0xEEEEEE; //backgroundkleur van niet actief tekstvak
bgKleur2 = 0xDDDDDD; //backgroundkleur van actief tekstvak
fontKleur1 = 0x666666; //letterkleur van niet actief tekstvak
fontKleur2 = 0x000000; //letterkleur van actief tekstvak

//De "naam" die je hieronder ziet is de instance naam van je textveldje
naam.onSetFocus = function() {
        naam.borderColor = border2;
        naam.backgroundColor = bgKleur2;
        naam.textColor = fontKleur2;
};
naam.onKillFocus = function() {
        naam.borderColor = border1;
        naam.backgroundColor = bgKleur1;
        naam.textColor = fontKleur1;
};
//De "email"die je hieronder ziet is de instancenaam van je textveldje
email.onSetFocus = function() {
        email.borderColor = border2;
        email.backgroundColor = bgKleur2;
        email.textColor = fontKleur2;
};
email.onKillFocus = function() {
        email.borderColor = border1;
        email.backgroundColor = bgKleur1;
        email.textColor = fontKleur1;
};
bericht.onSetFocus = function() {
        bericht.borderColor = border2;
        bericht.backgroundColor = bgKleur2;
        bericht.textColor = fontKleur2;
};
bericht.onKillFocus = function() {
        bericht.borderColor = border1;
        bericht.backgroundColor = bgKleur1;
        bericht.textColor = fontKleur1;
};
function stijl(s) {
        for (var a in s) {
                s[a].border = true;
                s[a].borderColor = border1;
                s[a].background = true;
                s[a].backgroundColor = bgKleur1;
                s[a].textColor = fontKleur1;
        }
}
stijl([naam, email, bericht]); //array met instances, waarop de functie moet worden uitgevoerd

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.
Okay de mooie vakjes hebben we nu gehad.

Nu dan een geinig lettertypje op je website, en omdat dat rotwerk is en plaatjes niet dynamisch zijn, kunnen we dat ook in flash maken.
Pruts maar eens wat in onderstaande flash schermpje.

Als je dan de optie "punctuations" weglaat, kunnen er dus geen tekens gebruikt worden die evt gevaarlijk zijn in bepaalde scripttalen.

Door middel van action script kan je ook bepalen welke tekens er 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 3 letterwoord te typen, waarin die 2 letters in voorkomen :-)

Stel dat je alleen maar wilt dat je de letters L en U zou mogen typen, en verder niets, dan doe je dat met
input.restrict = "\U\L";
Probeer hier maar eens iets anders te typen :-)

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.
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 van de nieuwe 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.

rood is eigenlijk gewoon verplicht, blauw is een globale hint

Zoals je mischien nog weet uit het formuliertje bovenin, daar had ik wat veiligheidsdingetjes in gedaan, hieronder zal ik uitleggen welke, en hoe.

Bij dat formulier moest je persee eerst "naam" en "email" invullen voordat het "bericht" tekstvak bewerkt kon worden, dat deed ik als volgt :

bericht.onSetFocus = function() {
        if (naam.text != '' && email.text != '' ) {
                bericht.type = "input";
        } else {
                bericht.type = "dynamic";
        }
        bericht.borderColor = border2;
        bericht.backgroundColor = bgKleur2;
        bericht.textColor = fontKleur2;
};
bericht.onKillFocus = function() {
        bericht.borderColor = border1;
        bericht.backgroundColor = bgKleur1;
        bericht.textColor = fontKleur1;
};

Op z'n nederlands betekend dit ongeveer, "als naam en email tekstvakken leeg zijn, dan is het bericht tekstvak een static texvak, anders, als naam en email niet leeg zijn, dan is het berichten tekstveldje een input tekstveldje"
Een dynamic tekstveldje is (tenzei anders aangegeven) niet "editable", dus op deze manier kunnen we aangeven of een tekstvak al dan niet "editable" moet zijn.
Soortgelijke controle heb ik ook gebruikt voor de verzendknop, maar die ga ik hier niet uitleggen want die wijkt teveel af van het topic, de code staat wel in de fla, waar er onderin een downloadlinkje voor staat.

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 AS en tekst 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.

<top>

Mocht deze tutorial nog niet helemaal voldoen aan je verwachting, bezoek dan mijn website voor een eventuele geupdate tutorial. mvg vinTage