Outils pour utilisateurs

Outils du site


cours2009:multimedia:simple_projet_avec_flashdevelop

Simple projet avec FlashDevelop

Le but de cette activité est de mettre en place un projet avec FlashDevelop. Celui-ci comportera :

  • De simples interactions sous forme de boutons.
  • L'intégration d'activités précédemment réalisées.

Activité

  • Mettre en place un projet avec FlashDevelop.
    • Faire un projet (et son dossier) avec FalsDevelop. Choisir un projet compilé avec l'IDE de Flash
    • Placer dans le projet un nouveau fichier ”.fla” vide.
    • Ne pas oublier de modifier les options de publication pour décocher l'option de création automatique des variables d'instance (occurrences de la scène).
    • Éditer le Fichier ”.fla” et créer dedans un symbole vide (CTRL+F8).
    • Lier le symbole à une Classe (choisir un non qualifié de paquet).
    • Créer les dossiers correspondants au nom qualifié du paquet sous FlashDevelop.
    • Créer la Classe associée au symbole sous FlashDevelop.
  • Mettre en place une simple interaction :
    • Faire le graphisme d'un bouton et le convertir en symbole.
    • Lui donner un nom d'occurrence.
    • Déclarer la variable d'instance correspondante dans la Classe.
    • Mettre en place un gestionnaire d'événement sur l'instance du bouton (la variable) dans le constructeur (à l'initialisation de l'objet).
      • Le type d'événement est celui correspondant à un click avec la souris.
      • Choisir un non pour le gestionnaire d'événement (identifiant de la fonction).
      • Ajouter la déclaration de la fonction servant de gestionnaire d'événement.
  • Intégrer des éléments repris d'autres activités (projets).
    • Ouvrir le fichier ”.fla” d'une activée précédente.
      • S’il n'est pas contenu dans un Symbole, réaliser cette modification.
      • Associer le symbole à une Classe (avec un nom qualifié).
      • Exporter le projet sous forme d'un fichier ”.swc” (librairie). Deux façons de faire possibles :
        • Modifier les paramètres de publication pour demander la génération d'un fichier ”.swc” (exporter SWC) et re-publier le projet.
        • Par le menu contextuel sur le Symbole présenté dans la bibliothèque, demandez “Exporter le fichier SWC…”.
      • Placer le fichier SWC dans le dossier du projet en cours de réalisation.
    • Ajouter le projet importé sous forme de librairie (fichier ”.swc”) au projet.
      • Dans FlashDevelop, ajouter le fichier ”.swc” comme librairie du projet. Dans le menu contextuel du ficher dans l'affichage du projet, cocher l'option “Add to Library”.
        • Remarque : cette étape est “facultative” car la compilation sera faite par l'IDE de Flash.
      • Dans l'IDE de Flash, modifier dans options de publication les paramètres du langage AS3 pour inclure dans les chemins de bibliothèque le fichier ”.swc”.
        • Modifier le chemin pour qu'il soit relatif au dossier du projet (exemple : ”./horloge.swc”).
    • Dans le code de la Classe associé au projet en cours de réalisation :
      • Ajouter l'import depuis la librairie exportée en fichier ”.swc” de la classe correspondant au symbole que vous désiré incorporer.
  • Gérer l'affichage d'éléments par le code.
    • Créer un objet d'affichage par le code :
      • Dans la méthode servant de gestionnaire d'événement (click sur le bouton):
        • Faire une variable recevant une instance de la Classe associée au symbole que l'on désire afficher.
        • Ajouter l'instance ainsi crée à la hiérarchie d'affichage (comme enfant du symbole où s'exécute le code).
    • Supprimer un objet d'affichage par le code :
      • Au choix :
        • Dans le même gestionnaire d'événement (le bouton agit comme une bascule).
        • En mettant en place un autre bouton.
      • Supprimer l'instance de la hiérarchie d'affichage.
      • Enlever les références vers l'instance : affecter à la variable la référençant la valeur null.
  • Prolongement de l'activité (facultatif si le temps le permet).
    • Mise en place d'un menu affichant les activités précédentes :
      • Exporter sous forme de fichiers ”.swc” les activités précédentes.
      • Mettre en place des boutons.
      • Associer à ses boutons des gestionnaires d'événements gérant l'affichage des symboles correspondants à chaque activité.

Consignes

Suivre l'activité précédemment énoncée. Il suit des consignes générales auxquels vous devez prêter attention.

Mettre en place un projet avec FlashDevelop

Identique au TP précédant. La seule différence est que vous crée un fichier ”.fla” pour l'occasion.

  • Important : Ne pas oublier de changer les options du langage AS3 pour que Flash ne déclare pas automatiquement les occurrences de scène (variable d'instance).
  • Le choix du nom qualifié pour le paquet vous incombe. Souvenez-vous que la convention est de choisir un nom de domaine en notation inversé et qu'il est souhaitable d'inclure dedans le nom du projet en cours.
  • Important : Ne pas oublier de spécifier la Classe de base (MovieClip) lors de création de la Classe sous FlashDevelop.
  • Valider le on fonctionnement de cette phase en plaçant une simple instruction ”trace(”…”);” dans le constructeur de la classe et en exécutant le projet.

Mettre en place une simple interaction

Identique à l'activité : “Mort aux piafs !”

Le but de l'activité est que vous saisissiez vous-même le code dans FlashDevelop. L'éditeur peut être d'une grande aide pour faciliter le développement et éviter les erreurs (gestion des imports couplés à la complétion du code saisi).

Le but est la mise en place d'un gestionnaire d'événement.

  • La complétion du code de FlashDevelop rend l'écriture de l'appel de la méthode ”addEventListener” rapide.
  • Après la saisie de l'identifiant de la méthode du gestionnaire d'événement, FlashDevelop vous offre un automatisme pour déclarer la méthode correspondantes :
    • Placer le curseur sur l'identifiant
    • Taper “Shift+Ctrl+1”
  • Plus tard, pensez à lire : FlahDevelop : Interface
  • Valider le fonctionnement du gestionnaire d'événement en en plaçant dedans une simple instruction ”trace(”…”);”.

Intégrer des éléments repris d'autres activités

Cette activité est réalisée par le biais de fichiers ”.swc” qui permettent, à la compilation du projet, le réemploi d'éléments réalisés séparément.

Les éléments destinés à être réutilisés doivent avoir un nom de Classe associé (exporté pour ActionScript) même s’ils n'ont pas de code (fichier ”.as”) associé.

Un des grands avantages des fichiers ”.swc” est de contenir tous les éléments nécessaires (code et graphisme) dans un simple fichier.

Remarque : il est préférable de prendre l'horloge à aiguilles ou le jeu des oiseaux. L'horloge flip-clock peut poser problème suite à la gestion des polices de caractères intégrée.

Export en fichier ".swc"

Il existe deux possibilités pour obtenir un fichier ”.swc” à partir d'un fichier ”.fla”.

Export en SWC à la publication

L'avantage de cette méthode est qu'elle ne nécessite pas d'intervention particulière pour mettre à jour le fichier ”.swc” suite à la modification d'un graphisme (ou du code). Une simple compilation suffit, le fichier ”.swc” est mis a jour lors de la compilation en fichier ”.swf”.

C'est la méthode préférer quand on gère un projet découper en plusieurs fichiers.

Export d'un symbole

On peut demander l'export d'un symbole précis en fichier en fichier ”.swc”.

Cette méthode est la plus simple et explicite pour des besoins ponctuels.

Utilisation de fichier ".swc"

Un fichier ”.swc” est une librairie. À ce titre il faut indiquer au compilateur de l'utiliser.

FlashDevelop peut gérer les paramètres de compilation. On peut lui indiquer quelles librairies utiliser :

Quand on compile le projet par le biais de l'IDE de Flash, il faut de même lui indiquer les librairies utilisées.

Important : Cette manipulation doit être faite sur le fichier qui importe celui exporté en ”.swc”. Faites attention de bien avoir sélectionné celui où l'on importe (celui réalisé aujourd'hui) avant de modifier les paramètres de publication.

Remarques :

  • Flash à par défaut des chemins prédéfinit :
    • Le répertoire courant (”.”) pour les fichiers ActionScript (source ”.as”).
    • Un dossier de l'application (Flash IDE) contenant les librairies standard de Flash.
  • Il est préférable de toujours employer des chemins relatifs (commençant par ”./”) pour les fichiers inclût dans le dossier du projet. Ainsi, ils restent valables même si on change l'emplacement du projet.

Gérer l'affichage d'éléments par le code

Identique à l'activité “Encore Plus de Piafs !”.

C'est le point le plus important pour la réalisation d'une application Flash. Suite aux actions de l'utilisateur, on souhaite contrôler les éléments affichés…

cours2009/multimedia/simple_projet_avec_flashdevelop.txt · Dernière modification: 2010/04/27 22:00 (modification externe)