| Tekst
Naast de objecten die men kan tekenen, is tekst ook een element dat men binnen flash kan maken. Tekst wordt gemaakt door een tekstveld op het werkgebied te plaatsen. Dit kan daarna gevuld worden. Er zijn drie soorten tekst: statische tekst, invoer tekst en dynamische tekst.
Elk lettertype is te gebruiken: embedding Embedding heeft ook een nadeel: bij kleine tekst worden "rafelrandjes" zichtbaar, de tekst is niet scherp, en afhankelijk van het lettertype, kan de tekst zelfs onleesbaar worden. Hier moet dus rekening mee worden gehouden. Wanneer men een lettertype gebruikt dat heel algemeen is (Arial, Helvetica, Times, Verdana en dergelijke), dan is het niet nodig de tekst te embedden, omdat iedere gebruiker toch het lettertype zelf heeft. Het uitklapmenu Anti-aliasing biedt mogelijkheden voor elke van deze situaties. Verschillen in de types tekstvelden
Statische tekst Dit is de meest simpele vorm van tekst gebruiken. Selecteer de teksttool, klik op
het werkgebied, en type de tekst. Een statisch tekstveld kan twee verschillende gedragingen vertonen tijdens het vullen:
Een tekstveld kan echter ook een vierkantje hebben als ankerpunt rechtsboven. Dit betekent dat het tekstveld een vaste breedte heeft, en dat de tekst automatisch terug zal lopen (op een nieuwe regel begint) als de rechtermarge wordt bereikt. Een meegroeiend tekstveld kan omgezet worden in een tekstveld met vaste breedte, door aan het ankerpunt te slepen en daarmee de gewenste breedte in te stellen. Het ankerpunt wordt daarmee een vierkantje. Andersom kan een tekstveld omgezet worden naar een meegroeiend tekstveld, door te dubbelklikken op het ankerpunt rechtsboven. Alle tekst die zich in het tekstveld bevindt, zal op een enkele regel worden geplaatst.
In bovenstaande afbeelding zijn de eigenschappen te zien die men voor statische tekst kan aangeven. Enkele aandachtspunten:
Opties : Koppelen Voor de in het tekstveld geselecteerde tekst kan hier een link worden aangegeven. Onderstreping van de link is echter niet mogelijk. Het is wel mogelijk de tekst een andere kleur te geven, maar die zal niet veranderen op het moment dat de link bezocht is. Om goede links te maken in tekstvelden die reageren op gebruikers-input, moet een dynamisch tekstveld worden gebruikt, en met behulp van HTML en CSS interactiviteit ingebouwd worden. Alinea Hier zijn instellingen voor de alinea te maken. Anti-alias instellingen Anti-alias zorgt voor zachte randen. In onderstaande afbeelding is de letter A twee maal in een tekstveld geplaats. Het linker tekstveld heeft de instelling "Apparaatlettertypen gebruiken" (use device font) meegekregen (geen anti-aliasing). Het tweede tekstveld heeft de instelling "anti-alias for readability" gekregen. De letter heeft zachte randen, en ziet er daardoor beter uit.
Wanneer we de afbeelding vergroten, zien we hoe dit effect bereikt wordt:
De volgende instellingen zijn beschikbaar: Hierbij wordt het lettertype van de bezoeker gebruikt. Het font wordt niet embedded (dwz het font wordt niet opgeslagen in het flash bestand). Er wordt geen anti-aliasing toegepast. Wanneer het font niet aanwezig is op de computer van de bezoeker, zal een vervangend font door flash worden gekozen. Apparaatlettertypen zijn goed om te gebruiken voor leestekst in lettertypes die heel algemeen zijn, en daarom iedereen zal hebben op z'n computer. Apparaatlettertypen zien er goed uit en zijn goed leesbaar op kleine formaten, van ongeveer 8 tot 12 pixels groot. Op groter formaat gaat de tekst er kartelig uitzien. De maten zijn bij benadering en kunnen verschillen bij gebruik van diverse fonts. Fonts die op alle Windows computers geinstalleert zijn: Fonts voor Mac: Bitmap tekst Anti-alias voor animatie Anti-alias voor leesbaarheid Aangepaste anti-aliasing (Custom anti-alias)
Dynamische Tekst Een dynamisch tekstveld wordt gebruikt wanneer de tekst niet onveranderbaar aanwezig is op het moment dat het flash bestand wordt gemaakt. De tekst van een dynamisch tekstveld kan geplaatst worden, ingeladen worden of veranderd terwijl het bestand bekeken wordt door de bezoeker. Dit kan door acties van de bezoeker, bv de cursor wordt boven een object gebracht, deze actie wordt opgepikt, en de tekst wordt in het tekstveld gezet. Maar het kan ook ingeprogrammeerd zijn, b.v een tekst kan geladen worden uit een tekstbestand dat zich op de server bevindt, of geladen worden uit een database met behulp van een programeertaal die door flash aangeroepen wordt. Het Eigenschappen palet ziet er iets anders uit wanneer er een dynamisch tekstveld is geselecteerd: Bijzonderheden De belangrijkste eigenschap van een textveld is b.v "text". Wanneer de instantienaam van een tekstveld "intro" is, dan kan een tekst in het veld worden geplaatst. Actionscript 2 code: intro.text = "deze tekst komt in het tekstveld"; Er zijn nog enkele opties actief die bij een statisch tekstveld niet actief zijn: Gedrag Hier moet gekozen worden voor een tekstveld van een enkele regel, of een die meerdere regels kan bevatten
Actionscript 2 code: intro.htmlText = "deze tekst komt in het tekstveld en <i>dit</i> is cursief ";
Variable In Flash 5 en eerder bestond er nog geen instantienaam. Toen was het mogelijk om door middel van een variabele een bepaalde tekst in het tekstveld te plaatsen. Zo kon je bijvoorbeeld in dit veld "myVar" invullen, en dan ergens in een frame of een
knop actie de variabele een waarde geven: myVar = "deze tekst moet weergegeven worden"; Deze optie is enkel beschikbaar voor bestanden die werken met Actionscript versie 1 of 2.
Invoer tekst Het derde soort van tekstveld is Invoer tekst. Het werkt grotendeels hetzelfde als Dynamische
tekst, behalve dat de gebruiker hier zelf tekst kan invullen. Bij selectie van een Invoer-tekst tekstveld zien we de volgende
eigenschappen: De verschillen zitten aan de onderzijde van het palet: Actionscript 2 code: intro.password = true; Op dit moment worden enkel sterretjes (*) vertoond wanneer iets wordt ingevuld. Andere zaken die van belang kunnen zijn, zijn bijvoorbeeld de tab-volgorde van de velden, aangezien mensen bij formulieren gewend zijn om met de Tab-toets naar een volgend veld te gaan. Dit kan met de eigenschappen tabEnabled en tabIndex. Met de eerste kan worden aangegeven of het tekstveld gevoelig is voor selectie door de tab-toets. Standaard staat dit aan. Als waarden kunnen true of false worden opgegeven. Vervolgens kan met de tabIndex de volgorde worden opgegeven. tabIndex krijgt een nummer als waarde. intro.tabEnabled = true; Een tekstveld kan ook nog reageren op twee gebeurtenissen (events genoemd): het veranderen van de inhoud, en het scrollen. Deze gebeurtenissen kunnen worden opgevangen door functies die een bepaalde handeling uitvoeren wanneer de actie optreedt (even handlers). Deze event handlers zijn onChanged and onScroller.
Actionscript 2 code: intro.onChanged = function() { De waarden van invoer tekstvelden kunnen verzameld worden in het LoadVars object (verderop behandeld) en zo verstuurd worden naar de server, en daar verder verwerkt worden.
Tekst componenten Er bestaan ook componenten (in Flash ingebouwde movieclips die over een bepaalde functionaliteit beschikken) die speciaal voor tekst zijn gemaakt. Wanneer componenten worden gebruikt, is bovenin het Eigenschappen palet een knopje aanwezig om het palet "Deelvenster Componentencontrole" te openen, waar instellingen te vinden zijn voor de betreffende component. De scrollbar Een dynamisch tekstveld ontvangt de tekst van een bron buiten het tekstveld. De omvang van de tekst is daarom dikwijls niet bekend. Een scrollbar kan dan uitkomst bieden, en de tekst vertonen die anders onzichtbaar zou worden. (wanneer een tekst niet past, kan deze nog bereikt worden door de tekst te selecteren en dan naar onderen te slepen, maar dit is natuurlijk niet erg gebruiksvriendelijk of intuïtief. Wel kan het handig zijn tijdens de ontwikkeling, om te kijken of er soms nog tekst verborgen is) De scrollbar is te vinden in het Componenten palet (Venster> Componenten), in de categorie "User Interface". Vandaaruit kan de Scrollbar op het tekstveld worden gesleept. De scrollbar zal zich automatisch hechten aan het tekstveld. Misschien aan de linkerzijde of de bovenkant, in dat geval moet de scrollbar weer versleept worden, en iets meer aan de gewenste zijde worden losgelaten. Daarna kan, met de scrollbar geselecteerd, via het Eigenschappen palet het palet Componentencontrole worden geopend. Een scrollbar heeft een aantal parameters (eigenschappen): _targetInstanceName is belangrijk. Dit geeft het tekstveld aan dat bestuurd wordt door de scrollbar. De rest van de eigenschappen spreekt voor zich.
Standaard zal de Instantienaam meteen al als _targetInstanceName aan de scrollbar worden toegevoegd. Na verslepen of veranderen van het tekstveld kan deze koppeling echter wel eens verbroken worden. Dan kan met de hand de juiste Instantienaam weer worden ingevuld. Dit is een component waarin een tekstveld en een scrollbar zijn gecombineerd. De gebruiker kan ook worden toegestaan tekst in te voeren, waardoor het gebruikt kan worden als invoerveld in een formulier. De code om een tekst in de component te vertonen, is identiek aan de wijze waarop dat met Dynamische tekstvelden wordt gedaan. De textarea heeft een aantal ingebouwde eigenschappen die extra functionaliteit bieden, zoals "maxChars", om het aantal karakters in een tekstveld te beperken tot een bepaald maximum, of "restrict", om aan te geven welke karakters kunnen worden gebruikt. Een uitgebreide handleiding en een overzicht van alle mogelijkheden is te vinden in de Help (F1 toets), onder Components Language Reference > Textarea component. Wanneer men een website bouwt in Flash, zal ook daar dikwijls een formulier in moeten worden gebruikt. Er zijn een aantal componenten die dat mogelijk maken. Er zijn een radio en een checkbox component, een textinput component, een button component, en een ComboBox (om een uitklap menu te maken.) Radiobutton Wanneer men een radiobutton op het werkgebied sleept, is het volgende in het palet Componentencontrole te zien onder de tab Parameters:
De eigenschap "value" correspondeert met de html eigenschap "value".
Dit is de informatie die aan de naam van de radiobutton wordt gekoppeld,
en samen wordt verstuurd als de radiobutton geselecteerd is. De "name" eigenschap van html is hier de naam van de instance, "groupName" is de naam van de groep waarvan de button deel uitmaakt, en waarvan er slechts een kan worden geselecteerd. Het "label" geeft aan welke tekst er achter de radiobutton staat. Dan is er nog "labelPlacement", waarmee bepaald kan worden aan welke kant van de radiobutton de tekst staat. Tenslotte "selected", om aan te geven of de button
al bij voorbaat geselecteerd is. Checkbox De checkbox component werkt ongeveer hetzelfde. Deze heeft echter enkel de eigenschappen "label", "labelPlacement" en "selected". Textinput De textinput component werkt ongeveer hetzelfde als een gewoon invoer tekstveld, dat ook in een formulier gebruikt kan worden. De textinput component heeft daarnaast een aantal extra eigenschappen die gebruikt kunnen worden, net zoals de TextArea component. ComboBox Met de Combobox kan een uitklapmenu gemaakt worden. De belangrijkste parameters die zijn te vinden, zijn "labels" en "data". De labels zijn te zien als de ComboBox openklapt, de data zijn weer de waarden die ermee verbonden zijn. De ComboBox heeft vele parameters, en kan ook dynamisch gevuld worden met data uit bijvoorbeeld een database. De ComboBox kent een veel breder gebruik dan enkel in formulieren, en wordt vaak gebruikt in rich media applicaties. Ze kan overal worden toegepast waar een gebruiker een keuze moet maken uit een aantal mogelijkheden. Button Een knop die gebruikt kan worden om de data uit het formulier te verzenden. Hier kan ook een zelfgemaakte knop voor gebruikt worden. De Button component zorgt slechts voor een uiterlijk dat bij de rest van de elementen past, en biedt verdere nog de optie "toggle". Het uiterlijk van de button heeft dan twee verschillende varianten die afgewisseld worden, elke keer als er op de knop geklikt wordt. Natuurlijk kan dan ook het label van de knop veranderd worden, zoals "start" en "stop" op een knop die geluid aan- en uitzet. Alle componenten beschikken over manieren om de waarde of de staat (bijvoorbeeld of de radiobutton geselecteert is) op te halen. Bij een checkbox is dit bijvoorbeeld de eigenschap "selected". Bij een combobox "selectedItem.data". Deze waarden dienen dan toegewezen te worden aan variabelen. Vervolgens moet deze data verstuurd worden naar een script dat het verwerkt. Dit kunnen standaard formulierscripts zijn die de internet-provider beschikbaar stelt, of zelfgemaakte scripts, bv in PHP of ASP gemaakt. Om data te versturen naar externe applicaties, of om data te ontvangen, zijn in Flash verschillende mogelijkheden, die hieronder kort behandeld worden. Let op: alle voorbeelden gaan uit van Actionscript 2.0
Geavanceerde mogelijkheden Het gebruik van dynamische tekst in Flash is veelzijdig, er zou bijna een hele cursus met gevuld kunnen worden. We willen hier wel een paar dingen kort aanstippen, waarvan sommige bij de demo's behandeld worden, en andere die het waard zijn eventueel verder te verkennen:
Tekst inladen Tekst via een variabele in het tekstveld plaatsen is goed mogelijk als het om een enkel zinnetje, of een kort fragment gaat. Daarna wordt het onhandig, en weinig flexibel. Wanneer de tekst zich buiten Flash bevindt, is het makkelijker om aan te passen. loadVariables myvar=dit is tekst die geladen wordt Om de tekst te laden, wordt in een frame of op een knop de volgende ActionScript geplaats: loadVariables("externetekst.txt",_level0); De variabele "myvar" zal nu in de hoofdtijdlijn (_level0) te vinden zijn, en kan dan in een dynamisch tekstveld worden geplaatst: intro.text = myvar;
LoadVars Om hetzelfde tekstbestand in te laden, en de tekst te plaatsen in ons tekstveld " intro", kan het volgende gedaan worden: myLV = new LoadVars(); Eerst wordt een nieuw LoadVars object gemaakt. De code daarna geeft aan wat er gebeurt op het moment dat het laden klaar is. Deze actie "onLoad" wordt op dat moment automatisch uitgevoerd. De laatste regel regelt het inladen van het tekstbestand. Het LoadVars object heeft ook een methode "sendAndLoad". Hierbij worden
variabelen naar een bestand gestuurd, en kan dit bestand weer andere
variabelen terugsturen, in de vorm van b.v een antwoord op het insturen
van gegevens uit een mailformulier. De teruggestuurde variabelen worden
dan opgevangen in een tweede LoadVars object. XML n.b Het gebruik van XML is in Actionscript 3 een stuk verbeterd en overzichtelijker geworden.
Tekst(-velden) opmaken We hebben hier al HTML gezien, waarmee tekst een beetje kan worden opgemaakt, en ook hyperlinks in tekstvelden kunnen worden geplaatst. Ook afbeeldingen zijn op deze wijze in een tekstveld te plaatsen, hoewel in het gebruik daarvan wel enkele bugs zitten. Andere manieren zijn CSS en een interne Flash-manier, TextFormat. Maar ook het tekstveld zelf is een aparte class binnen Flash, met een groot aantal methodes en eigenschappen. De TextField Class intro.html = true; "True" is een "Boolian". Dit zijn eigenschappen met maar twee waarden: true of false. Iets is waar of niet waar. Op deze manier kan bijvoorbeeld ook de achtergrond worden ingesteld, en kan deze een kleur worden gegeven: intro.backgroundColor = 0xFF0000; Dit zal het tekstveld een rode kleur geven. (Kleuren worden in hexadecimale waarden opgegeven. Deze bestaan uit zes karakters voor de kleuren. Je kunt de codes voor de kleuren oppikken uit de kleurkiezer binnen Flash. Als je een kleur kiest, dan staat altijd de hexadecimale waarde er ergens in een veld bij. Die kun je copieren en daarna plakken. Je moet dan in de Actionscript code wel "0x" voor die code plaatsen, dan weet Flash dat het om een kleur gaat.) intro.border = true; Laten we eens kijken naar een eigenschap die niet in het Eigenschappen palet palet is te vinden: "length". intro.length; De "length" eigenschap geeft je het aantal tekens in een tekstveld.
Kijk verder in de Help voor meer eigenschappen van tekstvelden: Toets F1 om het helpscherm te openen. Kies dan: TextFormat Class var myformat:TextFormat = new TextFormat(); In de eerste regel wordt het TextFormat object gemaakt. In de tweede krijgt het een eigenschap, in dit geval het lettertype. In de derde regel wordt het aan het tekstveld gekoppeld. De TextFormat class heeft verder eigenschappen voor kleur, grootte, uitlijning, mages, inspringen, kerning, en meer. CSS var my_styles = new StyleSheet();
©Dreambits |