Outils pour utilisateurs

Outils du site


cours2010:multimedia:petit_projet_bis

(Petit) Projet - suite

Le but du TP est d'ajouter des transitions entre les pages et de publier le fichier Flash en ligne.

Publication

Nommer votre fichier ”projet.fla”. Vous devez obtenir un fichier ”projet.swf” en l'exécutant.

Placer le fichier ”projet.swf” dans le même dossier que le fichier ”index.html” suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <title>TP petit projet Flash</title>
    <script type="text/javascript" 
             src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <script type="text/javascript">
    swfobject.embedSWF("projet.swf", "monContenu", "300", "120", "9.0.0");
    </script>
 
</head>
 
<body>
    <div id="monContenu">
      <p>Contenu alternatif (sans Flash ou JavaScript)</p>
    </div>
</body>
</html>

Dans la ligne :

swfobject.embedSWF("projet.swf", "monContenu", "300", "120", "9.0.0");

Vous devez ajuster la taille de votre fichier (celle prévue pour la scène).

Pour le reste, utiliser vos compétences en HTML/CSS comme de normal.

Placer les fichiers (SWF et HTML) sur le serveur.

Transition entre les pages

La suite du TP suppose que vous ayez fait dans le TP précédant la version ou les pages étaient créées par le code. Si ce n'est pas le cas, le faire et demander de l'aide pour avancer !

Transition d'entrée

Difficile de faire plus simple.

Quand un Symbole est ajouté à l'affichage, il joue automatiquement les animations incluses.

Ajouter à votre Symbole (page) une animation. Et ajouter à la fin un “stop()” pour qu'elle ne soit jouée qu'une fois.

Transition de sortie

Ce qui suit est décomposé en épate pour vous aider à trouver les erreurs. Donc, bien les suivre et les valider dans l'ordre.

Le but est de :

  • Jouer une animation de sortie.
    • Et mémoriser la future page à afficher.
  • Executer du code à la fin de l'animation de sortie.
    • Afficher la nouvelle page.

Jouer une animation de sortie

Mettre en place une animation de sortie avec une étiquette :

A la fin de l'animation de sortie, placer un “stop()” et un “trace('ça marche')”.

Dans les actions des boutons, mettre en commentaire le code changeant la page et le remplacer par :

contenu.gotoAndPlay("anim sortie");

Tester le fait que l'on joue l'animation de sortie.

Exécuter du code à la fin de l'animation de sortie

Placer sur la racine (scène principale) la fonction suivante :

function finSortie():void {
  trace("prêt à changer de page !");
}

à la fin de l'animation de sortie, placer du code appelant cette fonction :

Object(parent).finSortie();
  • La propriété parent permet d'accéder au parent du Symbole (page).
  • Object(parent) permet de passer outre les vérifications du compilateur (désoler).

Tester le fait que l'on appelle bien la fonction (finSortie).

Afficher la nouvelle page

Dans la fonction finSortie placer du code affichant une nouvelle page (dans un premier temps toujours la même) :

function finSortie():void {
  trace("prêt à changer de page !");
  removeChild(contenu);
  contenu = new PageAccueil();
  addChild(contenu);
}

Tester le fait que la page d'accueil s'affiche après la transition de sortie.

Mémoriser la future page à afficher

Pour afficher la page demandée par l'utilisateur, il faut la mémoriser dans une variable.

Puis l'utiliser après l'animation de sortie :

// Variable mémorisant la future page (Classe) à afficher
var futurePage:Class;
 
// Quand on click sur le bouton Accueil
menu.boutonAccueil.addEventListener(MouseEvent.CLICK, clickSurBoutonAccueil);
 
function clickSurBoutonAccueil(e:MouseEvent):void {
   // Mémorise la future Page (Classe)
   futurePage = PageAccueil;
   // Joue l'animation de sortie de la page actuelle
   contenu.gotoAndPlay("anim sortie");
}
 
function finSortie():void {
  trace("prêt à changer de page !");
  // Supprime la page actuelle
  removeChild(contenu);
  // Création d'une instance de la "futurePage" référencé par "contenu"
  contenu = new futurePage();
  // L'ajouter à l'affichage
  addChild(contenu);
}

Tester…

Optionnel

Qui peut être nécessaire pour le rendu de la rentrée.

Import du jeu de tir (piaf)

Essayer d'intégrer à votre projet le jeu de tir (piaf) dans la version où les oiseaux sont créés par le code.

Flash importe automatiquement les Symboles inclus. Mais il ne le fait pas pour ceux créés par le code. Vous devez vous-même placer dans la bibliothèque du “projet” les symboles exportés pour ActionScript.

Gestion de la profondeur (calques)

La méthode addChild ajoute un objet “par-dessus” les autres. On peut utiliser addChildAt pour spécifier la “profondeur”.

Mais la meilleure méthode consiste à utiliser l'occurrence d'un Symbole pour maîtriser la positon du contenu :

  • Faire un Symbole vide “Conteneur”.
  • Placer une occurrence de ce symbole aux coordonnées (0,0) et la nommer conteneur.
    • Placer le conteneur sur un calque relativement aux autres.
  • Adapter le code :
addChild(contenu);
  • en :
conteneur.addChild(contenu);
  • Rq: si vous utilisiez la propriété parent, maintenant il y a un “parent” supplémentaire ! parent.parent ;-)

Pour les bons

Le code :

Object(parent).finSortie();

Pose problème, car il dépend de l'imbrication des Symboles.

Il est plus correct d'utiliser un événement qui sera propagé aux parents pour signaler la fin de l'animation :

dispatchEvent(new Event("fin sortie", true));

Mettre en place un gestionnaire d'événement qui va écouter les fins d'animations.

cours2010/multimedia/petit_projet_bis.txt · Dernière modification: 2011/04/10 22:00 (modification externe)