Il y a 2 semaines une petite éclaircie dans nos projets m’a permis de me dégager suffisament de temps pour faire deux petites démos AIR. La première, une application interne permettant aux membres de l’équipe de prod’ de CBi de remplir leurs taches journalières dans l’intranet tandis que la seconde m’a permis de me faire une première approche de l’API spécifique apportée par AIR (accès au système de fichier…).

La seconde application se présente plus comme une distraction avec la découverte des byteArray dans leur ensemble et des spécifications du format SWF. L’idée de départ était de récupérer le byteArray d’un fichier SWF, d’en parser chaque byte jusqu’à ce que mort s’en suive, et c’est le format SWF qui a eu raison de ma curiosité (temporairement tout du moins).

Comme la documentation AS3 le dit si bien : La classe ByteArray comporte des méthodes et des propriétés permettant d’optimiser la lecture, l’écriture et la manipulation des données binaires. Dans l’idée ce tableau de données est spécifique à chaque format de fichier, d’où la spécification de chacun des formats, ce qui ouvre comme perspective de pouvoir jouer avec tout un tas de type fichier tel que les pdf  (AlivePDF par Thibault Imbert aka Dieu sur terre).

Avant tout, afin de bien comprendre le contenu des ByteArray refaisons un point rapide sur ces histoires d’octets, bytes et bits, leurs différences ainsi que leurs liens. Le bit est un chiffre binaire : basiquement 0 ou 1, son exploitation se fait au niveau machine (soit “très” bas niveau). On peut facilement confondre les bytes et les bits - vu que pour nous, pauvres francais, les deux se prononcent de la même manière - mais non, le byte est un ensemble de bits, il peut aussi bien être constituer de 6 bits comme il peut en être constitué de 9. L’octet, quant à lui, peut être assimilé à un byte dont la taille est fixe et est de 8 bits (comme son nom l’indique). Pour résumé et avoir une explication un peu plus visuelle :

Bit, Byte, Octet

Donc avec un peu d’imagination, on peut en déduire que les ByteArray sont des tableaux de bytes (je sais… je me suis donné là). Il s’agit donc d’ensembles de bits à tailles variables. Ce schéma permet d’illustrer l’idée :

ByteArray

Voilà à partir de maintenant, il ne nous reste plus qu’à cibler le format que l’on souhaite pouvoir interpréter, récupérer ses spécifications et prendre le temps d’en parser chaque byte. Les spécifications peuvent être vu comme un tableau d’équivalence c’est-à-dire qu’il nous indiquera ce que chaque byte signifie. Pour la petite application AIR, je me suis intéressé au format SWF donc premier réflex : récupérer et lire la spécification du format. Avec les différentes versions de Flash sont apparues autant de versions du format SWF et donc de spécifications, histoire de faire genre (et accessoirement parce qu’il s’agit de la version en cours) j’ai donc récupérer les spec’ du format SWF dans sa version 10, celles-ci sont disponibles gratuitement sur le site d’Adobe (lien direct).

Je n’ai, pour ainsi dire, aucune expérience dans ce genre de travaux, ni même dans ce genre de lectures, mais en tant que noob j’aurais tendance à penser que les informations proposées sont amplement suffisantes même pour débuter, le document est bien structurer et bien qu’il soit écrit en anglais, celà reste très clair. Alors attention, je parle en tant que développeur, celà reste du document très spécifique et je ne le conseillerais pas en lecture de chevet à n’importe qui, mais si vous êtes technique curieux et que vous avez un peu de temps à perdre, vous y trouverez l’information souhaitée.

Revenons-en plus particulièrement au petit applicatif que je vais présenter. Celui-ci va nous permettre de lire les informations contenues dans les headers du swf. Ces headers seront systématiquement présent au début du byteArray d’un fichier SWF, il s’agit d’informations qui lui sont spécifiques. Si l’on suit les spécifications (page 25), il y a 8 champs à lire pour ces headers :

• 3 de signatures (permettra de savoir si il s’agit d’un SWF ou un SWC)
• 1 de version du flash player
• 1 champs indiquant la taille totale du fichier en bytes (après décompression si compression il y a)
• 1 permettant de connaitre les dimensions du SWF
• 1 pour le frameRate
• Et 1 pour le nombre de frame totale contenu dans le SWF

Dans les spécifications chacun de ces champs sont caractérisés par : un nom, un type (qui détermine vulgairement la taille de l’ensemble) et une description (histoire quand même de nous aider à comprendre ce qu’on récupère).

Documentation des bytes à récupérer

