L’utilisation est relativement simple. Allez faire un tour sur la doc de face.com pour comprendre le fonctionnement de leur API. Pour la suite , je vous mets un petit tuto sur la marche à suivre pour utiliser la librairie dans un namespace privé. Je ferai pareil pour l’utilisation avec facebook connect dès que j’ai un petit peu de temps, ce qui vous permettra de jouer directement avec les tags des photos du célèbre réseau social. Donc “stay tuned” si c’est quelque chose qui vous intéresse.

utilisation

Premièrement rendez-vous sur le site developpeur de face.com et créez un compte. Sur la page de votre compte, ajoutez une nouvelle application et spécifiez au besoin l’url du site. Notez ensuite l’API Key ainsi que l’API Secret, pour le reste laissé tout décoché. De retour sur votre compte ajouté un namespace, que vous réglerez en privé pour l’instant. Un namespace sur face.com est un comme son nom l’indique un espace de nom, dans lequel vous ajouterez les personnes à détecter/reconnaître sous la forme id@namespace, pour plus d’infos allez ici.

Du côté actionscript enfin. On va procéder en 3 étapes:

1. Détecter un visage dans une image et récupérer son id temporaire( tid )
2. Enregister le tid dans notre private namespace
3. Effectuer une reconnaissance sur une autre image pour la comparer avec l’id stocké

Etape 1, la détection. On va donc détecter un visage sur la photo suivante. Tout rapport avec l’actualité d’aujourd’hui est involontaire…

Franck Ribery content...

package
{
	import flash.display.Sprite;
 
	import net.metafor.faceapi.FaceApi;
	import net.metafor.faceapi.events.FaceEvent;
 
	public class Main extends Sprite
	{
		private var faceApi:FaceApi;
 
		public function Main()
		{
			//Créez une insatnce de FaceApi
			faceApi = new FaceApi();
 
			//Définissez votre apiKey et votre secret
			faceApi.apiKey = "your_api_key";
			faceApi.apiSecret = "your_api_secret";
 
			// Enregistrez un écouteur et appelez la méthode detect() sur recognitionService,
			// avec un Array contenant les urls des images à analyser en paramètre.( ici une seul pour l'exemple )
			// Vous pouvez aussi utiliser uploadAndDetect pour passer directement un Bitmap
			faceApi.recognitionService.addEventListener( FaceEvent.SUCCESS , onDetectSuccess );
			faceApi.recognitionService.detect( ["http://static1.purepeople.com/articles/0/24/40/0/@/168118-franck-ribery-637x0-2.jpg"] );
 
		}
 
		private function onDetectSuccess( evt : FaceEvent ) : void
		{
			faceApi.recognitionService.removeEventListener( FaceEvent.SUCCESS , onDetectSuccess );
 
			//Récupérer l'id temporaire
			var tid:String = evt.data.photos[0].tags[0].tid;
		}
	}
}

Etape 2, sauvegarder l’id temporaire dans votre private namespace:

// Sauvegarder ensuite votre tid , en l'associant au uid de votre choix.
// Respecter bien le syntaxe suivante :  id_de_votre_choix@nom_du_namespace
faceApi.tagsService.save( tid , "franck_ribery@nstuto" );

Etape 3, et voilà maintenant vous pouvez comparer une nouvelle photo avec le contenu de votre namespace. Celle-ci par exemple:

Franck Ribery toujours content...

// Vous pouvez maintenant appeler recognize() sur recognitionService.
// Vous comparez ainsi une nouvelle image, dans ce cas-là avec l'ensemble des tags enregistrer dans le namespace( all@namespace ).
// Vous pouvez aussi le comparer seuleument, avec un tag( ex: franck_ribery@nstuto ).
faceApi.recognitionService.addEventListener( FaceEvent.SUCCESS , onRecoSuccess );
faceApi.recognitionService.recognize( ["http://www.elawords.com/wp-content/uploads/2010/03/Franck-Ribery.jpg"], ["all@nstuto"] );

