Essayez ! Créer des animations qui se chevauchent

La structure de la chronologie dans Microsoft Expression Blend vous permet d'exécuter plusieurs chronologies d'animation en même temps dans votre application. La procédure suivante montre comment créer une animation avec un papillon qui se déplace en continu dans un cercle, mais bat des ailes lorsque l'utilisateur déplace le pointeur de la souris sur lui.

Remarque :

La procédure suivante utilise des déclencheurs dans un projet Windows Presentation Foundation (WPF) pour contrôler les tables de montage séquentiel. Vous pouvez aussi utiliser le comportement ControlStoryboardAction pour contrôler les tables de montage séquentiel dans WPF ou dans Microsoft Silverlight. Pour plus d’informations sur l'utilisation d'un comportement, voir Ajouter un comportement à un objet.

Pour créer des animations qui se chevauchent

1. Dans Microsoft Expression Blend, ouvrez ou créez un projet. Pour plus d’informations, voir Créer un projet.

2. Basculez vers l'espace de travail Animation. (Le bouton F6 permet de basculer entre les espaces de travail disponibles. Dans l’espace de travail Animation, le panneau Objets et chronologie se trouve sous la planche graphique).

3. Si une table de montage séquentiel est ouverte, cliquez sur Fermer la table de montage séquentiel  dans le panneau Objets et chronologie.

   Remarque :
   Lorsqu’une chronologie autre que la chronologie Par défaut est sélectionnée, toute modification apportée à une propriété enregistre automatiquement une image clé sur la chronologie.

4. Sélectionnez Ellipse dans le panneau Outils. Dessinez deux petits cercles à droite de la planche graphique. Vous pouvez définir des valeurs identiques pour les propriétés Height et Width dans la catégorie Disposition du panneau Propriétés afin que les ellipses soient des cercles parfaits. En cas de détourage, modifiez les propriétés Margin.

5. Choisissez Sélection dans le panneau Outils, puis rapprochez les cercles, comme dans l’image ci-après :

   Deux cercles tracés sur la planche graphique

   

6. Pour utiliser les deux cercles en même temps, sélectionnez un cercle dans le panneau Objets et chronologie, maintenez la touche Ctrl enfoncée pour sélectionner l’autre cercle, cliquez avec le bouton droit sur les cercles sélectionnés, sélectionnez Grouper, puis cliquez sur Grille.

   Un nouveau panneau de disposition Grille contenant les deux cercles apparaît dans le panneau Objets et chronologie.

7. Pour renommer l'objet Grid, cliquez dessus avec le bouton droit, puis sélectionnez Renommer. Changez le nom en Papillon.

8. Pour créer l’animation circulaire, vous pouvez utiliser l’outil Convertir en trajectoire qui crée une chronologie d’animation à partir d’une trajectoire. Dessinez une troisième ellipse au centre de la planche graphique, d’une largeur correspondant environ à la moitié de celle de la surface de la planche graphique.

9. Sélectionnez la nouvelle ellipse dans le panneau Objets et chronologie, sélectionnez Tracé dans le menu Objet, puis cliquez sur Convertir en trajectoire.

   La boîte de dialogue Choisir la cible de la trajectoire s’affiche.

10. Sélectionnez l'objet Grid Papillon dans la liste des objets disponibles sur la planche graphique, puis cliquez sur OK.

    Une chronologie est créée. Expression Blend passe en mode enregistrement de la chronologie pour vous permettre de cliquer sur le bouton Lecture afin d’afficher l’animation sur la planche graphique. La cible (Papillon) se déplace le long de la trajectoire créée à partir de l’ellipse. Notez que si la propriété Fill de l’ellipse a pour valeur un pinceau, une partie de l’objet Papillon sera couverte.

11. Vous n’avez plus besoin de la troisième ellipse. Supprimez-la.

12. Dans le panneau Objets et chronologie, développez les nœuds des éléments Papillon, RenderTransform et Translation de façon à visualiser l’intervalle de temps de la trajectoire. Cliquez avec le bouton droit sur l’élément Trajectoire ou sur la barre de temps grise qui représente l’intervalle de temps, puis cliquez sur Modifier la valeur de répétition.

    La boîte de dialogue Modifier la répétition s’affiche.

13. Pour répéter la chronologie à l’infini, cliquez sur Définir sur l’infini, puis sur OK.

    Lorsque cette animation s’exécute, elle est lue en boucle.

14. Dans le panneau Objets et chronologie, cliquez sur Nouveau .

    La boîte de dialogue Créer une ressource de table de montage séquentiel s’affiche.

15. Dans le champ Nom de la ressource (Clé), entrez le nom Battement, puis cliquez sur OK.

    Expression Blend passe au mode enregistrement de chronologie, le curseur de lecture placé sur la marque 0 seconde. En mode enregistrement, les propriétés que vous définissez enregistrent automatiquement une image clé sur la chronologie.

16. Pour définir une image clé à la position 0 seconde, sélectionnez l'objet Grid Papillon, puis cliquez sur Enregistrer l’image clé.

    Une image clé s’affiche sur la chronologie, dans la ligne qui correspond à l'objet Grid Papillon.