Chaque type est décrit plus en détails au chapitre 1 (page 11) des spec’, et pour chacun de ces types on retrouve des méthodes dans la classe ByteArray qui nous permette de les manipuler (lecture ou ecriture). Prenons l’exemple du type UI8 - Unsigned 8-bit integer - il s’agit du type de nos 4 premiers champs, la méthode à utiliser afin de lire leur contenu est readUnsignedByte(), cette méthode revoi une valeur située entre 0 et 255 soit, si l’on se sépare de la base 10 et qu’on passe en base 16 (c’est-à-dire en hexadécimal) on récupère donc des valeurs comprises entre 0×00 et 0xff. Afin de pouvoir interpréter ces valeurs, nous trouverons des valeurs témoins dans les spécifications.

Apercu de l'application

Après quelques bonnes heures de réflexion et d’appréhension de nouvelles notions j’ai fini par trouver le moyen de récupérer la totalité des informations comprises dans les headers - enfin presque la totalité car je dois reconnaitre que je me suis casser les dents sur les dimensions et le parsing du type Rect. Cependant en téléchargeant et testant l’application vous vous rendrez compte que ces informations sont présentes. Je tiens à remercier Julien LAURENT, un collègue ayant bosser dans le monde du jeux-vidéo avant de venir se perdre dans le multimédia et le développement de cd-rom chez CBi, avec qui j’ai l’occasion d’échanger sur des réflexions de développement et bien que ces échanges soient encore trop peu fréquent malheuresement, je dois reconnaitre qu’ils sont toujours très constructifs. Et c’est à lui qu’on doit le parsing du type Rectangle et la récupération des dimensions.

Télécharger et tester l’application AIR

Télécharger les sources

Si j’ai du temps, il se pourrait que je poursuive cette classe afin de permettre de récupérer le plus d’informations possibles,c’est toujours très instructif. Pour d’avantages d’informations sur le fonctionnement même de l’application, n’hésitez pas à me faire des retours et ce sera avec plaisir que je reposterais.

David (un des potes participant) m’avait fait rêver en me montrant ça, que je trouve bien chouettos, et j’ai eu l’occasion de fouiller dans wonderfl pour regarder ce qui s’y trouve. Ben c’est violent.
Je suis tombé sur cette sphère en 3D dont je me suis totalement inspiré.

Cet exercice aura été l’occasion pour moi de jouer avec l’api du flash player 10, notamment les Matrix3D, Utils3D et Vector3D; qui sont des supers outils. Il va falloir que je continue à regarder de ce côté !

Le premier résultat :

Le plus chiant aura été de trouver les coordonnées des points sur une sphère. Sur un cercle, ok pas de souci, mais sur une sphère ça se complique.
Je suis arrivé sur cette page de wikipédia, qui parlait des coordonnées sphérique, le seul problème c’est que leurs formules ne sont pas appropriées au repère de flash, mais à un repère cartésien. (Le repère de flash a l’axe des z inversé).

Du coup j’ai continué de googleisé, parce que mon pauvre savoir trigonométrique s’arrête au plan, et je suis tombé sur cette page. Et là, jackpot; les sin/cos ne sont pas les même et fonctionnent parfaitement dans flash.
Résultat :
x = r * cos(phi) * cos(theta);
y = r * cos(phi) * sin(theta);
z = r * sin(phi);

“theta” doit être compris entre 0 et 360° et “phi” entre 0 et 90°, et “r” correspond au rayon de la sphère.

J’ai un peu continué pour tenté de mettre un noyau comme centre de la sphère, mais ça bougera surement par la suite.

Pour ceux qui seraient intéressés par les sources, elles sont téléchargeables ici.

A suivre !

Pour ce qui est de l’organisation générale, j’ai repris le principe que Flo avait déjà mis en place pour les M4Tween, excepté pour ce qui est de d’objet pooling que j’implenterais sans doute plus tard.
La classe M4Tween javascript requiert la librairie Prototype pour son excecution. On utilise notamment l’objet PeriodicalExcecuter pour émuler l’évènnement EnterFrame, ainsi que l’objet Template afin de pouvoir gérer facilement les propriétés css particulières (telles que la rotation par exemple).

Plutôt que de m’arracher les cheveux avec un navigateur qui ne respecte pas grand chose, j’ai fais l’impasse sur IE. Les tests effectués se sont trouvés concluant pour firefox 3.5, firefox 3.6 alpha1, Chrome 2.0, Chrome 3.0 ainsi qu’Opéra 10 beta 2.

Exemple d’utilisation simple de la classe :

<div id="myDiv"></div>
<script type="text/javascript" src="path/to/prototype.js"></script>
<script type="text/javascript" src="path/to/M4Tween.js"></script>
<script type="text/javascript">
//instanciation de la classe
M4Tween.create("myDiv", .7, {"marginLeft":"150px","opacity":.5});
</script>

Pour ce qui est des propriétés que l’on peut modifier, il n’y a que quelques propriétés supportées pour le moment : marginLeft, marginTop, opacity, top, left, width, height…

Les paramètres attendus par la méthode d’instanciation sont :

M4Tween.create(id, duree, params, onCompleteCallBack);
-id de l’élément du DOM à manipuler
-durée de l’animation
-paramètres ( {ease:Linera.easeNone, “marginLeft”:”140px”} )
-fonction à appeler à la fin de l’animation

