Share
Dans cette astuce sur les outils Flash Professional CS5, nous allons examiner les composants Zone de texte et Entrée de texte..
Jetons un coup d'œil à ce à quoi nous travaillons dans ce petit conseil:
Dans la démo, vous voyez cinq étiquettes, dont quatre sont des étiquettes statiques décrivant le rôle des composants. L'étiquette en bas à gauche indique le nombre de caractères disponibles pour la saisie et change chaque fois que l'utilisateur entre du texte dans le texte du commentaire. La saisie de nom permet uniquement les majuscules et minuscules et les espaces. La zone Mot de passe affiche le texte sous forme de mot de passe avec astérisques et permet de ne saisir que 16 caractères (la plupart des mots de passe ayant une longueur définie). Les commentaires textArea permettent à l'utilisateur de saisir du texte, mais n'autorisent que 250 caractères. La zone de texte stylée est stylée à l’aide d’une combinaison des TextFormat Objet et HTML.
Ouvrez un nouveau document Flash et définissez les propriétés suivantes:
Ouvrez la fenêtre des composants en allant dans Menu> Fenêtre> Composants ou en appuyant sur CTRL + F7..
Faites glisser cinq étiquettes, deux TextInputs et deux TextAreas sur la scène..
Dans le panneau Propriétés, attribuez à la première étiquette le nom d'instance "nameLabel". Si le panneau Propriétés ne s'affiche pas, allez à Menu> Fenêtre> Composants ou appuyez sur CTRL + F3..
Définissez le X de l'étiquette sur 35,00 et son Y sur 45,00
Définissez la largeur de l'étiquette sur 100,00 et sa hauteur sur 22,00.
Créez un nouveau fichier ActionScript et nommez-le. Main.as. Nous allons déclarer nos composants dans le fichier Main.as. Par conséquent, nous devons désactiver "les instances de phase de déclaration automatique", ce qui présente l'avantage de permettre l'indication de code pour l'instance..
Sélectionnez Menu> Fichier> Paramètres de publication, puis cliquez sur Paramètres en regard de Script [Actionscript 3]..
Décocher "déclarer automatiquement les instances d'étape".
Dans Main.as, ouvrez la déclaration de package et importez les classes que nous allons utiliser. Ajoutez ce qui suit au Main.as:
package // Composants import fl.controls.Label; import fl.controls.TextArea; importer fl.controls.TextInput; // Besoin d'étendre le clip pour que nous l'importions import flash.display.MovieClip; // Nécessaire pour dimensionner automatiquement nos étiquettes import flash.text.TextFieldAutoSize; // événements import flash.events.TextEvent; import flash.events.Event; // Nécessaire pour styler le textArea import flash.text.TextFormat;
Ajoutez la classe, développez MovieClip et configurez notre fonction constructeur. Ajoutez ce qui suit à Main.as:
classe publique Main étend MovieClip // Étiquettes public var nameLabel: Label; public var passwordLabel: Label; public var commentsLabel: Label; public var numCharsLabel: Label; public var styledLabel: Label; // Entrées de texte public var nameTI: TextInput; public var passwordTI: TextInput; // Zone de texte public var commentsTA: TextArea; public var styledTA: TextArea; // Nombre de caractères autorisés dans la zone de commentaires private var numChars: uint = 250; // Utilisé pour styler la zone de texte var taFormat: TextFormat; // Chaîne à utiliser dans textArea var theString: String; fonction publique Main () // Utilisée pour configurer nos lables setupLabels (); // Utilisé pour configurer les textInputs setupTextInputs (); // Utilisé pour configurer TextFormat pour TextArea setupFormat (); // Utilisé pour configurer la chaîne que nous utilisons dans notre TextArea setupString (); // Utilisé pour configurer = la zone de texte setupTextAreas ();
Ici, nous définissons les fonctions utilisées dans notre constructeur. Voici ce que nous ferons:
dans le setupTextInputs () fonction nous utilisons le restreindre propriété pour limiter le caractère que l'utilisateur peut entrer. Puisqu'il s'agit d'un nom propre, nous limitons l'utilisation aux majuscules et minuscules et aux espaces (pas de chiffres).
En utilisant displayAsPassword, lorsque l'utilisateur saisit du texte, l'entrée affiche des astérisques (très similaire à ce que vous feriez en HTML).
En utilisant maxChars nous définissons un nombre prédéfini de caractères que l'utilisateur peut saisir; ici ils peuvent entrer jusqu'à 16 caractères.
le TextFormat est un objet que nous allons passer à la Zone de texte. Ici, nous définissons la couleur, la taille et les italiques sur true.
Lorsque nous configurons la chaîne pour TextArea, nous intégrons le code HTML, qui sera disponible à l’aide de TextArea. htmlText propriété.
dans le setupTextAreas () nous rendons les commentaires TextArea modifiables pour que l’utilisateur puisse les saisir; nous définissons également le nombre maximal de caractères et définissons "word wrap" sur true afin que les mots soient renvoyés à la fin de textArea. Nous définissons le htmlText égal à la chaîne que nous avons créée et définissons son format de texte. Le HTML dans la chaîne remplace le textFormat mais le reste de la chaîne hérite de ce que nous avons mis dans l'objet TextFormat.
Ajouter ce qui suit au Main.as
Accentsconagua
fonction privée setupLabels (): void // Configurez le texte de nos étiquettes nameLabel.text = "Entrez votre nom propre"; passwordLabel.text = "Entrez votre mot de passe"; commentsLabel.text = "Entrez vos commentaires"; // Ici, nous convertissons numChars en chaîne puisque la propriété text attend une chaîne numCharsLabel.text = String (numChars) + "caractères restants"; styledLabel.text = "Une zone de texte stylée"; // Nous utilisons autosize pour que notre étiquette puisse contenir tout le texte 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; function privée setupTextInputs (): void // Ici, nous limitons les entrées aux minuscules a-z, aux majuscules A-z et aux espaces nameTI.restrict = "a-zA-Z"; // Utilisez displayAsPassword pour que le texte soit affiché comme un champ de mot de passe passwordTI.displayAsPassword = true; // Limite le nombre de caractères que l'utilisateur peut entrer car la plupart des mots de passe passwordTI.maxChars = 16; function privée setupFormat (): void // Nous avons créé ici un objet TextFormat utilisé pour ajouter un style // à la zone de texte textArea taFormat = new TextFormat; taFormat.size = 16; taFormat.color = 0x0000FF; taFormat.italic = true; private function setupString (): void // Ceci est la chaîne contenant le code HTML que nous passons à textArea theString = "Ce texte est en grasNous pouvons changer la couleur en "; theString + ="Rouge aussi à l'aide de HTML "; theString + =" Le reste de ce texte est défini par le format de texte "; fonction privée setupTextAreas (): void // Définition du paramètre textArea sur le sens où l'utilisateur peut le saisir commentsTA.editable = true; // Définit le nombre maximal de caractères que le champ de texte peut contenir ici, nous voulons des commentaires // Soit 250 caractères ou moins commentsTA.maxChars = numChars; // Définit la superposition du mot à true, les mots seront renvoyés à la fin du // textArea commentsTA.wordWrap = true; commentsTA.addEventListener (TextEvent.TEXT_INPUT, textEntered); styledTA.htmlText = theString; // Ici, nous définissons le format de textArea styledTA.setStyle ("textFormat", taFormat); le textEntered () la fonction est utilisée par le commentairesTA événementsListener. Nous obtenons ici le nombre de caractères disponibles pour taper et mettre à jour le
étiquette pour montrer combien il en reste.
Puis nous fermons la classe et le paquet.
fonction privée textEntered (e: Event): void // Obtient le nombre de caractères disponibles pour taper var charsLeft: uint = numChars - e.target.length; // Transforme charsLeft en chaîne et met à jour l'étiquette numCharsLabel.text = String (charsLeft) + "caractères restants"; // ferme la classe // ferme le paquet
L'utilisation de textInputs et TextAreas est un excellent moyen de permettre à votre utilisateur de saisir du texte ou d'afficher un style.
Vous remarquerez dans le panneau des paramètres des composants que vous pouvez vérifier et sélectionner certaines propriétés..
L'image ci-dessus concerne le composant TextArea.
blanc condensé: une valeur booléenne qui indique si un espace supplémentaire est supprimé du composant contenant du texte HTMLéditable: une valeur booléenne qui indique si le champ de texte peut être édité par l'utilisateuractivée: une valeur booléenne qui indique si le composant peut accepter la saisie de l'utilisateurhorizontalScrollPolicy: définit la politique de défilement de la barre de défilement horizontale. Cela peut être l'une des valeurs suivantes: ScrollPolicy.ON: La barre de défilement horizontale est toujours activée.ScrollPolicy.OFF: La barre de défilement est toujours désactivée.ScrollPolicy.AUTO: La barre de défilement s'allume quand c'est nécessaire.AUTO htmlText: le texte à afficher par le composant Label, y compris le balisage HTML qui exprime les styles de ce textemaxChars: le nombre maximum de caractères qu'un utilisateur peut entrer dans le champ de texte.restreindre: la chaîne de caractères que le champ de texte accepte d'un utilisateurtexte: une chaîne qui contient le texte contenu dans le composant verticalScrollPolicy: la politique de défilement de la barre de défilement verticale. Cela peut être l'une des valeurs suivantes: ScrollPolicy.ON: La barre de défilement est toujours activée.ScrollPolicy.OFF: La barre de défilement est toujours désactivée.ScrollPolicy.AUTO: La barre de défilement s'allume quand c'est nécessaire.AUTO visible: une valeur booléenne qui indique si l'instance du composant est visiblewordWrap: une valeur booléenne qui indique si le texte est renvoyé à la fin de la lignedisplayAsPassword: une valeur booléenne qui indique si l'instance de composant TextInput actuelle a été créée pour contenir un mot de passe ou pour contenir du texteéditable: une valeur booléenne qui indique si le champ de texte peut être édité par l'utilisateuractivée: une valeur booléenne qui indique si le composant peut accepter la saisie de l'utilisateurmaxChars: le nombre maximum de caractères qu'un utilisateur peut entrer dans le champ de texte.restreindre: la chaîne de caractères que le champ de texte accepte d'un utilisateurtexte: une chaîne qui contient le texte contenu dans le composant visible: une valeur booléenne qui indique si l'instance du composant est visiblePour voir les propriétés de l'étiquette, assurez-vous de consulter mon précédent conseil rapide sur les étiquettes et les boutons..
Les fichiers d’aide constituent un excellent endroit pour en savoir plus sur les propriétés du composant que vous pouvez définir dans le panneau des paramètres..
Merci de lire et de surveiller le prochain composant Quick Tip!
