Display forslag i en Textfield bruker AS3 og eksterne filer
to
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Forslag Vilkår I denne opplæringen, vi vil lære å lage og vise slått vilkår i en Flash-applikasjonen Vi vil gjøre bruk av tekstfeltet og String metoder og egenskaper for å hente og vise ord fra en ekstern fil som inneholder de søkeforslag Launch Flash og opprette et nytt dokument. Satt scenen størrelse 500x270px, bakgrunnsfarge til # F6F6F6 og bildefrekvensen til 24fps Dette er grensesnittet vi skal bruke, en enkel bakgrunn med en tittellinje og en to textfields, en statisk Textfield fortelle oss hva vi skal gjøre, og en inngang Textfield som vi skal bruke til å begynne å foreslå. Ingen knapper denne gangen, vil hendelsene bli kalt ved å trykke på en tast Du kan la bakgrunnsfargen som den er, eller legge 500x270px rektangel for å ha noe du kan velge. For tittellinjen, bruker igjen rektangel Tool (R) for å lage en 500x30px rektangel og sentrer det Velg tekst Tool (T) og skrive en tittel for din søknad. Jeg brukte dette formatet. Lucida Grande Regular, 15pt, #EEEEEE Vi vil bruke et rektangel form for å vise hvor tekstfeltet er Med rektangelverktøyet, skape en 300x24px rektangel og fjern fyll, i stedet bruke en #CCCCCC slag Til slutt, bruke tekstverktøyet til å opprette en 345x20px innspill Textfield og gi den navnet inputField For å vise skriften riktig i Input Text vi må legge det Velg Input Textfield og gå til Egenskaper panel Et nytt vindu vil komme opp, velg tegnene du vil legge inn, og klikk OK Opprett en ny (Cmd + N) Actionscript 3.0 Class og lagre det som Main.as Pakken søkeord lar deg organisere koden din inn i grupper som kan importeres av andre scripts, det anbefales å navngi dem starter med en liten bokstav og bruke intercaps for påfølgende ord for eksempel: myClasses. Det er også vanlig å nevne dem ved hjelp av selskapets hjemmeside:. Com.mycompany.classesType.myClass I dette eksempelet bruker vi en enkelt klasse, så det er egentlig ikke et behov for å skape et klasser mappe . Dette er de klassene vi trenger å importere for klassen vår skal fungere, import Her kan vi erklære klassen hjelp av klassedefinisjon søkeord fulgt av navn som vi ønsker for klassen, husk at du må lagre filen ved hjelp av dette navnet. Den strekker søkeord definerer en klasse som er en underklasse av en annen klasse. Underklasse arver alle metoder, egenskaper og funksjoner, på den måten vi kan bruke dem i klassen vår Dette er de variablene vi vil bruke, lese kommentarene i koden for å finne ut mer om dem Konstruktøren er en funksjon som kjøres når et objekt er opprettet fra en klasse, er denne koden den første til å kjøre når du gjør en forekomst av et objekt eller kjører ved hjelp av Document Class. Vilkårene for å foreslå vil bli lagret i en ekstern tekstfil, kan du også bruke XML, PHP eller formatet du ønsker Skriv vilkårene du vil foreslå (atskilt med komma ","), og lagre filen i samme katalog som swf, i dette tilfellet brukte jeg en liste med sports- og lagret dem i filen . Sports.txt Denne linjen kaller belastningen metoden i URLLoader klassen og passerer som parameter url av txt-fil vi er bruker To innledende lyttere; man lytter etter belastningen av den eksterne filen og andre lytter etter nøkkelen opp hendelser i Input Textfield Angir tekstformat som brukes i de forslag textfields Følgende funksjon er utført når ytre belastning er fullført, skaper det en matrise som inneholder kommaseparert strenger i txt-fil Den foreslår funksjonen håndterer alle operasjoner for å skape og vise forslag, kjøres når Input Textfield oppdager et Mouse_UP hendelse Det første du må gjøre er å fjerne den foreslåtte array, dette sletter de tidligere forslag (hvis noen) Det neste for looper gjennom de tilgjengelige forslag og bruker en if setning og den indexOf metode for å søke etter start bokstavene i noen av de tilgjengelige ordene Siden alle ordene i eksempelet tekstfil er med små bokstaver, kan vi kalle toLowerCase () på inngangs tekst for å tillate case-insensitive søk. Dette betyr at hvis brukeren skriver "SKI" det vil finne "ski" Dersom skriftlig brev (e) er funnet, en ny . Textfield er skapt for tilsvarende ord, siden vi er fortsatt i for, hvis mer enn ett forslag som begynner på samme bokstav (e), så mange textfields vil bli opprettet Hvis brukeren sletter bokstavene i inntastingsfeltet, forslagene blir fjernet Den neste kode tillater brukeren å gå gjennom forslagene bruke tastaturet Det endrer fargen på det valgte ordet, legger til eller fjerner et nummer til currentSelection variabel til å bruke det senere i textfields array, på denne måten hentes den riktige element fra forslagene. Når enter-tasten trykkes, utvalget er skrevet i tekstfeltet og forslagene blir fjernet Denne funksjonen brukes også til å velge forslag, selv om dette er lettere på grunn av muligheten til å legge hendelsen lyttere til de textfields. Lytterne ble lagt i foreslår () -funksjonen i trinn 23, husker Gå tilbake til FLA og i Egenskaper Panel > Publish seksjon > Klasse felt Du er ferdig å lage og implementere en foreslått vilkår klasse, er det på tide å lage din egen og tilpasse den! Hvorfor ikke Takk for at du leser denne opplæringen, jeg håper du har funnet det nyttig! Prøve å bruke PHP for å redde de vilkår som brukerne kommer inn på listen over foreslåtte vilkår? Anmeldelser
er en utmerket brukervennlighet element som hjelper brukeren velge et bedre alternativ, eller bare øke søkehastigheten.
Trinn 1:. Oversikt
Trinn 2:. Dokumentinnstillinger
Trinn 3:. Interface
Trinn 4:. Bakgrunn
Trinn 5: Tittel.
Trinn 6: Tekst Område
Trinn 7..: Input Textfield
Dette er formatet jeg brukte:.. Helvetica Bold, 16pt, # 666666
< p>
Trinn 8:. Font Embedding
, Tegn
seksjonen og trykk Embed ...
knappen.
Trinn 9:. New Action Class
i klassen din mappe
Trinn 10:. Package
pakken {
Trinn 11: Import direktiv
direktivet gjør eksternt den definerte klasser og pakker tilgjengelig i koden
import flash.display.Sprite;. import flash.net.URLLoader, importere flash.net.URLRequest, importere flash.events.Event, importere flash.ui.Keyboard, importere flash. events.KeyboardEvent, import flash.text.TextField, import flash.events.MouseEvent, import flash.text.TextFormat;
Trinn 12: Erklærer og Forleng Class
public class Hoved strekker Sprite {
Trinn 13:. Variabler
privat Var URLLoader: URLLoader = new URLLoader (); //Brukes til å laste de eksterne fileprivate Var forslag:. Array = new Array (); //Forslagene i tekstfilen skal lagres hereprivate Var foreslo: Array = new Array (); //Dagens suggestionsprivate Var textfields: Array = new Array (); //En tekstfeltet som skal brukes til å vise den foreslåtte termprivate Var format: tekstformat = new tekstformat (); //The forslag tekst formatprivate Var currentSelection: int = 1; //vil håndtere den valgte forslag for å skrive det i hovedtekstfeltet
Trinn 14: Constructor
offentlig funksjon Hoved ( ): void {
Trinn 15:. Eksterne filinnholdet
Trinn 16: Legg ekstern fil
urlLoader.load (ny URLRequest ("Sports.txt"));
Trinn 17:. Innledende lyttere
urlLoader.addEventListener (Event.COMPLETE, loadComplete);. inputField.addEventListener (KeyboardEvent.KEY_UP, foreslår);
< h2> Trinn 18: Forslag Text Format
format.font = "Helvetica"; format.size = 12; format.bold = true;
.
Trinn 19:. Lastet data
privat funksjon loadComplete (e: hendelse): void {forslag = e.target.data.split (","); //Splitt metoden skiller ordene bruke som skilletegn på ","}
Trinn 20: Foreslå Funksjon
privat funksjon foreslår (e: KeyboardEvent):. void {
Trinn 21: Tilbake
foreslo = [];
Trinn 22:. Søk Tilgjengelige data
for (var j: int = 0; j < suggestions.length; j ++). {if (forslag [j] .indexOf (inputField.text .toLowerCase ()) == 0) //indexOf returnerer 0 hvis brevet er funnet {
Trinn 23:. Lag Forslag textfields
Var sikt: Textfield = new Textfield (); term.width = 100; term.height = 20; term.x = 75; term.y = (20 * suggested.length) + 88; //Posisjoner tekstfeltet under siste term.border = true; /* Her bruker vi grensen eiendommen term.borderColor = 0x353535; å skille de textfields * /term.background = true; term.backgroundColor = 0x282828; term.textColor = 0xEEEEEE; term.defaultTextFormat = format; //Sett tidligere opprettet format //Muse Lyttere term.addEventListener (MouseEvent.MOUSE_UP, useWord); term.addEventListener (MouseEvent.MOUSE_OVER, hover); term.addEventListener (MouseEvent.MOUSE_OUT, ut); addChild (term); textfields.push (term); //Legger tekstfeltet til textfields rekke suggested.push (forslag [j]); term.text = forslag [J]; //Setter funnet forslag i tekstfeltet}}
Trinn 24:. Clear textfields
if (inputField .length == 0) //inntastingsfeltet er tomt {foreslo = []; //klare arrays for (var k: int = 0; k < textfields.length; k ++) {removeChild (textfields [k]); //fjerne textfields} textfields = [];}
Trinn 25:. Keyboard Kontroll
if (e.keyCode == Keyboard.DOWN & & currentSelection < textfields.length-1). {currentSelection ++; textfields [currentSelection] .textColor = 0xFFCC00; } If (e.keyCode == Keyboard.UP & & currentSelection > 0) {currentSelection--; textfields [currentSelection] .textColor = 0xFFCC00; } If (e.keyCode == Keyboard.ENTER) {inputField.text = textfields [currentSelection] .text; foreslo = []; for (var l: int = 0; l < textfields.length; l ++) {removeChild (textfields [l]); } Textfields = []; currentSelection = 0; }}
Trinn 26: Mouse kontroll
privat funksjon useWord (e: MouseEvent): void {inputField.text = e.target.text; foreslo = []; for (var i: int = 0, jeg < textfields.length; i ++) {removeChild (textfields [i]); } Textfields = [];} private funksjon hover (e: MouseEvent): void {e.target.textColor = 0xFFCC00;} private funksjon ut (e: MouseEvent): void {e.target.textColor = 0xEEEEEE;}
Trinn 27: Dokument Class
, legge Hoved
som verdi. Dette vil koble denne klassen som dokument Class.
Konklusjon