Les fonctions de easing sont les mêmes que pour la version AS3, il s’agit des équations de Robet Penner.

Enfin voici quelques démo du moteur en action sur 50 div, 100 div, 150 div, 200 div et 250 div.

M4Tween.js

L’Object Pooling est une structure de programmation (ou Design Pattern) qui consiste en une liste d’objets disponibles à l’utilisation.

En gros, au lieu de passer par un new PooledObject( params… ), on utilisera une méthode similaire à Pool.create( params… ), qui nous renverra le PooledObject en question (comme nous l’aurait fait new PooledObject( params… )). La différence principale réside dans le fait que, derrière, la classe Pool regorge un certains nombres d’objets qui n’attendent qu’à être utilisés.

Instancier un objet, et passer par l’opérateur new s’avère assez gourmand en ressources. Du coup, créer une liste d’objet s’avère intéressant car :
- On instancie les objets par pack (la quantité est à définir en fonction des besoins),
- Une seule référence pour toute la liste (et donc tous les objets) est nécessaires.

Cette structure nous offre donc un gain en terme de performances, et de mémoire.

Voyons ce que ça donne au niveau du code. J’ai fais quelques schémas aussi pour représenter visuellement ce qu’il se passe
A noter que le modèle de code provient du wiki de Joa Ebert. C’est à partir de ce lien que j’ai appris quasiment tout ce que je sais à propos de l’Object Pooling.

1) L’initialisation de la liste.

Dans le lien ci dessus, l’initialisation de la liste se fait au premier appel de la méthode statique create();

// - CONSTS ----------------------------------------------------------------------

private const GROWTH_RATE:int = 4;

// - PRIVATE VARIABLES -----------------------------------------------------------

private var _allowInstanciation:Boolean;
private var _availableInPool:int;
private var _currentPooledCircle:PooledCircle;

private var _next:PooledCircle;

public static function create():PooledCircle
{
var pooledCircle:PooledCircle;

if ( !_availableInPool )
{
var i:int = GROWTH_RATE;
while ( --i > -1 )
{
_allowInstanciation = true; {
pooledCircle = new PooledCircle();
} _allowInstanciation = false;

pooledCircle._next = _currentPooledCircle;
_currentPooledCircle = pooledCircle;
}

_availableInPool = GROWTH_RATE;
}

pooledCircle = _currentPooledCircle;
_currentPooledCircle = pooledCircle._next;

--_availableInPool;

return pooledCircle;
}

Ici, l’instanciation des objets se fait à partir d’une boucle while. Dans cet exemple, le premier objet crée au sein de cette boucle, sera le dernier disponible de la liste.
On note aussi l’existence d’une variable _currentPooledCircle. Celle ci contient la référence au prochain objet qui sera utilisé, et donc à l’objet renvoyé lors de l’appel de la méthode create().

A l’appel de la méthode create(), la valeur de _currentPooledCircle change : elle devient _currentPooledCircle._next, soit le prochain objet disponible.

Si _availableInPool arrive à 0, c’est qu’il n’y a plus d’objets disponibles. Ainsi, nous devons “refaire le plein” d’objets. A noter que lorsque _availableInPool est égal à 0, la valeur de _currentPoolCircle est null.

Bon, visuellement ça donne ça :

Initialisation de la liste d'objets

Les pastilles vertes correspondent à des objets disponibles.
La pastille vertes clair/tournant au jaune correspond à _currentPooledCircle et donc au prochain objet qui sera utilisé.
La pastille avec une croix orange correspond à un élément null.
Les flèches correspondent au lien entre chaque objet. Elles représentent la valeur de _next.

2) Création (récupération) d’un élément : appel à la méthode create().

Dans notre cas, l’initialisation se fait lors du premier appel de la méthode create(). Ainsi, l’initialisation sera directement suivi de l’attribution du premier objet disponible. Il y aura donc un objet disponible en moins dans la liste.
Le schéma qui va suivre représente plusieurs appel de la méthode create(), jusqu’à ce que _availableInPool soit égal à 0.

Création des éléments jusqu'à saturation.

Une nouvelle pastille fait son apparition : pastille rouge, pour illustrer un élément “utilisé”.

A la fin du schéma, nous sommes donc à :
- _availableInPool = 0;
- _currentPooledCircle = null;

Sur le schéma, _currentPooledCircle est représenté par la pastille avec la croix orange.

Le prochain appel à la méthode create() se résultera par un nouveau remplissage de la liste.

3) Ré-initialisation de la liste.

Voici le schéma représentatif :

Nouvel appel à la méthode create() à la fin du dernier schéma.

Ainsi, on conserve bien nos anciens objets. Ils sont toujours “là”.
Mais de nouveaux font leurs apparition, et eux ils sont disponibles à l’utilisation. A cet instant, la valeur de _availableInPool vient de passer à 4 (qui est la valeur de GROWTH_RATE).

