Share
I den här snabba tipsen på Flash Professional CS5-verktyg kommer vi att titta på Text Area och Text Input-komponenterna.
Låt oss ta en snabb titt på vad vi arbetar mot i den här snabba tipsen:
I demo ser du fem etiketter, fyra av dem är bara statiska etiketter som beskriver vad komponenterna är för. Nedre vänstra etiketten visar hur många tecken som finns tillgängliga för att skriva och ändras varje gång användaren skriver in text i kommentartexten. Namnet på textinmatning tillåter endast stora och små bokstäver och mellanslag. Lösenordsrutan visar texten som ett lösenord med asterisker och tillåter endast 16 tecken att matas in (eftersom de flesta lösenord är en bestämd längd). Kommentarer textArea tillåter användaren att skriva in text, men tillåter endast 250 tecken. Det stilade textområdet stylas med en kombination av Textformat Objekt och HTML.
Öppna ett nytt Flash-dokument och ställ in följande egenskaper:
Öppna komponentfönstret genom att gå till Meny> Fönster> Komponenter eller tryck CTRL + F7.
Dra fem etiketter, två TextInputs och två TextAreas till scenen.
På Egenskaper-panelen ge den första etiketten förekomstnamnet "NameLabel". Om Egenskaper-panelen inte visas går du till Meny> Fönster> Komponenter eller trycker på CTRL + F3.
Ange etiketten X till 35.00 och dess Y till 45.00
Ange etikettens bredd till 100,00 och dess höjd till 22.00
Skapa en ny ActionScript-fil och ge den namnet Main.as. Vi kommer att förklara våra komponenter i Main.as så vi måste stänga av "auto deklarera scenen instanser", fördelen med att göra detta är att du får koden hinting för instansen.
Gå till Meny> Arkiv> Publicera inställningar och klicka på Inställningar bredvid Script [ActionScript 3].
Avmarkera "automatiskt deklarera sceninstanser".
I Main.as öppnar du paketdeklarationen och importerar de klasser vi ska använda. Lägg till följande i Main.as:
paket // Komponenter importera fl.controls.Label; importera fl.controls.TextArea; importera fl.controls.TextInput; // Behöver du förlänga filmklipp så vi importerar det importera flash.display.MovieClip; // Behövs att automatiskt storlek våra etiketter importera flash.text.TextFieldAutoSize; // Händelser importera flash.events.TextEvent; importera flash.events.Event; // Behövs att ställa in textArea importera flash.text.TextFormat;
Lägg till klassen, förläng MovieClip och ställ in vår Constructor-funktion. Lägg till följande i Main.as:
public class Main utökar MovieClip // Etiketter public var nameLabel: Etikett; public var passwordLabel: Etikett; public var commentsLabel: Etikett; public var numCharsLabel: Etikett; public var styledLabel: Etikett; // Text Inputs public var nameTI: TextInput; public var passwordTI: TextInput; // Textområde public var commentsTA: TextArea; public var styledTA: TextArea; // Antal tecken tillåtet i kommentarfältet privat var numChars: uint = 250; // Används för att ställa in textområdet var taFormat: TextFormat; // String som ska användas i textArea var theString: String; allmän funktion Main () // Används för att konfigurera våra etiketter setupLabels (); // Används för att konfigurera textInputs setupTextInputs (); // Används för att konfigurera TextFormat för TextArea setupFormat (); // Används ställa in strängen vi använder i vår TextArea setupString (); // Används till sets = upp TextTextAreas ();
Här definierar vi de funktioner som används i vår konstruktör. Så här gör vi:
I setupTextInputs () funktion vi använder begränsa egendom för att begränsa vilken karaktär användaren kan ange. Eftersom detta är ett riktigt namn begränsar vi användningen till stora och små bokstäver och mellanslag (inga siffror).
Genom att använda displayAsPassword, När användaren skriver in text kommer inmatningen att visa asterisker (mycket lik vad du skulle göra i HTML).
Genom att använda maxChars Vi ställer in ett fördefinierat antal tecken som användaren kan skriva in; här kan de ange upp till 16 tecken.
De Textformat är ett objekt vi kommer att övergå till Textarea. Här ställer vi in färg, storlek och kursiv till sant.
När vi ställer in strängen för TextArea lägger vi in HTML, som kommer att finnas tillgängligt med hjälp av TextArea htmltext fast egendom.
I setupTextAreas () funktion vi gör kommentarer TextArea redigerbar så att användaren kan skriva in den; Vi ställer också in det maximala antalet tecken och sätter "word wrapping" till sant så att ord kommer att vikas när du når slutet av textArea. Vi ställer in htmlText lika med strängen som vi skapade och konfigurerade dess textformat. HTML i strängen strider mot textformat men resten av strängen ärver vad vi har lagt in i TextFormat Object.
Lägg till följande på Main.as
Accentsconagua
privat funktion setupLabels (): void // Ställ in texten för våra etiketter nameLabel.text = "Ange ditt riktiga namn"; passwordLabel.text = "Ange ditt lösenord"; commentsLabel.text = "Skriv in dina kommentarer"; // Här kastar vi numChars till en sträng eftersom textegenskapen förväntar oss en sträng numCharsLabel.text = String (numChars) + "characters left"; styledLabel.text = "Ett stiligt textområde"; // Vi använder autosize så vår etikett kan hålla alla text 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; privat funktion setupTextInputs (): void // Här begränsar vi inmatning till endast små bokstäver a-z, stora bokstäver A-z och mellanslagTI.restrict = "a-zA-Z"; // Använd displayAsPassword för att göra textinmatningsdisplayen som ett lösenordsfält passwordTI.displayAsPassword = true; // Begränsa antalet tecken som användaren kan ange sedan de flesta lösenord passwordTI.maxChars = 16; privat funktion setupFormat (): void // Här sätter vi upp ett TextFormat-objekt som används för att lägga till // stil i textArea taFormat = new TextFormat; taFormat.size = 16; taFormat.color = 0x0000FF; taFormat.italic = true; privat funktion setupString (): void // Detta är strängen som innehåller HTML vi passerar till textArea theString = "Den här texten är fetVi kan ändra färgen till "; theString + ="Röd också genom att använda HTML "; theString + =" Resten av denna text är inställd av texten Format "; privat funktion setupTextAreas (): void // Ställ in textArea för redigerbar betyder att användaren kan skriva in den commentsTA.editable = true; // Ställer in det maximala antalet tecken som textfältet kan hålla här vi vill ha kommentarer // För att vara 250 tecken eller mindre commentsTA.maxChars = numChars; // Ställer in ordförpackning till sant, orden kommer att vikas när slutet / av textArea commentsTA.wordWrap = true; commentsTA.addEventListener (TextEvent.TEXT_INPUT, textEntered); styledTA.htmlText = theString; // Här ställer vi in formatet till textArea styledTA.setStyle ("textFormat", taFormat); De textEntered () funktion används av commentsTA eventsListener. Här får vi antalet tillgängliga tecken kvar för att skriva och uppdatera
etikett för att visa hur många som finns kvar.
Sedan stänger vi ut klassen och paketet.
privat funktion textEntered (e: Event): void // Gets antalet avialable tecken kvar för att skriva var charsLeft: uint = numChars - e.target.length; // Cast charsLever till en sträng och uppdatera etiketten numCharsLabel.text = String (charsLeft) + "tecken kvar"; // stäng ut klassen // stäng ut paketet
Använda textInputs och TextAreas är ett bra sätt att låta din användare skriva in text eller för att visa stilad text.
Du kommer att märka i komponentparameterns paneler av komponenterna som du kan kolla och välja vissa egenskaper.
Ovanstående bild är för TextArea-komponenten
condenseWhite: ett booleskt värde som anger om det extra vita utrymmet tas bort från komponenten som innehåller HTML-textredigerbar: ett booleskt värde som anger om textfältet kan redigeras av användarenaktiverad: ett booleskt värde som anger om komponenten kan acceptera användarinmatninghorizontalScrollPolicy: ställer in rullningspolicy för den horisontella rullningsfältet. Detta kan vara ett av följande värden: ScrollPolicy.ON: Den horisontella rullningsfältet är alltid på.ScrollPolicy.OFF: Bläddrafältet är alltid avstängt.ScrollPolicy.AUTO: Rullningsfältet slås på när det behövs.BIL htmltext: texten som ska visas av etikettkomponenten, inklusive HTML-markup som uttrycker stilen på den textenmaxChars: det maximala antalet tecken som en användare kan ange i textfältet.begränsa: strängen av tecken som textfältet accepterar från en användaretext: en sträng som innehåller texten som finns i komponenten vertical: rullningspolicy för den vertikala rullningsfältet. Detta kan vara ett av följande värden: ScrollPolicy.ON: Rullningsfältet är alltid på.ScrollPolicy.OFF: Bläddrafältet är alltid avstängt.ScrollPolicy.AUTO: Rullningsfältet slås på när det behövs.BIL synlig: ett booleskt värde som anger om komponentinstansen är synligwordwrap: ett booleskt värde som indikerar om texten wraps i slutet av radendisplayAsPassword: ett booleskt värde som anger om den nuvarande TextInput-komponentens förekomst skapades för att innehålla ett lösenord eller att innehålla textredigerbar: ett booleskt värde som anger om textfältet kan redigeras av användarenaktiverad: ett booleskt värde som anger om komponenten kan acceptera användarinmatningmaxChars: det maximala antalet tecken som en användare kan ange i textfältet.begränsa: strängen av tecken som textfältet accepterar från en användaretext: en sträng som innehåller texten som finns i komponenten synlig: ett booleskt värde som anger om komponentinstansen är synligFör att se egenskaperna för etiketten ska du kolla in min tidigare Snabba Tips på etiketter och knappar.
Hjälpfilerna är ett bra ställe för att lära dig mer om de komponentegenskaper du kan ställa in parameterns panel.
Tack för att du läste och se upp för nästa kommande komponent Quick Tip!
