Outils pour utilisateurs

Outils du site


cours2009:multimedia:projet_basique_avec_flashdevelop

Projet basique avec FlashDevelop

Le but de cette activité est de faire une petite application composée de plusieurs écrans (pages). Vous démarrez d'un projet fourni dont vous écrirez le code et dupliquerez les pages.

Un prolongement possible de cette activité consistera en :

  • Ajouter une animation d'introduction à des pages.
  • Mettre en place une interaction basique sur au moins un écran.

Important : Ce projet sera repris et continué lors des TP suivants. L'activité dans son ensemble continuera l'équivalent de l'épreuve pratique de 4 Heures en fin de semestre.

Mise en place de l'activité

Le projet et ses fichiers ".fla"

Vous partirez d'un projet fourni où les imports entre les fichiers sont déjà définis.

  • Extraire l'archive contenant le projet :
    • application.fla” : la “racine” du projet configuré pour importer les fichiers ”.swc” du dossier ”./pages”.
    • Un dossier ”./pages/” qui contient ”page accueil.fla” : une page type
      • Cette page est configurée pour s'exporter en ”.swc” et utiliser le code source du répertoire parent (”..”).
      • Dupliquer cette page pour les obtenir les autres pages.

Le symbole et la classe de la base de l'application

Le but est de mettre en place le symbole et la classe qui recevront le code gérant l'application.

Important : utilisez le nom de paquet suivant ”src1.grA1.nom.projet” en adaptant le groupe et le nom (ajouter votre prénom si risque d'ambiguïté).

  • Faire les dossiers correspondants aux noms de paquets.
  • Ouvrir le fichier ”projet.as3proj” (FlashDevelop).
    • Faire une Classe nommée Application dans le paquet (”src1.grA1.nom.projet”).
      • Important : Ne pas oublier qu'elle doit dériver de MovieClip.
      • Ajouter une simple ”trace(”…”)” dans le constructeur.
  • Éditer le fichier ”application.fla” :
    • Faire un symbole vide nommé Application
    • Le lier à la Classe précédemment créée.
    • Placer ce symbole sur la scène aux coordonnées (0,0).
  • Testez-le pour voir le message dans la console.

La page d'accueil

Le but est de mettre en place un symbole qui recevra le graphisme de la page d'accueil et qui sera exporté pour être utilisé par le code gérant l'application.

  • Ouvrir le fichier ”./pages/page accueil.fla”.
    • Ajouter un symbole vide aux coordonnées (0,0).
    • L'exporter comme ”src1.grA1.nom.projet.pages.PageAccueil”.
    • Lui ajouter un simple graphisme.
    • Tester la page (il doit faire le fichier ”.swc”).
    • Au passage, s'assurer que FlashDevelop utilise bien ”page accueil.swc” comme librairie.
  • Éditer la Classe Application :
    • Ajouter une variable d'instance :
    • Ajouter le code suivant au constructeur :
    • FlashDevelop doit avoir ajouté automatiquement l'import de la Classe : ”src1.grA1.nom.projet.pages.PageAccueil
  • Tester l'application (”application.fla”) :
    • Vous devez voir le graphisme
    • Et le message dans la console
      • (si vous n'avez pas enlevé l'instruction ”trace(”…”)”).

Mise en place d'une autre page

Le but est de faire une nouvelle page en partant de la page d'accueil comme modèle.

  • Dupliquer le fichier ”./pages/page accueil.fla” et le renommer en ”./pages/page 1.fla”.
  • Éditer le nouveau fichier.
    • Modifier l'export de symbole en ”src1.grA1.nom.projet.pages.Page1”.
    • Modifier le graphisme.
  • Tester en modifiant la page affichée au démarrage de l'application (changer pageAccueil en page1).

Mise en place du menu

Maintenant que l'on dispose de deux pages, on va pouvoir mettre en place une navigation entre elles.

  • Ouvrir le fichier ”application.fla”.
    • Dans le symbole Application :
      • Faire deux boutons sous forme de symboles (pour page d'accueil et page 1).
      • Nommer les occurrences : boutonAccueil et bouton1.
  • Éditer la Classe Application :
    • Ajouter la déclaration des variables d'instance (public) correspondante aux l'occurrences nommées boutonAccueil et bouton1.
    • Ajouter dans le constructeur la mise en place du gestionnaire d'événement pour le bouton de la page :
    • Ajouter dans le corps de la Classe le gestionnaire d'événement :
  • Tester l'application.
    • si vous avez laissé la page 1 testée précédemment, vous devez pouvoir afficher la page d'accueil en cliquant sur le bouton.
  • Faire le même travail pour la page 1 et tester les deux boutons.

Cette façon de gérer la navigation entre les pages utilise des méthodes vues lors des TP précédant. Lors du prochain TP elle sera remplacée par une méthode plus souple.

Bonus : Vous pouvez ajouter les symboles de l'interface (menu,fond,…) au fichier ”.fla” d'une page (pas dans le symbole exporté pour la page). Pensez simplement à cocher l'option “Toujours mettre à jour avant la publication”. Cela permet d'éditer les pages “en place”.

À venir

Ce qui manque pour faire une petite application Flash :

  • Généraliser la navigation pour pouvoir ajouter des interactions la contrôlant sur les pages.
  • Gérer les animations de sortie de pages.
cours2009/multimedia/projet_basique_avec_flashdevelop.txt · Dernière modification: 2010/05/12 22:00 (modification externe)