Wat zijn componenten?
Componenten zijn standaard objecten die veel voorkomen in applicaties. In Flash zitten een heel aantal van die standaard componenten. De belangrijkste behandel ik een voor in iedere keer dezelfde volgorde. Waarbij ik regelmatig gebruik maakt van de reference, die je meestal een heel eind opweg kan helpen. De componenten die ik ga bespreken zijn:
- radiobuttons
- checkboxes
- combobox
Radiobuttons
Dit zijn drie radiobuttons. Geef elke radio button een instancename. Er zijn verschillende parameters voor een radiobutton. Hieronder op een rijtje:
| Data | Data staat voor de code die je wil meegeven als de radiobutton is aangevinkt, dit kan wat anders zijn als het label |
| GroupName | Door radiobuttons dezelfde groupname te geven, geef je aan dat ze bij elkaar horen en zorg je ervoor dat er altijd maar 1 selected kan zijn. |
| Label | Label is de tekst die in je interface wil meegeven aan je radiobutton, in dit geval keuze 1 |
| LabelPlacement | Het label kan aan de linker en rechterkant staan van de button. |
| Selected | Moet deze standaard aangevinkt staan of niet. Letop! Ze kunnen nooit allemaal te gelijk selected zijn. |
Deze parameters kan je van te voren instellen in het menuutje van flash, maar je kan deze ook allemaal aansturen met behulp van actionscript.
Gegevens uitlezen:
De eenvoudigste manier om de status
van radiobutton uit te lezen is via een knop. Dus hier bij het script bij
de button:
btnCheck.onRelease = function() {
if (rb01.selected) {
trace("de eerste gekozen");
}
if (rb02.selected) {
trace("de tweede gekozen");
}
if (rb03.selected) {
trace("de derde gekozen");
}
}
Je kan de staat van de radiobutton opvragen met de instancename van de radiobutton punt de eigenschap selected. Deze is nu true of flase. Als deze true is wordt de if uitgevoerd en anders niet. Het is niet mogelijk om op tevragen welke van de radiogroup geselecteerd is.
Bovenstaand scriptje heb ik niet aan de knop geplakt, maar
in op de hoofdtijdlijn staan. Daarom gebruik ik de naam van de button punt
onRelease en niet gewoon
on (release){
}
zoals je dat doet bij een script onder de button.
De instancenaam van de radiobutton begint bij mij altijd met rb, waardoor je in je code kan blijven herkennen dat het hierom een radiobutton gaat, net zoals mc voor movieclip staat.
Op basis van gegevens radiobutton aansturen:
Als ik nu
deze gelezen gegevens weer wil gebruiken heb ik in het eerste scriptje
meer dan alleen een trace nodig. Hier kan ik een variabele vullen met een
waarde afhankelijk van welke er aangevinkt is. Bijvoorbeeld:
vKeus = 3;
Dan kan je op een ander scherm, als je
de radiobuttons weer wil laten zien keuze 3 automatisch weer selecteren.
Dit doe je met dezelfde code maar dan andersom:
if (vKeus == 1) {
rb01.selected = true;
}
if (vKeus == 2) {
rb02.selected = true;
}
if (vKeus == 3) {
rb03.selected = true;
}
ChangeHandler of EventListener
Soms wil je dat de radiobutton direct reageert als je de
radiobutton aanvinkt. Dan moet het formulier veranderen of er moet een
plaatje zichtbaar worden. Dit kan je ook maken met behulp van flash. Je
moet dan de radiobutton een eventListener meegeven. Dit betekent dat je
een functie koppelt aan de radiobutton die iedere keer als de radiobutton
van status veranderd wordt aangeroepen. Hieronder een voorbeeld:
oKeus = new Object();
oKeus.click = function(){
//hier zou een plaatje kunnen worden zichtbaar gemaakt!
trace ("boe");
}
rb01.addEventListener("click", oKeus);
Eerst maak je object. Deze heb je nodig om de functie aan te koppelen. Dit kan niet zomaar aan de radiobutton. Bovendien hoef je op deze manier maar een functie te schrijven die je voor alle radiobuttons kan gebruiken. Het enige wat je moet doen is aan elke radiobutton met behulp van de eventListener de functie koppelen. Deze code staat onderaan. Daar heb ik weer rb01 gebruikt. In de addEventListener functie maak ik gebruik van twee parameters, de eerste is welke event (click dus) en de tweede is over welke functie hebben we het. Hiervoor hoeven we alleen maar het object aan te roepen. Deze heb ik oKeus genoemd, waarbij de o van object is.
Dit kan ook anders, je kan net zoals aan een button ook aan een radiobutton een scripthangen. Dan schrijf je inplaats van on (release){} een on (click){} dus als volgt:
on (click){
trace ("boe");
}
Dit is veel eenvoudiger en veel sneller te snappen. Bij de combobox zijn er nog veel meer alternatieven mogelijk.
Hier nog even een voorbeeld:
checkbox
Dit zijn drie checkboxes. Geef elke checkbox een instancename. Er zijn minder parameters voor een checkbox dan voor een radiobutton, maar die er zijn komen wel overeen. Hieronder op een rijtje:
| Label | Label is de tekst die in je interface wil meegeven aan je radiobutton, in dit geval keuze 1 |
| LabelPlacement | Het label kan aan de linker en rechterkant staan van de button. |
| Selected | Moet deze standaard aangevinkt staan of niet. Letop! Ze kunnen nooit allemaal te gelijk selected zijn. |
Gegevens uitlezen:
Hier is geen verschil meer
met de radiobutton. Dit kan ook met selected. Het verschil is alleen dat
er bij radiobuttons meerdere tegelijkertijd geslecteerd kunnen zijn.
combobox
Dit is een combox of ook wel een dropdown box genoemd. Hier kan je veel meer mee dan de vorige twee onderdelen. Belangrijk is dat je deze ook goed vanuit een database kan vullen, zal ik laten zien. Hieronder eerst de parameters voor de combobox in de interface op een rijtje:
| Data | Soms wil je niet dat alle informatie zichtbaar is als label, op deze manier kan je data koppelen aan je labels die wel zichtbaar zijn, zoals bijvoorbeeld id-nummers. |
| Editable | is de tekst in de dropdownbox editable? true of false |
| Labels | Wat laat de combobox zien? |
| rowCount | Het maximaal aantal rijen dat zichtbaar is in de dropdownbox, standaard staat deze waarde op 5 . |
Gegevens uitlezen:
Gegevens uitlezen is niet
het meest lastig. Het werkt wel iets anders dan bij de radiobutton of
checkbox. Ook zal het vaker voorkomen dat je een eventListener wil
gebruiken. Maar eerst het scriptje voor onder de button:
btnCheck.onRelease = function() {
trace(ddbSprookje.selectedItem.value);
}
In plaats van .label kan je ook .data doen, op dat moment haal je de data uit de dropdownbox. Deze kan je natuurlijk opslaan in een variabele zo deze informatie op een volgend scherm gebruiken om de box al voor geselecteerd te hebben. Of de informatie op een andere manier te herbruiken. Voor het selecteren in de combobox kan je het beste ipv selectedItem de Index gebruiken:
ddbSprookje.selectedIndex = 0;
Met de index kan je opvolgorde waardes aanroepen in de combobox, als in een array.
EventListeners voor de combobox
Hier dan eerst
de eenvoudige manier: Je kan de box laten reageren op open, close, sroll,
itemRollOut, itemRollOver, enter en change. Dus wanneer je scriptje hangt
aan je dropdownbox:
on (itemRollOut){
trace("swopp");
}
En al die andere woorden ipv itemRollOut, net als bij release, press. Flash geeft ook goed hints bij het maken. Het zelfde kan ook weer met een eventlistener als in eerder voorbeeld, zodat je al je code centraal kan houden. Maar deze is meer voor de gevorderde actionscripter.
oVerander = new Object();
oVerander.change = function(){
//hier kan je iedere opdracht zetten!
trace ("boe");
}
myCombo.addEventListener("change", oVerander);
Dynamisch gegevens toevoegen
Een combobox kan je ook
dynamisch vullen. Maar eerst alleen de code die nodig is om een combobox
te vullen, waarbij het label 'kabouter' is en de data een url met meer
informatie over kabouters:
ddBLeeg.addItem( "kabouter", "www.kabouter.nl");
Stel je leest je database uit en wil alle gegevens in een combobox plaatsen. Nu moeten we een database faken door eerst die informatie in arrays te plaatsen en dat als database te gebruiken:
aData = Array("www.kabouter.nl",
"www.elf.nl",
"www.reus.nl",
"www.dwerg.nl");
aLabels = Array("kabouters, elfen, reusen, dwergen");
Daarna kan je deze array gebruiken om via een loop een dropdownbox te vullen:
for (i=0; i<aData.length; i++){
ddBLeeg.addItem( aLabels[i], aData[i]);
}
Je kan nog gevanceerder omgaan met data. Wanneer je dit
leuk vind om uit te zoeken, leer dan de dataprovider te hanteren, hiermee
kan je veel grotere hoeveel heden data verwerken in je combobox.
Help van flash
Flash heeft een uitgebreide help, hier heb ik al vaak op gewezen, wanneer je een component gebruikt kan je als je properties van een component bekijkt in het property-window, een vraagteken in een cirkel klikken, deze verwijst je meteen door naar de relevante help onderwerpen in de help. Zie onderstaand voorbeeld:
