Création du menu destiné à l'écran d'accueil (Flash Professional uniquement)

Dans cette section, vous allez créer le menu de l'écran d'accueil de l'application. Ce menu se compose de trois options : Specials, View Video et Reservations.

Dans Flash Professional 8, ouvrez le fichier enregistré dans Sélection des périphériques de test et du type de contenu (Flash Professional uniquement).

Dans la fenêtre Scénario (Fenêtre > Scénario), sélectionnez l'image 1 dans le calque du menu.

Pour créer le menu, ouvrez le panneau Bibliothèque (Fenêtre > Bibliothèque) et faites glisser une occurrence du symbole de bouton appelée specials button sur la scène.

Positionnez le bouton sous le champ texte (déjà en place) présentant le restaurant.

Assurez-vous que l'occurrence specials button est sélectionné dans l'inspecteur Propriétés, puis tapez specials_btn dans la zone de texte Nom de l'occurrence.

Faites glisser l'occurrence de symbole de bouton, video button, sur la scène et placez-la sous le bouton specials.

Assurez-vous que video button est sélectionné dans l'inspecteur Propriétés, tapez video_btn dans la zone de texte Nom de l'occurrence.

Faites glisser l'occurrence du symbole de bouton, reservations button, sur la scène et placez-la sous le bouton video.

Assurez-vous que reservations button est sélectionné dans l'inspecteur Propriétés, puis tapez reservations_btn dans la zone de texte Nom de l'occurrence.

La scène de votre application doit ressembler à la capture d'écran ci-dessous :

Dans le scénario, sélectionnez l'image 1 dans le calque intitulé ActionScript.

Ouvrez le panneau Actions (Fenêtre > Actions), puis tapez le code indiqué ci-dessous :

stop();
_focusrect = false;
fscommand2("SetSoftKeys", "Set Location", "Exit");
fscommand2("SetQuality", "high");
fscommand2("Fullscreen", "true");

Ce code produit le résultat suivant :

Arrête la tête de lecture sur cette image.

Désactive l'affichage du rectangle de focus dessiné par défaut par Flash Lite autour du bouton ou du champ texte de saisie avec le focus courant (voir A propos du rectangle de focus dans le manuel Développement d'applications Flash Lite 2.x).

Enregistre les touches programmables destinées à l'application.

Définit la qualité du rendu du lecteur sur high (élevée). Par défaut, Flash Lite affiche une qualité moyenne pour le contenu graphique.

Force le lecteur à afficher l'application en plein écran.

Lorsque Flash Lite est en mode plein écran, les étiquettes spécifiées par la commande SetSoftKeys ne sont pas visibles. Par conséquent, vous devez ajouter des étiquettes personnalisées de touche programmable sur la scène.

Ajoutez le code suivant pour traiter les événements renvoyés par les boutons de menu et pour le focus de sélection :

// Définition du focus initial, lorsque l'application
// démarre et lors du retour à l'écran principal.
if (selectedItem == null) {
    Selection.setFocus (specials_btn);
} else {
    Selection.setFocus (selectedItem);
}
// Association de gestionnaires d'événements onPress à 
// chaque bouton de menu et définition de la variable 
// selectedItem sur l'objet bouton sélectionné :
specials_btn.onPress = function () {
    gotoAndStop ("specials");
    selectedItem = this;
};
video_btn.onPress = function () {
    gotoAndStop ("video");
    selectedItem = this;
};
reservations_btn.onPress = function () {
    if (location_so.data.phoneNumber == undefined) {
    // L'utilisateur n'a pas spécifié de restaurant, donc
    // retour à l'écran « set location » :
        gotoAndStop ("options");
    }
    else {
        // Composer le numéro de l'objet partagé :
        var phoneNum = location_so.data.phoneNumber;
        getURL ("tel:" + phoneNum);
    }
    selectedItem = this;
};

Les gestionnaires d'événements onPress associés aux boutons specials_btn et video_btn placent de façon séquentielle la tête de lecture sur les images « specials » et « video ». Vous allez créer le contenu de ces sections plus loin dans le didacticiel (voir Création de l'écran des plats du jour (Flash Professional uniquement) et Création de l'écran Video (Flash Professional uniquement)).

Lorsque l'utilisateur sélectionne l'option Reservations, le gestionnaire onPress compose le numéro de téléphone spécifié dans l'objet partagé location_so. (Plus loin dans cette procédure, vous allez écrire le code de l'objet partagé.) Si l'utilisateur n'a spécifié aucun emplacement à appeler pour les réservations, l'application place la tête de lecture sur l'image « options », ce qui permet à l'utilisateur de spécifier ses préférences.

Vous allez à présent ajouter le code suivant afin de créer un écouteur pour les touches programmables gauche et droite :

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
        gotoAndStop("options");
    } else if (keyCode == ExtendedKey.SOFT2) {
        // Gestion des événements de la touche programmable
        // droite 
        fscommand2("Quit");
    }
};
Key.addListener(myListener);

Ce code a recours à un objet écouteur d'objet pour traiter les événements des touches programmables Gauche et Droite. Lorsque l'utilisateur appuie sur la touche programmable Gauche, la tête de lecture est placée sur l'image « options », tandis que la touche programmable Droite ferme l'application.

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.

Enfin, ajoutez du code pour initialiser l'objet partagé qui enregistre le restaurant préféré de l'utilisateur pour les réservations :

// Définition de la fonction d'écoute d'objet partagé 
function so_listener (the_so:SharedObject) {
    if (the_so.getSize () == 0) {
    // L'objet partagé n'existe pas, donc l'utilisateur 
    // n'a pas encore défini de préférences. 
    }
    SharedObject.removeListener ("location");
}
// Création d'un objet partagé :
location_so = SharedObject.getLocal ("location");
// Ajout d'un objet écouteur SharedObject :
SharedObject.addListener ("location", this, "so_listener");

Pour tester votre travail, sélectionnez Contrôle > Tester l'animation.

A ce stade, vous devez pouvoir sélectionner un élément du menu en donnant le focus au bouton correspondant, puis en appuyant sur la touche de sélection de l'émulateur (ou sur la touche Entrée du clavier de l'ordinateur). Dans les sections suivantes, vous allez créer les écrans des plats du jour et du clip vidéo, ainsi que l'écran de spécification de l'emplacement par défaut.