Share
Conditions suggérées est un excellent élément de convivialité qui permet à l'utilisateur de choisir une meilleure option ou tout simplement d'augmenter la vitesse de recherche.
Dans ce tutoriel, nous allons apprendre à créer et afficher les termes suggérés dans une application Flash..
Nous allons utiliser les méthodes et propriétés TextField et String pour récupérer et afficher les mots d'un fichier externe contenant les suggestions de recherche..
Lancez Flash et créez un nouveau document. Définissez la taille de la scène sur 500x270px, la couleur de fond sur # F6F6F6 et la cadence de prise de vue sur 24fps.
C’est l’interface que nous utiliserons, un simple arrière-plan avec une barre de titre et deux TextFields, un TextField statique nous indiquant quoi faire et un TextField en entrée que nous utiliserons pour commencer à suggérer.
Pas de boutons cette fois, les événements seront appelés en appuyant sur une touche.
Vous pouvez laisser la couleur d’arrière-plan telle quelle ou ajouter un rectangle de 500x270px pour sélectionner un élément. Pour la barre de titre, utilisez à nouveau l'outil Rectangle (R) pour créer un rectangle de 500 x 30 pixels et le centrer..
Sélectionnez l'outil Texte (T) et écrivez un titre pour votre application. J'ai utilisé ce format: Lucida Grande Regular, 15 pt, #EEEEEE.
Nous allons utiliser une forme Rectangle pour montrer où se trouve le TextField.
Avec l'outil Rectangle, créez un rectangle de 300 x 24 pixels et supprimez le remplissage, utilisez plutôt un trait #CCCCCC..
Enfin, utilisez l’outil texte pour créer un champ de texte en entrée de 345x20px et nommez-le. champ de saisie.C'est le format que j'ai utilisé: Helvetica Bold, 16pt, # 666666.
Pour afficher correctement la police dans le texte d'entrée, nous devons l'intégrer..
Sélectionnez le champ de saisie de texte et allez à la Panneau de propriétés, Personnage section et appuyez sur la Intégrer… bouton.
Une nouvelle fenêtre apparaîtra, sélectionnez les caractères que vous souhaitez intégrer, puis cliquez sur OK..
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe.
Le mot clé package vous permet d'organiser votre code en groupes pouvant être importés par d'autres scripts. Il est recommandé de les nommer en commençant par une lettre minuscule et d'utiliser des interconnexions pour les mots suivants, par exemple: mes classes. Il est également courant de les nommer sur le site Web de votre entreprise: com.mycompany.classesType.myClass.
Dans cet exemple, nous utilisons une seule classe. Il n'est donc pas nécessaire de créer un dossier de classes..
paquet
Ce sont les classes que nous devons importer pour que notre classe fonctionne, le importation directive met à la disposition de votre code des classes et des packages définis en externe.
import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.events.Event; importer flash.ui.Keyboard; import flash.events.KeyboardEvent; import flash.text.TextField; import flash.events.MouseEvent; import flash.text.TextFormat;
Ici, nous déclarons la classe en utilisant le classe mot-clé de définition suivi du nom que nous voulons pour la classe, rappelez-vous que vous devez enregistrer le fichier en utilisant ce nom.
le s'étend mot-clé définit une classe qui est une sous-classe d'une autre classe. La sous-classe hérite de toutes les méthodes, propriétés et fonctions, ainsi nous pouvons les utiliser dans notre classe.
public class Main étend Sprite
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus à leur sujet.
private var urlLoader: URLLoader = new URLLoader (); // Utilisé pour charger le fichier externe suggestions de variables privées: Array = new Array (); // Les suggestions contenues dans le fichier texte seront stockées ici. private var suggérée: Array = new Array (); // Les champs de texte de la variable privée de suggestions en cours: Array = new Array (); // Un champ de texte à utiliser pour afficher le terme suggéré de format privé var: TextFormat = new de TextFormat (); // Le format de texte de suggestions privé var currentSelection: int = -1; // gérera la suggestion sélectionnée afin de l'écrire dans le champ de texte principal
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à s'exécuter lorsque vous créez une instance d'un objet ou que vous l'exécutez à l'aide de la classe de document..
fonction publique Main (): void
Les termes à suggérer seront stockés dans un fichier texte externe, vous pouvez également utiliser XML, PHP ou le format de votre choix..
Ecrivez les termes que vous souhaitez suggérer (séparés par des virgules ",") et enregistrez le fichier dans le même répertoire que votre swf. Dans ce cas, j'ai utilisé une liste de sports et les ai enregistrés dans le fichier. Sports.txt.
Cette ligne appelle la méthode de chargement de la classe URLLoader et transmet en paramètre l'URL du fichier txt que nous utilisons..
Accentsconagua
urlLoader.load (new URLRequest ("Sports.txt")); Deux premiers auditeurs; on écoute le chargement du fichier externe et d'autres écoutent les événements clés dans le champ de saisie de texte.
urlLoader.addEventListener (Event.COMPLETE, loadComplete); inputField.addEventListener (KeyboardEvent.KEY_UP, suggérez);
Définit le format de texte utilisé dans les champs de texte des suggestions.
format.font = "Helvetica"; format.size = 12; format.bold = true;
La fonction suivante est exécutée une fois le chargement externe terminé. Elle crée un tableau contenant les chaînes séparées par des virgules dans le fichier txt..
fonction privée loadComplete (e: Event): void suggestions = e.target.data.split (","); // La méthode split sépare les mots en utilisant comme délimiteur le "," La fonction suggest gère toutes les opérations permettant de créer et d'afficher les suggestions. Elle est exécutée lorsque Input TextField détecte un événement Mouse_UP..
fonction privée suggère (e: KeyboardEvent): void
La première chose à faire est d'effacer le tableau suggéré, cela effacera les suggestions précédentes (le cas échéant).
suggéré = [];
Le suivant pour parcourt les suggestions disponibles et utilise un si déclaration et la Indice de méthode pour rechercher les lettres de départ de n'importe lequel des mots disponibles.
pour (var j: int = 0; j < suggestions.length; j++) if (suggestions[j].indexOf(inputField.text.toLowerCase()) == 0)//indexOf returns 0 if the letter is found
Comme tous les mots de l'exemple de fichier texte sont en minuscules, nous pouvons appeler toLowerCase () sur le texte saisi pour permettre une recherche insensible à la casse. Cela signifie que si l'utilisateur tape "SKI", il trouvera "ski".
Si la ou les lettres écrites sont trouvées, un nouveau TextField est créé pour le mot correspondant, car nous sommes toujours dans la pour, Si plusieurs suggestions commencent par la même lettre, de nombreux TextFields seront créés..
Var terme: TextField = new TextField (); term.width = 100; term.height = 20; terme.x = 75; term.y = (20 * suggéré.length) + 88; // positionne le champ de texte sous le dernier terme.border = true; / * Nous utilisons ici la propriété border.borderColor = 0x353535; séparer les champs de texte * / term.background = true; term.backgroundColor = 0x282828; term.textColor = 0xEEEEEE; term.defaultTextFormat = format; // définit le format créé précédemment // écouteurs de souris term.addEventListener (MouseEvent.MOUSE_UP, useWord); term.addEventListener (MouseEvent.MOUSE_OVER, survolez); term.addEventListener (MouseEvent.MOUSE_OUT, out); addChild (terme); textfields.push (terme); // Ajoute le champ de texte au tableau de champs de texte suggestion.push (suggestions [j]); term.text = suggestions [j]; // Définit la suggestion trouvée dans le champ de texte
Si l'utilisateur supprime les lettres dans le champ de saisie, les suggestions sont supprimées..
if (inputField.length == 0) // le champ d'entrée est vide suggéré = []; // efface les tableaux pour (var k: int = 0; k < textfields.length; k++) removeChild(textfields[k]); //remove textfields textfields = [];
Le code suivant permet à l'utilisateur de parcourir les suggestions à l'aide du clavier..
Il change la couleur du mot sélectionné, ajoute ou supprime un nombre à la sélection en cours variable à utiliser plus tard dans le tableau textfields, de cette façon, il récupère l'élément correct dans les suggestions.
Lorsque vous appuyez sur la touche Entrée, la sélection est écrite dans le champ de saisie et les suggestions sont supprimées..
if (e.keyCode == Keyboard.DOWN && currentSelection < textfields.length-1) currentSelection++; textfields[currentSelection].textColor = 0xFFCC00; if(e.keyCode == Keyboard.UP && currentSelection > 0) currentSelection--; textfields [currentSelection] .textColor = 0xFFCC00; if (e.keyCode == Keyboard.ENTER) inputField.text = textfields [currentSelection] .text; suggéré = []; pour (var l: int = 0; l < textfields.length; l++) removeChild(textfields[l]); textfields = []; currentSelection = 0;
Cette fonction est également utilisée pour sélectionner la suggestion, bien que cela soit plus facile en raison de la possibilité d'ajouter des écouteurs d'événements aux TextFields. Les auditeurs ont été ajoutés dans le suggérer()fonction à l'étape 23, rappelez-vous?
fonction privée useWord (e: MouseEvent): void inputField.text = e.target.text; suggéré = []; pour (var i: int = 0; i < textfields.length; i++) removeChild(textfields[i]); textfields = []; private function hover(e:MouseEvent):void e.target.textColor = 0xFFCC00; private function out(e:MouseEvent):void e.target.textColor = 0xEEEEEE;
Retournez à la FLA et dans le Panneau des propriétés> Section de publication> Champ de classe, ajouter Principale comme valeur. Cela liera cette classe en tant que classe de document.
Vous avez terminé de créer et d'implémenter une classe de termes suggérés, il est temps de créer le vôtre et de le personnaliser! Pourquoi ne pas essayer d’utiliser PHP pour enregistrer les termes que les utilisateurs saisissent dans la liste des termes suggérés?
Merci d'avoir lu ce tutoriel, j'espère que vous l'avez trouvé utile!
