Outils pour utilisateurs

Outils du site


cours2010:multimedia:organiser_un_petit_projet

Organiser un (petit) projet

Le but est de faire une petite “application”.

  • Réalisation d'une maquette :
    • Navigation
    • Contenu
      • Les différentes pages
  • Répondre aux interactions :
    • Réagir aux actions sur les boutons
    • Afficher les pages demandées
  • Intégrer le contenu des TP précédents :
    • Les mettre sous forme de Symboles
    • Copier les Symboles depuis les autres bibliothèques
  • Utiliser du code pour :
    • Créer et supprimer les instances des Symboles (pages)
    • Ajouter une animation aux boutons

Vous partirez d'un nouveau fichier (.fla) en AS3.

Réalisation d'une maquette

Le but est de mettre les éléments en place (sans code dans un premier temps).

La scène principale doit comporter deux symboles :

  • Une occurrence de “Menu” nommé “menu”.
  • Une occurrence de “Contenu” nommé “contenu”.

Dans le symbole “Menu”, mettre en place les boutons pour les différentes pages :

Contenu

Le contenu sera placé dans le symbole “Contenu” :

  • Une étiquette et une image clef par page.
  • Chaque “Page” est constituée d'un Symbole.

Les différentes pages

Il est très important de bien faire attention à l'origine des symboles et aux positons des occurrences de ceux-ci :

  • Les occurrences doivent être aux coordonnés (0,0).
  • Les graphismes présents dans les symboles doivent être décalés par rapport à l'origine de ceux-ci.

Pour obtenir ce résultat, vous pouvez essayer la démarche suivante :

  • Créer un Symbole vide ⌘F8 (et le laisser vide !).
  • Placer une occurrence de ce Symbole aux coordonnés (0,0).
  • Éditer le Symbole dans le contexte de la scène principale par double clic sur lui (le petit rond avec une croix).
  • Placer le graphisme sur le symbole relativement aux autres éléments (menu,scène, …).

Important : vous devez déjà pouvoir visualiser votre application en déplaçant la tête de lecture dans le symbole “Contenu” (visualisé dans le contexte de la scène).

Répondre aux interactions

Sur le calque “Actions” de la scène principale, on mettra en place le code mettant en place les interactions avec les boutons (menu.boutonAccueil, menu.boutonPage1, …)

Réagir aux actions sur les boutons

Mise en place d'un gestionnaire d'événement pour chaque bouton :

Afficher les pages demandées

Dans la situation présente : il suffit de déplacer la tête de lecture (gotoAndStop) dans l'occurrence nommée “contenu”.

Intégrer le contenu des TP précédents

Le but est d'intégrer dans les pages les activités précédentes.

Faire cette activité pour une ou deux pages. Vous la reprendrez après avoir fait le restant de l'activité.

Les mettre sous forme de Symboles

Si le travail d'un TP précédant comporte plusieurs éléments sur la scène principale, vous pouvez le mettre dans un Symbole en :

  • Sélectionnant les images (différents calques et images-clefs) par glissé déplacé.
  • Utiliser la commande “copier les images” du menu contextuel.
  • Faire un symbole vide (⌘F8).
  • Placer dans le nouveau Symbole les images par la commande “coller les images” du menu contextuel.

Copier les Symboles depuis les autres bibliothèques

Si vous avez plusieurs fichiers ouverts avec Flash IDE : vous pouvez accéder aux différentes bibliothèques par la liste déroulante.

Pour ajouter un Symbole issu d'un autre fichier, procédez comme d'habitude par un simple glissé déplacé.

Attention : Flash copie les Symboles ainsi que les éléments inclus. Vous vous retrouvez vite avec une bibliothèque comportant de nombreux éléments.

Organiser votre bibliothèque en utilisant les dossiers :

Utiliser du code

Au préalable, enregistrez votre fichier sous un nouveau nom. Pour garder les deux versions (avec “étiquette” ou avec “code”).

Dans la nouvelle version (“code”) : supprimez le symbole “Contenu” de la bibliothèque.

Important : si ce n'est déjà fait, dans les propriétés des symboles des pages, demander à les exporter pour ActionScript et leur donner un nom de classe.

Créer et supprimer les instances des Symboles (pages)

La page initiale

Au début du calque action de la scène principale : mettre en place la page d'accueil.

//Mise ne place
// Variable "contenu" recevant une instance de PageAccueil
 
// Ajoute ce qui est référencé par "contenu" à l'affichage.

Tester le bon affichage de la page d'accueil au chargement de l'application.

Changer la page affichée

Dans les gestionnaires d'événements : permuter la page affichée.

	// Supprime la page actuelle
 
	// Création d'une instance de "....." référencée par "contenu"
 
	// L'ajouter à l'affichage
 

Ajouter une animation aux boutons

Cette partie est optionnelle. Vous pouvez finir d'intégrer le contenu des TP précédents avant de l'essayer.

Principe de base

  • Mettre en place une animation sur le symbole d'un bouton.
    • Sur un claque “Actions”, ajouter des images-clefs et un ”stop()” aux images correspondant à un état.
    • Associé une étiquette à chaque début d'animation menant à un état (normal,survole,…).
  • Mettre en place des gestionnaires d'événements pilotant la tête de lecture :
    • MouseEvent.ROLL_OVER : Quand la souris survole.
    • MouseEvent.ROLL_OUT : Quand la souris quitte.
    • MouseEvent.MOUSE_DOWN : Quand l'on enfonce le bouton gauche de la souris.

Généralisation

Dans un premier temps, appliquer le même traitement à plusieurs boutons.

La répétition doit vous apparaître clairement.

Essayez d'utiliser une fonction qui prend comme paramètre l'occurrence à qui on désire ajouter des gestionnaires d'événements :

// Ajoute les gestionnaires d'événement à un bouton
function ajoutGestionnaireEvenement(unBouton:MovieClip):void {
  // ici le travail qui se répète pour un bouton :
  unBouton.
 
}
 
// utilise la fonction pour un bouton
ajoutGestionnaireEvenement(boutonPage1);
cours2010/multimedia/organiser_un_petit_projet.txt · Dernière modification: 2011/04/04 22:00 (modification externe)