Share
I denne Quick Tip på Flash Professional CS5-verktøyene skal vi se på tekstområdet og og tekstinngangskomponentene.
La oss ta en rask titt på hva vi jobber med i denne raske tipsen:
I demoen ser du fem etiketter, fire av dem er bare statiske etiketter som beskriver hva komponentene er for. Den nederste venstre etiketten viser hvor mange tegn som er tilgjengelige for å skrive og vil endre hver gang brukeren skriver inn tekst i kommentarteksten. Navnet på tekstinngang tillater bare store og små bokstaver og mellomrom. Passordboksen viser teksten som et passord med stjerner og lar bare 16 tegn skrives inn (som de fleste passord er en angitt lengde). Kommentarene TextArea tillater brukeren å skrive inn tekst, men tillater bare 250 tegn. Det stilte tekstområdet er stylet ved hjelp av en kombinasjon av tekstformat Objekt og HTML.
Åpne et nytt Flash-dokument og angi følgende egenskaper:
Åpne komponentvinduet ved å gå til Meny> Vindu> Komponenter eller trykk CTRL + F7.
Dra fem etiketter, to TextInputs og to TextAreas til scenen.
I Egenskaper-panelet gir den første etiketten forekomstnavnet "NameLabel". Hvis Egenskaper-panelet ikke vises, gå til Meny> Vindu> Komponenter eller trykk CTRL + F3.
Sett etikettets X til 35,00 og dets Y til 45,00
Sett etikettets bredde til 100,00 og dens høyde til 22.00
Opprett en ny ActionScript-fil og gi den navnet Main.as. Vi vil erklære komponentene våre i Main.as, så vi må slå av "auto deklarere scenemessige tilfeller", fordelen ved å gjøre dette er at du får koden hinting for forekomsten.
Gå til Meny> Fil> Publiser innstillinger og klikk på Innstillinger ved siden av Script [Handlingsskrift 3].
Fjern merket for "automatisk deklarere scenevaner".
I Main.as åpner du pakkedeklarasjonen og importerer klassene vi skal bruke. Legg til følgende på Main.as:
pakke // komponenter importere fl.controls.Label; importere fl.controls.TextArea; importer fl.controls.TextInput; // Trenger du å utvide filmklippet så vi importerer det importere flash.display.MovieClip; // Behov for å automatisk størrelse våre etiketter importere flash.text.TextFieldAutoSize; // Hendelser importerer flash.events.TextEvent; importere flash.events.Event; // Trenger du å style textArea import flash.text.TextFormat;
Legg til klassen, utvide MovieClip og sett opp vår Constructor-funksjon. Legg til følgende til Main.as:
offentlig klasse Main utvider MovieClip // Etiketter offentlig var nameLabel: Etikett; offentlig var passordLabel: Etikett; offentlige var kommentarerLabel: Etikett; offentlig var numCharsLabel: Etikett; offentlig var styletLabel: Etikett; // Text Inputs public var nameTI: TextInput; public var passwordTI: TextInput; // Tekstområde offentlig var commentsTA: TextArea; offentlig var styledTA: TextArea; // Antall tegn tillatt i kommentarfeltet privat var numChars: uint = 250; // Brukt til å style tekstområdet var taFormat: TextFormat; // String som skal brukes i textArea var theString: String; offentlig funksjon Main () // Brukes til å konfigurere våre etiketter setupLabels (); // Brukes til å sette opp tekstInputs setupTextInputs (); // Brukes til å sette opp TextFormat for TextArea setupFormat (); // Brukes til å sette opp strengen vi bruker i vår TextArea setupString (); // Brukes til sett = opp Tekstområde setupTextAreas ();
Her definerer vi funksjonene som brukes i vår konstruktør. Her er hva vi skal gjøre:
I setupTextInputs () funksjon vi bruker begrense eiendom for å begrense hvilket tegn brukeren kan skrive inn. Siden dette er et riktig navn, begrenser vi bruken til store og små bokstaver og mellomrom (ingen tall).
Ved bruk av displayAsPassword, Når brukeren skriver inn tekst, vil innspillet vise stjerner (veldig lik det du ville gjøre i HTML).
Ved bruk av maxChars vi setter et forhåndsdefinert antall tegn som brukeren kan skrive inn; her kan de angi opptil 16 tegn.
De tekstformat er et objekt vi vil passere til Tekstfelt. Her setter vi farge, størrelse og sett kursiv til ekte.
Når vi setter opp strengen for TextArea, legger vi inn HTML, som vil være tilgjengelig ved hjelp av TextArea htmlText eiendom.
I setupTextAreas () funksjon vi gjør kommentarene TextArea redigerbar slik at brukeren kan skrive inn den; Vi setter også det maksimale antall tegn og sett "ordbryter" til ekte, slik at ordene vil vikle når de når slutten av textArea. Vi setter htmlText lik strengen vi opprettet og satt opp tekstformatet. HTML-koden i strengen tilsidesøker tekstformat men resten av strengen arver det vi har satt inn i TextFormat Object.
Legg til følgende på Main.as
Accentsconagua
privat funksjon setupLabels (): void // Oppsett teksten for våre etiketter nameLabel.text = "Skriv inn riktig navn"; passwordLabel.text = "Skriv inn passordet ditt"; commentsLabel.text = "Skriv inn kommentarene dine"; // Her kaster vi numChars til en streng siden tekstegenskapen forventer en streng numCharsLabel.text = String (numChars) + "tegn igjen"; styledLabel.text = "Et stilig tekstområde"; // Vi bruker autosize slik at vår etikett kan holde hele tekstnavnetLabel.autoSize = nameLabel.autoSize = TextFieldAutoSize.LEFT; passwordLabel.autoSize = passwordLabel.autoSize = TextFieldAutoSize.LEFT; commentsLabel.autoSize = commentsLabel.autoSize = TextFieldAutoSize.LEFT; numCharsLabel.autoSize = numCharsLabel.autoSize = TextFieldAutoSize.LEFT; styledLabel.autoSize = styledLabel.autoSize = TextFieldAutoSize.LEFT; private funksjon setupTextInputs (): void // Her begrenser vi innspill til bare små bokstaver a-z, store bokstaver A-z og mellomrom nameTI.restrict = "a-zA-Z"; // Bruk displayAsPassword for å gjøre tekstinnstillingsvisningen som et passordfelt passordTI.displayAsPassword = true; // Begrens antall tegn brukeren kan legge inn siden de fleste passord passordTI.maxChars = 16; privat funksjon setupFormat (): void // Her setter vi opp et TextFormat-objekt som brukes til å legge til // stil i tekstenArea taFormat = new TextFormat; taFormat.size = 16; taFormat.color = 0x0000FF; taFormat.italic = true; privat funksjon setupString (): void // Dette er strengen som inneholder HTML, vi sender til textArea theString = "Denne teksten er fetVi kan endre fargen til "; theString + ="Rød også ved hjelp av HTML "; theString + =" Resten av denne teksten er angitt av teksten Format "; privat funksjon setupTextAreas (): void // Still inn textArea til redigerbart, dvs. at brukeren kan skrive inn den commentsTA.editable = true; // Angir maksimalt antall tegn tekstfeltet kan holde her, vi vil ha kommentarer // For å være 250 tegn eller mindre commentsTA.maxChars = numChars; // Angir ordinnpakning til ekte, ordene vil vikle når de når slutten // av textArea commentsTA.wordWrap = true; commentsTA.addEventListener (TextEvent.TEXT_INPUT, textEntered); styledTA.htmlText = theString; // Her setter vi formatet til tekstenArea styledTA.setStyle ("textFormat", taFormat); De textEntered () funksjonen brukes av commentsTA eventsListener. Her får vi antall tilgjengelige tegn igjen for å skrive og oppdatere
etikett for å vise hvor mange som er igjen.
Så lukker vi ut klassen og pakken.
privat funksjon tekstEntered (e: Event): void // Gets antall avialable tegn igjen for å skrive var charsLeft: uint = numChars - e.target.length; // Cast charsLeft til en streng og oppdater etiketten numCharsLabel.text = String (charsLeft) + "tegn igjen"; // lukk ut klassen // lukk pakken
Bruke TextInputs og TextAreas er en fin måte å la brukeren skrive inn tekst eller vise stiltekst.
Du vil legge merke til i komponentparameterepanelet på komponentene som du kan sjekke og velge bestemte egenskaper.
Bildet ovenfor er for TextArea-komponenten
condenseWhite: En boolsk verdi som angir om ekstra hvit plass er fjernet fra komponenten som inneholder HTML-tekstredigerbar: en boolsk verdi som angir om tekstfeltet kan redigeres av brukerenaktivert: en boolsk verdi som indikerer om komponenten kan godta brukerinnganghorizontalScrollPolicy: setter rullepolicyen for den horisontale rullefeltet. Dette kan være en av følgende verdier: ScrollPolicy.ON: Den horisontale rullefeltet er alltid på.ScrollPolicy.OFF: Rullelinjen er alltid slått av.ScrollPolicy.AUTO: Rullestangen slås på når det trengs.AUTO htmlText: Teksten som skal vises av etikettkomponenten, inkludert HTML-merking som uttrykker stilen til tekstenmaxChars: Maksimalt antall tegn som en bruker kan skrive inn i tekstfeltet.begrense: Strekningen av tegn som tekstfeltet aksepterer fra en brukertekst: En streng som inneholder teksten som er i komponenten verticalScrollPolicy: rullepolitikken for den vertikale rullefeltet. Dette kan være en av følgende verdier: ScrollPolicy.ON: Rullelinjen er alltid på.ScrollPolicy.OFF: Rullelinjen er alltid slått av.ScrollPolicy.AUTO: Rullestangen slås på når det trengs.AUTO synlig: en boolsk verdi som angir om komponenteksemplet er synligwordwrap: en boolsk verdi som indikerer om teksten brytes på slutten av linjendisplayAsPassword: En boolsk verdi som indikerer om gjeldende tekstInput-komponent-forekomst ble opprettet for å inneholde et passord eller å inneholde tekstredigerbar: en boolsk verdi som angir om tekstfeltet kan redigeres av brukerenaktivert: en boolsk verdi som indikerer om komponenten kan godta brukerinngangmaxChars: Maksimalt antall tegn som en bruker kan skrive inn i tekstfeltet.begrense: Strekningen av tegn som tekstfeltet aksepterer fra en brukertekst: En streng som inneholder teksten som er i komponenten synlig: en boolsk verdi som angir om komponenteksemplet er synligFor å se egenskapene for etiketten, må du sjekke ut min forrige Hurtige Tips på etiketter og knapper.
Hjelpefilene er et flott sted å lære mer om komponentegenskapene du kan angi i parameterpanelet.
Takk for at du leser og se opp for neste kommende komponent Quick Tip!