Et voilà!!! Si vous faites un trace() de la propriété rawResult de l’événement vous devriez voir quelque chose comme ça.

{
    "photos": [
        {
            "url": "http:\/\/www.elawords.com\/wp-content\/uploads\/2010\/03\/Franck-Ribery.jpg",
            "pid": "F@f39c380996d11b054183916d919c3046_7b6b64e18d6b4e64070dcc7d0f91fd76",
            "width": 338,
            "height": 450,
            "tags": [
                {
                    "tid": "TEMP_F@f39c380996d11b054183916d919c3046_7b6b64e18d6b4e64070dcc7d0f91fd76_53.70_48.11_1",
                    "threshold": 65,
                    "uids": [
                        {
                            "uid": "franck_ribery@nstuto",
                            "confidence": 85
                        }
                    ],
                    "gid": null,
                    "label": "",
                    "confirmed": false,
                    "manual": false,
                    "tagger_id": null,
                    "width": 66.57,
                    "height": 50,
                    "center": {
                        "x": 53.7,
                        "y": 48.11
                    },
                    "eye_left": {
                        "x": 36.67,
                        "y": 41.85
                    },
                    "eye_right": {
                        "x": 63.16,
                        "y": 44.67
                    },
                    "mouth_left": {
                        "x": 34.67,
                        "y": 65.64
                    },
                    "mouth_center": {
                        "x": 45.74,
                        "y": 68.54
                    },
                    "mouth_right": {
                        "x": 58.32,
                        "y": 67.66
                    },
                    "nose": {
                        "x": 46.99,
                        "y": 57.22
                    },
                    "ear_left": null,
                    "ear_right": null,
                    "chin": null,
                    "yaw": -1.72,
                    "roll": 8.07,
                    "pitch": 1.91,
                    "attributes": {
                        "face": {
                            "value": "true",
                            "confidence": 1.5809
                        },
                        "gender": {
                            "value": "male",
                            "confidence": 94
                        },
                        "glasses": {
                            "value": "false",
                            "confidence": 53
                        },
                        "smiling": {
                            "value": "true",
                            "confidence": 15
                        }
                    }
                }
            ]
        }
    ],
    "status": "success",
    "usage": {
        "used": 1,
        "remaining": 199,
        "limit": 200,
        "reset_time_text": "Tue, 20 Jul 2010 16:46:25 +0000",
        "reset_time": 1279644385
    }
}

Vous trouvez donc une partie uids qui stocke les ids qui ont matché avec votre comparaison. On s’aperçoit que la photo à bien été reconnue comme franck_ribery@nstuto avec une probabilité de 85%.
Voilou, c’était un exemple tout simple, à vous de faire joujoux avec maintenant. Essayez avec la photo de Zaia et vous ne devriez pas avoir le même résultat.

release note

• La libraire ne supporte actuellement que les résultats en JSON, mais l’XML va suivre au plus vite.
• L’authentification facebook est presque entièrement implémentée, je ferai suivre un tuto.
• L’authentification avec Twitter est partiellement implémenter, notamment avec OAuth, vous trouverez une classe dans le package auth vous aidant à l’implémenter.
• Pour passer un bitmap à la place d’une url, utiliser uploadAndDetect(), uploadAndRecognize, …
• Les méthodes suivantes ne sont pas encore disponibles: tags.add(), tags.get() et tags.remove() . Elles suivront dès que j’ai un peu de temps.

download

Vous trouverez les sources sur mon github.
Pour les autres je vous mets aussi les sources en direct download.
Et pour la doc, c’est ici.( pas encore très fournie, mais ça vient).
N’oubliez pas de télécharger l’excellente lib as3crypto si vous utiliser OAuth.

ExternalInterface.addCallback("callAs", cb);
btn.addEventListener( MouseEvent.CLICK , clickHandler );
 
private function clickHandler( evt : MouseEvent ) : void
{
    if( ExternalInterface.available )
    {
        ExternalInterface.call( "callJS" );
    }
}
 
