Share
In diesem Schnelltipp zu Flash Professional CS5-Tools werden die Komponenten Textbereich und Texteingabe behandelt.
Werfen wir einen kurzen Blick auf das, worauf wir in diesem Quick Tip hinarbeiten:
In der Demo sehen Sie fünf Beschriftungen, vier davon sind nur statische Beschriftungen, in denen die Komponenten beschrieben werden. Das Etikett unten links zeigt, wie viele Zeichen zur Eingabe verfügbar sind, und ändert sich jedes Mal, wenn der Benutzer Text in den Kommentartext eingibt. Die Namenseingabe erlaubt nur Groß- und Kleinbuchstaben sowie Leerzeichen. Das Kennwortfeld zeigt den Text als Kennwort mit Sternchen an und erlaubt nur die Eingabe von 16 Zeichen (da die meisten Kennwörter eine festgelegte Länge haben). Mit den Kommentaren textArea kann der Benutzer Text eingeben, jedoch nur 250 Zeichen. Der gestylte Textbereich wird mit einer Kombination aus dem gestylt Textformat Objekt und HTML.
Öffnen Sie ein neues Flash-Dokument und legen Sie die folgenden Eigenschaften fest:
Öffnen Sie das Komponentenfenster, indem Sie Menü> Fenster> Komponenten wählen oder STRG + F7 drücken.
Ziehen Sie fünf Labels, zwei TextInputs und zwei TextAreas auf die Bühne.
Geben Sie im Eigenschaftenfenster der ersten Beschriftung den Instanznamen "nameLabel" an. Wenn das Eigenschaftenfenster nicht angezeigt wird, wählen Sie Menü> Fenster> Komponenten oder drücken Sie STRG + F3.
Setzen Sie das X des Labels auf 35.00 und das Y auf 45.00
Stellen Sie die Breite des Etiketts auf 100,00 und die Höhe auf 22,00 ein
Erstellen Sie eine neue ActionScript-Datei, und geben Sie ihr den Namen Main.as. Wir werden unsere Komponenten in der Main-Klasse deklarieren. Daher müssen Sie die Option "Stage-Instanzen automatisch deklarieren" deaktivieren. Dies hat den Vorteil, dass Sie Codehinweise für die Instanz erhalten.
Gehen Sie zu Menü> Datei> Einstellungen für Veröffentlichungen und klicken Sie neben Skript auf [Einstellungen]..
Deaktivieren Sie "Bühneninstanzen automatisch deklarieren"..
Öffnen Sie in Main.as die Paketdeklaration und importieren Sie die Klassen, die wir verwenden werden. Fügen Sie der Main.as Folgendes hinzu:
Paket // Komponenten import fl.controls.Label; import fl.controls.TextArea; import fl.controls.TextInput; // Movieclip muss erweitert werden, damit wir ihn importieren können. Import flash.display.MovieClip; // Wird benötigt, um unsere Etiketten automatisch in der Größe anzupassen. Import flash.text.TextFieldAutoSize; // Ereignisse import flash.events.TextEvent; import flash.events.Event; // Erforderlich, um die textArea zu formatieren. Import flash.text.TextFormat;
Fügen Sie die Klasse hinzu, erweitern Sie MovieClip und richten Sie unsere Konstruktorfunktion ein. Fügen Sie Folgendes zu Main.as hinzu:
öffentliche Klasse Main erweitert MovieClip // Labels public var nameLabel: Label; public var passwordLabel: Bezeichnung; public var commentsLabel: Bezeichnung; public var numCharsLabel: Label; public var styledLabel: Label; // Texteingaben public var nameTI: TextInput; public var passwordTI: TextInput; // Textbereich public var commentsTA: TextArea; public var styledTA: TextArea; // Anzahl der im Kommentarbereich zulässigen Zeichen private var numChars: uint = 250; // Wird verwendet, um den Textbereich zu gestalten. Var taFormat: TextFormat; // String, der in textArea verwendet werden soll var theString: String; public function Main () // Wird verwendet, um unsere Lables einzurichten. setupLabels (); // wird zum Einrichten der textInputs verwendet setupTextInputs (); // Wird verwendet, um das TextFormat für die TextArea einzurichten. SetupFormat (); // Benutzte den String, den wir in unserer TextArea verwenden, setupString (); // wird verwendet, um = den Textbereich einzustellen setupTextAreas ();
Hier definieren wir die Funktionen, die in unserem Konstruktor verwendet werden. Folgendes tun wir:
In dem setupTextInputs () Funktion verwenden wir die beschränken Eigenschaft, um den Charakter einzuschränken, den der Benutzer eingeben kann. Da dies ein richtiger Name ist, beschränken wir die Verwendung auf Groß- und Kleinbuchstaben und Leerzeichen (keine Zahlen)..
Durch die Nutzung displayAsPassword, Wenn der Benutzer Text eingibt, zeigt die Eingabe Sternchen an (sehr ähnlich wie bei HTML)..
Durch die Nutzung maxChars Wir legen eine vordefinierte Anzahl von Zeichen fest, die der Benutzer eingeben kann. Hier können bis zu 16 Zeichen eingegeben werden.
Das Textformat ist ein Objekt, an das wir übergeben werden TextArea. Hier setzen wir Farbe, Größe und Kursivschrift auf true.
Wenn wir die Zeichenfolge für die TextArea einrichten, binden wir HTML ein, das unter Verwendung der TextArea verfügbar ist htmlText Eigentum.
In dem setupTextAreas () Funktion machen wir die Kommentare TextArea bearbeitbar, so dass der Benutzer es eingeben kann; Wir setzen auch die maximale Anzahl von Zeichen und setzen "word wrap" auf "true", damit Wörter am Ende des textArea-Bereichs umbrochen werden. Wir setzen den htmlText gleich dem von uns erstellten String und richten sein Textformat ein. Der HTML-Code in der Zeichenfolge überschreibt die Textformat Der Rest der Zeichenfolge erbt jedoch das, was wir in das TextFormat-Objekt eingefügt haben.
Fügen Sie dem Main.as Folgendes hinzu
Accentsconagua
private function setupLabels (): void // Richten Sie den Text für unsere Labels ein nameLabel.text = "Geben Sie Ihren richtigen Namen ein"; passwordLabel.text = "Geben Sie Ihr Passwort ein"; commentsLabel.text = "Geben Sie Ihre Kommentare ein"; // Hier konvertieren wir numChars in eine Zeichenfolge, da die Texteigenschaft eine Zeichenfolge erwartet numCharsLabel.text = String (numChars) + "Zeichen übrig"; styledLabel.text = "Ein gestalteter Textbereich"; // Wir verwenden autosize, damit unser Label den gesamten Text aufnehmen kann 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 function setupTextInputs (): void // Hier beschränken wir die Eingabe auf Kleinbuchstaben a-z, Großbuchstaben A-z und Leerzeichen nameTI.restrict = "a-zA-Z"; // Verwenden Sie displayAsPassword, um die Texteingabe wie ein Kennwortfeld anzuzeigen. PasswordTI.displayAsPassword = true; // Begrenzen Sie die Anzahl der Zeichen, die der Benutzer seit den meisten Kennwörtern eingeben kann passwordTI.maxChars = 16; private function setupFormat (): void // Hier richten wir ein TextFormat-Objekt ein, das zum Hinzufügen von // style zur textArea verwendet wird. taFormat = new TextFormat; taFormat.size = 16; taFormat.color = 0x0000FF; taFormat.italic = true; private Funktion setupString (): void // Dies ist die Zeichenfolge, die HTML enthält, die wir an die textArea übergeben. theString = "Dieser Text ist fett gedrucktWir können die Farbe in "; theString + =" ändern.Auch rot durch Verwendung von HTML "; theString + =" Der Rest dieses Textes wird durch den Text Format festgelegt "; private Funktion setupTextAreas (): void // Durch das Festlegen der textArea auf editierbar bedeutet, dass der Benutzer ihn eingeben kann commentsTA.editable = true; // Legt die maximale Anzahl von Zeichen fest, die das Textfeld enthalten kann. Wir wollen Kommentare. // 250 Zeichen oder weniger sein. CommentsTA.maxChars = numChars; // Setzt den Wortumbruch auf "True". Wenn das Ende // erreicht wird, werden die Wörter umbrochen textArea commentsTA.wordWrap = true; commentsTA.addEventListener (TextEvent.TEXT_INPUT, textEntered); styledTA.htmlText = theString; // Hier wird das Format auf textArea gesetzt styledTA.setStyle ("textFormat", taFormat); Das textEntered () Funktion wird von verwendet KommentareTA eventsListener. Hier erhalten wir die Anzahl der verfügbaren Zeichen, um den einzugeben und zu aktualisieren
Label, um anzuzeigen, wie viele noch.
Dann schließen wir die Klasse und das Paket ab.
private function textEntered (e: Event): void // Ruft die Anzahl der verfügbaren Zeichen ab, um var charsLeft einzugeben: uint = numChars - e.target.length; // Konvertiere charsLeft in einen String und aktualisiere das Label numCharsLabel.text = String (charsLeft) + "Zeichen übrig"; // Die Klasse schließen // Das Paket schließen
Die Verwendung von textInputs und TextAreas ist eine großartige Möglichkeit, Ihren Benutzern die Eingabe von Text oder das Anzeigen von Text mit Stil zu ermöglichen.
Sie werden im Komponentenparameterfenster der Komponenten feststellen, dass Sie bestimmte Eigenschaften überprüfen und auswählen können.
Das obige Bild ist für die TextArea-Komponente
verdichtenWeiß: Ein boolescher Wert, der angibt, ob zusätzlicher Leerraum aus der Komponente entfernt wird, die HTML-Text enthältbearbeitbar: Ein boolescher Wert, der angibt, ob das Textfeld vom Benutzer bearbeitet werden kannaktiviert: Ein boolescher Wert, der angibt, ob die Komponente Benutzereingaben akzeptieren kannhorizontalScrollPolicy: Legt die Bildlaufrichtlinie für die horizontale Bildlaufleiste fest. Dies kann einer der folgenden Werte sein: ScrollPolicy.ON: Die horizontale Bildlaufleiste ist immer aktiviert.ScrollPolicy.OFF: Die Bildlaufleiste ist immer deaktiviert.ScrollPolicy.AUTO: Die Bildlaufleiste wird eingeschaltet, wenn sie benötigt wird.AUTO htmlText: Der von der Label-Komponente anzuzeigende Text, einschließlich HTML-Markup, der die Formatvorlagen dieses Texts ausdrücktmaxChars: Die maximale Anzahl von Zeichen, die ein Benutzer in das Textfeld eingeben kann.beschränken: Die Zeichenfolge, die das Textfeld von einem Benutzer akzeptiertText: eine Zeichenfolge, die den in der Komponente enthaltenen Text enthält verticalScrollPolicy: Die Bildlaufrichtlinie für die vertikale Bildlaufleiste. Dies kann einer der folgenden Werte sein: ScrollPolicy.ON: Die Bildlaufleiste ist immer aktiviert.ScrollPolicy.OFF: Die Bildlaufleiste ist immer deaktiviert.ScrollPolicy.AUTO: Die Bildlaufleiste wird eingeschaltet, wenn sie benötigt wird.AUTO sichtbar: Ein boolescher Wert, der angibt, ob die Komponenteninstanz sichtbar istZeilenumbruch: Ein boolescher Wert, der angibt, ob der Text am Zeilenende umbrochen wirddisplayAsPassword: Ein boolescher Wert, der angibt, ob die aktuelle TextInput-Komponenteninstanz erstellt wurde, um ein Kennwort oder Text zu enthaltenbearbeitbar: Ein boolescher Wert, der angibt, ob das Textfeld vom Benutzer bearbeitet werden kannaktiviert: Ein boolescher Wert, der angibt, ob die Komponente Benutzereingaben akzeptieren kannmaxChars: Die maximale Anzahl von Zeichen, die ein Benutzer in das Textfeld eingeben kann.beschränken: Die Zeichenfolge, die das Textfeld von einem Benutzer akzeptiertText: eine Zeichenfolge, die den in der Komponente enthaltenen Text enthält sichtbar: Ein boolescher Wert, der angibt, ob die Komponenteninstanz sichtbar istUm die Eigenschaften der Beschriftung anzuzeigen, überprüfen Sie unbedingt meinen vorherigen Tipp zu Beschriftungen und Schaltflächen.
In den Hilfedateien können Sie mehr über die Komponenteneigenschaften erfahren, die Sie im Parameterfenster festlegen können.
Vielen Dank für das Lesen und achten Sie auf die nächste Komponente Quick Tip!
