Vinch

Comme vous l’avez sans doute lu un peu partout, Flash Player 10 vient de sortir (le 15 mai pour être exact) et ça s’annonce génial pour les développeurs que nous sommes. Un collègue a fait un très bon résumé des nouvelles fonctionnalités de Flash Player 10 (nom de code « Astro ») donc inutile que je répète tout ici.

Je me suis personnellement penché sur la 3D gérée de façon native dans cette nouvelle mouture de Flash Player. Cela nous permettra, à terme, de nous passer de Papervision3D (ou équivalents) pour faire de la 3D simple en Flash.

Le problème avec Flash Player 10, c’est qu’au moment où j’écris ces lignes, aucun éditeur ne le prend encore en charge. Il faut donc tout compiler à la main pour arriver à générer nos SWF ce qui peut sembler un peu rebutant à première vue mais pas si compliqué que ça en fait (si j’y suis arrivé, vous y arriverez).

Avant tout chose, vous devez désinstaller Flash Player 9. J’ai utilisé Flash Player Uninstaller pour cela. Ensuite, téléchargez et installez Flash Player 10.

Une fois Flash Player 10 installé, suivez ce tutorial qui va vous expliquer comment on peut compiler en lignes de commande. Ne faites pas attention à tout ce qui concerne Flex Builder, vous pouvez travailler avec l’éditeur de texte que vous souhaitez (moi, c’est TextMate), seules les sections « First Things First » et « Command-line Compiler » nous intéressent. Tout ce que vous devez faire en gros, c’est télécharger la nightly build la plus récente de Adobe Flex SDK et de modifier le fichier de configuration comme indiqué.

La dernière chose à faire est compiler vos fichiers ActionScript en utilisant la commande mxmlc (sous Windows, utilisez mxmlc.exe) qui se trouve dans le répertoire bin du SDK.

Exemple :

./mxmlc ../../astro/ThreeD.as

Cela va générer un fichier ThreeD.swf au même niveau que le fichier ActionScript. Ce fichier SWF doit impérativement être ouvert avec un navigateur Web. Cela ne va pas fonctionner en standalone !

Intéressons nous maintenant à réaliser un petit exemple en 3D avec les possibilités de Flash Player 10. Allons d’abord jeter un oeil à ThreeD.as. Ce fichier va générer 200 carrés à des profondeurs différentes et avec des couleurs et des positions en x et en y aléatoires. Lors d’un click sur un carré, celui-ci va se retourner sur lui-même et on va s’en rapprocher.

Voilà la résultat : 3D experiment with Flash Player 10.

Notez que l’inclusion du SWFObject doit se faire de cette manière :

var so = new SWFObject("ThreeD.swf", "threed", "600", "400", "10");

Dans cet exemple, les deux grandes nouveautés qui rendent notre vie plus belle sont les suivantes :

* Pouvoir déterminer z (profondeur) en plus de x et y sur un Sprite ou MovieClip.
* Pouvoir faire des rotations sur l’axe en x, y et z (via rotationX, rotationY et rotationZ) alors qu’autrefois, seul rotation existait (qui est équivalent à rotationZ).

En quelques lignes de code, nous avons donc réalisé un petit truc sympa en 3D. Il aurait certainement fallu quatre à cinq fois plus de temps et de lignes de code pour faire ça avec Papervision3D. Vive Flash Player 10 !

Cet article a été inspiré par les deux screencasts suivants de Lee Brimelow (je n’ai rien inventé) :

* Flash Player 10 Beta: Getting Started
* Flash Player 10 Beta: 3D

« Il est bien connu que Firebug ralentit Gmail, sauf s’il est configuré correctement. »

Voilà le message que vous avez sans doute tous obtenus en ouvrant Gmail dernièrement. Je trouve que le « Il est bien connu » est un peu exagéré (c’est pas vraiment une vérité absolue depuis la nuit des temps non plus) mais c’est vrai : Firebug ralentit les sites où il y a beaucoup de JavaScript et de XMLHttpRequest (AJAX pour les intimes).

On est bien d’accord, Firebug est un outil fantastique dont n’importe quel développeur Web de cette vieille terre ne pourrait plus se passer. D’ailleurs, à la question : « Comment on faisait du debug JavaScript avant Firebug ? », la première réponse qui me vient généralement à l’esprit est : « Avant, on ne faisait pas de JavaScript ! » (de la même manière qu’on n’envoyait pas de SMS avant l’apparition des téléphones portables).

Mais voilà, surfer avec Firefox et Firebug, c’est un peu comme faire les 20 Km de Bruxelles avec un sac à dos rempli de cailloux ! Une solution loin d’être idiote est de faire deux profils : un pour le développement et un pour le surf.

Mais venons-en au vrai sujet de ce billet : détecter la présence de Firebug à partir du browser. Cela pourrait être utile pour prévenir vos visiteurs que s’ils désactivent Firebug, leur expérience utilisateur sera améliorée dans votre application.

Pour cela, la première chose à faire est de vérifier la présence de l’objet console. Mais comme Firebug n’a pas l’exclusivité sur l’objet console (Companion.JS l’implémente sur IE), ce n’est malheureusement pas suffisant ! Heureusement, Firebug ajoute la propriété firebug à l’objet console et c’est ce qui permet de détecter que notre ami Firebug est là :

if (console && "firebug" in console) {
	// afficher un message de mise en garde (ou de félicitations)
}

ou encore :

if (console && console.firebug) {
	// afficher un message de mise en garde (ou de félicitations)
}

Ce n’est pas plus compliqué que ça mais je suis certain que votre vie a changé depuis le moment où vous avez lu ce billet. Bon amusement !

Voilà un autre t-shirt ! De couleur brune, il révèle un visuel très sympathique pour le geek que je suis : de petits carrés forment une tête de mort surplombant l’intitulé « Dead Pixels » écrit avec une police old-school (style jeux vidéo des années 80).

Ce t-shirt m’a été offert par la boutique de t-shirts SuperNature qui dépend de TM SPRL, une boîte de graphisme et de publicité. La boutique est remplie de t-shirts super originaux, allez donc y faire un tour !

Merci à Nathalie et Marc pour leur collaboration à mon buzz à la con ! (mais qui commence à fonctionner)

N’hésitez pas à m’envoyer vous aussi vos t-shirts ! Vous trouverez toutes les informations utiles sur ce billet.