private function cb() : void
{
    trace("As called");
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            var flashvars = {};
            var params = {};
            params.wmode = "transparent";
            params.allowscriptaccess = "always";
            var attributes = {};
            attributes.id = "flashcontent";
            attributes.name = "myFlashContent";
            swfobject.embedSWF("Main.swf", "myAlternativeContent", "800", "600", "10.0.0", false, flashvars, params, attributes);
 
            function callJS()
            {
                window.alert("callJS");
                flashcontent.callAs();
            }
        </script>
    </head>
    <body>
        <div id="myAlternativeContent">
            <a href="http://www.adobe.com/go/getflashplayer">
                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
            </a>
        </div>
    </body>
</html>

Vous noterez que j’appelle le callback sur “flashcontent” qui est l’id du Flash. Et bien sous cette configuration callJS() est bien appelé, mais pas le callback. Mais étonnement tout s’exécute correctement si je supprime la première ligne du code html, le doctype. J’ai le même résultat sur Firefox 3.6 et Safari sur Mac. J’imagine que le fait d’effacer le doctype désactive le mode strict de rendu html.
La solution consiste, et c’est la bonne pratique à utiliser de toute manière, à utiliser document de cette manière :

document["flashcontent"].callAs();

Voilou, voilou

Zürich

Aral Balkan – Remember the magic

Arrivé comme à son habitude avec quelques minutes de retard, votre humble serviteur découvre une salle chantant en cœur le doux nom de « Microsoft » ( si..si..). Après que l’envie de partir en courant fut passée, je vais m’asseoir afin d’écouter Aral Balkan. Alors lui, c’est un sacré numéro… Il nous rappelle tout d’abord aux bons souvenirs des Amigas et autres Comodores avant de décrire l’(énorme) évolution de l’informatique et des outils mis à disposition de nous autres, et d’insister sur le fait que ceux-ci doivent élargir la créativité et que tout ceci doit apporter une plus value à l’expérience utilisateur, le nerf de la guerre…

Aral Balkan

Et comme il le dit lui-même : «  le design pattern c’est le mal !!! Ne restez pas dans les carcans, EXPERIMENTEZ !!! »

Petet Eist – Air and Sqlite

Une petite conférence sur l’utilisation de base de données embarquées dans une application Air. Démo pratique de son utilisation, code à l’appui et explication des différentes manières de procéder. Sinon je ne m’attarde pas trop sur le sujet mais conseille vivement d’aller matter les slides de la pres à tous ceux qui seraient intéressés par le sujet.

James Ward – Pixel Bender

On commence par une petite présentation du Pixel Bender Toolkit, ce nouvel outil apparu avec la player 10 et qui permet de créer et d’éditer des filtres ensuite exploitables dans le code AS. Les différences entre .pbj et .pbk , ainsi qu’un petit tour par Alchemy.
Il termine ensuite par la présentation de son incroyable librairie PbjAS, permettant d’utiliser les possibilités de pixel bender et notamment le calcul multi-thread directement au runtime…Rien que ça… Je ne vous donne pas les explications techniques de comment il a réussi ce tour de force, c’était pas très clair pour moi aussi^^

Paul Burnett

Platform Evangelist chez Adobe, Paul Burnett vient présenter les nouveautés de la CS4. Il commence par une petite explication de la vision des futurs WorkFlow( Flash CS4, Catalyst, Flash Builder)comme Adobe l’imagine.
On part ensuite sur les nouveautés de Photoshop CS4, streching d’images sans déformations, et de Flash CS4, bones et api 3d notamment… Bref si vous voulez voir l’entier de la conférence regardez la vidéo de la keynote de la dernière Max c’est exactement pareil…

Marcel Vogt / Tiago Dias – WiiFun/Bend My 3d

Et 2 conférences pour le prix d’une !!!… On commence par une présentation de la librairie de Thibault Imbert WiiFlash. Bon rien se spécial de ce côté là, il a présenter les divers devices prix en charge par la librairie, Wiimote, Balance, Nunchuk, etc… Et fait une petite demo d’un jeu qu’il a réalisé prenant en charge le Wheel. Sympa, mais faut dire que le server est pas super stable sur sa machine, il a bien dû s’y reprendre à quelques fois sur chaque demo… Mais faut avouer que c’est toujours sympa de voir les gens s’émerveiller devant le fait qu’il est possible d’utiliser la Wiimote dans Flash, d’ailleurs, je dois avouer que ça m’a donné envie de ressortir la mienne…( euh ma Wiimote biensûr… )

Marcel Vogt entrain de faire une démo de son jeu

En seconde partie Tiago Dias nous a rapidement présenté AS3dMod cette bibliothèque de class permettant d’appliquer des déformations sur des objets 3d avec la majorité des moteurs 3d actuels en Flash.

Rafael Beck - Augmented Reality

Bon là comme je m’y attendais grandement, une bonne partie de déjà-vu sur les démos de FlarToolkit qu’il a présentées. Par contre, je dois avouer que je ne connaissais pas du tout le framework FLARManager et je vais m’empresser de le tester car ça à l’air vraiment bien foutu.

Rafel Beck

Un petit détour ensuite sur Marilena une petite bibliothèque de détection de mouvements.
Sinon, il a aussi présenté d’autres projets qui sortent du cadre du Flash notamment un en provenance directe du MIT, et faut bien dire que ça en jette… Minority Report vous avez dit ?

Les slides de la présentation

Michael Plank - Simultaneous Web and Desktop Development

Super conférence avec un des gars de FDT qui nous donne en gros ses best practices pour le développement d’applications destinées autant pour le Web que pour le bureau. Ça commence par une bonne petite explication des différences à appréhender entre les 2 plateformes, notamment entre le playerglobal.swc et le airglobal.swc.
Il explique ensuite les différentes manières de procéder et notamment une qui retient mon attention, la compilation conditionnelle. Je vous en dis pas plus pour l’instant car je prépare un post la dessus pour l’expliquer plus en détail.
Et on finit sur un petite explication de la compilation groupée avec Ant, chose qui m’a bien servie.

Serge Jespers – RIA’s with Flash Catalyst

Petite de démo de Catalyst avec Serge Jespers. En fait, la création du widget qu’Adobe utilise en interne pour faire des recherches sur les employés. Faut dire que chaque fois que je vois une démonstration de Catalyst je vois ce même tuto, j’espère qu’on peut faire autre chose avec ☺. Vous pouvez donc revoir tout ça en allant regarder cette vidéo de Thibaut Imbert, c’était la même chose.

Ralph Hauwert – Pushing Pixels in Flash 10

Excellente conférence, sans doute une des meilleurs à mon goût de Ralph Hauwert ( unitZeroOne ) sur la manipulation de pixels et les nouveautés apportées par le player 10 dans ce domaine.
Particulièrement porté sur l’expérimentation également au niveau musicale qui est une de ses passions, il commence en présentant son émulateur de sons c64. Grand moment à la diffusion du thème de AirWulf…
On poursuit ensuite par une démo très impressionnante sur la façon de simuler de la 3d, sans librairie telle que pv3d ni même les nouvelles fonctionnalités de Flash 10. Tout ceci en utilisant des superpositions de textures et des déformations de bitmap… very cool.
Quelques best practices sur Alchemy ensuite et je ne saurais que trop vous conseiller son blog à ce sujet.
Et pour terminer une petite démo de PapervisionX, la prochaine mouture du moteur de rendu 3d pour le nouveau player dont Ralph fait parti de l’équipe de développement. Et que dire d’autre à part que je suis très impatient de pouvoir utiliser tout ça. L’adaptation du célèbre jeu Quake montre le formidable potentiel de cette version en terme de performances et de qualité des shaders… Si vous voulez en savoir plus, vous pouvez toujours allez lire cet article.

The Thinker’s box – Mario Klingemann

Et pour finir en beauté Quasimodo nous gratifie d’une « pres » totalement orientée expérimentation. Ça passe par la génération de dessin , les voxels, la géométrie, la couleurs…de l’art numérique.
Et on termine par une description par étapes de la réalisation de son Tweet de la Mona Lisa encodé en base64… Bref du grand art, et même si je n’ai pas tout compris, la passion avec laquelle il raconte tout ça est tout bonnement génial.

Bref, voilà un week-end fort sympathique et pour une fois qu’il y a quelque chose en Suisse, j’ai qu’une chose à dire : « Bravo à tous les organisateurs et à tous les speakers… See you next year !!! »

L’API est plutôt bien fichu avec des méthodes et propriétés dont la syntaxe respecte au mieux ce qui est décrit dans le wiki officiel pour l’API Rest de Facebook, ce qui permet de se calquer très facilement dessus.

Du coup, je me lance et je teste un peu toutes les méthodes qui m’intéressent. Tout fonctionne à merveille jusqu’au moment où je désire récupérer les photos d’un album précis. Explication:

Tout d’abord je récupère les albums avec la méthode “photos.getAlbum()”. Je place la réponse dans un Array et tout est ok, je reçois bien des objets [Album] et leur nombre est exacte. Du coup j’en choisi un au hasard et je récupère son id (”aid”) qui me renvoie quelque chose comme “20074892″. Je me dis cool, pas de problème, je vais employer cet id comme argument de la méthode “photos.get()” pour récupérer les infos de chaque photo de cette album. Et là rien, pas moyen de les récupérer. Je cherche partout dans mon code et après plusieurs heures, je me rend compte que chaque album me renvoie le même id, hum… bizarre.

Et comme je ne remets toujours pas en cause une API développée par Adobe, je continue à chercher l’erreur dans mon code. Quand je pense enfin à tester mon code avec la console du site developper de facebook, je me rends compte que le xml renvoyé donne un id différent pour l’album, du style: 3047494766431392632. Et la bingo, je comprend le problème, AS3Facebooklib type les id notamment ceux pour les albums en “int”. Le type “int” étant 32 bit son maximum est de 2147483648. Du coup le typage en “int” modifiait mon id qui n’était plus correct. Du coup je me dis, je vais le passer en Number et plop tjr pas… Voici une petite explication:

var aidInt:int = 3047494766431392632;
 
var aidNum:Number = 3047494766431392632;
 
var aidString:String = "3047494766431392632";
 
trace("aidInt : "+aidInt);               //renvoi 87040
 
trace("aidNum : "+aidNum);          //renvoi 3047494766431393000
 
trace("aidString : "+aidString);      //renvoi 3047494766431392632

Du coup, le seul moyen que j’ai trouvé est de modifier le code pour que l’id d’album soit typé en String partout dans le code, qui est en fin de compte le format dans lequel doit le recevoir Facebook, mais qui n’est pas pratique à l’utilisation dans le code.

Bref, 2 choses a retenir la dedans:

1. Ne pas se fier complètement à ce genre d’API, même si ça vient d’Adobe…
2. Ne devrait-on pas avoir un type capable de gérer un nombre avec autant de décimal, car j’imagine que le problème doit pouvoir se reproduire dans d’autres projets?

Voilou, si j’ai le temps, je posterai un petit tuto pour expliquer la façon de commencer une appli Air Facebook, notamment au niveau de l’authenification.

J’ai donc rapidement réalisé une anim pour voir un peu les éléments qui m’intéressait.

Voici une partie du code:

public function BasketPhysics()
{
	displayText(); 
 
	addEventListener(Event.ENTER_FRAME, run); 
 
       APEngine.init(1/4);
       APEngine.container = this;
       APEngine.addMasslessForce(new Vector(0,20));
       var defaultGroup:Group = new Group();
       defaultGroup.collideInternal = true;
 
       basketBall = new Sprite();
       basketBall.graphics.beginFill(0xB5430B);
       basketBall.graphics.drawCircle(0, 0, 30);
 
       myBall = new BasketBallon();
       trace("myBall : " + myBall);
 
       var bridgeParticleLeft:RectangleParticle = new RectangleParticle(0, 0, 80, 20);
 
       basketBallParticle = new WheelParticle(500, 380, 30, true, 1);
       basketBallParticle.setDisplay(myBall, -30, -30);
       defaultGroup.addParticle(basketBallParticle);
 
       var panierGA:RectangleParticle = new RectangleParticle(50, 130, 90, 20, 45, true);
       defaultGroup.addParticle(panierGA);
 
       var panierDR:RectangleParticle = new RectangleParticle(180, 130, 90, 20, -45, true);
       defaultGroup.addParticle(panierDR);
 
       var anchor1:CircleParticle = new CircleParticle(30, 400, 10, true, 1);
 
       defaultGroup.addParticle(anchor1);
 
       var anchor2:CircleParticle = new CircleParticle(240, 400, 10, true, 1);
       defaultGroup.addParticle(anchor2);
 
       var joint:CircleParticle = new CircleParticle(135, 400, 10, false, 1, 1.2);
       defaultGroup.addParticle(joint);
 
       var constarintLeft:SpringConstraint = new SpringConstraint(anchor1, joint,0.5, true,  true, true, 10, 0.8, true);
       constarintLeft.alwaysRepaint = true;
       constarintLeft.setStyle(1, 0xFF0000, 1, 0x000000, 1);
       constarintLeft.fixedEndLimit = 0.25; 
 
       var constarintRight:SpringConstraint = new SpringConstraint(anchor2, joint,0.5, true, true, true, 10, 0.8, true);
       constarintRight.alwaysRepaint = true;
       defaultGroup.addConstraint(constarintLeft);
       defaultGroup.addConstraint(constarintRight);
 
       var boundaryBox:Boundary = new Boundary();
       defaultGroup.addCollidable(boundaryBox);
 
       APEngine.addGroup(boundaryBox);
       APEngine.addGroup(defaultGroup);
 
       stage.addEventListener(MouseEvent.MOUSE_DOWN, ballDownHandler);
       stage.addEventListener(MouseEvent.MOUSE_UP, ballUpHandler);
 
       stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
}

private function shootBall():void
{
     removeChild(vectorForceDisplay);
     basketBallParticle.fixedPosition = false;
     basketBallParticle.velocity = (new Vector((beginPointX-mouseX)/5, (beginPointY-mouseY)/5));
}

Quelques points intéressants:

- On crée des groupes de particles (cercle, rectangle, roue) qui peuvent se collisioner entre elles ou entre groupes.

- La methode setDisplay qui permet de remplacer une particle par n’importe quel DisplayObject( voir le ballon en dessus, c’est un wheel à la base).

- Le springConstraint qui permet de faire une sorte de lien entre 2 particles.

Sinon un des gros point noir comme vous pouvez le juger sur l’anim, c’est la gestion des collisions surtout avec des particles trop rapides, j’imagine que le rafraichissement est pas assez rapide(c’est enterFrame qui tourne pour gérer tout ça), et que la particle ne touche à aucun moment l’autre. On pourrait sans doute augmenter le frame rate(à 30 ici), mais ce bien sûr au détriment des performance, et si on l’intègre dans un projet conséquent, comme composant d’un jeu par exemple, cela pourrait s’avérer problématique.

Je vais tester encore un peu tout ça, et je vous en redonne des news dans un prochain article.

Cependant, l’autre jour je suis tombé sur un os: comment créer un projet Air AS3 et publier le fichier .air certifié ?

Et bien en fait, c’est très simple:

1. Faites File > New > New FlexProject
2. Donner un nom à votre Projet, mais surtout dans “Application Type” choisissez “DesktopApplication”.
3. A la dernière étape du Wizard, renommez le “Main application file” en “.as”

Et voilà votre projet est prêt. Une fois que celui-ci sera terminé:

1. sélectionnez votre projet dans l’inspecteur
2. Faites File > Export > Release Build…
3. Vérifiez que c’est bien le projet désiré qui est sélectionné puis suivez les étapes du Wizard, c’est sensiblement le même principe que dans Flash IDE

Voilou, j’espère que ça pourra servir à quelqu’un…