Outils pour utilisateurs

Outils du site


cours2009:multimedia:projet_basique_animation_des_transitions

Projet basique : animation des transitions

Le but de cette activité est de mettre en place des animations de transition entre les pages :

  • Réaliser une animation à l'affichage d'une page est trivial.
    • Il suffit de la mettre en place sur le scénario du Symbole employer pour la page et de placer un ”stop();” pour l'arrêter.
  • Réaliser une animation quand on quitte une page… C'est plus dur !
    • L'animation a lancer est celle de la page actuellement afficher (_pageCourante).
    • Quand cette animation est finie on peut alors afficher la nouvelle page.

ATTENTION !

Comme pour la navigation généralisée, je vais employer des méthodes statiques par commodité. Sauf que dans ce cas, cela ressemble plus à une rustine qu'a un code réellement propre.

Un autre problème est qu'il vous manque des notions importantes pour le mettre correctement en place. Toutes les pages de votre application n'ont pas nécessairement une animation de sortie. Elles ne sont pas toutes faites sur le même modèle. Dans ce cas vous auriez besoin du concept de polymorphisme et plus particulièrement celui d'interface.

Mais je vais tout de même vous montrer comment vous pouvez le faire. Histoire d’avoir un projet qui ressemble à quelque chose !

Explications générales

Le principal problème est qu'une transition est un enchainement d'action.

Quand on crée une page (instance d'un Symbole), Flash enchaine automatiquement la lecture du scénario de ce symbole. C'est le comportement par défaut. On n'a rien à faire de spécial.

Mais quand veut quitter une page. On peut jouer l'animation de sortie de cette page. Mais après, rien n'est prévu par défaut. Si on veut afficher une nouvelle page, c'est à nous de mettre en place cette action !

Les instructions d'un programme s'enchainent naturellement suivant le flot d'exécution. Mais à notre échelle de temps c'est presque instantané. Pour ce problème, on veut enchaîner des actions dans le “temps”. On parle de programmation asynchrone.

Même si la réalisation n’est pas des plus élégantes. Ce concept de programmation asynchrone est important. La réalisation de transition est une bonne illustration de ce concept. Essayez de bien comprendre ce qui se passe, car c'est un des points importants de la programmation avec Flash.

Mise en place des transitions

La mise en place est décomposée en étapes pour vous donner une bonne compréhension du problème.

Vérifier bien chaque étape quand c'est spécifié.

Animation d'entrée

Comme dit en introduction, cela se fait naturellement :

  • Mettre en place une animation dans le symbole de chaque page.
  • Placer une image clef avec un stop() pour l'arrêter.

Vérifier que chaque page joue sont animation d'entrée quand elle s'affiche.

animation de sortie

On va procéder en deux étapes :

  • La lancer, mais on ne pourra plus changer de page.
  • Ensuite, corriger le problème…

Lancer l'animation de sortie

La mettre en place sur le scénario des pages (la page affichée en premiers suffit pour l'instant).

On mettra une étiquette sur une image clef pour en marquer le début :

Lancer cette animation consiste à remplacer le code qui exécute le changement de page par un code lançant l'animation de la page actuellement affichée.

Vérifier l'animation de sortie de la première page se joue à chaque fois que l'on veut aller sur une autre page. Si vous n'avez pas placé de stop() en fin d'animation de sortie, elle boucle sur l'animation d'entrée.

Enchainer les actions

À la fin de l'animation de sortie, placer un stop() et un trace(”..”) pour marquer l'instant où l'on désire agir (changer de page).

Tester le bon affichage du message du ”trace(”..”)”.

L'animation vas signalé la fin de l'animation en appelant une méthode statique de la Classe Application :

Placer dans le corps de cette méthode un simple trace(”..”) pour la tester.

Appeler cette méthode depuis l'image clef marquant la fin de l'animation de sortie :

Vérifier que vous voyez bien les messages dans la console.

Maintenant on est arrivé au point ou on peut changer de page :

Reste que l'on n’a pas la Classe de la nouvelle page dans cette méthode !

Il faut la sauvegarder dans une variable quand on initie la transition :

Bien sur déclarer cette variable :

Et l'utilisé pour changer de page :

Vérifier que tout fonctionne !

Très important : Si vous avez le message d'erreur ”1120: Accès à la propriété non définie _instance”. Ajoutez a un panneau “Actions” de ”application.fla” un import de la Classe ”Application” C-à-d : ”import src0.grZ0.unNom.projet.Application;”.

Diagramme de séquence au format PDF.

Bonus

cours2009/multimedia/projet_basique_animation_des_transitions.txt · Dernière modification: 2010/05/15 22:00 (modification externe)