Blog Papervision3D

Blog Français sur Papervision3D

Les Tweeners

Posté par Ocelyn le 11 mars, 2008
Publié dans Tutoriaux

Un tutoriel un peut spécial aujourd’hui, afin de vous apprendre à utiliser les Tweeners pour réaliser des projets Papervision3D comme des menus ou des galeries en 3D ;)

Ps : Je suis à la recherche de sponsors afin de m’aider à financer l’hébergement pour pouvoir proposer des vidéos de meilleurs qualités.

Les pré-requis :

-Télécharger la librairie Caurina, si vous avez besoin d’aide, référez vous au tutoriel pour installer Papervision3D. (http://tweener.googlecode.com/svn/trunk/as3/)

-Avoir fait et compris l’ensemble des précédents tutoriels.

Get the Flash Player to see this player.

  1. package
  2. {
  3.  
  4. import flash.display.Sprite;
  5. import flash.events.Event;
  6. import org.papervision3d.cameras.FreeCamera3D;
  7. import org.papervision3d.render.BasicRenderEngine;
  8. import org.papervision3d.scenes.Scene3D;
  9. import org.papervision3d.view.Viewport3D;
  10. import org.papervision3d.objects.primitives.*;
  11. import org.papervision3d.materials.*;
  12. import org.papervision3d.events.*;
  13.  
  14. import caurina.transitions.Tweener;
  15.  
  16. public class Main extends Sprite
  17. {
  18.  
  19. private var viewport:Viewport3D;
  20. private var scene:Scene3D;
  21. private var camera:FreeCamera3D;
  22. private var renderer:BasicRenderEngine;
  23.  
  24. private var material:BitmapFileMaterial;
  25. private var materialHautGauche:BitmapFileMaterial;
  26. private var materialBasRight:BitmapFileMaterial;
  27. private var materialBasGauche:BitmapFileMaterial;
  28.  
  29. private var plane:Plane;
  30. private var planeHautGauche:Plane;
  31. private var planeBasRight:Plane;
  32. private var planeHautRight:Plane;
  33.  
  34. public function Main()
  35. {
  36. init();
  37. }
  38.  
  39. private function init():void
  40. {
  41. initPapervision();
  42. initMaterials();
  43. initObjects();
  44. initListeners();
  45. }
  46.  
  47. private function initPapervision():void
  48. {
  49. viewport = new Viewport3D( 700, 600, false, true );
  50. addChild( viewport );
  51.  
  52. scene = new Scene3D();
  53.  
  54. camera = new FreeCamera3D();
  55.  
  56. renderer = new BasicRenderEngine();
  57.  
  58. }
  59.  
  60. private function initMaterials():void
  61. {
  62. material = new BitmapFileMaterial("index.JPG");
  63. material.doubleSided = true;
  64. material.interactive = true;
  65.  
  66. materialHautGauche = new BitmapFileMaterial("blog.JPG");
  67. materialHautGauche.doubleSided = true;
  68. materialHautGauche.interactive = true;
  69.  
  70. materialBasRight = new BitmapFileMaterial("flexstore.jpg");
  71. materialBasRight.doubleSided = true;
  72. materialBasRight.interactive = true;
  73.  
  74. materialBasGauche = new BitmapFileMaterial("forum.jpg");
  75. materialBasGauche.doubleSided = true;
  76. materialBasGauche.interactive = true;
  77.  
  78. }
  79.  
  80. private function initObjects():void
  81. {
  82. camera.zoom = 4;
  83. camera.x = 330;
  84. camera.y = 280;
  85.  
  86. plane = new Plane( material, 700, 600, 8, 8 );
  87. planeHautGauche = new Plane( materialHautGauche, 700, 600 );
  88. planeBasRight = new Plane( materialBasRight, 700, 600 );
  89. planeHautRight = new Plane( materialBasGauche, 700, 600 );
  90.  
  91. scene.addChild( plane );
  92. scene.addChild( planeHautGauche );
  93. scene.addChild( planeBasRight );
  94. scene.addChild( planeHautRight );
  95.  
  96. plane.y = 600;
  97. planeBasRight.x = 700;
  98. planeBasRight.y = 600;
  99. planeHautRight.x = 700;
  100. }
  101.  
  102. private function initListeners():void
  103. {
  104. plane.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, objectPress );
  105.  
  106. addEventListener( Event.ENTER_FRAME, onEnterFrame );
  107. }
  108.  
  109. private function objectPress( e:InteractiveScene3DEvent ):void
  110. {
  111. Tweener.addTween(camera, {x:0, y:600, z:-330, rotationX:0, rotationY:0, rotationZ:0, time:5, transition:"easeinoutexpo"});
  112. Tweener.addTween(planeBasRight, {z:-332, rotationX:-80, rotationY:0, rotationZ:0, time:2, transition:"easeinoutexpo"});
  113. Tweener.addTween(planeHautRight, {z:-332, rotationY:-80, rotationY:0, rotationZ:0, time:2, transition:"easeinoutexpo"});
  114. Tweener.addTween(planeHautGauche, {z:-332, rotationZ:-80, rotationY:0, rotationZ:0, time:2, transition:"easeinoutexpo"});
  115. }
  116.  
  117. private function onEnterFrame( e:Event ):void
  118. {
  119. renderer.renderScene( scene, camera, viewport );
  120.  
  121. }
  122. }
  123. }

