Outils pour utilisateurs

Outils du site


cours2010:multimedia:petit_projet_par_le_code

Petit Projet "par le code"

Le but de cette activité est de vous montrer comment démarrer un projet avec FlashDevelop.

L'activité n'utilise pas de Package et nom qualifier par souci de simplification. C'est une mauvaise pratique.

Mise en place

  • Faire un projet “Flash IDE” avec FlashDevelop.
  • Placer dedans un fichier 'fla'.
    • Ne pas oublier de décocher l'option : “Déclarer automatiquement les occurrences de scène”.
  • Faire une Classe Main dans FlashDevelop.
  • Utiliser cette Classe comme Classe du document.

Tester, on ne peut pas faire plus court.

Vous venez d'utiliser la Classe du Document, c’est la Classe associée au Symbole de la racine du fichier Flash (“Séquence 1”). De la même façon que c'est une mauvaise pratique que de placer des éléments sur le scénario de la racine (mieux vaut les placer sur un Symbole réutilisable), on devrait limiter le code dans la Classe du document au strict nécessaire pour démarrer l'application 1).

Contenu basique

  • Faire un claque “Fond”.
  • Faire un Symbole “Contenu” dont on nommera l'occurrence “contenu”. 2)
  • Faire un Symbole “Menu” exporter comme la Classe “Menu” avec comme nom d'occurrence “menu”. 3)

Attention : Les origines des Symboles sont importantes.

Le message d'erreur vient du fait que l'on n'a pas déclaré les variables d'instance (sur la Classe “Main”) qui correspondent aux occurrences nommées sur la scène. Si vous ne l'avez pas, je ne vous félicite pas ! Vous n'avez pas respecté la consigne de décocher l'option : “Déclarer automatiquement les occurrences de scène”.

Création de contenu par le code

Faire un Symbole (nouveau Symbole ⌘F8) nommé “Page 1” exporté comme la Classe “Page1”. Ne pas mettre d'occurrence de ce Symbole sur la scène ; cela sera fait “par le code”.

Testez votre application : Si vous n'avez pas réfléchi aux origines de vos symboles, il serait temps !

Vous remarquerez “Page1” ne reçoit pas la coloration que FlashDevelop donne d'habitude au Classe. Pourtant il sait le “voir” dans le SWF :

Pour rendre “visible” la Classe (“Page1”) à FlashDevelop, on va détourner une fonctionnalité de Flash : exporter en SWC (librairie “compilée”).

Maintenant on peut dire à FlashDevelop de “regarder” dans le SWC pour trouver les Classes exportées pour ActionScript :

Pour votre culture : Les fichiers SWC peuvent vous servir à séparer votre projet en plusieurs source (FLA et/ou AS) que vous “rassemblerez” lors de la compilation du projet.

Interaction par le code

Ajoutez des boutons dans le “Menu” et nommez les occurrences (pour pouvoir les “écouter”)…

Compilez (exécutez) votre projet puis retournez à FlashDevelop. Maintenant il “voit” le contenu du “Menu” :

L'on n'a pas écrit le code correspondant (pas fait un fichier de Classe), Flash l'a fait pour nous. Mais grâce à l'étape précédente (export en SWC), FlashDevelop “voit” le contenu de “Menu”.

  • Changez le type de la variable “menu” de “MoviClip” à “Menu” (FlashDevelop doit vous le proposer dans la liste automatique).

  • Tapez (Dans le constructeur de la Classe “Main”) :
    • me⏎.bo⏎.adde⏎(cli⏎,clickSurBoutonPage1);
  • Vous obtenez (surligné en jaune ce que vous à été saisi par vous) :

4)

  • Mieux encore placer le curseur sur l'identifiant du gestionnaire d'événement (“clickSurBoutonPage1”)
    • Appuyez sur ⇧+⌃+1 (Maj+Ctrl+1 simultanément)

  • Faite ⏎ (Entrer)

  • Dans Flash IDE, faire les différentes pages :

  • Maintenant on peut mettre en place la navigation :
    • On déclare une variable d'instance “pageCourante” qui référence la page actuellement affichée.
    • On l'initialise dans le constructeur avec une instance de “PageAccueil”.
    • On l'ajoute à l'affiche dans “contenu”.

  • Et gérer les actions de chaque bouton :

Voila, vous pouvez maintenant faire de petits projets en utilisant FalshDevelop.
Mais attention, le code et l'organisation qui vous à été présenté ici ne sert que d'initiation.
Je ne saurais trop vous conseilliez de regarder la documentation de FlashDevelop sur les différentes façons de travailler : AS3 - FlashDevelop.

Plus loin

Utilisation d'une librairie externe

