partager flash et concevoir les animations différemment
POO, design et actionscript2
Cet article ne traitera pas actionscript3 qui met en place des évolutions majeures dans les processus de travail. Il sera abordé dans des billets ultérieurs.
Flash AS2 et la POO [3]
Depuis actionscript2, il est possible de créer de véritables classes au sens POO du terme. On y parle aussi de package (même s’ils ne représentent en fait qu’une structure de dossiers et de fichiers *.as [4]). Le chemin d’accès à ces packages doit être configuré au niveau de Flash afin d’inclure ces morceaux de code lors de la compilation.
On remarque déjà que ces classes vont pouvoir être réutilisées pour différents projets... mais attendez ! On va pouvoir en plus hériter et implémenter des interfaces au sens java (pas des interfaces graphiques donc), indépendamment de la vue en place.
L’idée ici n’est pas de vous refaire un cours sur le développement de classes, mais plutôt le moyen de séparer les actions sur Flash.
Alors, voyons tout de suite comment ça peut marcher... comme dit plus haut, il est important que programmeurs et designers communiquent entre eux. Pourquoi ? Parce que du côté des classes (donc produites par le développeur), on va devoir prendre le contrôle des éléments graphiques (donc faits par le graphiste) qui sont dans la bibliothèque [5] ou sur la scène [6]. Et pour cela, il faut en connaître la structure.
1:/**
2:* @author Yan Paquis
3:* @version 0.1
4:*/
5:
6:class com.cleverage.view.SpecialButton {
7:
8: private var _view : MovieClip;
9: private var _text : TextField;
10: private var _activity : Boolean;
11:
12: public function SpecialButton(v:MovieClip, l:String) {
13: _view = v;
14: _text = _view.libelle_mc.libelle_txt;
15: _text.text = l;
16 setActivity(true);
17: }
18:
19: /**
20: * permet de gérer le rollover
21: * @param b indique si le bouton est actif ou non
22: */
23: public function setActivity(b:Boolean):Void {
24: _activity = b;
25: var btn:SpecialButton = this;
26: if (_activity) {
27: _view.onRollOver = function() {
28: btn._text.textColor = 0xFF0000;
29: btn._view.gotoAndStop(2);
30: }
31: _view.onRollOut =
32: _view.onReleaseOutside = function() {
33: btn._text.textColor = 0x000000;
34: btn._view.gotoAndStop(1);
35: }
36: } else {
37: delete _view.onRollOver;
38: delete _view.onRollOut;
39: delete _view.onRelease;
40: delete _view.onReleaseOutside;
41: }
42: }
43:
44:[...]
45:
46:}
Cette classe n’est pas complète et pourrait être faite autrement, mais les premiers principes sont là.
Elle pourra être instanciée par un new SpecialButton() à qui il faut passer des paramètres. On voit en ligne 14 que le second paramètre passé au constructeur est une chaine qui va être envoyée à un champs texte.
Pour illustrer notre discussion, nous avons écrit en dur le chemin d’accès à l’occurrence du TextField qui se trouve dans le movieclip référencé par la variable privée _view.
Cela signifie que cette classe peut permettre la gestion automatisé des rollovers de tout élément graphique qui pourra répondre à cette structure.
Dans la réalité, elle n’aurait un intérêt qu’avec des fonctionnalités supplémentaires.
Le flash ci-contre montre un exemple d’utilisation. On a 3 occurrences de clips différents sur la scène.
On a fait un new SpecialButton() pour chacun en passant les paramètres adéquats. En testant, on se rend compte que les rollovers fonctionnent, le texte passe en rouge (ligne 28) et les clips passent à leur deuxième image (ligne 29) quand elle existe.
Le deuxième bouton par contre n’a pas de texte ??? Il illustre l’erreur de nommage dans la structure du clip. Cette erreur n’est pas bloquante et ne peut se révéler à la compilation, mais pose un problème sur la vue, puisque le bouton ne porte pas de libellé.
Actionscript1 permettait déjà la création d’objets par le biais des prototypes, l’implémentation en était plus lourde.
Le code se retrouvait soit sur la scène [6] ou dans les clips [1]. Sinon il fallait lier des fichiers *.as par des directives d’inclusion dans le fichier flash.
Résumé des possibilités avec les classes AS2
La programmation sous AS2 répond partiellement à la norme ECMAScript4. Sa syntaxe s’approche de Java avec beaucoup de limitations, dont certaines n’existent plus sous AS3. Voici un aperçu des possibilités avec AS2.
- Les packages : ce ne sont en fait que des dossiers standards liés au système d’exploitation qui permettent d’éviter les collisions de noms avec des classes tierces, d’organiser les classes en groupes logiques, .... En AS2 il ne faut pas commencer le code de sa classe par la directive « package ... ».
- L’encapsulation : chaque objet va stocker ses propres données. Il est possible de définir des méthodes et propriées publiques ou privées. Elles peuvent aussi être statiques.
- Les classes peuvent être dynamiques pour permettre l’ajout de propriétés après leur création.
- L’héritage : les classes peuvent hériter les unes des autres. Notre classe SpecialButton par exemple aurait pu étendre la classe MovieClip native de Flash.
- La composition : dans la classe SpecialButton, nous utilisons plutôt la composition pour manipuler le clip représentant le bouton.
- Les interfaces : une classe ne peut en étendre qu’une et une seule. Les interfaces ne font que définir des types de données sans les mettre en oeuvre et sont donc implémentées par des classes qui ont besoin de jouer différents rôles au sein de l’application.
Des ouvrages spécialisés en font des descriptions beaucoup plus détaillées, l’un des plus célèbres étant le livre de Colin MOOCK.
Et qu’est-ce qu’on fait avec tout ça ?
Grâce à cette syntaxe AS2, on s’aperçoit que l’on va pouvoir concevoir les applications Flash de manière différente. On peut évoquer les design patterns puisqu’il est tout à fait possible de créer des Singletons, d’utiliser le modèle Observer, de concevoir et réaliser en MVC et d’autres choses encore... qui changent la logique initiale de Flash qui voulait contrôler tout au même endroit.
On peut donc faire pas mal de choses, mais le plus important c’est de savoir que beaucoup ont déjà été faites.
Il existe déjà en effet divers framework/APIs open source dédiés à différentes tâches.
Leur utilisation est simple : installer les packages, définir le classpath au niveau de flash ou de l’application en cours de réalisation et utiliser « import » pour accéder aux classes.
Sitons-en quelques-uns pour AS2 :
- Pixlib : un framework très polyvalent qui couvre des tâches récurrentes qui devaient être constamment réalisées à la main et répétées avec AS2 de base : piles de chargement, preloader, serializer d’objets à partir de fichiers XML, contrôle de médias,... Il permet la mise en œuvre d’application MVC.
- FuseKit : une API qui permet d’animer des éléments graphiques via des scripts grâce notamment à l’utilisation des courbes de Penner. Cette API s’installe également dans l’IDE Flash, si bien qu’un graphiste peut mettre en place une trajectoire complexe avec accélérations et décélérations et exporter l’équation générée pour le développeur. D’autres API comme MC Tween permettent des tâches du même type mais moins complexes.
- La 3D temps réel n’est pas en reste, même si elle est balbutiante en AS2, certaines applications valent déjà le détour et certains annonceurs ont osé tenter l’aventure. On peut citer 2 des plus connus Papervision (attention la page est longue à charger) et Sandy . Ces deux API sont encore plus puissantes avec AS3.
Pour conclure ce survol
La logique de Flash change : cet outil n’est plus seulement une application de graphisme vectoriel animé (même si on continue à l’utiliser ainsi pour des bannières, ...) .
Le taux de pénétration des players en version 8 et 9 est proche des 99% . Donc, même si Adobe est en position de monopole sur ce marché, force est d’avouer qu’il faut compter avec Flash car, d’un point de vue purement graphisme/animation, les applications Ajax/Dhtml ou SVG ne peuvent complètement rivaliser et, d’un point de vue parts de marché, SilverLight est loin d’être à la hauteur.
Pour aller plus loin
Dans de prochains volets, nous essaierons de contourner certains points problématiques liés à l’utilisation de Flash. Pour cela nous pourrons évoquer les sujets suivants :
- L’interface de Flash n’étant pas optimisée pour le développement de classes personnalisées, il existe des éditeurs alternatifs open source de qualité : FlashDevelopp uniquement sur PC malheureusement car il intègre de nombreuses fonctionnalités ainsi que Flex2 et Flex3, Eclipse avec plug-in (utilisation moins facile mais pratique si l’on est habitué à la plateforme, jEdit avec plug-in moins souple à l’installation et offre moins de fonctionnalités.
- L’intégration de swf dans les pages web. Les scripts fournis par Adobe ne sont pas suffisamment standards pour répondre aux problèmes de contenu alternatif pour les lecteurs d’écran ou navigateurs full-text, de détection de la version du player, d’encadrement de l’activeX Flash sur Internet Explorer, ...
- Quelques outils annexes bien pratiques : compilateurs swf, générateur de doc AS au format javadoc, des consoles de debug permettant de debugger online sans l’IDE, ...
[1] Clip, movieclip : un élément flash qui contient sa propre timeline et sa propre scène. Il peut se jouer indépendamment du reste de l’animation
[2] Timeline : axe des temps exprimé en images et cadencés à un nombre d’images affichées par secondes
[3] POO : Programmation Orientée Objet (OOP en anglais)
[4] Fichiers *.as : des fichiers de texte brut qui contiennent du code actionscript
[5] Bibliothèque : l’espace de stockage de l’animation. Elle contient des symboles graphiques dont on va placer des occurrences sur la scène (à la main ou via du code)
[6] Scène : élément de base d’une animation flash qui accueille tous les éléments sur un espace en 2 dimensions suivant une timeline. Tout clip possède sa propre scène.