Share
In deze Quick Tip on Flash Professional CS5-tools gaan we kijken naar de tekstgebied- en tekstinvoercomponenten.
Laten we snel kijken naar waar we naartoe werken in deze snelle tip:
In de demo zie je vijf labels, vier ervan zijn slechts statische labels die beschrijven waarvoor de componenten zijn bedoeld. Het label linksonder geeft aan hoeveel tekens beschikbaar zijn om te typen en verandert telkens wanneer de gebruiker tekst invoert in de notitietekst. De tekstinvoer van de naam staat alleen hoofdletters en kleine letters en spaties toe. Het wachtwoordvak geeft de tekst weer als een wachtwoord met sterretjes en staat slechts 16 tekens toe (het meeste wachtwoord heeft een ingestelde lengte). De opmerkingen textArea staat de gebruiker toe om tekst in te voeren, maar staat slechts 250 karakters toe. Het opgemaakte tekstgebied is opgemaakt met een combinatie van de TextFormat Object en HTML.
Open een nieuw Flash-document en stel de volgende eigenschappen in:
Open het componentenvenster door naar Menu> Venster> Componenten te gaan of druk op CTRL + F7.
Sleep vijf labels, twee TextInputs en twee TextAreas naar het werkgebied.
Geef in het paneel Properties het eerste label de instantienaam "nameLabel". Als het eigenschappenvenster niet wordt weergegeven, gaat u naar Menu> Venster> Componenten of drukt u op CTRL + F3.
Stel de X van het label in op 35,00 en de Y in 45,00
Stel de breedte van het label in op 100,00 en de hoogte op 22,00
Maak een nieuw ActionScript-bestand en geef het de naam Main.as. We zullen onze componenten in de Main.as declareren, dus we moeten "auto declare stage instances" uitschakelen, het voordeel hiervan is dat je code-hinting krijgt voor de instance.
Ga naar Menu> Bestand> Publicatie-instellingen en klik op Instellingen naast Script [Actionscript 3].
Verwijder het vinkje bij "automatisch declareren van stage-instanties".
Open in Main.as de pakketverklaring en importeer de klassen die we gaan gebruiken. Voeg het volgende toe aan Main.as:
pakket // Componenten import fl.controls.Label; import fl.controls.TextArea; import fl.controls.TextInput; // Noodzaak om filmclip uit te breiden, zodat we het importeren flash.display.MovieClip importeren; // Nodig om automatisch onze labels in te stellen import flash.text.TextFieldAutoSize; // Events import flash.events.TextEvent; import flash.events.Event; // Nodig om de tekst te stijlenArea import flash.text.TextFormat;
Voeg de klasse toe, breid MovieClip uit en stel onze Constructorfunctie in. Voeg het volgende toe aan Main.as:
public class Main breidt MovieClip uit // Labels public var nameLabel: Label; public var passwordLabel: Label; public var commentsLabel: Label; public var numCharsLabel: Label; public var styledLabel: Label; // Text Inputs public var nameTI: TextInput; public var passwordTI: TextInput; // Tekstgebied public var commentsTA: TextArea; public var styledTA: TextArea; // Aantal tekens dat is toegestaan in het gebied met opmerkingen private var numChars: uint = 250; // Gebruikt om het tekstgebied te stijlen var taFormat: TextFormat; // Tekenreeks die moet worden gebruikt in textArea var theString: String; public function Main () // Gebruikt om onze lables setupLabels () in te stellen; // Gebruikt om de textInputs setupTextInputs () in te stellen; // Gebruikt om het TextFormat in te stellen voor de TextArea setupFormat (); // Gebruikt stel de String in die we gebruiken in onze TextArea setupString (); // Gebruikt voor sets = omhoog in het Tekstgebied setupTextAreas ();
Hier definiëren we de functies die worden gebruikt in onze constructor. Dit is wat we gaan doen:
In de setupTextInputs () functie gebruiken we de beperken eigenschap om te beperken welk teken de gebruiker kan invoeren. Omdat dit een echte naam is, beperken we het gebruik tot hoofd- en kleine letters en spaties (geen cijfers).
Door het gebruiken van displayAsPassword, wanneer de gebruiker tekst invoert, toont de invoer sterretjes (vergelijkbaar met wat u in HTML zou doen).
Door het gebruiken van maxChars we stellen een vooraf gedefinieerd aantal tekens in dat de gebruiker kan invoeren; hier kunnen ze maximaal 16 tekens invoeren.
De TextFormat is een Object dat we zullen doorgeven aan de TextArea. Hier stellen we de kleur, de grootte en het cursief instellen in op true.
Wanneer we de tekenreeks voor de TextArea instellen, nemen we HTML op, die beschikbaar is via de TextArea's htmlText eigendom.
In de setupTextAreas () functie we maken de opmerkingen TextArea bewerkbaar zodat de gebruiker erin kan typen; we stellen ook het maximumaantal tekens in en stellen "word wrap" in op true, dus woorden worden ingepakt wanneer het einde van de textArea wordt bereikt. We stellen de htmlText gelijk aan de reeks die we hebben gemaakt en stellen de tekstindeling in. De HTML in de tekenreeks overschrijft de textFormat maar de rest van de string erft wat we in het TextFormat-object hebben geplaatst.
Voeg het volgende toe aan Main.as
Accentsconagua
private function setupLabels (): void // Stel de tekst in voor onze Labels naamLabel.text = "Voer uw juiste naam in"; passwordLabel.text = "Voer uw wachtwoord in"; commentsLabel.text = "Voer uw opmerkingen in"; // Hier plaatsen we numChars in een tekenreeks omdat de eigenschap text een string verwacht numCharsLabel.text = String (numChars) + "characters left"; styledLabel.text = "Een opgemaakt tekstgebied"; // We gebruiken autosize zodat ons label alle tekstnamenLabel.autoSize = nameLabel.autoSize = TextFieldAutoSize.LEFT kan bevatten; 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 function setupTextInputs (): void // Hier beperken we de invoer tot alleen kleine letters a-z, hoofdletter A-z en spaties naamTI.restrict = "a-zA-Z"; // Gebruik displayAsPassword om de tekstinvoer weer te geven als een wachtwoordveldwachtwoordTI.displayAsPassword = true; // Beperk het aantal tekens dat de gebruiker kan invoeren, aangezien de meeste wachtwoorden passwordTI.maxChars = 16; private function setupFormat (): void // Hier stellen we een TextFormat-object in dat wordt gebruikt om // style toe te voegen aan de textArea taFormat = new TextFormat; taFormat.size = 16; taFormat.color = 0x0000FF; taFormat.italic = true; private function setupString (): void // Dit is de string met HTML die we doorgeven aan de textArea theString = "Deze tekst is vetgedruktWe kunnen de kleur veranderen in "; theString + ="Rood ook door HTML te gebruiken "; theString + =" De rest van deze tekst wordt ingesteld door de tekst Formaat "; private function setupTextAreas (): void // De textArea instellen op bewerkbaar betekent dat de gebruiker erin kan typen commentsTA.editable = true; // Stelt het maximumaantal tekens in dat het tekstveld kan bevatten. We willen opmerkingen // Om 250 tekens of minder commentaar te zijnTA.maxChars = numChars; // Zet woordomloop in op true, de woorden worden ingepakt bij het bereiken van het einde // van de textArea commentsTA.wordWrap = true; commentsTA.addEventListener (TextEvent.TEXT_INPUT, textEntered); styledTA.htmlText = theString; // Hier stellen we de indeling in op de textArea styledTA.setStyle ("textFormat", taFormat); De textEntered () functie wordt gebruikt door de commentsTA eventsListener. Hier krijgen we het aantal beschikbare tekens om te typen en de update van de
label om aan te geven hoeveel er nog zijn.
Dan sluiten we de klas en het pakket af.
private function textEntered (e: Event): void // Haalt het aantal beschikbare tekens over om var charsLeft: uint = numChars - e.target.length; // Giet charsLeft naar een string en werk het label bij numCharsLabel.text = String (charsLeft) + "characters left"; // sluit de klas af // sluit het pakket af
Het gebruik van textInputs en TextAreas is een geweldige manier om uw gebruiker tekst te laten invoeren of opgemaakte tekst weer te geven.
U zult opmerken in het componentenparameterspaneel van de componenten die u kunt controleren en bepaalde eigenschappen kunt selecteren.
De bovenstaande afbeelding is voor de component TextArea
condenseWhite: een Booleaanse waarde die aangeeft of extra witte ruimte wordt verwijderd uit het onderdeel dat HTML-tekst bevatbewerkbare: een Booleaanse waarde die aangeeft of het tekstveld door de gebruiker kan worden bewerktingeschakeld: een Booleaanse waarde die aangeeft of de component gebruikersinvoer kan accepterenhorizontalScrollPolicy: stelt het schuifbeleid in voor de horizontale schuifbalk. Dit kan een van de volgende waarden zijn: ScrollPolicy.ON: De horizontale schuifbalk is altijd ingeschakeld.ScrollPolicy.OFF: De schuifbalk is altijd uitgeschakeld.ScrollPolicy.AUTO: De schuifbalk wordt ingeschakeld wanneer dit nodig is.AUTO htmlText: de tekst die wordt weergegeven door het labelonderdeel, inclusief HTML-markering die de stijlen van die tekst uitdruktmaxChars: het maximale aantal tekens dat een gebruiker in het tekstveld kan invoeren.beperken: de reeks tekens die het tekstveld van een gebruiker accepteerttekst: een tekenreeks die de tekst bevat die in de component voorkomt verticalScrollPolicy: het schuifbeleid voor de verticale schuifbalk. Dit kan een van de volgende waarden zijn: ScrollPolicy.ON: De schuifbalk is altijd ingeschakeld.ScrollPolicy.OFF: De schuifbalk is altijd uitgeschakeld.ScrollPolicy.AUTO: De schuifbalk wordt ingeschakeld wanneer dit nodig is.AUTO zichtbaar: een Booleaanse waarde die aangeeft of de componentinstance zichtbaar iswordWrap: een Booleaanse waarde die aangeeft of de tekst aan het einde van de regel wordt ingepaktdisplayAsPassword: een Booleaanse waarde die aangeeft of het huidige instantie-component van TextInput is gemaakt om een wachtwoord te bevatten of om tekst te bevattenbewerkbare: een Booleaanse waarde die aangeeft of het tekstveld door de gebruiker kan worden bewerktingeschakeld: een Booleaanse waarde die aangeeft of de component gebruikersinvoer kan accepterenmaxChars: het maximale aantal tekens dat een gebruiker in het tekstveld kan invoeren.beperken: de reeks tekens die het tekstveld van een gebruiker accepteerttekst: een tekenreeks die de tekst bevat die in de component voorkomt zichtbaar: een Booleaanse waarde die aangeeft of de componentinstance zichtbaar isAls u de eigenschappen van het label wilt bekijken, moet u mijn vorige Quick Tip op labels en knoppen bekijken.
De helpbestanden zijn een geweldige plek om meer te weten te komen over de componenteigenschappen die u in het parametervenster kunt instellen.
Bedankt voor het lezen en kijk uit voor de volgende snelstartende component!