Les deux dernières étapes se répèteront infiniment, au besoin.

4) Suppression d’un élément de la liste.

L’Object Pooling offrant comme principal avantage l’économisation de l’instanciation d’un objet (on privilégie la réutilisation), il serait intéressant de pouvoir rendre de nouveau disponible un objet qui ne l’est plus.

Dans la structure proposé par Joa Ebert, on a le modèle suivant :

public static function release( pooledCircle:PooledCircle ):void
{
pooledCircle._next = _currentPooledCircle;
_currentPooledCircle = pooledCircle;

++_availableInPool;
}

public function dispose():void
{
release( this );
}

Ainsi, rendre disponible un objet se fera par l’appel de la méthode dispose() (public) de celui ci.
Ex : pooledCircle.dispose(); // Soit pooledCircle une instance renvoyée par la méthode create();

Ou par la méthode release (public static) de la classe PooledCircle.
Ex : PooledCircle.release( pooledCircle );

Il s’en suit donc la remise en disposition de l’objet qui vient d’être libérer. La valeur de _currentPooledCircle devient donc égale à pooledCircle de nos exemples précédents.
L’ancienne valeur de _currentPooledCircle est attribuée à pooledCircle.next();

Le schéma représentatif :

Suppression des objets d'une liste via la méthode dispose() ou release()

En 1), l’état de la liste après 3 appels de la méthode create().
En 2), l’état de la liste après un appel de la méthode release( pooledCircle:PooledCircle ) ou dispose() (cf plus haut), sur le second objet qui a été récupéré via la méthode create().
En 3), l’état de la liste après un autre appel de la méthode release( pooledCircle:PooledCircle ) ou dispose(), sur le premier objet qui a été récupéré via la méthode create().

Il faut donc bien noter qu’on ne supprime pas un objet, on le rend de nouveau disponible (ne pas oublier de libérer les références de l’ancienne vie de l’objet, pour libérer la mémoire et éviter les comportements chelou au moment d’une nouvelle attribution).

4) Conclusion

Il est donc intéressant de passer par une liste d’objets de la sorte, notamment lorsqu’un certain nombre d’objets doit être crée.
Tweensy, moteur de tween, utilise d’ailleurs une structure d’Objet Pooling, couplé a un Array pour pouvoir parcourir la liste des objets crées.

C’est aussi ce que j’ai souhaité faire avec M4Tween, couplé a une linked list (plus intéressant d’itérer de cette manière qu’à travers un tableau). Mais je dois revoir quelques trucs sur la classe de M4Tween…

Je pense que je posterai prochainement sur les LinkedList.
En attendant, vous trouverez pas mal d’infos à ce sujet sur wikipedia et encore et toujours sur le wiki de Joa Ebert. A noter que le wiki de Joa Ebert ne propose qu’une représentation unique d’une LinkedList. Vous verrez sur wikipedia qu’il en existe plusieurs

Si des choses ne sont pas claires, n’hésitez pas !

Je suis pas mal le blog de Joa Ebert, notamment pour tout ce qui concerne l’optimisation des performances. J’en parlais dans mon post sur les LinkedList d’ailleurs. Il écrivait qu’il y avait fortement moyen d’obtenir de meilleurs perfs en utilisant une structure d’objet pooling, et des linkedList, au lieu de passer par des Array.
C’est donc ce que j’ai voulu faire, puisqu’il a dit que c’était bien, et qu’en plus il l’avait testé pour obtenir un résultat… impressionnant ? (son moteur de tween chez Hobnox contre tweenlite).
Bon, une chose est sure : la magie a moins (beaucoup moins ?) bien fonctionné de mon côté…

En tout cas, j’ai pas mal appris en terme de réflexion, ainsi que sur l’utilisation des Object, des Linked List, et des Pools. Je pense d’ailleurs faire mon prochain post sur ce sujet, ça pourrait être intéressant (et plus clair que celui que j’avais fais pour l’effet de désintégration !).

Voilà ce que ça donne (attention, 1000 objets qui bougent. Cliquez sur le swf pour lancer, et recliquez pour arrêter ;))
Avec Tweenlite :

Avec Tweener :

Avec M4Tween :

Du côté des résultats, j’ai ici 32/33 pour TweenLite et 36/37 pour M4Tween. Donc c’est assez similaire, et beaucoup moins ouf de ce que Joa Ebert à fait (gneuh). Les FPS oscille beaucoup aussi je trouve sur M4Tween…
Bon, le but n’est pas de remplacer TweenLite (M4Tween peut juste bouger le bordel, il n’y a pas de plugins pour faire des transitions de couleurs etc.), mais d’avoir un moteur de tween interne au framework minuit4, pour nos propres outils.