Et comme promis les différents type de transitions.

16 commentaires dans ce post, pour l'instant.

Suivre ce post par RSS ou poser un trackback
mygif
27. Man dit,
11 mars, 2008 à 22:20

Mr Admin… vous êtes génial…

mygif
28. Hamsterprod dit,
12 mars, 2008 à 16:15

Merci beaucoup pour ces tutoriaux qui m’aident à appréhender Papervision. Bravo

mygif
30. krys64 dit,
16 mars, 2008 à 10:47

Super ton blog, je sens queje vais m’y mettre sur papervision.
Sinon pour tes vidéos, tu peux les héberger sur http://www.blip.tv/ , c’est un service que j’utilise pour mon site dont l’avantage est de ne pas réencoder tes flv, et de mettre un url direct des vidéos pour les intégrer dans un player perso, et en plus c’est gratuit avec un super outil de stats.

mygif
31. Ocelyn dit,
16 mars, 2008 à 11:12

Merci pour vos commentaires, pour krys64 (j’adore ton site ;) ) je préfère hébergé les vidéos sur mon ftp mais merci pour l’idée.

mygif
44. totolabellevie dit,
3 avril, 2008 à 21:32

Ocelyn,
Pourquoi pas glisser un petit bouton “PAYPAL DONATION” histoire de pouvoir laisser à tes lecteur la possibilité de laisser une petit quelque chose pour un serveur dédié ?

mygif
45. Ocelyn dit,
4 avril, 2008 à 14:30

J’avais pensé à cette possibilité mais j’avoue ne pas avoir trouvé sur le site paypal comment faire cette manip’ ^^

Pour rassurer les gens qui suivent ce blog je viens de finir les cours (je suis en stage) donc je vais enfin avoir du temps libre pour reprendre mes tutos (ça me manquais ;) )

mygif
50. gally dit,
14 avril, 2008 à 11:14

top cool les tutos thx ;)

mygif
58. aliong dit,
6 mai, 2008 à 9:55

super tuto sur papervision en fr !
Merci beaucoup ;)

mygif
62. max dit,
20 mai, 2008 à 16:13

Mille mercis pour ces tutos très clairs et fort utiles. J’ai bien hâte de voir la suite :)

mygif
64. Vichnoo dit,
22 mai, 2008 à 23:27

Merci à toi pour ce petit blog bien instructif.

mygif
67. Tom dit,
28 mai, 2008 à 12:06

Heu.. il manque juste un truc: un exemple sur cette page!

mygif
103. Bamboolix dit,
13 juillet, 2008 à 22:06

Salut a tous !

Je suis de retour :) pour le meilleure et surtout le pire :-D. Bon ben voilà j’ai réussi à faire kekchose qui tiens la route :

http://david.namboka.free.fr/Main.swf

Ma nouvelle question à cent dollars est :”peut-on superposer des contrôles ou des composants flex traditionnels sur cette jolie scène 3D ? Un peu comme il était possible jadis, il y’a de cela moult temps, avec feu vrml et le lecteur bitmanagment ?

Wouala wouala ! Si je trouve quelquechose comme d’hab je transmet !! Opensource power !

mygif
118. Mence dit,
22 juillet, 2008 à 3:01

Merci pour ce tuto qui ma permis de comprendre les bases de pvs3d.
Voici ce que j’ai reussi a faire grace a ton aide precieuse apres quelques jours de prises de tete .

http://brule.clement.free.fr/2/gallerie_3d.swf

J’ai bien des questions qui restent sans reponses:” comment creer une fonction pour automatiser la taille des planes les unes par raport aux autres pour ne pas configurer toute les positions manuellement et pouvoir afficher beaucoup plus d’imagessans passer par des milliers de lignes de code?” ou encore
“comment integrer un xml pour charger les photos plus facilement ?” ou bien ” peut on modifier la valeur alpha des planes en fonctions de leur position Z ?” ……
En esperant que quelqu’un pourras me repondre .
Merci d’avance pour les nouveaux tuto que nous attendons avec impatience.

mygif
121. Bamboolix dit,
5 août, 2008 à 20:40

whaou l’ami c’est méga top cool ton dock à la makintoche ! Comment tu as fais ça ? J’aimerais bien voir les sources derrière ces effets zépatent !! Jveut bien partager les miennes mais c’est les mêmes que ceux de ce blog :s

mygif
138. bone dit,
26 août, 2008 à 14:03

Salut,
Merci pour ces tutos qui font que l’on se sent moins seul!

Quelqu’un sais-il comment tweener la propriété alpha d’un plan?

Merci pour cette précieuse aide!
a+

mygif
193. tweeners dit,
26 novembre, 2008 à 0:18

Super les tutos je début ça m’aide vraiment il ne te reste plus qu’a trouver un éditeur et faire le premier livre sur papervision 3D biensur je ne vais pas oublier de faire une petite donation
Merci

Laisser un commentaire

Currently browsing Les Tweeners

 Pseudo(*requis)

 Email (*privée)

 Site internet (*optionnel)