17. Faites glisser le curseur de lecture vers la marque 1 seconde, puis enregistrez une autre image clé.

    Les positions de départ et d’arrivée de votre animation sont désormais définies.

18. Faites glisser le curseur de lecture vers la marque 0,5 seconde, entre les deux images clés précédentes.

19. Sélectionnez l’outil Sélection du panneau Outils, maintenez la touche Alt enfoncée, puis sur la planche graphique, étirez la hauteur et compressez la largeur de l'objet Grid Papillon pour qu’il ressemble à l’image ci-après.

    Étant donné qu’Expression Blend est en mode enregistrement de la chronologie d’animation Battement, la modification de l'objet Grid Papillon définit de nouvelles images clés sur la marque 0,5 seconde pour les propriétés ScaleX et ScaleY de l'objet Grid.

    Étirement de l'objet Grid sur la planche graphique

    

20. Dans le panneau Objets et chronologie, développez les nœuds de l'objet Grid Papillon jusqu’à ce que les nœuds ScaleX et ScaleY s’affichent. Sélectionnez les nœuds l’un après l’autre, cliquez dessus avec le bouton droit, sélectionnez Modifier la valeur de répétition, puis dans la boîte de dialogue Modifier la répétition, entrez 2 afin d’exécuter la chronologie à deux reprises, puis cliquez sur OK.

21. Cliquez sur le bouton Lecture pour tester votre animation sur la planche graphique. Notez que la valeur de répétition n’est pas prise en compte pour la lecture sur la planche graphique. Si vous souhaitez modifier la chronologie de votre animation, vous pouvez déplacer les images clés sur la barre grise représentant l’intervalle de temps.

    Remarque :
    Si l’espace est insuffisant pour afficher l’intégralité de la chronologie, vous pouvez utiliser la zone de texte Zoom de la chronologie pour appliquer un zoom arrière à la chronologie. Vous pouvez également modifier la largeur des panneaux pour agrandir l’affichage du panneau Objets et chronologie.

22. Vous pouvez maintenant définir des déclencheurs pour vos animations. Par défaut, une nouvelle chronologie créée dans la racine de votre document entraîne l’ajout d’un déclencheur d’événements dans le panneau Déclencheurs pour l’événement Window.Loaded qui se produit au démarrage de votre application.

    Vous pouvez conserver ce déclencheur pour la chronologie circulaire et en ajouter un pour la chronologie Battement.

23. Dans le panneau Déclencheurs, sélectionnez le déclencheur Window.Loaded. Les actions du déclencheur sont affichées sous Quand Window.Loaded se déclenche. Cliquez sur le signe moins en regard de Battement.Begin pour supprimer cette action.

    Dès lors, l’animation circulaire commence au démarrage de l’application, contrairement à l’animation Battement.

    Remarque :
    Vous devrez éventuellement régler la taille du panneau Déclencheurs pour voir la section Propriétés une fois actif. Pour modifier la taille, cliquez sur les bordures et sur la bordure interne du panneau et faites-les glisser.

    Suppression de l’animation Battement du déclencheur Windows.Loaded

    

24. Pour ajouter le déclencheur de l’animation Battement, cliquez sur le bouton Ajouter un déclencheur d’événements dans le panneau Déclencheurs.

    Un déclencheur Window.Loaded est créé.

25. Sélectionnez l’élément de l'objet Grid Papillon dans le panneau Objets et chronologie, puis dans le panneau Déclencheurs, utilisez les zones de liste déroulante pour changer le nouveau déclencheur Quand Window.Loaded se déclenche en Quand Papillon.MouseEnter se déclenche.

26. Cliquez sur Ajouter une nouvelle action en regard de Quand Papillon.MouseEnter se déclenche, puis utilisez les zones de liste déroulante pour changer la nouvelle action en Battement.Begin.

    Dès lors, lorsque le pointeur se déplace sur le papillon, la chronologie d’animation Battement commence.

    Création d’un nouveau déclencheur pour l’événement MouseEnter de l'objet Grid

    

27. Pour visualiser la chronologie d’animation et le déclencheur d’événements créés, testez votre scène en cliquant sur Tester le projet dans le menu Projet.

    Remarque :

    Si l’animation circulaire est trop rapide, vous pouvez modifier le temps d’exécution de la chronologie. Dans le panneau Objets et chronologie, sélectionnez la trajectoire dans la zone déroulante, développez les nœuds sous l'objet Grid jusqu’à ce que le nœud Trajectoire s’affiche, sélectionnez l’extrémité droite de la barre grise d’intervalle de temps, puis faites la glisser vers la droite pour allonger la durée. Vous pouvez également supprimer la chronologie circulaire, en créer une autre, puis commencer à l’étape 8 (dessinez une ellipse) pour créer la trajectoire. (Si vous ne créez pas une chronologie avant de commencer à l’étape 8, l’animation circulaire sera ajoutée à la chronologie d’animation Battement.)