Donc là, je me sors un peu la tête de ce code. Je verrais dans quelques jours si je vois pas des choses à changer/une partie de la structure à revoir.
Arno pense le porter en JS, donc il y verra surement des choses à revoir.

En ce qui concerne son utilisation :
Pour créer une Tween : M4Tween.create( l’objet sur lequel appliquer la tween, la durée de la tween en secondes, { x: la valeur, y: la valeur, …, easing: Quad.EaseIn, delay: la durée en seconde, onComplete : nomdefonction, onCompleteParams: [ param1, param2, ... ] });
Pour supprimer une Tween : M4Tween.release( laTween );
Pour supprimer une Tween (alternative) : laTween.dispose();
Pour supprimer une Tween d’un objet : M4Tween.releaseTweenOf( l’objet sur lequel a été appliqué la tween );

Les commentaires sont légers pour le moment, j’y reviendrai prochainement.

Pour terminer, l’outil de mesure de performance de minuit4 se voit doté d’une nouvelle fonctionnalité : calculer la moyenne des FPS sur la durée !

Télécharger les sources de M4Tween ici.
Télécharger les sources de l’outil de mesure de performances ici.
Le lien vers le SVN de minuit4 ici.

Depuis une semaine je me suis mis à réfléchir et travailler sur : comment reproduire ces brushes en forme de rubans (ribbons) ?
Je viens d’arriver à un résultat assez stable et plutôt convaincant, même si ce n’est qu’un début. Et ça m’a fait bosser de nouveau sur quelques formules trigonométriques

La difficulté principale de l’exercice était de dessiner à chaque fois un quadrilatère dont la taille et variable. Et ce n’est pas forcément un rectangle, il fallait donc non pas passer par la méthode drawRect(), mais par les bons vieux lineTo.
Étant donné que le tracé sera en fonction de la position p1, puis p2 de la souris, il nous faut récupérer l’angle d’inclinaison de ce segment, et l’appliquer à chaque point du quadrilatère.

Dis comme ça, ça doit sembler assez fouilli, donc passons par des exemples :

Tracer d’un segment d’après un angle.

Cette première expérience avait pour but de comprendre comment tracer un segment, d’après un angle et une distance (rayon). Autrement dit, d’appliquer une rotation à un point.
La formule le permettant est la suivante :
p.x = rayon * cos( angle en radian );
p.y = rayon * sin( angle en radian );

Pour récupérer un angle en fonction d’une trajectoire donnée, en flash, on passe par Math.atan2( y, x ).
atan2 correspond à arctan. La méthode se base sur le point d’origine (0, 0 ).

Télécharger le .fla (CS3)
Accéder au fichier .as

Appliquer une rotation à un rectangle en appliquant une rotation à chacun de ses points.

Ma seconde expérience se porta sur la rotation d’un rectangle entier, autrement dit de ses 4 points.
Au passage, je suis tombé sur une seconde formule, beaucoup plus bavarde, pour appliquer une rotation a un point :
p.x = cos( angle en radians ) * pointToRotate.x - sin( angle en radians ) * pointToRotate.y;
p.y = sin( angle en radians ) * pointToRotate.x + cos( angle en radiants ) * pointToRotate.y;

On préfèrera donc la première, hein

