Création d'une animation d'image (Flash Professional uniquement)

Dans cette section, vous allez créer l'animation interpolée qui assure la transition entre les images de chaque plat. A la fin de cette section, l'animation sera lue sans discontinuer. Dans la suite de ce didacticiel, vous allez ajouter des éléments de navigation et du code ActionScript pour permettre à l'utilisateur de contrôler l'animation à l'aide de la touche programmable Droite du périphérique.

Pour créer l'animation, vous allez utiliser un clip prédéfini contenant des images de tous les plats qui sont regroupées en une colonne verticale. Vous allez utiliser un calque de masque pour n'afficher qu'une seule des images. Vous allez ensuite créer une série d'interpolations permettant de déplacer le clip vers le haut et d'afficher ainsi une image différente. La dernière image du clip est une duplication de la première, ce qui permet à la séquence d'animation de reprendre son état initial une fois que l'utilisateur a consulté la dernière image. Ces concepts sont illustrés par l'exemple suivant :

Dans la dernière section de ce didacticiel, vous allez ajouter du code ActionScript et des éléments d'interface utilisateur pour permettre à l'utilisateur de contrôler la séquence d'animation.

Ouvrez le fichier que vous avez enregistré dans la section Création du menu destiné à l'écran d'accueil (Flash Professional uniquement).
Dans le scénario, sélectionnez l'image 10 en tant qu'image-clé dans le calque intitulé Images.
Ouvrez le panneau Bibliothèque et faites glisser le symbole nommé Specials movie clip sur la scène.
La suite de ce didacticiel fait référence à ce clip simplement sous le nom clip d'images.
Une fois la nouvelle occurrence de clip sélectionnée, définissez les deux coordonnées x et y du clip sur 0 dans l'inspecteur Propriétés.
Cette action aligne le coin supérieur gauche du clip d'images sur le coin supérieur gauche de la scène.
Dans le calque Images, insérez des images-clés dans les images 20, 30, 40 et 50, comme indiqué dans l'illustration ci-dessous :
Dans le scénario, sélectionnez l'image 20 en tant qu'image-clé.
Dans la scène, sélectionnez le clip d'imagesPour plus d'informations sur l'utilisation des calques demasque, consultez la section "Using mask layers" du manuel Utilisation et définissez sa coordonnée y sur -100 dans l'inspecteur Propriétés.
Cette action déplace le clip de 100 pixels vers le haut sur la scène.
Sélectionnez l'image 30 en tant qu'image-clé dans le scénario, sélectionnez le clip d'images, puis définissez sa coordonnée y sur -200 dans l'inspecteur Propriétés.
Sélectionnez l'image-clé de l'image 40, sélectionnez le clip d'images, puis définissez sa coordonnée y sur -300 dans l'inspecteur Propriétés.
Sélectionnez l'image 50 en tant qu'image-clé, sélectionnez le clip d'images, puis définissez sa coordonnée y sur -400 dans l'inspecteur Propriétés.
Sélectionnez l'image 10 en tant qu'image-clé, puis sélectionnez l'option Mouvement dans le menu Interpolation de l'inspecteur Propriétés.
Cette action interpole la position du clip d'images entre les images-clés 10 et 20.
Pour créer des transitions entre les autres images, répétez l'étape 11 pour les images-clés 20, 30 et 40.
Pour créer le calque de masque, sélectionnez le calque Images dans le scénario puis sélectionnez Insérer > Scénario > Calque (ou cliquez sur Insérer un calque dans le scénario).
Insérez une image-clé dans l'image 10 du nouveau calque de masque.
L'utilisation de l'outil Rectangle dans le panneau Outils crée un rectangle au-dessus de la première image (la plus au-dessus) dans le clip d'images des plats.
Peu importe la couleur de remplissage que vous utilisez pour le rectangle, elle doit être totalement opaque.
Pour vous assurer que le rectangle recouvre toute la zone de l'image, double-cliquez dessus pour le sélectionner, puis utilisez l'inspecteur Propriétés pour définir ses deux coordonnées x et y sur 0, sa largeur sur 176, et sa hauteur sur 100.
Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh) sur le calque Specials dans le scénario, puis sélectionnez Masque dans le menu contextuel.
Le calque est converti en calque de masque, signalé par l'icône correspondante. Le calque situé immédiatement au-dessous est lié au calque de masque et son contenu affiché à travers la zone remplie sur le masque. Pour plus d'informations sur l'utilisation des calques de masque, consultez la section Utilisation de calques de masque du manuel Utilisation de Flash.
Enregistrez vos modifications (Fichier > Enregistrer) .

A ce stade, le test de l'application dans l'émulateur lit l'animation jusqu'au bout et s'arrête. Dans la section Ajout d'éléments de navigation et de texte à l'écran des plats du jour (Flash Professional uniquement), vous allez ajouter du code ActionScript permettant d'arrêter l'animation à chaque image-clé, ainsi que des éléments d'interface utilisateur permettant à l'utilisateur de naviguer entre les images.