Flash Lite 2

Bien démarrer avec Flash Lite 2.x > Didacticiel : Création d'une application Flash Lite (Flash Professional uniquement) > Création de l'application (Flash Professional uniquement) > Création de l'écran des plats du jour (Flash Professional uniquement) > Ajout d'éléments de navigation et de texte à l'écran des plats du jour (Flash Professional uniquement)

Ajout d'éléments de navigation et de texte à l'écran des plats du jour (Flash Professional uniquement)

Dans cette section, vous allez ajouter de l'interactivité à l'écran Specials pour permettre à l'utilisateur de contrôler la transition entre chaque animation. Vous allez également ajouter des champs texte dynamique affichant le nom et la description de chaque image.

1. Dans Flash, ouvrez le fichier créé dans la section Création du menu destiné à l'écran d'accueil (Flash Professional uniquement).
2. Dans le scénario, sélectionnez l'image 10 dans le calque Texte.
3. Dans la palette Outils, sélectionnez l'outil Texte et tracez un champ texte sous la première image masquée de plats.

   Ce champ texte affiche le nom du plat illustré à l'écran.

   
   
   

4. En maintenant le champ texte sélectionné sur la scène, effectuez les modifications suivantes dans l'inspecteur Propriétés :
   • Sélectionnez Texte dynamique dans le menu déroulant Type de texte.
   • Tapez title_txt dans la zone de texte Nom d'occurrence.
   • Sélectionnez l'option de style de texte Italique.
   • Définissez la taille de la police sur 10.
   • Sélectionnez Utiliser le texte du périphérique dans le menu déroulant Méthode de rendu des polices.
5. Créez un autre champ texte sous le premier pour afficher une courte description du plat consulté par l'utilisateur.
6. A l'aide de l'outil Sélection, redimensionnez le nouveau champ texte de sorte que sa taille soit au moins trois fois plus grande que celle du champ texte situé au-dessus.

   
   
   

7. En maintenant le champ texte sélectionné sur la scène, effectuez les modifications suivantes dans l'inspecteur Propriétés :
   • Sélectionnez Texte dynamique dans le menu déroulant Type de texte.
   • Tapez description_txt dans la zone de texte Nom d'occurrence.
   • Sélectionnez Multiligne dans le menu contextuel Type de ligne.
   • Définissez la taille de la police sur 10.
   • Sélectionnez Utiliser les polices de périphérique dans le menu déroulant Méthode de rendu des polices.
8. Dans le scénario, sélectionnez l'image 10 du calque ActionScript en tant qu'image-clé.
9. Ouvrez le panneau Actions et ajoutez le code suivant :

   stop();
   fscommand2("SetSoftKeys", "Home", "Next");
   title_txt.text = "Summer salad";
   description_txt.text = "Butter lettuce with apples, blood orange segments, gorgonzola, and raspberry vinaigrette.";
   

   Ce code donne la description du nom du premier plat du jour dans les deux champs texte dynamique. Il arrête également la tête de lecture sur l'image actuelle et enregistre les touches programmables du périphérique.

10. Dans le calque ActionScript, sélectionnez l'image 20 en tant qu'image-clé et saisissez le code suivant dans le panneau Actions :

    stop();
    title_txt.text = "Chinese Noodle Salad";
    description_txt.text = "Rice noodles with garlic sauce, shitake mushrooms, scallions, and bok choy.";
    

11. Dans le calque ActionScript, sélectionnez l'image 30 en tant qu'image-clé et saisissez le code suivant dans le panneau Actions :

    stop();
    title_txt.text = "Seared Salmon";
    description_txt.text = "Filet of wild salmon with caramelized onions, new potatoes, and caper and tomato salsa.";
    

12. Dans le calque ActionScript, sélectionnez l'image 40 en tant qu'image-clé et saisissez le code suivant dans le panneau Actions :

    stop();
    title_txt.text = "New York Cheesecake";
    description_txt.text = "Creamy traditional cheesecake served with chocolate sauce and strawberries.";
    

13. Dans le calque ActionScript, sélectionnez l'image 50 en tant qu'image-clé et saisissez le code suivant dans le panneau Actions :

    gotoAndStop("specials");
    

    Ce code renvoie la tête de lecture au début de la séquence d'animation. Les première et dernière images de la séquence d'animation sont identiques, ce qui crée l'illusion d'une animation continue.

14. Enregistrez vos modifications.

Vous allez ensuite ajouter des éléments de navigation à l'écran Specials pour permettre à l'utilisateur de parcourir les images et descriptions de chaque plat.

1. Ouvrez le fichier que vous avez terminé dans la procédure précédente.
2. Dans le scénario, sélectionnez l'image 10 dans le calque intitulé ActionScript.
3. Ouvrez le panneau Actions et entrez le code suivant :

   Key.removeListener (myListener);
   var myListener:Object = new Object ();
   myListener.onKeyDown = function () {
       var keyCode = Key.getCode ();
       if (keyCode == ExtendedKey.SOFT1) {
           // Gestion des événements de la touche programmable
           // gauche    
           gotoAndPlay ("home");
       }
       else if (keyCode == ExtendedKey.SOFT2) {
           // Gestion des événements de la touche programmable
           // droite
           play ();
           description_txt.text = "";
           title_txt.text = "";
       }
   };
   Key.addListener (myListener);
   

   La touche programmable gauche place la tête de lecture dans l'écran principal de l'application, tandis que la touche programmable droite permet de passer à l'image suivante de l'animation.

   Pour plus d'informations sur l'utilisation des écouteurs d'événements, consultez la section Exploitation d'un écouteur de touche pour traiter les événements de pression de touche (Flash Professional uniquement) du manuel Développement d'applications Flash Lite 2.x.

4. Choisissez Contrôle > Tester l'animation pour tester l'application finale dans l'émulateur.