martian arts

/!\ Chantier /!\

y_nk — Fri, 08 Jan 2010 12:05:17 +0000

Parce que je n’ai pas trop le temps de m’y consacrer vraiment, je déclare cet espace *en cours de rénovation* jusqu’a nouveau post o/

CSSFit !

y_nk — Tue, 22 Dec 2009 13:24:58 +0000

Most of the full flash website i’ve to do with bigyouth are meant to be resizable to a certain size.

Before, we were using swffit which is really great most of the time (we also had problems with encoding a long time ago) ; we were bored of adding “another” js lib just for a little trick which can be made with a little css achievement.

So, we created CSSFit. This is not so different from swffit, and is just for our pleasure to find different solutions

What’s inside ?

Well, not so many files. You’ve an html/css template which provides the basics to make it work, and an example to see it in action.

The idea is to set some css default rules to swf, html and body dom objects :

html, body
{
width:100%;
height:100%;
min-width:960px;
min-height:600px;
margin:0px;
padding:0px;
overflow:auto;
}

#flash
{
width:100%;
height:100%;
}

Easy stuff But what about IEs ? They dont’ support min-width/height easily since IE4 to 7. We added an other css with some IE specific css tags inside (which are javascript).

html, body
{
overflow-x:expression(document.body.clientWidth > 960 ? "hidden" : "auto");
overflow-y:expression(document.body.clientHeight > 600 ? "hidden" : "auto");
}

#flash
{
width:expression(document.body.clientWidth > 960 ? "100%" : "960px" );
height:expression(document.body.clientHeight > 600 ? "100%" : "600px" );
}

So, the trick is to load the “ie specific” stylesheet when needed to override css definitions. In that way, we use conditionnal commentaries :

The last thing to know is you’ve to add this commentary at the bottom of the page, after the body object’s closure tag ; as we use javascript inside the “ie-specific” css, we’ve to wait to this object to be fully loaded.

There’s a demo just here and the googlecode project is already available and fully free .

Air 2 (aka Athena) + ServerSocket = crossdomain needed !

y_nk — Wed, 18 Nov 2009 10:46:05 +0000

Assez impatient de tester les fonctionnalités les plus importantes de Air 2, release hier matin, je suis tombé des nues.
Peut etre est ce le fait de n’avoir jamais codé de serveur “public” (en dehors de localhost) auparavant, mais je me suis heurté a un problème apparement vieux comme le monde, mais qu’on ne vous dit pas dans les releases notes.

Tout bete, le serveur s’instancie en moins de 2 et on peut faire tourner un client rapidement en local :

Serverside :

server = new ServerSocket();
server.addEventListener(Event.CONNECT, connect);
server.bind(843);
server.listen();

private function connect(e:ServerSocketConnectEvent):void { trace("client connected", e.socket); }

ClientSide :

me = new Socket("192.168.0.50", 843);
me.addEventListener(Event.CONNECT, connect);

private function connect(e:Event):void { trace('connected'); }

Ce qu’on ne vous dit pas (et qui n’était pas automatique pour moi) c’est qu’une fois le client récupéré, on peut écrire dessus comme un bytearray mais pour envoyer les données, il FAUT utiliser la méthode socket.flush(); !

Une fois ce petit désagrément passé, on peut faire dialoguer les 2 facilement… ou pas !

