Hello, I’m Vinch

And this is my website.

Premier test de la 3D dans Flash Player 10

05/19/08

This post is more than 9 years old. It might not reflect my current skills and convictions.

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

4 comments

Leave a comment