Share
Foreslåtte vilkår er et utmerket brukselement som hjelper brukeren til å velge et bedre alternativ eller bare øke søkehastigheten.
I denne veiledningen vil vi lære å lage og vise foreslåtte vilkår i et Flash-program.
Vi vil bruke tekstfiltre og strengmetoder og egenskaper for å hente og vise ord fra en ekstern fil som inneholder søkeforslagene.
Start Flash og opprett et nytt dokument. Still scenestørrelsen til 500x270px, bakgrunnsfargen til # F6F6F6 og bildefrekvensen til 24fps.
Dette er grensesnittet vi skal bruke, en enkel bakgrunn med en tittellinje og to TextFields, en Static TextField som forteller oss hva du skal gjøre og en Input TextField som vi skal bruke for å begynne å foreslå.
Ingen knapper denne gangen, hendelsene vil bli kalt ved å trykke på en tast.
Du kan legge bakgrunnsfargen som den er, eller legge til 500x270px rektangel for å ha noe du kan velge. For tittellinjen, bruk rektangulærverktøyet (R) igjen for å lage et 500x30px rektangel og senter det.
Velg tekstverktøyet (T) og skriv en tittel for søknaden din. Jeg brukte dette formatet: Lucida Grande Regular, 15pt, #EEEEEE.
Vi bruker en rektangulær form for å vise hvor TextField er.
Med rektangelverktøyet, opprett et rektangel på 300x24px og fjern fyllingen, bruk i stedet et #CCCCCC-slag.
Til slutt, bruk tekstverktøyet til å lage en 345x20px Input TextField og gi den navnet inputField.Dette er formatet jeg brukte: Helvetica Bold, 16pt, # 666666.
For å vise skrifttypen riktig i Input Text må vi legge det inn.
Velg Input TextField og gå til Egenskaper panel, Karakter delen og trykk på Bygg inn ... knapp.
Et nytt vindu kommer opp, velg tegnene du vil legge inn, og klikk OK.
Opprett en ny (Cmd + N) ActionScript 3.0-klasse og lagre den som Main.as i klassemappen din.
Pakkeordet gir deg mulighet til å organisere koden din i grupper som kan importeres av andre skript. Det anbefales å nevne dem med en liten bokstav og bruk sammenkoblinger for etterfølgende ord, for eksempel: timene mine. Det er også vanlig å navngi dem ved å bruke bedriftens nettsted: com.mycompany.classesType.myClass.
I dette eksemplet bruker vi en enkelt klasse, så det er egentlig ikke et behov for å lage en klassemappe.
pakke
Dette er klassene vi må importere for vår klasse for å jobbe, importere Direktivet gir eksternt definerte klasser og pakker tilgjengelig for koden din.
importer flash.display.Sprite; importer flash.net.URLLoader; importere flash.net.URLRequest; importere flash.events.Event; importere flash.ui.Keyboard; importer flash.events.KeyboardEvent; importer flash.text.TextField; importer flash.events.MouseEvent; importer flash.text.TextFormat;
Her erklærer vi klassen ved hjelp av klasse definisjon søkeord etterfulgt av navnet vi ønsker for klassen, husk at du må lagre filen ved hjelp av dette navnet.
De strekker Søkeord definerer en klasse som er en underklasse av en annen klasse. Underklassen arver alle metodene, egenskapene og funksjonene, slik at vi kan bruke dem i vår klasse.
offentlig klasse Main utvider Sprite
Dette er variablene vi skal bruke, les kommentarene i koden for å finne ut mer om dem.
private var urlLader: URLLoader = ny URLLoader (); // Brukes til å laste inn den eksterne filen private varforslag: Array = new Array (); // Forslagene i tekstfilen blir lagret her private var foreslått: Array = new Array (); // De nåværende forslagene private var tekstfelter: Array = new Array (); // Et tekstfelt som skal brukes til å vise den foreslåtte termen private var-format: TextFormat = nytt TextFormat (); // Forslaget tekstformat privat var currentSelection: int = -1; // Vil håndtere det valgte forslaget for å skrive det i hovedfeltet
Konstruktøren er en funksjon som kjører når et objekt er opprettet fra en klasse, denne koden er den første som skal utføres når du lager en forekomst av et objekt eller kjører ved hjelp av dokumentklassen.
offentlig funksjon Main (): void
Vilkårene som foreslås, blir lagret i en ekstern tekstfil, du kan også bruke XML, PHP eller formatet du ønsker.
Skriv vilkårene du vil foreslå (adskilt av kommaer ",") og lagre filen i samme katalog som din swf, i dette tilfellet brukte jeg en liste over sport og lagret dem i filen Sports.txt.
Denne linjen kaller lastmetoden til URLLoader-klassen og overfører som parameteren URL-adressen til txt-filen vi bruker.
Accentsconagua
urlLoader.load (ny URLRequest ("Sports.txt")); To første lyttere; en lytter etter lasten til den eksterne filen og andre lytter til tastaturhendelser i Input TextField.
urlLader.addEventListener (Event.COMPLETE, loadComplete); inputField.addEventListener (KeyboardEvent.KEY_UP, foreslå);
Angir tekstformatet som brukes i tekstfeltene for forslag.
format.font = "Helvetica"; format.size = 12; format.bold = true;
Følgende funksjon utføres når den eksterne belastningen er fullført, den lager en matrise som inneholder de kommaseparerte strengene i txt-filen.
privat funksjon loadComplete (e: Event): void suggestions = e.target.data.split (","); // Split-metoden skiller ordene som bruker som avgrensare "," Den foreslåtte funksjonen håndterer alle operasjonene for å opprette og vise forslagene, utføres når Input TextField oppdager en Mouse_UP-hendelse.
privat funksjon foreslå (e: KeyboardEvent): void
Det første du må gjøre er å fjerne den foreslåtte gruppen, dette vil slette de forrige forslagene (hvis noen).
foreslått = [];
Den neste til sløyfer gjennom de tilgjengelige forslagene og bruker en hvis uttalelse og oversikt over metode for å søke etter startordene til noen av de tilgjengelige ordene.
for (var j: int = 0; j < suggestions.length; j++) if (suggestions[j].indexOf(inputField.text.toLowerCase()) == 0)//indexOf returns 0 if the letter is found
Siden alle ordene i eksempeltekstfilen er i små bokstaver, kan vi ringe toLowerCase () på inntastingsteksten for å tillate usikre søk. Dette betyr at hvis brukeren skriver "SKI", vil den finne "ski".
Hvis det skrevne brevet er funnet, opprettes et nytt TextField for det tilsvarende ordet, siden vi fortsatt er i til, Hvis flere enn ett forslag starter med samme bokstav (e), vil mange TextFields bli opprettet.
var term: TextField = ny TextField (); term.width = 100; term.height = 20; term.x = 75; term.y = (20 * suggested.length) + 88; // Posisjonerer tekstfeltet under den siste ene term.border = true; / * Her bruker vi grenseegenskapen term.borderColor = 0x353535; å skille tekstfeltene * / term.background = true; term.backgroundColor = 0x282828; term.textColor = 0xEEEEEE; term.defaultTextFormat = format; // Sett det tidligere opprettede formatet // Mouse Lyttere term.addEventListener (MouseEvent.MOUSE_UP, useWord); term.addEventListener (MouseEvent.MOUSE_OVER, svever); term.addEventListener (MouseEvent.MOUSE_OUT, ut); addChild (term); textfields.push (term); // Legger til tekstfeltet i tekstfeltet array suggested.push (forslag [j]); term.text = forslag [j]; // Setter det funnet forslaget i tekstfeltet
Hvis brukeren sletter bokstavene i Inngangsfeltet, blir forslagene fjernet.
hvis (inputField.length == 0) // inntastingsfeltet er tomt suggested = []; // klare arrays for (var k: int = 0; k < textfields.length; k++) removeChild(textfields[k]); //remove textfields textfields = [];
Den neste koden tillater brukeren å bevege seg gjennom forslagene ved hjelp av tastaturet.
Det endrer fargen på det valgte ordet, legger til eller fjerner et tall til currentSelection variabel for å bruke den senere i tekstfeltet, slik at den henter det riktige elementet fra forslagene.
Når Enter-tasten trykkes, blir valget skrevet i Inngangsfeltet, og forslagene blir fjernet.
hvis (e.keyCode == Keyboard.DOWN && currentSelection < textfields.length-1) currentSelection++; textfields[currentSelection].textColor = 0xFFCC00; if(e.keyCode == Keyboard.UP && currentSelection > 0) currentSelection--; tekstfelter [currentSelection] .textColor = 0xFFCC00; hvis (e.keyCode == Keyboard.ENTER) inputField.text = textfields [currentSelection] .text; foreslått = []; for (var l: int = 0; l < textfields.length; l++) removeChild(textfields[l]); textfields = []; currentSelection = 0;
Denne funksjonen brukes også til å velge forslaget, selv om dette er lettere på grunn av muligheten til å legge til hendelseslyttere i TextFields. Lytterne ble lagt til i foreslå ()fungere i trinn 23, husk?
privat funksjon useWord (e: MouseEvent): void inputField.text = e.target.text; foreslått = []; for (var jeg: int = 0; i < textfields.length; i++) removeChild(textfields[i]); textfields = []; private function hover(e:MouseEvent):void e.target.textColor = 0xFFCC00; private function out(e:MouseEvent):void e.target.textColor = 0xEEEEEE;
Gå tilbake til FLA og i Egenskaper Panel> Publiser seksjon> Klassefelt, Legg til Hoved som verdi. Dette vil lenke denne klassen som dokumentklassen.
Du er ferdig med å lage og implementere en foreslått vilkår klasse, det er på tide å lage din egen og tilpasse den! Hvorfor ikke prøve å bruke PHP for å lagre vilkårene som brukerne skriver inn i listen over foreslåtte vilkår?
Takk for at du har lest denne opplæringen, håper jeg du har funnet det nyttig!
