Share
Les champs de mot de passe vous permettent de créer un champ, similaire à un champ de texte, dans lequel les utilisateurs peuvent taper. Cependant, un champ de mot de passe provoque l'affichage de tous les astérisques (*). Les spectateurs ne peuvent donc pas voir ce qui est saisi..
Dans ce tutoriel, nous allons créer une classe statique qui convertira un TextField en entrée en un champ de mot de passe semblable à celui d'un iPhone..
Nous allons utiliser le statique attribut dans ActionScript 3.0 pour déclarer une classe qui n'a pas besoin d'être instanciée pour pouvoir être utilisée, ainsi nous pouvons appeler ses méthodes sans créer d'objet à l'aide de la commande Nouveau opérateur.
Notre classe va créer un Minuteur qui remplacera les caractères du TextField cible par n'importe quel caractère dans le temps spécifié.
Ouvrez Flash et créez un nouveau fichier Flash (ActionScript 3)..
Définissez la taille de la scène sur 600x300 et ajoutez un arrière-plan linéaire gris (#EEEEEE, #DDDDDD).
Ajoutons quelques détails graphiques à notre application.
Sélectionnez l'outil Rectangle (R), créez un rectangle de 600x50px et remplissez-le avec # 222222.
Créez un TextField statique pour ajouter un titre. J'ai utilisé Helvetica Bold 21pt comme TextFormat.
Utilisez l'outil Rectangle Primitive pour créer un rectangle de 200x30px (#AAAAAA) et définissez le rayon sur 6.00. Dupliquez cette forme (Cmd + D), redimensionnez-la à 198x28px, changez sa couleur en #EEEEEE et centrez-la dans la forme précédente.
Ajouter du texte pour étiqueter le champ.
Cela complétera la partie graphique.
Nous allons créer un champ de saisie de texte que nous utiliserons pour obtenir la saisie de l'utilisateur et pour spécifier une cible dans notre classe de masquage de mot de passe..
Sélectionnez l'outil Texte (T) et placez un champ TextField d'entrée à l'arrière-plan créé précédemment. Définissez son nom d'instance sur passField.
Créez un nouveau document ActionScript et enregistrez-le sous. iPass.as. Ce sera notre statique classe.
Les cours dont nous aurons besoin. Pour des informations spécifiques, reportez-vous à l’aide Flash (F1)..
classes de package import flash.display.Sprite; import flash.text.TextField; import flash.utils.Timer; import flash.events.TimerEvent; importer flash.ui.Keyboard; import flash.events.KeyboardEvent;
Nous allons utiliser des méthodes et des propriétés spécifiques à Sprite afin que nous étendions en utilisant la classe Sprite.
classe publique iPass étend Sprite
Ce sont les variables que nous allons utiliser, expliquées dans les commentaires. Notez que les variables sont déclarées comme statique avoir accès sans instance.
public statique var pass: String = ""; // Ceci stockera le mot de passe d'origine pour toute utilisation, public static var target: TextField; // Le champ de texte à masquer var statique statique privée regExp: RegExp = /./g; // Une expression régulière cherche TOUS les caractères public static var timer: Timer = new Timer (1000); // Objet timer, sera exécuté toutes les secondes, quand appelé
C'est la méthode que nous appellerons pour utiliser la classe.
Fonction statique publique maskTextField (t: TextField): void // Nous avons besoin d'un paramètre qui spécifie la cible TextField target = t; addListeners ();
C'est la fonction qui remplacera les caractères du champ cible.
fonction statique privée replaceOnTime (e: TimerEvent): void target.text = target.text.replace (regExp, "•"); // Remplace tous les caractères du champ de texte par "•" timer.stop (); // Arrête le chronomètre lorsque les caractères sont remplacés
Cette fonction démarre le minuteur lorsque le champ de texte cible est activé et qu'une touche est enfoncée.
fonction statique privée startTimer (e: KeyboardEvent): void / * Si le chronomètre ne fonctionne pas, démarrez-le, sinon, réinitialisez le chronomètre, remplacez tous les caractères avant le dernier et exécutez à nouveau le chronomètre * /! timer.running? timer.start (): timer.reset (); var msk: String = target.text.substring (0, target.length - 1); target.text = msk.replace (regExp, "•") + String.fromCharCode (e.charCode); timer.start (); / * Filtre les clés valides, de a à Z * / pour (var i: int = 65; i < 123; i++) if (e.charCode == i) pass += String.fromCharCode(i); if (e.keyCode == Keyboard.BACKSPACE) pass = pass.substring(0, pass.length - 1); //If delete is pressed, delete last char
Ajoute les écouteurs aux objets Timer et TextField.
fonction statique privée addListeners (): void timer.addEventListener (TimerEvent.TIMER, replaceOnTime); target.addEventListener (KeyboardEvent.KEY_UP, startTimer);
Cette classe appellera la classe statique iPass et transmettra TextField en tant que paramètre..
Créez un nouveau document ActionScript et enregistrez-le sous. Main.as.
classes de paquetages classes d'importation.iPass; import flash.display.Sprite; classe publique Main étend Sprite fonction publique Main (): void iPass.maskTextField (passField); // Appelle la classe iPass / * fonction privée getPassword (): void trace (iPass.pass); // Exemple d'obtention du mot de passe * /
Revenez au fichier .Fla et dans le panneau Propriétés, ajoutez classes.Main dans le champ Classe pour en faire la classe de document.
Vous avez maintenant créé une classe de masquage de mot de passe et appris à créer et à utiliser une classe statique - expérimentez ses avantages.!
Merci d'avoir lu!
Accentsconagua