Quick Innledning: Flash Text Input og tekstområde Components
Del
Del
en
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne hurtig Tips på Flash Professional CS5 verktøy vi kommer til å se på tekstområdet og og tekstskriving komponenter.
Endelig resultat
La oss ta en rask titt på hva vi jobber mot i denne hurtig Tips:
kort oversikt
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 er tilgjengelige for å skrive og vil endre hver gang brukeren går inn tekst i kommentarfeltet teksten. Navnet skriving at bare store og små tall og mellomrom. Passordet boksen viser teksten som passord med stjerner og tillater bare 16 tegn legges inn (som de fleste passord er et sett lengde). Kommentarfeltet textarea tillater brukeren å skrive inn tekst, men bare tillater 250 tegn. Den stylet tekstområde er stylet med en kombinasjon av tekstformat Object og HTML
Trinn 1:. Sette opp Document
Åpne en ny Flash dokument og angi følgende egenskaper: < .no>
Dokumentstørrelse: 450 * 400
Bakgrunnsfarge: #FFFFFF
Trinn 2: Legg Komponenter til Stage
Åpne komponenter vinduet ved å gå til Meny > Vindu > Komponenter eller trykk CTRL + F7.
Drag fem etiketter, to TextInputs og to textareas til scenen.
I Egenskaper-panelet gir den første etiketten forekomstnavnet "nameLabel". Hvis Properties panelet viser ikke gå til Meny > Vindu > Komponenter eller trykk CTRL + F3.
Sett etikettens X til 35,00 og dens Y til 45.00
Sett etikett bredde til 100,00 og høyden til 22,00
I panelet Egenskaper gi andre etiketten forekomstnavnet "passwordLabel", X: 35, Y: 119, bredde: 100, høyde: 22.
I panelet Egenskaper gi den tredje etiketten forekomstnavnet "commentsLabel "X: 35, Y: 209, bredde: 100, høyde: 22.
I panelet Egenskaper gi den fjerde etiketten forekomstnavnet" numCharsLabel ", X: 35, Y: 354, bredde: 100 , høyde: 22.
I Egenskaper-panelet gir den femte etiketten forekomstnavnet "styledLabel", X: 294, Y: 45, bredde: 100, høyde: 22.
I Properties panel gi den første TextInput forekomstnavnet "nameTI", X: 35, Y: 77, bredde: 100, høyde: 22.
I panelet Egenskaper gi andre TextInput forekomstnavnet "passwordTI", X: 35, Y: 155, bredde: 100, høyde: 22.
I Egenskaper-panelet gir den første Tekstfeltforekomstnavnet "commentsTA", X: 35, Y: 240, bredde: 180, høyde : 100.
I panelet Egenskaper gi andre Tekstfeltforekomstnavnet "styledTA", X: 249, Y: 79, bredde: 172, høyde: 162.
< h2> Trinn 3: Importer Classes
Opprett en ny Actionscript-fil og gi den navnet Main.as. Vi skal erklære våre komponenter i Main.as så vi må slå av "auto erklære scenen forekomster", til fordel for å gjøre dette er at du får kode antydet for eksempel
Gå til Meny >.; Fil > Publish Settings og klikk på Innstillinger ved siden av Script [Actionscript 3].
Fjern haken ved «automatisk erklære scene forekomster".
I Main.as, åpne pakken erklæringen og importere klassene vi vil være bruker. Legg til følgende til Main.as:
pakken {//Components importere fl.controls.Label; import fl.controls.TextArea; import fl.controls.TextInput; //Trenger du å utvide filmklipp så vi importere den importerer flash.display.MovieClip; //Trengs for å automatisk størrelsen våre etiketter importere flash.text.TextFieldAutoSize; //Hendelser importere flash.events.TextEvent; import flash.events.Event; //Trengs for å style den textarea import flash.text.TextFormat;
Trinn 4: Sett opp hoved Class
Legg til klassen, utvide MovieClip og sette opp vår Constructor Funksjon. Legg til følgende Main.as:
public class Hoved strekker MovieClip {//etiketter offentlig Var nameLabel: Etikett; offentlig Var passwordLabel: Etikett; offentlig Var commentsLabel: Etikett; offentlig Var numCharsLabel: Etikett; offentlig Var styledLabel: Etikett; //Tekst Innganger offentlig Var nameTI: TextInput; offentlig Var passwordTI: TextInput; //Tekstområde offentlig Var commentsTA: Tekstfelt; offentlig Var styledTA: Tekstfelt; //Antall tegn som er tillatt i kommentarene området private Var NUMCHARS: uint = 250; //Brukes til å style tekstområdet Var taFormat: tekstformat; //String som skal brukes i textarea Var theString: String; offentlig funksjon main () {//Brukes til å sette våre etiketter setupLabels (); //Brukes til å setup textInputs setupTextInputs (); //Brukes til å sette opp tekstformat for textarea setupFormat (); //Brukte satt opp String vi bruker i vår Tekstfelt setupString (); //Brukes til å sett = opp tekstområdet setupTextAreas (); }
Trinn 5: Hoved Constructor Funksjoner
Her kan vi definere funksjonene som brukes i vår konstruktør. Her er hva vi skal gjøre:
I setupTextInputs () -funksjonen bruker vi begrense egenskapen til å begrense hva karakter brukeren kan gå inn. Siden dette er et egennavn, begrenser vi bruken til store og små bokstaver og mellomrom (ingen tall).
Ved å bruke displayAsPassword, når brukeren skriver inn tekst input vil vise stjerner (svært lik det du ' . d gjør i HTML)
Ved å bruke maxChars setter vi et forhåndsdefinert antall tegn brukeren er i stand til å gå inn; her kan de legge inn opptil 16 tegn.
tekstformat er et objekt vi vil passere til tekstfeltet. Her vi sette farge, størrelse og sette kursiv til virkelighet.
Når vi setter opp strengen for textarea vi legge inn HTML, som vil være tilgjengelig ved hjelp av tekstfeltet er htmlText eiendom.
I setupTextAreas () -funksjonen vi får kommentarene Tekstfelt redigeres slik at brukeren kan skrive i det; vi også sette maks antall tegn og sette "ord wrap" for å true så ord vil bryte når du kommer til slutten av textarea. Vi setter htmlText lik strengen vi opprettet og oppsett sin tekstformat. HTML i strengen overstyrer tekstformat, men resten av strengen arver det vi har lagt inn i tekstformat Object
Legg til følgende til private funksjons setupLabels de Main.as product: ():. Void {//oppsett teksten for våre etiketter nameLabel.text = "Oppgi Riktig navn din"; passwordLabel.text = "Skriv inn passord"; commentsLabel.text = "Skriv inn dine kommentarer"; //Her har vi kastet NUMCHARS til en streng ettersom teksten eiendommen forventer en streng numCharsLabel.text = String (NUMCHARS) + "tegn igjen"; styledLabel.text = "En stylet Text Area"; //Vi bruker autosize så vår etikett kan holde all tekst nameLabel.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 funksjons setupTextInputs (): void {//Her vi begrenser innspill til bare små bokstaver az, store bokstaver AZ og områder nameTI.restrict = "a-za-Z"; //Bruk displayAsPassword å gjøre textinput skjermen som et passordfelt passwordTI.displayAsPassword = true; //Begrens antall tegn brukeren kan legge inn siden de fleste passord passwordTI.maxChars = 16;} private funksjon setupFormat (): void {//Her har vi satt opp en tekstformat Object som brukes til å legge //stil til textarea taFormat = new tekstformat; taFormat.size = 16; taFormat.color = 0x0000FF; taFormat.italic = true;} private funksjon setupString (): void {//Dette er strengen som inneholder HTML vi passere til textarea theString = "< b > Denne teksten er fet < /b > Vi kan endre fargen til"; theString + = "< font color =" # FF0000 '> Red for < /font > ved hjelp av HTML "; theString + = "Resten av denne teksten er satt av teksten Format";} private funksjons setupTextAreas (): void {//Stille textarea til redigerbar meanst brukeren kan skrive inn det commentsTA.editable = true; //Angir maksimalt antall tegn i tekstfeltet kan holde her vi ønsker kommentarer //Å være 250 tegn eller mindre commentsTA.maxChars = NUMCHARS; //Setter ord innpakning til sann, vil ordene vikle når du kommer til slutten //av textarea commentsTA.wordWrap = true; commentsTA.addEventListener (TextEvent.TEXT_INPUT, textEntered); styledTA.htmlText = theString; //Her har vi satt formatet til textarea styledTA.setStyle ("tekstformat", taFormat);}
Trinn 6 Definer textEntered Function
textEntered () -funksjonen brukes av commentsTA eventsListener. Her får vi antall tilgjengelige tegn igjen å skrive og oppdatere
etiketten for å vise hvor mange som er igjen
Så vi lukke ut klassen og pakken
privat funksjon textEntered (e..: hendelse): void {//Gets antall avialable tegn igjen å skrive Var charsLeft: UINT = NUMCHARS - e.target.length; //Cast charsLeft til en streng og oppdatere etiketten numCharsLabel.text = String (charsLeft) + "tegn igjen"; }} //Lukke ut klassen} //lukke pakken
Konklusjon
Ved hjelp textInputs og textareas er en fin måte å la brukeren skrive inn tekst eller vise stylet tekst.
Du vil merke i komponenter parameterpanelet av komponentene som du kan sjekke og velger visse egenskaper.
Bildet over er for textarea komponent
Egenskaper for textarea Component
condenseWhite: en boolsk verdi som angir om ekstra tomrom er fjernet fra den komponenten som inneholder HTML tekst
redigerbare: en boolsk verdi som angir om tekstfeltet kan redigeres av brukeren
aktivert: en boolsk verdi som angir om komponenten kan godta brukerundersøkelser
horizontalScrollPolicy: setter bla politikk for den horisontale rullefeltet. Dette kan være en av følgende verdier:
ScrollPolicy.ON: Den horisontale rullefeltet er alltid på
ScrollPolicy.OFF. Rullefeltet er alltid av
.
ScrollPolicy.AUTO. Rullefeltet slås på når det er nødvendig
Defaults til AUTO
htmlText: teksten som skal vises av etikett komponent, inkludert HTML markup som uttrykker stiler av at tekst
maxChars. maksimalt antall tegn som en bruker kan gå inn i tekstfeltet
begrense: strengen tegn som tekstfeltet aksepterer fra en bruker
tekst: en streng som inneholder teksten som er i komponenten
verticalScrollPolicy: rulle politikk for den vertikale rullefeltet. Dette kan være en av følgende verdier:
ScrollPolicy.ON: Rullefeltet er alltid på
ScrollPolicy.OFF. Rullefeltet er alltid av
<. li> ScrollPolicy.AUTO: Rullefeltet slås på når det er nødvendig
Defaults til AUTO
synlig. en boolsk verdi som angir om komponentforekomst er synlig Anmeldelser
wordwrap: en boolsk verdi som angir om teksten brytes ved slutten av linjen
Egenskaper for TextInput
displayAsPassword: en boolsk verdi som angir om gjeldende TextInput komponentforekomst ble opprettet for å inneholde et passord eller å inneholde tekst
redigerbare: en boolsk verdi som angir om tekstfeltet kan redigeres av brukeren
aktivert: en boolsk verdi som indikerer om komponent kan godta brukerundersøkelser
maxChars. maksimalt antall tegn som en bruker kan gå inn i tekstfeltet
begrense: strengen tegn som tekstfeltet aksepterer fra en bruker
tekst: en streng som inneholder teksten som er i komponenten
synlig: en boolsk verdi som angir om komponentforekomst er synlig
For å se egenskapene for etiketten bør du sjekke ut min forrige Quick Tips på etiketter og knapper.
Hjelpefilene er et flott sted å lære mer om komponentegenskaper du kan stille inn i parameterpanelet. Anmeldelser
Takk for lesing og se opp for neste kommende komponent Quick Tips! Anmeldelser