Testé dans le navigateur, je recois une erreur de sandbox (#2048) entre mon application “http://mon-ip/client.swf” et mon serveur. Après des nuits acharnées (aka 3h) de recherches sur le net, il y a plusieurs choses a dire pour amener a la solution :

1. Si on mets le serveur sur le port 843, on peut voir le message du client demandant le crossdomain du serveur. Il envoie la commande a laquelle on pourra répondre (voir 3.) ; si on change le port, on ne voit pas la commande et donc impossible d’envoyer le bon crossdomain (je teste encore pour voir si on peut pas contourner ca).

2. Un fichier de config permet de log des chargements de policy files. Il suffit de trouver le fichier “mm.cfg” (situé dans le dossier de session, en l’occurence pour un vista normal C:\Users\Moi\mm.cfg) et de le modifier pour qu’apparaisse :

PolicyFileLog=1 PolicyFileLogAppend=1

La seconde donnée étant pour moi a 0 par défaut. Le fichier de log se trouve ensuite dans (toujours pour moi) C:\Users\Julien\AppData\Roaming\Macromedia\Flash Player\Logs\policyfiles.txt où l’on peut admirer les différentes étapes de chargement des différents crossdomain du flashplayer.

3. Dans le cas des sockets xml (et donc notre cas), le client doit charger un crossdomain.xml spécial, avec la commande :

Security.loadPolicyFile("xmlsocket://mon-ip:843");

~~Ce loading spécial ne change rien a la nécéssité de mettre le serveur sur le port 843 (je n’ai pas encore trouvé pourquoi et comment changer ca).~~ En fait on peut mettre n’importe quel port sous réserve de bien l’avoir mis partout (coté serveur, et 2 fois coté client (dans le loadPolicyFile et dans le socket).

Coté serveur, quand le client execute cette commande, on reçoit tout pareil la commande . Il faut donc lui répondre un xml de crossdomain viable, où l’on doit spécifier le port, et où l’on terminera par un byte nul pour spécifier la fin de la transaction :

server = new ServerSocket();
server.addEventListener(Event.CONNECT, connect);
server.bind(843);
server.listen();

private function connect(e:ServerSocketConnectEvent):void
{
trace("client connected", e.socket);
var client:Socket = e.socket;
client.addEventListener(ProgressEvent.SOCKET_DATA, data, false, 0, true);
}

private function data(e:ProgressEvent):void
{
var client:Socket = e.target as Socket;
var cmd:String = client.readUTFBytes(client.bytesAvailable);

switch(cmd)
{
case "":
var ba = new ByteArray();
ba.writeUTFBytes('');
ba.writeUTFBytes('');
ba.writeUTFBytes('');
ba.writeByte(0);
ba.position = 0;

client.writeBytes(ba, 0, ba.bytesAvailable);
client.flush();
break;
}
}

Le plus dur a été de trouver les ressources qui sont bien enfouies au fin fond d’adobe.com

Have fun avec les socket :]

Edit : Pour ceux (comme moi) qui esperaient pouvoir installer le runtime Air2 sur linux directement en ligne de commande, cela est impossible. Il vous faudra un x11 pour pouvoir accepter les conditions d’utilisation. Normalement, un formulaire est prévu par Adobe pour pré-accepter ces conditions, renvoyant sur un bin spécial ; Air 2 étant encore en beta, le formulaire n’existera sans doute pas tant qu’une version stable ne verra le jour.

BitmapData + Graphics = WTF?

y_nk — Mon, 16 Nov 2009 16:33:15 +0000

Récemment (toujours) j’ai été confronté a des transitions nécéssitant de découper et mettre a jour des bitmapdatas et où je me suis presque littéralement arraché les cheveux. J’ai d’ailleurs utilisé la technique “a la va vite” et, ayant un 30mn aujourd’hui, je reviens dessus, teste le pourquoi du comment.

Pour la petite démo, j’ai 4 images embarquées dans un swf, que je stocke dans 4 bitmapDatas différents, bmd1, 2, 3, et 4. J’ai également pris un “bmd0″, reflet de l’image affichée (un genre de référence au bmd courant). J’ai enfin un petit script permettant de faire des captures de ce “current”, et de dessiner la zone dans un nouveau Sprite.

Pour capturer un morceau d’image, un simple drag and drop suffit et pour changer d’image, c’est avec les touches 1, 2, 3, et 4 du clavier alphabétique que ca se passe.

Quand on teste une premiere fois de capturer une image, tout fonctionne bien, c’est impec. Vient le moment de changer d’image et la, stupeur et tremblements, le petit Sprite fraichement capturé, qui n’utilise que beginBitmapFill et ne stocke jamais de référence au bitmapData est pourtant lui aussi updaté.

Pourquoi ?
Je suppose qu’implicitement la méthode beginBitmapFill() garde une référence au bitmapData, et si le bitmapData change, elle s’auto-appelle pour mettre a jour le tout. Concretement je suis plutot décu de cette implémentation pseudo-intelligente. Je m’attendais a un comportement uniforme de la classe Graphics ; jusqu’a preuve du contraire “beginBitmapFill” devrait juste faire ce que son nom semble dire “begin bitmap fill” et pas “beginBitmapFillAndAutoupdateIfReferenceHasChanged”.

Workaround
J’avais testé plusieurs workarounds, et le dernier me semble le plus viable :

1/ D’abord j’avais pensé a garder une référence au bmd dans l’objet. Malheureusement, ca marche pas.

2/ Ensuite j’avais pensé a faire un clone du bmd en utilisant clone() mais c’est pas super optimisé, vu que dans le cas réel je traitais beaucoup de petites captures d’un très grand bitmapData.

3/ Solution du cas réel, j’ai créé des clones a la taille de la capture, et du coup ma matrice de transformation s’est transformée en rectangle au moment du copyPixels. Niveau optimisation, on y est un peu plus, mais franchement, c’pas encore ca.

Ce qui m’effraie le plus, c’est d’être passé a côté du plus simple. Comme pas mal de bugs graphiques, mettre des filtres “nuls” suffit. Oui oui, en effet, un simple “filters = [new BlurFilter(0, 0)]” et pouf le bug est parti.

Pour illustrer ca, retour a la démo, et appuyons sur Entrée pour switcher entre “auto update ON” et “auto update OFF”.

Qui l’eu cru ?

Sur ce, les sources.

Away3D + Marilena = Head Tracking ?

y_nk — Mon, 20 Jul 2009 13:45:47 +0000

Inspiré de Johnny lee et de son head tracking, voici un petit flash fait en 1h et quelques. Le process aurait pu etre fait a base de motion tracking plus simple et plus rapide pour flash ; c’était pour moi le moyen le plus sympa de rencontrer Marilena (projet libspark) et d’utiliser “un peu” away3d. De plus, le motion tracking ne fait pas la différence entre une mouche qui vole, une main et un visage. Là, si ! (Vous pouvez feinter en dessinant un smiley sur du papier quand meme)

AS3, FP10, PatchPanel et SwitchBoard

y_nk — Wed, 15 Jul 2009 13:06:30 +0000

Aujourd’hui un léger post pour faire le point sur le projet “offline” de mon examen. L’idée était de retaper le process d’une application qu’un client avait fabriqué il y a plus de 8 ans, afin de le rendre fluide et exploitable. Au lieu d’utiliser 5000 technos, je pense a réduire le tout a : flash et illustrator dans une conception simple : Photoshop, Catalyst, Flash Builder.

Sans dévoiler la mouture perso de l’application, le process client était celui ci :

Envoyer une image a php pour l’analyser, a la manière d’un getPixel et renvoyer un fichier texte formaté dans l’esprit d’un ByteArray
Balancer le tout dans flash, afin de changer quelques variables, et exporter le tout en jpg
Ouvrir le jpg avec illustrator, utiliser un script pour vectoriser sans pertes le jpg généré
Agrandir et sortir un PDF destiné au print

Voici comment je compte résumer le process :

Ouvrir Illustrator avec un flash panel
Charger un jpg dans le flash panel et jouer avec les curseurs
Générer l’illustrator pret a etre agrandi au besoin et enregistré en PDF

Je laisse la main a l’utilisateur sur l’étape de redimensionnement et d’enregistrement car ces paramètres dépendent essentiellement de la commande. J’aurai pu les inclure dans le flash panel, mais mon idée d’un panneau est un outils destiné aux données du document et il se limite donc a manipuler ces données (et pas à enregistrer, fermer le document, fermer illustrator et allumer la cafetière juste avant d’éteindre le pc).

On part donc sur un panneau flash utilisant la technologie PatchPanel pour communiquer avec l’application. Je fais mon design sur Photoshop, l’importe dans flash Catalyst pour définir les premiers composants qui feront mon application.

Premier constat, si vous utilisez des styles de calques avec transparences, ils seront rasterizés a l’import et ca rendra très moche. J’ai donc préféré me taper l’export de chaque png a la main pour être certain que Catalyst ferait pas de la bouillie de transparence ; pour caler, un screenshot en fond de mon application c’est le plus simple et le plus efficace.

Je fais quelques boutons avec le mythique “je click ici et je dis ceci est un bouton et hop c’est bon” et quelques transitions histoire de dire “waaah” en 5mn, et me voila dans flash builder.

Bon, grâce aux petits conseils fournis à la présentation Flash Platform, j’avais bien renommé mes classes et la lecture du code généré était… relativement simple.

Si Catalyst génère du code propre, je pense quand meme qu’il n’est pas super lisible. J’ai passé près de 20mn a retaper les identations, l’ordre des groupes () pour avoir un code proche de ce que j’aurai pu “générer” à la mano.

Une fois le cleanage fait, le gros taf était simple, de l’AS3 (FP10) tout ce qu’il y a de plus basique. Un loader, un histogramme et la communication avec Illustrator.

Là, la doc de PatchPanel est plus qu’accessible. Il y a énormément d’exemples pour bien démarrer. Pour loader mon image direct, j’utilise FileReference.load() qui permet de charger directement un média dans le player, et là, c’est le drame. L’event de loading n’est pas trigger, et le fait d’executer le panel dans le player interne d’illustrator ne permet aucun debug. Je suis donc dans le flou total pour cette piste.

Petit clone de projet, je décide de passer sur “SwitchBoard”, une techno similaire qui permet a une appli Air de dialoguer avec la suite Adobe. Cette solution me plait moins car il faut installer un client SwitchBoard et le runtime Air pour enfin installer l’appli et la faire tourner. C’est plus fastidieux, et ce n’est pas tout.

Ayant un runtime Air a jour (1.5), FileReference.load() fonctionne bien. Cela ne fait qu’appuyer ma théorie “Illustrator CS4 possède un FP9 interne non updaté”. J’arrive facilement à dialoguer avec illustrator. En fait SwitchBoard est beaucoup moins évolué que ce que je pensais. Il faut créér un “Client”, qui envoie des “Message” qui ne sont ni plus ni moins que des commandes JavaScript. En gros, je perçois l’appli Switchboard et son framework comme un socket camouflé (alors que PatchPanel à au moins une vraie architecture objet calquant le “DOM” d’illustrator (avec ses défauts)).

N’ayant pas trop d’autres choix, je limite le scope de mon appli à la génération de l’artwork et je squizze pour l’instant les quelques curseurs. je fais mes petites boucles, et j’envoie sur enterFrame mes “Messages” a Illustrator…

Pour analyser un jpg de 80×100 (8000px) c’est rapide, très rapide. Pour envoyer les messages quel déception ! C’est lent… très lent… je compte 3 minutes sur un entreFrame de 30fps. L’envoi des données semble même trop rapide pour Switchboard car certains éléments sont tout simplement absent de la génération. Il faudra passer sur un Timer pour ralentir la cadence d’envoi des messages et avoir une génération d’artwork fiable à 100%… en 8mn54s !!! C’est tout simplement abérant

Alors je vois pas trop bien quelles solutions j’ai. La meilleure serait de corriger ce problème de Flash Player afin d’utiliser PatchPanel. Pour l’avoir déjà utilisé auparavant, je pense que la génération serait plus rapide et plus fiable. Je pourrais en plus de ca, garder des références des objets générés afin de pouvoir optimiser l’utilisation des curseurs. En utilisant SwitchBoard, je suis contraint de faire une appli plus grande afin d’insérer une zone de prévisualisation dans laquelle je pourrais manipuler un simple ByteArray et un gros bouton “Générer (et allez prendre un café)” pour le process.

Si vous avez des réponses et/ou des solutions, je suis bien évidemment preneur

Histogramme colorimétrique

y_nk — Wed, 01 Jul 2009 01:33:28 +0000

Voici une petites classe qui sera très utile pour ceux et celles qui font de la photo.

J’avais déjà posté une classe Color ayant plein de conversions ; je remettrai le couvert en optimisant un maximum et en insérant le peu que j’ai appris sur le polymorphisme. Ce n’est pas le sujet de ce billet mais je tease en passant.

Voici donc le topic : une classe générant un histogramme de couleur tel qu’on pourrait le voir dans Adobe Lightroom et Photoshop. J’en ai pas eu un besoin vital mais c’était une petite feature à ajouter à un projet qui fait joli et qui renseigne un peu quand même. Merci encore une fois à nicoptere pour les petits tips d’optimisation.

Voici l’implémentation et un screenshot en situation :

public function Histogram(width:int, height:int):void
public function analyze(source:BitmapData):void
public function refresh():void

La classe commence a avoir des temps de réponses supérieurs à 1s sur des bitmaps d’une taille supérieure a 1600×1200px. J’aurai aimé optimiser d’avantage en passant sur un modèle “setPixel” mais j’aurai alors perdu l’aliasing du tracé fourni par Graphics.

Voici le jouet !

Flashboard, concepts a la mode

y_nk — Mon, 29 Jun 2009 08:53:17 +0000

Je me rends compte depuis quelques temps que les concepts comme celui que j’avais imaginé avec Flashboard fleurissent et murissent tout autour du monde. C’est assez difficile de se dire qu’on a une idée originale en fait

Merci a ceux qui m’ont inspiré et aussi ceux qui développent une idée similaire ; cela me montre que la compétition est rude, et que mon chemin n’est pas dénué de sens.

Voici le projet d’une team des Gobelins : http://www.projet-kune.fr/

Je n’ai pas pu tester le travail, mais la vidéo est prometteuse. En parlant de vidéo, les tutos vidéos pour l’utilisation de flashboard verront le jour d’ici 15 jours ou ne verront pas. C’est dit.

Voici le projet maintenant supporté par pecha kucha qui m’a fait déprimé pendant quelques temps : www.prezi.com

J’avais a peine fini le cahier des charges et la première alpha quand je suis tombé sur leur site et je me suis rendu compte de l’avance. Ca a d’abord été une bonne source de déprime, comme a chaque fois qu’on commence un truc original et qu’on se rends compte que “les simpsons l’ont déjà fait” et au final, ca a été une source d’inspiration très utile, car j’ai pu analyser les problèmes de leur interfaces et ca m’a permis d’anticiper quelques bons points sur Flashboard.

J’en profite pour faire un coucou et merci a ceux qui m’ont supporté et aidé durant ce long périple qui ne saurait tarder a recommencer : sophie, nicoptere, [NiKo], dada, smooki, kabnot et biensur mes collègues robin, clément, antoine, et tous les autres; plus largement la board flash de mediabox et leur channel irc où on offre des glaces à la fraise !

GPS, Python, Flex, AS3 et GoogleMaps ou l’art d’occuper ses soirées.

y_nk — Wed, 24 Jun 2009 01:57:11 +0000

J’ai récemment été confronté à la situation où on sait pas faire un truc (ca arrive souvent ). En l’occurence, il fallait écouter des données provenant d’un périphérique et les exploiter dans Flash. Voici mon training

J’ai commencé par fouiller les tiroirs à la recherche d’un périphérique similaire (bluetooth donc) et j’ai réussi a déterrer une vieille balise GPS qui date de quand les tomtoms et autres navigateurs étaient hors de prix et qu’un petit PDA faisait mieux l’affaire :

L’idée (assez inutile soit dit en passant) est de récupérer les données de la balise, afin de me localiser dans googlemaps.

Etape 1, écouter la balise. N’étant pas un érudit des OS alcidés, j’ai glané auprès d’un ami quelques infos intéressantes. Lorsqu’on détecte et que l’on créé une connexion avec un périphérique, une ressource se créé dans le répertoire /dev. Ces ressources sont référencées par “tty.” puis le nom du périphérique ou de la connexion (complément d’info).

Depuis peu, je possède un mac, et c’est super parce que c’est basé sur une BSD et donc c’est pratiquement les mêmes principes architecturaux. On peut donc ouvrir un terminal et regarder ce qu’on a dans /dev :

La balise est là. N’ayant strictement aucune idée de comment j’allais m’y prendre (ou peut être vaguement), je retourne glaner des infos par ci par la, et j’ai découvert une commande qui a radicalement changé ma manière de voir les connexions avec des périphériques : screen. Une magnifique commande, qui, en conjonction avec un “tty” permet d’afficher dans le terminal les messages délivrés par la ressource. Une petite démo :

Bon bah voila. On a un paquet de code pourri. En y regardant d’un peu plus près et en faisant appel à de vagues souvenirs de configuration, cette norme de transmission est en fait du “NMEA”.Et là, tout de suite, tout devient limpide.

Etape 2 : Relayer l’information. Tout le monde le sait, et c’est pas nouveau, Flash ne peut pas avoir accès a des ressources systèmes, et c’est bien pour ca que les projets comme WiiFlash utilisent des serveurs sockets écrits en Java pour relayer le hardware avec la partie as3. J’avais entendu ici et là que Python c’était génial et qu’on pouvait presque tout faire avec. J’ai donc voulu m’essayer à ce langage, histoire de dire “j’en ai fait” (d’ailleurs, j’en ai fait, vraiment ).

Pour celles (lol) et ceux qui ne le sauraient pas déjà, Leopard possède nativement un interpreteur Python 2.5.1. C’est déjà une bonne chose Ensuite, j’ai un peu galéré avec, mais heureusement les endroits où parler Python ne manquent pas (j’en profite pour passer un coucou aux gens de #python-fr@irc.freenode.net) et j’ai pu rapidement être aiguillé vers les 2 librairies (qu’on appelle “module” chez les Pythonneux) que j’utiliserai au final : pyserial et twisted. Respectivement, la première est dédiée à la lecture des ports séries, et twisted est un genre d’usine à gaz qui permet de faire très facilement n’importe quel serveur socket.

On relèvera que Python est un langage interprété, et qu’on peut lancer l’interpréteur avec la commande “python” dans le terminal, ou bien executer un script en rajoutant simplement le path et le nom du fichier juste après (par convention, les fichiers sont des “.py”).

On est parti dans l’install de pyserial. Comme le dit la doc très simplement, il y a un “egg” a télécharger, et ensuite dans le terminal il suffit de taper “easy_install pyserial”. C’est magique, ca marche, j’adore

Dans la lancée, au fin fond de la page de pyserial on peut y lire un “quick start”. Mise en pratique histoire de faire mon premier hello world évolué :

Bon bah voila c’était pas si dur

Maintenant, j’attaque la partie socket, celle qui (au final) m’a pris le plus de temps car je n’avais que de très vagues notions de socket, protocole, handshake et autres bidules du réseau. Jusqu’a ce moment, en gros y avait des ips, et ports et des requètes, le tout très flou (et maintenant je vois !) :

Voici le script en question. Gardons bien en tête que python est un langage interprété, et ca devrait rouler tout seul. Le script fait les imports nécéssaires en premier, puis définit la classe CustomReceiver qui nous sert ici de protocole (si j’ai rien perdu en route). C’est cette classe qui va permettre de manager les connexions, entrantes, sortantes et les déconnexions. Le script continue en définissant une classe XMLSocket qui sera en charge de monter le protocole sur le serveur. Une fonction globale Main() est proprement définie, puis appelée. Alors pour info, reactor c’est la grosse engine qui fait tourner le serveur et listenTCP() permet de brancher un protocole sur un port précis de la machine, tandis que run() le mets en route. Comme quoi, c’est super simple.

L’envoi de donnée se fait (a priori) toujours sur la requète d’un client, et donc a cet effet, une méthode “lineReceived” est prévue dans le protocole ayant pour argument “line”. J’ai mis ici l’envoi du crossdomain histoire de dire que j’envoie quelquechose de plus intelligent que helloworld, parce qu’au final ca me sert pas tant que ca.

Là où ça s’est corsé pour moi, c’est que je voulais envoyer en boucle les infos de la balise. Comme il n’existe pas d’enterFrame en Python, un bon vieux while true fera l’affaire. Bah non en fait, ou sinon super difficilement. Sans trop rentrer dans les détails, le reactor.run() EST un while True (avec une majuscule siouplait) et donc si j’avais voulu insérer du code dedans, j’aurai du taper dedans OU créér un nouveau thread avec la lib le module éponyme. Les gens de #twisted@irc.freenode.net sont un peu moins chaleureux que ceux de #python-fr, et après avoir demandé dans le vent, un gentil bonhomme de #python-fr m’a finalement dirigé vers LoopingCall qui est ni plus ni moins qu’un objet référencé dans le reactor et qui est appelé à intervalles régulières (aka Timer mais pas vraiment). J’ai donc placé mon bout de pyserial dans le protocole (bien qu’il aurait été plus propre de le mettre en dehors) et défini une méthode “tick” qui a pour but d’envoyer le paquet de données lues par pyserial a intervalle régulière (1/30, car 30fps dans mon swf).

Etape 3 (la dernière) : Exploiter les données dans Flash. C’est assez banal finalement, et il n’y a pas besoin d’énormément d’explication. Si vous n’êtes pas familiers de Googlemaps API, je vous renvoie sur la page dédiée au projet qui expliquera 100 fois mieux que moi les basics ; je me sers toujours de ma classe perso, super basique mais fonctionnelle (J’ai retiré la clé). J’avais mis le source en dur dans la page mais vu l’indentation ca servait a rien. En revanche, le mxml est dispo

Le flash appelle en premier la fonction launch() qui instancie la GoogleMap et qui la place dans le container “canvas” prévu pour ca. J’ai ajouté une petite console et un bouton pour gérer la connexion. Quand on clicque sur le bouton connect, on instancie un nouveau socket XML, et on lui fait écouter le bon port (sinon ca marche pas) ; il réponds (ou pas) et ajoute un écouteur d’évènement sur la réception de donnée. Je ne me suis pas trop cassé la tête pour la partie de traitement (parce qu’au final tout ça sert à rien) et je me suis contenter d’éclater la chaîne de donnée en tableau, et de rechercher ces 2 messages bien particuliers : GPGSA qui renseigne notamment un entier égal à 1, 2, ou 3 permettant de définir le fix de la balise (none, 2D, 3D), et GPRMC qui peut éventuellement être considéré comme un résumé de localisation (mais il sert pas trop à ça en vrai).

Le petit point tricky, pour finir, c’est la conversion entre le format délivré par la balise et les valeurs entrantes pour la GoogleMap : La balise donne des infos au format DDMM.mmmm (avec D comme degré, et M comme minutes à virgule) alors que les objets LatLng nécéssitent des décimaux.

La petite formule, c’est DD + MM.mmmm / 60 et c’est tout. Sur ma balise, ou peut être est ce lié à ma localisation, la longitude avait un 0 supplémentaire devant les degré (ce qui explique le 3 dans les substr()).

Et donc, est ce que ca marche ?

Flashboard v1 released

y_nk — Mon, 08 Jun 2009 12:26:51 +0000

En fait j’avais prévu de release une distribution stable dans laquelle chacun pourrait s’y retrouver, simple d’utilisation et tout et tout ; le fait est que – comme de par hasard – une montagne de taf s’abat sur moi déchainant haine et ennui.

Ceci étant dit, et pour ne pas vous tenir en haleine plus longtemps ( ), j’ai installé sur mon petit domaine 2 flashboards distinctes, dont une publique

Voici donc la petite url qui va bien :

http://flashboard.martian-arts.org/ (la deuxième étant : http://whois.martian-arts.org/)

Pour l’instant la board est encore assez vide (la faute a qui ?) mais je compte bien y ajouter quelques vidéos tutorial sur les manipulations possibles.

Voici quand même un léger mode d’emploi pour pas vous lâcher dans la nature :

On se logge en cliquant sur le cadenas en haut a droite. Les logins/pass sont “public” et “public”
Quand on est loggé, on peut doublecliquer sur le fond pour faire apparaitre le menu de création, sur la gauche. Les 3 premiers menus sont alloués a la création, tandis que les 3 derniers sont des boites de stylisation.
Pour créér un objet (et ce quelquesoit l’objet), faites a peu pres les mêmes interactions que ce que vous attenderiez d’illustrator. Les processus de créations sont a peu de chose près identiques.
Pour placer un objet, c’est assez simple : Drag’n'drop. Besoin de le tourner ou de le grossir ? Ajoutez Shift a votre drag’n'drop !
Il y a très peu ou pas d’indications sur la sélection. C’est a vous de savoir ce que vous avez sélectionné ; comment on sélectionne ? en cliquant sur un objet, tout simplement.
Parlons clavier : par choix, les raccourcis se font avec la touche shift. Shift B pour passer en arriere plan, Shift G pour dégrouper, Shift L pour bloquer un objet, Shift S pour sauvegarder, backspace pour supprimer.
Pour grouper, le mouvement est un peu trivial au début – surtout dans l’explication en fait – et on s’y fait vite ; pour beaucoup, il est déjà acquis mais ne corresponds a aucune interaction connue dans le monde de l’informatique. Faites un doubleclic, et étirer un cadre de sélection lors du second clic.
Pour le reste, il vous faudra revêtir le chapeau d’indiana jones