A la découverte des ByteArray
7th novembre, 2009 par Arno
Voilà 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 :
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
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.
Peindre avec des ribbons en flash
4th juin, 2009 par Floz
J’ai commencé à me mettre sérieusement à flash après avoir vu une conférence d’Erik Natzke lors de l’édition 2007 du web flash festival au centre george pompidou. Et depuis ce moment, j’ai toujours bavé sur ses réalisations, et le fait de pouvoir créer une toile via du code.
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 ).
This movie requires Flash Player 9
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;
This movie requires Flash Player 9
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.
This movie requires Flash Player 9
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.
This movie requires Flash Player 9
Télécharger le .fla (CS3)
Accéder au fichier .as
La même chose, en reliant chaque quadrilatère.
This movie requires Flash Player 9
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) :
This movie requires Flash Player 9
Théoriquement c’est débuggé, mais si vous avez des soucis avec, n’hésitez pas à me les remonter dans les commentaires !
SWFAddress et SWFObject
27th avril, 2009 par Floz
Je viens de passer une bonne heure -voire deux- à me battre avec SWFAddress et SWFObject afin de les faire fonctionner correctement ensemble.
En guise de courte présentation, SWFAddress est une librairie qui permet de faire du deep-linking dans des sites présentant du contenu Flash ou Ajax. Autrement dit, de donner un lien à l’utilisateur pour accéder directement à un contenu spécifique. SWFObject, quand à lui, permet d’intégrer un swf à une page HTML en instanciant un object tout en donnant la possibilité de lui passer différents paramètres. A noter que dans le cas où l’internaute n’aurait pas le player flash adéquat, il sera rediriger vers un contenu alternatif. Celui ci servant aussi pour le référencement. En apprendre plus à propos de SWFObject via mediabox.
Travaillant actuellement sur le développement de mon portfolio, je me suis retrouver à un problème en combinant SWFAddress et SWFObject : le deeplinking fonctionne bien, mais l’historique, non. De même, lorsque le site est chargé, si l’on change l’url à la main, les modifications ne se font pas au sein du contenu.
Le code était :
<head>
<title>FLOZ</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/swfaddress.js" type="text/javascript"></script>
<script type="text/javascript">
swfobject.embedSWF("main.swf", "content", "100%", "100%", "9.0.115", "expressInstall.swf");
</script>
</head>
La solution : attribuer un id au swf, afin que SWFAddress puisse interagir avec lui.
<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/swfaddress.js" type="text/javascript"></script>
<script type="text/javascript">
var attributes = { id: "flash_id" };
swfobject.embedSWF("main.swf", "content", "100%", "100%", "9.0.115", "expressInstall.swf", null, null, attributes);
Par ailleurs, l’ordre de déclaration des librairies js est importante : l’importation de swfaddress.js doit se faire APRÈS celle de swfobject.js et AVANT la déclaration du swf.
C’est le genre de truc qui nous fait perdre quelques heures bêtement quoi : )
Diaporama AS3 pour le package minuit4
18th avril, 2009 par Floz
Pendant ma semaine de vacances aux USA, j’ai développé un diaporama en as3 qui vient d’être ajouté au package minuit4. Les exemples ci dessous vous présenteront en réalité deux diaporamas, FadingDiaporama et SlidingDiaporama, qui héritent tous les deux de la classe Diaporama.as du package, mais qui proposent des transitions différentes entre les images.
This movie requires Flash Player 9
Un petit exemple d’utilisation :
import fr.minuit4.diaporama.types.SlidingDiaporama; var imgs:Array = [ ... ]; // Une liste d'images. var slidingDiaporama:SlidingDiaporama= new SlidingDiaporama( 400, 200 ); addChild( slidingDiaporama); slidingDiaporama.addImages( imgs );
Et c’est tout !
Si l’on veut ajouter une image par une image, il existe une méthode .addImage().
D’autres telles que .next() ou .previous() permettront de naviguer entre les images. La méthode .startDiaporamaMode() permettra de faire défiler les images automatiquement, jusqu’à l’appel de .stopDiaporamaMode().
L’utilisation de ces deux classes est relativement simple, et la classe Diaporama peut être étendue afin de créer d’autres types de transitions.
A noter que FadingDiaporama.as ainsi que SlidingDiaporama.as fonctionnent avec la librairie de tween tweenlite, pour le moment.
Flash player 10 - fight one!
16th avril, 2009 par Arno
Rien ne vaut une semaine de vacances pour se relancer dans Flash. Depuis le temps que ça me tentait je n’avais pas encore eût l’occasion de tester certaines nouveautés de la nouvelle API du flash player 10.
Bon je vais pas faire une liste des nouvelles fonctionnalités - simplement parceque je serais bien incapable - mais je vais essayer de présenter quelques travaux de recherches. Dans un premier temps, c’est évidemment la 3D native que j’ai voulu tester, du coup après avoir fait mumuse avec un simple Sprite qui pivote sur l’axe des Y - je suis passé à la mise en place et la manipulation d’un cube, grace à la class SimpleZsorter de Lee Brimelow le rendu fait illusion.
Apercu du rendu d'un cube avec et sans l'utilisation de la class SimpleZSorter
Evidemment pour tout ce qui est gestion des modèles 3D, on peut oublier mais pour ce qui est petit effet de profondeur qu’on souhaiterait intégrer dans une application cette nouvelle API répond à nos attentes et il est vrai que de diminuer la taille du swf de sortie d’une centaine de Ko même si ça peut paraitre ridicule, c’est toujours ça de gagner.
Le deuxième point que j’ai voulu tester est le nouveau protocol de communication développé par Adobe : RTMP (pour Real Time Messaging Protocol) qui permet comme son nom l’indique : le transfert en temps réel de données entre deux clients - c’est le principe du peer-to-peer. Adobe propose un service : Stratus, encore en beta et gratuit, de mise en relation de clients. Le principe est simple : un client se connecte aux serveurs d’Adobe via le protocol rmtp - celui-ci lui attribut un identifiant unique - puis le client se met en attente de la connexion d’un second client qui utilisera l’identifiant unique pour débuter la communication p2p.
L’exemple que propose Adobe pour présenter ce service est relativement impressionnant - il s’agit d’une application de chat audio/video. Evidemment avec ce genre de service on peut imaginer la mise en place de jeux multi-joueurs mais avant d’en arriver là il faut d’abord bien en comprendre les tenant et les aboutissant - maitriser la communication entre les différents participants et en connaitre les limites. Du coup comme première application - j’ai développé un petit chat p2p. Léger détail : il faut connaitre l’identifiant de son interlocuteur pour pouvoir l’appeler, ce qui est paradoxale mais j’y travail.
Je reviendrais dans un prochain article pour ce qui est du détail du fonctionnement et de comment déployer une communication RTMP. Quoi qu’il en soit, cette première expérience avec l’API du flash player 10 me motive suffisament pour que je poursuive. A suivre…
Beatlize Yourself : et si vous étiez un Beatles ?
7th avril, 2009 par Floz
Si vous avez toujours rêvé d’être John Lennon… Vous pourrez toujours tenter de vous contenter de cette application flash BeatlizeYourself.com.
La semaine dernière, Arnaud et moi avons travaillé sur la réalisation d’une application virale pour la promotion du groupe RAIN, qui reprend les grands classiques des Beatles. Le bureau actuel de la junior entreprise d’HETIC, synerg’hetic, nous a proposé de travailler pour nousproduction et donc de mettre en place Beatlize Yourself.
Le principe est simple : l’utilisateur arrive sur le site, envoie sa photo puis se transforme en un des quatre Beatles. Les clients nous ont cité Yearbook Yourself comme site similaire, mais celui ci n’est malheureusement pas encore actif, en cette période de l’année.
Si la photo est trop petite ou pas assez lumineuse, l’application est dotée d’options permettant de retoucher ces paramètres. Personnellement je me suis fais une joie de l’utiliser comme un petit fou depuis qu’elle a été mise en ligne, hier soir.
Pour conclure, amusez vous bien sur Beatlize Yourself !
Update 27/05/09 : L’application n’est aujourd’hui plus en ligne.
AS3 To JS : Carrousel
4th avril, 2009 par Arno
Il y a deux mois de çà, l’envie m’a pris de coder un carrousel en Action-Script 3. Après rappel de mes bonnes années de lycée et la révision des fonctions trigonométriques de base, il a encore fallu se battre sur le z-sorting des items pour donner véritablement l’effet de profondeurs des différentes images qu’on ajoute avant de pouvoir ajouter une première version du carrousel au package minuit4.
Apercu du carrousel AS3
Depuis la reprise des cours, j’ai eu la curiosité de faire pas mal de recherches en Javascript via le framework Prototype (dont notamment une panoramique 360° qui fera peut-être l’objet d’un futur post). Du coup pourquoi ne pas tenter de porter l’algo du carrousel en Javascript, toujours en partant du framework Prototype en tant que base (afin d’éviter les problèmes de comptatibilités entre les différents navigateurs).
Et une fois la gestion du z-index des différents items résolu, une version stable en est sortie. Pour le moment mise à part la gestion des reflets (qui ne peut pas se faire aussi facilement en JS qu’en AS3) il faudrait encore faire un benchmark de performance pour voir les limites de chacunes des deux versions, mais il semble que le résultat reste tout à fait similaire.
Apercu du carrousel JS
Pour ce qui est de l’API de ces différents objets, je posterais sans doute différents exemples d’utilisations des deux versions disponibles dans un prochain article.
Easier than Reading et PaperCharacter.
23rd mars, 2009 par Floz
Comme c’est dommage de ne pas avoir assez de temps pour réaliser directement ses idées. Le site EasierThanReading vient aujourd’hui d’être récompensé d’un FWA.
Ce site met en scène différents personnages-marionnette, qui ressemblent à des bonhommes en papier découpé. Bien que je n’ai pas compris l’intérêt du site (même si je dois avouer que je n’ai pas tellement chercher; j’ai plus regardé le côté technique/graphique que l’objectif derrière la réalisation), je trouve que ça rend plutôt bien.
Pour rejoindre mon amorce, j’ai eu un petit pincement au coeur en voyant l’idée joliment mise en scène puisque je suis en train de refaire mon portfolio avec une approche similaire. Je trouve que l’aspect personnage en papier découpé est assez séduisant, et j’aimerai par la même occasion créer un petit univers en 3D, avec un décors du même goût. Un peu comme PaperMario sur Wii :
J’ai commencé a réaliser une interface de test il y a environ un mois, j’invite les curieux à jeter un coup d’oeil ici. Le rendu 3D est généré via Papervision3D, tout en utilisant une librairie de classes répondant au doux nom de AS3DMod et qui permet d’appliquer différents filtres aux éléments 3D. Pour en apprendre plus, rendez vous sur everyday flash.
J’espère pouvoir reprendre dans peu de temps, après un projet en graphisme et surement une réalisation avec flartoolkit avec Arno.
Pour ouvrir sur le même sujet, vous pouvez aller jeter un oeil sur ce site : http://www.coketeens.com.br/. On y retrouve un brin de “personnage en papier”, même si la majorité correspond à des models 3D simples. C’est vraiment chouette.
Flux RSS- A la découverte des ByteArray
- Coordonnées des points d’une sphère
- M4Tween - Javascript
- Object Pooling
- M4Tween premier jet
- Peindre avec des ribbons en flash
- Passer par des LinkedList pour gagner en performances
- Comment créer des projets en utilisant FlashDevelop ?
- Guide d’installation de FlashDevelop
- Comment utiliser Cron? Automatisation des tâches, lancement de script php