A chaque clic sur la scène, la valeur de l’angle à ajouter à l’angle de base sera incrémenté de 10. Ainsi, le rectangle à gauche (angle = 0), deviendra celui de droite a chaque clic.
Dans l’idée d’un point A( x, y ), on aurait donc :
x = rayon * Math.cos( Math.atan2( ya, xa ) + ( 10 * n ) * Math.PI / 180;
y = rayon * Math.sin( Math.atan2( ya, xa ) + ( 10 * n ) * Math.PI / 180;

Télécharger le .fla (CS3)
Accéder au fichier .as

Combinaison des deux premières expériences.

Bon, à l’époque j’avais pas encore totalement assimilé les deux premières étapes, ni les formules. Du coup, je suis passé par une étape supplémentaire qui correspond à combinaison des deux premières : on trace un segment, et le rectangle se calque dessus.

Télécharger le .fla (CS3)
Accéder au fichier .as

L’application dans un enterFrame.

Étant donné qu’à ce moment là, j’avais tout pour que ça fonctionne, j’ai commencé à exporter l’ensemble dans un enterFrame.

Télécharger le .fla (CS3)
Accéder au fichier .as

La même chose, en reliant chaque quadrilatère.

Télécharger le .fla (CS3)
Accéder au fichier .as

Actuellement, je suis en train de bosser sur une version plus évoluée de tout ce que je viens de montrer.
J’ai commencé à porter le tout en orienté objet, ça commence à s’organiser petit à petit. Le but étant de développer une structure évolutive, ou l’on peut rajouter des brushs etc. Et pourquoi pas développer une petite appli permettant de s’en servir plus aisément (combien de ribbons, quelles couleurs, quelles valeurs d’alphas…).
Bref, à suivre.

Pour le moment, ça donne ceci (Flash Player 10 requis) :

Théoriquement c’est débuggé, mais si vous avez des soucis avec, n’hésitez pas à me les remonter dans les commentaires !

Puis j’ai commencé à m’y intéressé plus sérieusement et à utiliser une LinkedList en partiel de Flash.
Il nous était demandé de faire un equalizer, et j’ai choisis de jouer avec du BitmapData et des modifications de pixels. En gros, une boucle plus ou moins grosse en enterFrame à manipuler.
Sachant que les LinkedList permettent de gagner en performances car :

• Passer par ce type de structures permet de stocker des objets plus rapidement,
• Itérer au sein d’une LinkedList est plus rapide que d’itérer un tableau ou autre (ce n’est plus le cas avec le FlashPlayer 10 et les Vector typé et fixes ? cf. Away3D)

Je me suis dis que c’était le moment d’essayer. Le résultat :

Cliquez pour lancer l’anim. Recliquer pour la stopper. Sachant que le swf fait 1mo (il transporte le mp3 - Boards of Canada : Diving Station).
Bref, le rendu me plait bien, et c’est fluide. Même s’il n’y a que 256 pixels par secondes à 30FPS. Vous pouvez télécharger les sources en cliquant ici.

Bossant sur un projet en parallèle, je commencais à réfléchir en terme de réorganisation de code. Et c’est là que j’en suis revenu à ces histoires de Pool (j’en parlerai dans un autre post, je n’ai pas encore assez fouillé là dessus) et de LinkedList.
Du coup, je me suis dis que j’allais tenter de les utiliser au sein de mon effet de désintégration.

Résultat avec l’ancienne version :

Résultat avec la nouvelle version :

En fonction des pcs, les différences de résultat est plus ou moins flagrant.
Les performances sont gagnées sur le fait qu’on ne passe plus par des tableaux, et que la manipulation performante au final. Cool

Bon c’est bien tout ça, mais à quoi ça ressemble une LinkedList ? Je vous invite à regarder l’explication de Joa Ebert.
Puis, pour prendre mon equalizer comme exemple, ça donne :

En l’occurence, j’ai crée un objet Particle, qui correspond à des pixels de mon bitmapdata/equalizer :

package
{

public class Particle
{
public var px:Number = 0;
public var py:Number = 0;

public var next:Particle;
}

}

Une méthode d’instanciation de tous les objets de la LinkedList :

private function createParticles():void
{
// _particles sera la variable de référence de la LinkedList.
_particles = new Particle();

var currentParticle:Particle = _particles;
var numParticles:int = NUM_PARTICLES;

while ( --numParticles != 0 )
currentParticle = currentParticle.next = new Particle();
}

Un exemple d’itération au sein d’une LinkedList :

private function setParticlesPositions():void
{
// Comme je le disais précédemment : on crée une variable dans laquelle on stocke notre objet de référence de la LinkedList (notre point de départ, en quelque sorte).
var particle:Particle = _particles;

var px:Number = stage.stageWidth * .5;
var py:Number = stage.stageHeight * .5;

while ( particle )
{
particle.px = px;
particle.py = py;

// On passe à l'élément suivant; jusqu'à ce qu'il n'y en ait plus.
particle = particle.next;
}
}

Joa Ebert en parle aussi ici avec un superbe exemple. Il disait qu’il s’en servait aussi dans son moteur de tween qui était, grâce à tout ça, plus performant que les Tweenlite ou Tweener.

1) Sans passer par l’IDE Flash

FlashDevelop permet de créer des projets AS2/AS3, et donc de les compiler sous forme d’un SWF, sans passer par l’IDE Flash. Pour celà, il utilise le FlexSDK.
Ainsi, si l’utilisation de Flash n’est pas nécessaire (pas de gros graphisme, pas d’animation fait main), vous pouvez opter ce type de projet.

Commencons :
Lancez FlashDevelop et sélectionnez l’onglet Project, puis faites New Project -> AS3 Project.

Créer un nouveau projet sans passer par l'IDE Flash

Choississez le chemin de votre projet, un nom, puis valider. A droite, vous avez l’explorateur de votre projet. Le dossier “src” contient tous vos fichiers de code .as. Notez que vous devrez obligatoirement avoir la classe principale, le Main.as en l’occurence, de votre projet en “Always Compile” (clic droit sur le fichier, Always Compile).

Si vous avez correctement installé les Flash Player Debug, vous devriez être capable de récupérer les trace de votre projet. Si ce n’est pas le cas, clic droit sur le nom de votre projet dans l’explorateur de fichier et sélectionnez “Properties“. Ici, vous pouvez sélectionnez le PlayMode de votre SWF. Choisissez “PopUp“. Si rien vous ne recevez toujours pas les trace… Vérifiez que vous avez bien installé les versions debug du flash player.

Sélectionnez la manière dont seront lu les SWF

Félicitations ! Vous avez crée votre premier projet AS3 sans passer par l’IDE Flash

2) En passant par l’IDE Flash

