A la découverte des ByteArray
7th novembre, 2009 par ArnoVoilà un petit moment qu’on en entend parler et malgré avoir lu pas mal d’articles (majoritairement sur le site d’Adobe) que ce soit sur Flex ou sur AIR, je n’ai jamais trouvé la motivation et/ou l’idée d’application pouvant me permettre de me lancer et tenter l’expérience RIA à proprement parler.
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 :
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 :
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).
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.
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
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.
Comment créer des projets en utilisant FlashDevelop ?
26th mai, 2009 par FlozPremièrement, je vous invite à lire le premier article sur minuit4 traitant de FlashDevelop. Notamment si vous n’avez pas installé FlashDevelop. Vous y trouverez aussi quelques plugins sympa, que je vous conseille fortement.
L’introduction étant faite, regardons comment créer des projets avec FlashDevelop…
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 !






