Le Blog

  • : Le blog de Romain Dedenis
  • : Un blog relatif à la programmation web, vous trouverez ici des tutoriels sur différents langages tel que le flash, le php... Ainsi que différentes astuces et articles. Bonne visite :)
  • Contact

Contacts

viadeo-icone-5757-48.png linkedin.png

Liens Utiles

 

Documentation Flash as 3.0 :

Flash as 3.0

 

Documentation moteurs 3D Flashs :


Documentation Utilitaires 3D Flashs :

Et bien sûr, le fil RSS du Blog ! rss

2 février 2010 2 02 /02 /février /2010 14:32

Tout d'abord, Away 3D quesaco?

Away3D est un moteur graphique 3D développé pour Flash ActionScript, vous pouvez récupérer les sources à cette adresse : http://away3d.com/download/away3d_3_4_0.zip.


I/ Installation de Away3D.

Une fois que vous aurez téléchargé la dernière version de Away3D à l'adresse que je vous est donnée ci-dessus, il ne vous restera plus qu'à l'extraire.

Ensuite, nous allons lier Flash à la bibliothèque Away3D une bonne fois pour toute, nous permettant ainsi de pouvoir l'utiliser sans avoir à se soucier de son emplacement.
Pour se faire :

  • lancer Adobe Flash.
  • dans le menu Modifier aller dans Préférences, une fenêtre s'ouvre.
  • dans Catégories, selectionner ActionScript puis cliquer sur Paramètres d'ActionScript 3.0...inst_papervision1-copie-1.jpg
  • Enfin, dans chemin source, cliquez sur le plus et ajouter le chemin vers le répertoire de Away3D. Généralement, placer le dans le répertoire d'installation de Flash, de manière à ne pas corrompre le chemin à la bibliothèque 3D en la déplaçant par inadvertance.inst_papervision2.jpg


II/ Lier un fichier .fla et .as


Je vais un peu m'attarder pour ce premier tutoriel sur le linkage entre une classe et la scène pour que nous partions sur de bonnes bases dès le départ, ceci nous aideras à avoir la même architecture et évité ainsi d'éventuelles erreurs par la suite.

Dans un premier temps, créer un nouveau fichier "Fichier Flash (AS 3.0)" que vous nommerez away3d.fla par exemple ainsi qu'un fichier "Fichier ActionScript" que vous nommerez Main.as dans le même dossier que le fichier .fla (attention à bien respescter les minuscules/majuscules car Flash est sensible à la case).

Maintenant, passons à la liaison de nos fichiers fla et as :inst_papervision3.jpg
Dans le champs Classe, entrez Main correspondant à notre classe que nous souhaitons associer à notre document Flash (.fla). Ensuite, un message d'avertissement apparaît, n'en tenez pas compte, valider avec Ok.

III/ Réalisation de notre squelette Away3D.

Maintenant que nous partons sur les mêmes bases, nous pouvons passer à la réalisation de notre squelette Away3D que nous réutiliserons dans chacuns des prochains tutoriels.

Donc, dans un premier temps, je vais vous donner le squelette en entier, que vous devrez copier dans le fichier Main.as, je passerais aux explications par la suite. Je vous conseille tout de même avant de les lire, d'essayer de comprendre le fonctionnement du squelette par vous même, puis de conforter vos déductions avec les explications.

Code source du squelette :

package {
   // voir explication 1:
   import away3d.containers.Scene3D;
   import away3d.containers.View3D;
   import away3d.cameras.Camera3D;

   import flash.display.*;
  
   public class Main extends Sprite {
      //voir explication 2:
      private var scene:Scene3D;
      private var view:View3D;
      private var camera:Camera3D;
     
      public function Main():void {
         initialisationList();
      }
     
      private function initialisationList():void {
         initA3D();
         render();
      }
     
      private function initA3D():void {
         //voir explication 3:
         scene = new Scene3D();
         camera = new Camera3D({zoom:10, focus:50, x:0, y:0, z:-300});
         view = new View3D({scene:scene, camera:camera, x:stage.stageWidth/2, y:stage.stageHeight/2});
         addChild( view );
      }

      private function render():void{
         view.render();
      }
   }
}

 

