PREMIERS PAS AVEC PAPERVISION3D

Helioflash
PageRank

• Introduction

  Papervision3D, ou PV3D, est un moteur 3D open-source pour Flash. Il permet de simuler un environnement en 3 dimensions à partir d'une animation Flash et de tout ce qu'elle comporte (clips, boutons, photos, vidéos, etc). Il existe deux versions, l'une en ActionScript 3.0 et l'autre en ActionScript 2.0, mais il est fortement recommandé d'utiliser la version AS3 qui est plus stable et plus avancée. L'utilisation de PV3D dans vos animations les rend gourmandes en ressources et sachez que tous vos visiteurs n'ont pas la chance d'avoir un ordinateur un peu puissant. Aussi, si d'aventure vous profitez de l'occasion pour apprendre l'ActionScript 3.0, lisez attentivement le premier point de ce tutoriel.

  1. De l'ActionScript 2.0 à l'ActionScript 3.0

  Supposons que vous partiez de très loin...

  Rassurez-vous car l'ActionScript 3.0 n'est pas une créature méchante. Son truc à elle, c'est de posséder une manie très particulière qui va altérer vos humeurs durant votre adaptation. A savoir que si vous oubliez de lui fournir le plan d'une seule de ses pattes, elle vous pette dessus et génère une erreur. Autrement dit, n'oubliez pas de lui fournir l'ensemble des plans dont elle a besoin pour se constituer. Autrement dit, il est nécessaire de définir au début de chaque programme l'ensemble des classes dont il a besoin.

  "Car.. quoi.. qu'est-ce que c'est les classes ?". Imaginez que vous souhaitiez construire une maison, de préférence dans le Sud de la France. Tout ce qui la constituerait serait créé à partir de plans tels qu'un plan de parpaing, un plan de prise électrique ou encore un plan de chaudière. En ActionScript 3, les plans seraient des classes, et les objets correspondant des "clips animés", des champs de texte, ou encore des boutons. Il existe une classe par type d'objet et chacune d'elles contient au moins une fonction lui permettant de générer l'objet (appelons-la la fonction d'initialisation). Ainsi, pour créer un "clip animé", on appelle la fonction d'initialisation MovieClip() définie par la classe MovieClip. De même pour créer un champ de texte, on appelle la fonction TextField() de la classe TextField (remarquez que les fonctions d'initialisation portent le même nom que leur classe).

  Voici donc comment se définissent une classe et sa fonction d'initialisation :

  public class Nom_de_la_classe

  {

  public function Nom_de_la_classe():void

  {

  // Fonction d'initialisation

  }

  }

  Mais il nous faut pousser un peu plus la chose... Rendez-vous compte en vous faisant une idée de ce que représente en ActionScript 3.0 n'importe qu'elle animation faite dans votre passé : Ce sont des objets de la classe Sprite. Que dis-je ! Toute animation Flash est un objet de la classe Sprite. Nous avons donc la possibilité de créer une animation entière à partir d'un simple programme en ActionScript 3.0 et la classe Sprite. Bien sûr, il est nécessaire d'apporter des modifications à cette classe afin qu'elle génère votre animation. On dit alors que la classe Sprite est étendue et elle devient la classe du document.

  Voici donc comment se définit la classe d'un document, ainsi que sa fonction d'initialisation :

  package

  {

  // D'abord, importez toutes les classes utiles à votre animation

  // Ici il s'agit simplement de la classe Sprite se trouvant dans le dossier "flash > display"

  // (Ces dossiers sont sur votre ordinateur à partir du moment où vous avez Flash)

  import flash.display.Sprite;

  // Puis, définissez la classe du document (les plans de votre animation)

  // Ici il s'agit de la classe nommée indifféremment "Classe_du_document"

  // Classe créée sur la base de la classe Sprite, d'où la traduction littérale :

  // je définie la classe "Classe_du_document" qui étend la classe Sprite

  public class Classe_du_document extends Sprite

  {

  // Enfin, définissez la fonction d'initialisation

  // Cette fonction correspond aux actions exécutées au démarrage de l'animation

  // Elle doit porter le même nom que la classe du document, soit "Classe_du_document"

  public function Classe_du_document():void

  {

  // Vos actions initiales ici...

  }

  }

  }

  2. Les principales classes Papervision3D

  Papervision3D n'est autre qu'un ensemble de classes, des plans utiles à Flash pour représenter un environnement en 3 dimensions. Comme pour les classes Sprite et MovieClip de Flash, il suffit d'importer les classes Papervision3D dans vos animations (dans lesdites classe du document) afin de les utiliser.

  Ainsi, vos animations nécessitent l'importation d'un certain nombre de classes Papervision3D :

  package

  {

  import flash.display.Sprite;

  import org.papervision3d.scenes.Scene3D;

  import org.papervision3d.cameras.Camera3D;

  import org.papervision3d.objects.Plane;

  import org.papervision3d.materials.ColorMaterial;

  ...

  Chacune d'elles crée un objet utile à un environnement 3D.

  Et comme un réalisateur qui définit les éléments essentiels de son film...
     - la scène
     - le caméraman
     - les acteurs
     - les costumes

  ...un environnement Papervision3D nécessite au moins une scène, un caméraman, un acteur et des costumes :
     - la scène : les classes de type scenes
     - le caméraman : les classes de type cameras
     - les acteurs : les classes de type objects
     - les costumes : les classes de type materials

  Chacun de ces types contient une série de classes pour générer des objets :
     - la scène : les classes de type scenes : Scene3D, MovieScene3D, InteractiveScene3D
     - le caméraman : les classes de type cameras : Camera3D, FreeCamera3D
     - les acteurs : les classes de type objects : Plane, Cube, Sphere
     - les costumes : les classes de type materials : BitmapMaterial, MovieMaterial, ColorMaterial

  La scène

  Une animation Flash classique peut être classifiée comme étant une animation en 2D, c'est-à-dire comme ayant des objets animés par rapport à deux axes, X et Y. L'axe X représentant l'horizontal et l'axe Y la verticale. Ainsi chacune de vos interpolations de mouvement font jouer les coordonnées de vos clips sur ces deux axes. Une animation 3D comporte aussi les axes X et Y, auxquels on ajoute un troisième axe Z pour représenter la 3ème dimension, ou la profondeur. C'est ainsi que l'on obtient un effet de perspective et de 3D :

  

  Une scène Papervision3D agît comme un repère à trois dimensions. C'est un objet destiné à contenir d'autres objets (les acteurs) afin de les positionner sur trois axes X, Y, et Z. Mais pour fonctionner une scène a besoin d'un conteneur, un objet qui va lui permettre d'accueillir des acteurs. Cet objet doit être de la classe Sprite.

  Voici donc comment se définissent une scène Papervision3D et son conteneur Sprite :

  // Création d'un conteneur Sprite

  var container :Sprite;

  container = new Sprite();

   

  // Ajout du conteneur sur la scène de l'animation Flash

  addChild( container );

  container.x = stage.stageWidth / 2;

  container.y = stage.stageHeight / 2;

   

  // Création d'une scène Scene3D à partir du conteneur

  var scene :Scene3D;

  scene = new Scene3D( container );

  Le caméraman

  Pour se représenter une scène, Papervision3D ou pas, vous devez définir un observateur, l'endroit où il se situe et dans quelle direction il regarde. Ce sont les objets de type cameras qui remplissent cette fonction. Il en existe deux différents, Camera3D et FreeCamera3D :

  

  L'objet FreeCamera3D se définit avec 6 propriétés principales : les coordonnées x, y et z de la caméra, ainsi que les rotations sur les axes X, Y et Z. Le paramétrage d'un tel objet est assez complexe lorsque l'on débute, c'est pourquoi nous utiliserons plutot l'objet Camera3D.

  L'objet Camera3D se définit aussi avec 6 propriétés principales : les coordonnées x, y et z des deux objets goto et target. Ce sont des objets de la classe DisplayObject3D qui n'ont pour fonction que de représenter la position d'un point dans la scène 3D. En l'occurence la position de la caméra et celle de sa cible. Les rotations de la caméra sont calculées automatiquement.

  Voici donc comment se définit un objet Camera3D :

  // Création d'un objet Camera3D

  var camera :Camera3D;

  camera = new Camera3D();

   

  // Définition des objets goto et target

  var gotoObject :DisplayObject3D = new DisplayObject3D();

  gotoObject.x = 0;

  gotoObject.y = 0;

  gotoObject.z = 0;

  var targetObject :DisplayObject3D = new DisplayObject3D();

  targetObject.x = 200;

  targetObject.y = 200;

  targetObject.z = 200;

   

  // Paramétrage de l'objet Camera3D

  camera.extra =

  {

  goPosition: gotoObject,

  goTarget: targetObject

  };

  Les acteurs

  Voici venus les objets de type objects : Plane, Cube et Sphere. Ce sont les acteurs d'une scène Papervision3D. Comme leur nom l'indique, ils vous permettent de créer des surfaces, des cubes ou encore des sphères.

  

  Pour les personnaliser et leur donner des textures, on les utilise conjointement avec des objets de type materials, les costumes. Par exemple, pour donner de la couleur à une surface on utilise l'objet ColorMaterial. Ou encore pour afficher le contenu d'un clip MovieClip on utilise l'objet MovieMaterial.

  Ainsi, une surface Plane de couleur 0x0000FF et de dimensions 480x320px se définit comme suit :

  // Création d'un objet de texture ColorMaterial

  var color :ColorMaterial;

  color = new ColorMaterial( 0x0000FF );

   

  // Création de l'objet Plane

  var plane :Plane = new Plane( color, 480, 320 );

   

  // Ajout de l'objet Plane dans une scène Papervision3D

  scene.addChild( plane, "myPlane" );

  3. Fonctionnement d'un environnement Papervision3D

  Voyons comment mettre en relation les classes Papervision3D vues précédemment :
     - une scène : Scene3D
     - un caméraman : Camera3D
     - un acteur : Plane
     - un costume : ColorMaterial

  ...

  [ Tutoriel en constante rédaction/modification, au gré de ma compréhension ... ]

• Note : Veuillez m'excuser pour les abus de langages et autres inexactitudes recelant de ce didacticiel, ce dernier ayant nécessité un temps précieux. Comme pour tout sujet traité sur le Web, il ne tient qu'à vous de faire le tri de vos sources.

  Dernière modification : 04/08/2008

  Jean-Michel Gigault

Achat jetons poker sur Pokchips.com