Flash Lite 2

Développement d'applications Flash Lite 2.x > Utilisation du texte et des polices > Exemple d'application de champs texte (Flash Professional uniquement)

Exemple d'application de champs texte (Flash Professional uniquement)

Cette section indique comment créer une application simple permettant à l'utilisateur de saisir du texte, puis de formater et afficher ce texte dans un champ texte dynamique compatible avec le code HTML. L'application a également recours à la commande SetFocusRectColor pour faire passer la couleur du rectangle de focus de jaune à noir.

Vous trouverez l'application complète correspondant à cette exemple, textfield_example.fla, dans le dossier Samples and Tutorials/Samples/Flash Lite 2.0/ situé dans le dossier d'installation de Flash Professional 8 placé sur votre disque dur.

Pour créer un exemple d'application de champ texte :

1. Dans Flash, créez un document à l'aide du modèle générique de Flash Lite 2.0 que vous avez créé précédemment (consultez la section Création d'une application Flash Lite (Flash Professional uniquement) du guide Bien démarrer avec Flash Lite 2.x et enregistrez-le sous textfield.fla.
2. Avec l'outil Texte du panneau Outils, créez un champ texte sur une ligne en haut de la scène.
3. Assurez-vous que ce champ est sélectionné, puis, dans l'inspecteur Propriétés, sélectionnez Texte de saisie dans le menu déroulant Type de texte et Utiliser les polices de périphérique dans le menu déroulant Méthode de rendu des polices et tapez inputTxt dans la zone de texte Nom d'occurrence.
4. Créez un autre champ texte sous le premier est assurez-vous qu'il est beaucoup plus grand que le premier, comme indiqué ci-dessous :
   
   
5. Assurez-vous que le deuxième champ texte est sélectionné, puis dans l'inspecteur Propriétés, sélectionnez Texte dynamique dans le menu déroulant Type de texte. Sélectionnez Multiligne dans le menu déroulant Type de ligne, sélectionnez l'option Rendre le texte au format HTML, sélectionnez Utiliser les polices de périphérique dans le menu déroulant Méthode de rendu des polices, puis tapez messageTxt dans la zone de texte Nom d'occurrence.
6. Dans le scénario, sélectionnez l'image 1 dans le calque 1.
7. Ouvrez le panneau Actions (Fenêtre > Actions), puis tapez le code suivant :

   Selection.setFocus(inputTxt);
   fscommand2("SetFocusRectColor", 0, 0, 0);
   inputTxt.onChanged = function() {
       messageTxt.htmlText = "You entered: <i>" + this.text + "</i>";
   }
   

   La méthode Selection.setFocus() définit le focus initial du champ texte de saisie (inputTxt). Ensuite, l'appel de fonction fscommand2() spécifie la couleur de personnalisation du rectangle de focus. Enfin, le gestionnaire d'événements du champ texte de saisie, onChanged, est appelé lorsque le contenu du champ texte de saisie change, formate et affiche le texte que l'utilisateur a entré dans le champ texte messageTxt.

8. Enregistrez vos modifications et démarrez l'application dans l'émulateur (Contrôle > Tester l'animation).
9. Pour utiliser l'application, appuyez sur la touche de sélection de l'émulateur pour ouvrir la boîte de dialogue de saisie de texte et tapez le texte avec le clavier de l'ordinateur. Cliquez ensuite sur OK pour fermer la boîte de dialogue. Le texte que vous entrez s'affiche dans le champ texte messageTxt en italiques.