Créez un nouveau projet mais cette fois sélectionnez Flash IDE Project. Répétez les manips précédentes pour initialiser le bouzin.

Pour ce tutorial, nous allons ajouter 3 dossiers à notre projet.

• src, qui contiendra les fichiers .as.
• fla, qui contiendra les fichiers .fla.
• bin, qui contiendra les fichiers .swf.

Pour les ajouter, clic droit sur le nom de votre projet dans l’explorateur.
Maintenant, lancez flash et créez un nouveau document AS3. Sauvez le dans le dossier fla et créez une classe Main.as dans votre dossier src. Si vous avez correctement effectuez ces manips, vous devriez avoir cette organisation là :

Le projet actuel vu sous FlashDevelop

Retournez dans l’IDE Flash et remplissez le champs “Classe du Document” du panneau Propriétés avec le nom de votre classe Main.as. Soit Main.
Pour tous vos projets, la syntaxe correcte sera : nom_dossier.nom_sous_dossier.nom_classe
Et n’ajoutez rien. Pas de .as, ni de… Rien.

Remplissez la Classe du document, classe mère de votre projet

Bon, c’est cool tout ça, mais actuellement Flash ne sait pas où aller cherchez vos fichiers .as s’ils ne sont pas à côté du .fla courant. On va donc l’aider à y voir plus clair. Cliquez sur le bouton “Paramètres” à droite de “Publier“.
Dans la nouvelle fenêtre, recliquez sur Paramètres, à droite de “Version d’ActionScript“.
Cliquez sur le bouton “+” pour ajouter les dossiers dans lesquels se trouvent vos fichiers .as. Ici, “../src“.

ActionScript 3 parameters

Note : Ici, je vous suggère de décocher la case “Déclarer automatiquement les occurences sur votre scène”. Ainsi, vous devrez renseigner chacune des instances d’objet, posez sur votre scène, dans la classe correspondante. Exemple, je pose sur ma scène un clip que je nomme “clip1“. Dans ma classe Main.as j’ajouterai :  “public var clip1:MovieClip“, que je pourrais ainsi réutiliser avec l’autocomplétion.
Revenons à nos moutons.

Sauvegardez, et copiez le code suivant dans votre Main.as :

package
{
import flash.display.MovieClip;
public class Main extends MovieClip
{
public function Main()
{
trace( "hello world !" );
}
}

}

Maintenant, compilez en appuyant sur ctrl+entrée sous Flash ou FlashDevelop.

Tout fonctionne, mais il nous manque quelque chose… A savoir, indiquer le bon chemin pour les fichiers .swf.
Pour celà, dans la fenêtre Propriétés de Flash, cliquez sur Paramètre -> Sélectionnez l’onglet Formats -> Remplissez le bon chemin pointant vers votre dossier bin.

Pendant vos développements orienté objet, vous pourriez avoir besoin de lier un objet de votre librairie à une classe. Cette partie est très utile, voire vitale pour l’organisation de vos boulots, donc suivez la bien.
Ajoutez un objet (ex : un MovieClip nommé Symbole1) à votre librarie, et faites un clic droit dessus. Cliquez sur “Liaison” dans le menu contextuel, puis choisissez un nom de class et un chemin pour votre Symbole 1. Vous suivrez encore une fois la syntaxe suivante : nom_dossier.nom_sous_dossier.nom_classe.

Lié un objet de votre librarie à une classe

Une fois cette démarche effectuée, ajoutez la classe correspondante dans le dossier src, et commencez à coder !

Ici, vous devriez être capable de faire des projets via FlashDevelop !
Je vous invite à aller voir le wiki pour plus de documentation sur le soft, notamment la partie des raccourcis de FlashDevelop, très très intéressante !

1) Comment installer FlashDevelop ?

Ici rien de compliqué. D’ailleurs, c’est expliqué plutôt clairement sur le forum officiel :

• Téléchargez la dernière version de FlashDevelop (actuellement 3.0.0 RC4) et installez le. Laissez les settings par défaut.
• Téléchargez la dernière version stable du Adoble Flex SDK (environ 100mo). Dézippez le où vous le voulez sur votre HDD. Mais souvenez vous de son emplacement…
• Si vous n’avez pas la machine virtuelle java, téléchargez la et installez la ou FlashDevelop ne se lancera pas.

Vérifiez ensuite que vous ayez bien d’installé les versions debug du flash player. Elles vous serviront à récupérer les traces et les erreurs lorsque vous ne passerez pas par l’IDE Flash pour compiler votre projet. Prenez donc Windows Flash Player 10 ActiveX control debugger (for IE) et the Windows Player 10 content debugger (pour Netscape blabla). Désinstallez les anciennes versions avant d’installer les nouvelles.

2) Quelle configuration pour FlashDevelop ?