Dans cette activité, vous allez utiliser une librairie externe :

  • Un classique : une librairie de “Tween” : TweenMax
    • Remarque : on trouve plus souvent des références à TweenLite. 5)
  • Cette librairie se présentera sous forme d'un “SWC” précompilé.

Mise en place et usage de la librairie

Installation dans votre projet
  • Télécharger la librairie (lien disponible sur le site).
    • Remarque : l’archive actuellement disponible à un problème : le fichier ”greensock.swc” est manquant. Le prendre sur ”Y:\PRACHT” (sur Cours_SRC1).
    • Avant pouvoir de télécharger, on vous présente la licence. Cette librairie est gratuite si votre site n'est pas payant. Il peut être à but commercial, mais pas requérir des paiements des utilisateurs.
  • Extraire l'archive.
    • Le ficher contenant la librairie précompilée se nomme : ”greensock.swc
  • copier le fichier ”greensock.swc” dans votre dossier.
    • Il serait plus opportun de le placer dans un dossier lib.

Il est nécessaire d'indiquez à Flash (IDE) que l'on désire compiler en utilisant cette librairie :

./greensock.swc signifie de prendre le fichier greensock.swc qui est dans le répertoire courant le “point” (.)

Ne pas oublier de signaler à FlashDevelop que vous désirez l'utiliser comme librairie :

Usage

Maintenant on va l'utiliser :

  • Ajout des import :

  • Et l'animation en une petite ligne 6) :

Généraliser l'ajout de Page

Extraire une méthode

Si vous regarder le code, vous voyez que l'on fait toujours les mêmes instructions pour ajouter une page.

Plus encore il est normal de souhaiter que les pages apparaissent avec la même animation.

On va extraire sous forme de fonction les 3 lignes suivantes du constructeur de “Main” :

On aurait pu utiliser FalshDevelop (une version plus récente que celle installée) pour faire une partie du travail :

  • Surligner les 3 lignes et utiliser “Refactor / Extract Method…”
  • Appeller la fonction “ajoutPage”.
  • Modifier le code pour que la Classe de la page à créer soit un paramètre ”pageClass:Class”.
  • Utiliser cette méthode dans le constructeur et les gestionnaires d'événements.

Tenir compte des conditions initiales

Si vous regarder le code, vous pouvez voir que l'on exécute ”contenu.removeChild(pageCourante);” avant l'appel de “ajoutPage”.

On pourrait faire une nouvelle méthode, mais cela serait un peu “lourd”.

On peut ajouter ”contenu.removeChild(pageCourante);” au début de “ajoutPage”. Mais cela provoque une erreur quand on l'appelle depuis le constructeur (“Main”) car on n'a pas “encore” de “pageCourante”…

Une bonne solution consiste à l'ajouter au début de “ajoutPage”, mais à tester avant que l'on ait bien une “pageCourante”.

Plus fort encore...

Animations de sortie

Maintenant, dans les gestionnaires d'événements, il ne reste plus que l'appel d'une même fonction avec un paramètre différent.

Cela serait une bonne occasion pour essayer d'enlever les répétitions. Mais…

Mais avant, je vais vous donner une bonne astuce : TweeMax permet d'appeler une fonction après une animation (et lui passer des paramètres).

onComplete : Function – A function that should be called when the tween has completed. To sense when a tween has reached its starting point again after having been reversed, use onReverseComplete.

onCompleteParams : Array – An Array of parameters to pass the onComplete function

Essayez le code suivant :

Pour les bons...

Essayez d'éliminer les répétitions :

Cela donne :

Généraliser les boutons

Le but est de mettre en place une animation sur tous les boutons.

Écrire une fonction est une solution pour éviter les répétitions. Mais il existe en POO un autre mécanisme qui rend le même service, la notion d'héritage.

Vous l'utilisez déjà, toutes les Classes que vous avez écrites ”extends MovieClip” c.-à-d. utilise le code de “MovieClip”.

Le but de l'activité est de réaliser une Classe qui servira de base à tous les boutons.

On spécifie la Classe de Base dans l'interface de Flash :

Avec le code suivant on réalise l'animation entre deux étiquettes (“normal” et “survole”).

1) ceci dit, la foudre ne va pas vous tomber dessus, sinon il y en a d'autres qui en auraient fait les frais avant
2) Merci de respecter les majuscules pour les noms de Classes/Symboles et les minuscules pour les noms d'instances/occurrences.
3) Encore merci de respecter les majuscules pour les noms de Classes/Symboles et les minuscules pour les noms d'instances/occurrences.
4) Comme dit le proverbe, les bons ouvriers ont de bons outils
5) Mais l'usage de TweenMax simplifier le code : pas besoin d'activer un “plugin”
6) lire la documentation de TweenMax
cours2010/multimedia/petit_projet_par_le_code.txt · Dernière modification: 2011/05/12 22:00 (modification externe)