Les sources de cet exemple


Explication 1:
Dans cette partie du code, nous nous concentrons sur l'importation des classes qui vont être utiles à l'exécution de notre programme. Ici, nous souhaitons utiliser de manière simple Away3D, il nous suffit donc d'importer les classes de bases qui contiennent les objets Scene3d, View3d et Camera3D.

Explication 2:
Ici, nous retrouvons les déclarations des variables qui vont être utiles à l'exécution du programme.


Explication 3:
Donc c'est dans cette fonction, que nous allons initialiser les variables.

  • Le view doit être ajouté à la scène via addChild() car c'est l'objet qui va s'occuper de rendre à l'écran le résultat de l'affichage de la scene.
  • La variable scene quand à elle va accueillir les objets 3d créer via Away3D. Nous y ajouterons nos objets 3d via scene.addChild().
  • Et enfin camera, qui correspond à la caméra 3d, qui se charge de définir la zone de l'espace 3d qu'il faut rendre à l'écran.


Voili voilou pour ce premier tutoriel, ne vous en faite pas, il n'affiche rien à l'écran et c'est normal puisque le code ci-dessus n'est qu'un squelette et ne contient donc aucun objet 3d!
J'espère avoir été le plus clair possible et n'hésitez pas à poser des questions.

Rendez-vous très prochainement pour le prochain tutoriel où cette fois-ci, nous créerons nos premiers objets en 3D sous Away3D.



Ce tutoriel vous a été utile? rssAbonnez-vous au fil RSS !



Cordialement, Romain Dedenis.
Partager cet article
Repost0

commentaires

C
<br /> Bonjour, je suis très intéressé par ce type de manip pour mon job. je ne connait pas encore bien flash et ne comprend pas la façon de faire, comment monter un fichier (les codes sur le tuto me<br /> donnent un page blanche ou erreur pakage !!!<br /> <br /> <br /> pouriez vous m'éclairer.<br />
Répondre
D
<br /> J'ai eu  un probleme ,j'ai suivi tt vous étapes mais il ne m'affiche rien<br />
Répondre
P
<br /> <br /> Bon ben ça n'a rien changé..<br /> <br /> <br /> Tant pis, écoutez je vais pas vous faire perdre plus de temps, c'est pas grave je vais débrouiller avec autrechose que Away3D, enfaite mon but était de faire du texte 3D avec du relief,<br /> chose apparement impossible sous papervision mais réalisable avec Away3D..<br /> <br /> <br /> Je vais bien trouver autrechose qui va pouvoir me faire cela, avec un peu d'espoir ^^<br /> <br /> <br /> Merci encore. Bonne continuation <br /> <br /> <br /> <br />
Répondre
R
<br /> <br /> Cela doit être possible avec PaperVision :<br /> <br /> <br /> un exemple : http://www.brighthub.com/hubfolio/matthew-casperson/media/p/50807.aspx<br /> <br /> <br />  <br /> <br /> <br /> Après, je n'ai jamais testé par contre...<br /> <br /> <br /> <br />
P
<br /> <br /> Je suis sous Flash CS3, je n'ai donc pas pu ouvrir le fla du zip mais j'ai pu quand même ouvrir la classe et l'affecter comme classe de document à un fla vierge en lui donnant les chemins de<br /> classes d'away3D.<br /> <br /> <br /> Ok je vais essayer de changer les valeurs de la caméra<br /> <br /> <br /> <br />
Répondre
P
<br /> <br /> Et bien merci beaucoup même si j'ai toujours les mêmes erreurs :S<br /> <br /> <br /> Enfaite pour plus de précision, il me dit que toutes les erreurs viennent du fichier AbstractRenderSession.as.<br /> <br /> <br /> Enfin bon merci d'avoir essayé, bonne continuation à vous <br /> <br /> <br /> <br />
Répondre
R
<br /> <br /> Humm, essaie de changer les valeurs de la caméra et du view3D.<br /> <br /> <br /> Sous quelle version de Flash es tu? (je suis sur CS4 et CS5).<br /> <br /> <br /> <br />