Ici, vous devriez avoir réussi à installer FlashDevelop. Maintenant, configurons le afin de l’utiliser avec l’IDE de flash, ou sans l’IDE de flash.

Premièrement, cliquez sur l’onglet Tools.

Tools -> Program Settings

Tools -> Program Settings -> AS3Context.
Ensuite, remplissez le champs “Flex SDK Location” avec le chemin vers votre dossier FlexSDK que vous avez tout à l’heure dézippé.

FlashDevelop "Path to Flash IDE" and "Flex SDK Location"

Enfin, toujours dans Program Settings, sélectionnez l’onglet “ASCompletion” et cherchez la ligne “Path to Flash IDE“. Encore une fois, remplissez la avec le chemin vers votre version de Flash. CS3 ou CS4, peut importe, c’est selon ce que vous désirez.

3) Plugins ?

Pour vous simplifiez la vie durant vos phase de débug, je vous conseille de télécharger 2 plugins, tous deux écris par Jérôme Decoster :
- Trace plugin generator
- Duplicate plugin

En bas du premier post de chacune de ces pages se trouve les fichiers à téléchargez (pas les fichiers sources, mais le plugin en .fdz).
Lancez les et rebootez FlashDevelop.

En appuyant sur F10, vous devriez voir “Duplicate” et”Trace” à la fin de la liste.
Via le raccourcis Ctrl+0 sur n’importe quel terme que vous avez écrit, vous utiliserez le trace plugin.
Via le raccourcis Ctrl+alt+d, vous utiliserez le plugin duplicate. (ctrl+maj+d pour revenir en arrière).
Sweet hein ?

Maintenant, jetons un oeil sur comment utiliser FlashDevelop avec nos projets AS3.

Le fichier qu’il faut éditer est ‘crontab’. Pour se faire, il faut tout d’abord choisir l’éditeur de texte avec lequel nous allons l’ouvrir, par la commande suivante:  ‘$ export VISUAL=gedit‘ gedi’ représentant ici l’éditeur souhaité. Maintenant, lancer l’édition du fichier en tapant:  ‘$ crontab -e‘ et y ajouter:

MAILTO=test@test.fr //cette première ligne permet de d’envoyer à l’email choisit un retour fait par cron.

* * * * * commande à exécuter //voici l’exemple de ligne permettant de lançer la commande que l’on désire.

Chaque étoile(*) correspond à une unité de temps: ‘Minute’ ‘Heure’ ‘Jour Du Mois’ Mois ‘Jour De La Semaine’

‘Minute’ Correspond aux minutes par heure, valeurs possibles: 00 à 59.
‘Heure’ Correspond aux heures dans la journée, valeurs possibles: 00 à 23.
‘Jour Du Mois’ Correspond aux jours dans le mois, valeurs possibles: 1 à 31.
‘Mois’ Correspond au mois dans l’année, valeurs possibles: 1 to 12.
‘Jour De La Semaine’ Correspond aux jours de la semaine, valeurs possibles: 0 à 6 ou ‘mon’, ‘tue’, ‘wed’ etc…

Si on met une ‘*’ sans mettre de valeur, Cron considérera qu’il doit lançer la tache pour chaque unité de temps qui correspond à l’étoile. Concrètement, la ligne suivante exécutera la commande choisie (lancement de ‘monscript.php’) chaque minutes et chaque heures de chaque jour de chaque mois:

* * * * * /chemin.vers.php/php mes.fichiers/monscript.php

Pour lancer une commande toutes les 20 minutes par exemple, il suffit de rajouter après l’étoile(*) correspond aux minutes ‘/20′. Il en va de même pour toutes les 20 heures, 20 jours… Il faut juste placer le ‘/20′ à coté de l’étoile correspond à l’unité de temps que l’on désire.

*/20 * * * * /chemin.vers.php/php mes.fichiers/monscript.php —>  toutes les 20 minutes chaque jours chaque mois etc…

00 */5 * * * /chemin.vers.php/php mes.fichiers/monscript.php —> toutes les 5 heures de chaque jours chaque mois etc…

On notera que pour toutes les 5 heures, on rajoute 00 à la place de l’étoile(*) correspondant au minutes. En effet, si on ne le fait pas, cron exécutera la commande à chaque minutes, ce qui n’est pas du tout le résultat attendu.

Enfin, il est également possible de remplacer ‘/20′ par ‘0,20,40′, ce qui donnera:

00 0,20,40 * * * /chemin.vers.php/php mes.fichiers/monscript.php —> toutes les 20 heures de chaque jours chaque mois etc…

Une fois les modifications faites, enregistrer et le fichier puis quitter. Pour tester si tout a bien fonctionner il est possible de lister ce que crontab contient par la commande suivante: ‘crontab -l‘  Notons que si le fichier ‘crontab’ contient une erreur, il sera de toute manière impossible de l’enregistrer.