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.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Live
  • Technorati
  • Wikio FR
  • Print this article!

21 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

mygif
204. FreakDev dit,
8 janvier, 2009 à 22:36

merci pour ces tutos, ça met bien le pied à l’étrié :)

d’ailleurs j’ai fait ça :
http://freakblog.free.fr/ipv/Displayer.swf

mygif
227. S4e dit,
7 février, 2009 à 15:24

Tuto très intéressant, cependant je n’arrive pas appliquer l’effet de Zoom sur plusieurs photo a la fois. (Un coup de pouce peut etre? =)

Mence >> ça serait super sympa si tu partageais un bout de ton code pour me sortir de cette impasse :). (ton rendu est magique ^^)

Encore félicitation Ocelyn pour ton boulot, j’en parle autour de moi.

mygif
242. Lupus dit,
19 avril, 2009 à 13:42

Merci beaucoup pour ces tutos, c’est de l’excellent boulot !

mygif
244. xoom dit,
13 mai, 2009 à 11:16

BRAVO et encore BRAVO
merci Ocelyn pour ces tutos de grandes qualités, je galérais bien avec papervision, ça m’a redonner l’envie de m’y coller!!!!!!!!!!!!
vraiment bien fait et tres clair.
xoom

mygif
246. mence dit,
18 mai, 2009 à 2:10

voila mon bout de code pour l’effet foto flow
Si quelqu’un sais comment le reduir et gerer les fotos via un XML je suis preneur.

J’ai laissé tout les test pour ceux qui veulent s’amuser avec avec les tweeners.

package

{
//Importation des librairies nécessaires à l’application
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*;
import org.papervision3d.events.*;

import caurina.transitions.Tweener;

public class Main1 extends Sprite {

//Définition des variables nécessaires
private var container :Sprite;
private var viewport:Viewport3D;
private var scene:Scene3D;
private var camera:Camera3D;
private var renderer:BasicRenderEngine;

private var plane_HG:Plane;
private var plane_HD:Plane;
private var plane_BG:Plane;
private var plane_BD:Plane;

private var material_HG:BitmapFileMaterial;
private var material_HD:BitmapFileMaterial;
private var material_BG:BitmapFileMaterial;
private var material_BD:BitmapFileMaterial;

public function Main1(){

//Fonctions nécessaire à l’initialisation du projet
init();
}

private function init():void{
//Les fonctions nécessaires à l’initialisation de Papervision
initPapervision();
initMaterials();
initObjects();
initListeners();

}
private function initPapervision():void{

//Création du viewport
viewport = new Viewport3D(1024,800,false,true);

//Ajout du viewport à la scène si vous l’oubliez l’application marchera mais n’apparaitra pas
addChild( viewport );

//Création de la scene
scene = new Scene3D();

//Création de la caméra
camera = new Camera3D();

//Création du moteur de rendu
renderer = new BasicRenderEngine();

}

private function initMaterials():void{
/* material_HG = new BitmapFileMaterial(”1.jpg”);
material_HG.doubleSided = true;
material_HG.interactive = true;

material_HD = new BitmapFileMaterial(”2.jpg”);
material_HD.doubleSided = true;
material_HD.interactive = true;

material_BG = new BitmapFileMaterial(”3.jpg”);
material_BG.doubleSided = true;
material_BG.interactive = true;

material_BD = new BitmapFileMaterial(”4.jpg”);
material_BD.doubleSided = true;
material_BD.interactive = true;

}*////////////////////////////
/* var NbrAffiche = 4; //Nbr de photos à afficher
var NbrPhoto = 10; //Nbr de photos ds le dossier
mon_array = new Array(); //Tableau gardant les photos en mémoire pour les vérifs
function chargeImage(index) {
var mc = _root.createEmptyMovieClip(”dia”+index, index);
var valide = “”;
while (valide == “”) {
var n = 1;
valide = “ok”;
var ordre = Math.ceil(Math.random()*NbrPhoto);
while (n != NbrAffiche+1) {
if (ordre == mon_array[n]) {
valide = “”;
}
n++;
}
}
mon_array[index] = ordre;
var img = “images/”+ordre+”.jpg”;
mc.loadMovie(img);
mc._x = (index-1)*250;
mc._y = 10;
}
// Fin de la fonction, on va afficher les photos
n = 1;
while (n != NbrAffiche+1) {
chargeImage(n);
n++;
}/

//////////////////////////////////////

/* public function Deco(_Name:String)
{
var path:String = “Decos/vignettes/” + _Name + “.png”;
var loader:Loader = new Loader();
name = _Name;
loader.load(new URLRequest(path));// on y place la deco correspondante
loader.x = - (loader.width / 2);
loader.y = - (loader.height / 2);
addChildAt(loader,3);
loader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,showLoadResult);

addEventListener ( Event.ADDED_TO_STAGE, activation );

} */

//////////////////////////////////
private function initObjects():void{

camera.zoom = 20;
camera.x = 300;
camera.y = 323;

plane_HG = new Plane(material_HG,700,700,8,8);
plane_HD = new Plane(material_HD,700,700);
plane_BG = new Plane(material_BG,700,700);
plane_BD = new Plane(material_BD,700,700);

scene.addChild( plane_HG );
scene.addChild( plane_HD );
scene.addChild( plane_BG );
scene.addChild( plane_BD );

plane_HG.x = -700;
plane_HG.y = 500;
plane_HG.z = 300;

plane_HD.x = 0;
plane_HD.y = 500;
plane_HD.z = 300;

plane_BD.x = 700;
plane_BD.y = 500;
plane_BD.z = 300;

plane_BG.x = 1400;
plane_BG.y = 500;
plane_BG.z = 300;

} private function initListeners():void{

plane_HG.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, objectPress );
plane_HD.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, objectPress1 );
plane_BD.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, objectPress2 );
plane_BG.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, objectPress3 );

addEventListener( Event.ENTER_FRAME, onEnterFrame );

}
private function objectPress( e:InteractiveScene3DEvent ):void{

//Tweener.addTween(camera, {x:600, y:600, z:-380, rotationX:0, rotationY:0, rotationZ:0, time:3, transition:”linear”});
Tweener.addTween(plane_HG, {z:-500, x:0, rotationX:0, rotationY:0, rotationZ:0, time:1, transition:”easeOutExpo”});
Tweener.addTween(plane_BD, {z:200, x:600, rotationX:0, rotationY:0, rotationZ:0, time:2, transition:”easeOutExpo”});
Tweener.addTween(plane_HD, {z:100, x:400, alpha:5, rotationY:0, rotationY:0, rotationZ:0, time:1.5, transition:”easeOutExpo”});
Tweener.addTween(plane_BG, {z:350, x:800, alpha:30, rotationZ:0, rotationY:0, rotationZ:0, time:2.5, transition:”easeOutExpo”});

}
private function objectPress1( e:InteractiveScene3DEvent ):void{

//Tweener.addTween(camera, {x:800, y:600, z:-380, rotationX:0, rotationY:0, rotationZ:0, time:3, transition:”linear”});
Tweener.addTween(plane_HG, {z:100, x:-1300 , rotationX:0, rotationY:0, rotationZ:0, time:2.5, transition:”easeOutExpo”});
Tweener.addTween(plane_BD, {z:100, x:400 , rotationX:0, rotationY:0, rotationZ:0, time:1.5, transition:”easeOutExpo”});
Tweener.addTween(plane_HD, {z:-500,x:0 ,rotationY:0, rotationY:0, rotationZ:0, time:1, transition:”easeOutExpo”});
Tweener.addTween(plane_BG, {z:200, x:600 ,rotationZ:0, rotationY:0, rotationZ:0, time:2, transition:”easeOutExpo”});

}

private function objectPress2( e:InteractiveScene3DEvent ):void{

//Tweener.addTween(camera, {x:1000, y:600, z:-380, rotationX:0, rotationY:0, rotationZ:0, time:3, transition:”linear”});
Tweener.addTween(plane_HG, {z:350, x:-2000 , rotationX:0, rotationY:0, rotationZ:0, alpha:10, time:2, transition:”easeOutExpo”});
Tweener.addTween(plane_BD, {z:-500,x:0 , rotationX:0, rotationY:0, rotationZ:0, time:1, transition:”easeOutExpo”});
Tweener.addTween(plane_HD, {z:100, x:-1300 , rotationY:0, rotationY:0, rotationZ:0, time:2.5, transition:”easeOutExpo”});
Tweener.addTween(plane_BG, {z:100, x:400 ,rotationZ:0, rotationY:0, rotationZ:0, time:1.5, transition:”easeOutExpo”});

}

private function objectPress3( e:InteractiveScene3DEvent ):void{

//Tweener.addTween(camera, {x:1200, y:600, z:-380, rotationX:0, rotationY:0, rotationZ:0, time:3, transition:”linear”});
Tweener.addTween(plane_HG, {z:500, x:-2500 , rotationX:0, rotationY:0, rotationZ:0, time:1.5, transition:”easeOutExpo”});
Tweener.addTween(plane_BD, {z:100, x:-1300 , rotationX:0, rotationY:0, rotationZ:0,time:2.5, transition:”easeOutExpo”});
Tweener.addTween(plane_HD, {z:350, x: -2000, rotationY:0, rotationY:0, rotationZ:0, time:2, transition:”easeOutExpo”});
Tweener.addTween(plane_BG, {z:-500,x:0 , rotationZ:0, rotationY:0, rotationZ:0, time:1, transition:”easeOutExpo”});

}

private function onEnterFrame (e:Event):void{

// Move camera with the mouse
camera.x = viewport.mouseX;
//camera.y = -viewport.mouseY/5;

renderer.renderScene ( scene, camera, viewport );

//plane.x += (-)X; //Déplacer une Plane vers la droite ou gauche.
//plane.y += (-)Y; //Déplacer une Plane vers le haut ou le bas.
//plane.z += (-)Z; //Faire avancer ou reculer la plane, par rapport à la caméra.
//plane.rotationX += 1; //Faire tourner la Plane vers la haut.
//plane.rotationY += 1; //Faire tourner la Plane par le coté;
//plane.rotationZ += 1; //Faire tourner la Plane en diagonale;

}

}

}

Laisser un commentaire

Currently browsing Les Tweeners

 Pseudo(*requis)

 Email (*privée)

 Site internet (*optionnel)

  • Aider le site :

Articles récents

Catégories

Archives

Blogoliste

Partenaires

Méta

Syndication

Add to netvibes

Add to Google Reader or Homepage
Add to My AOL
Subscribe in NewsGator Online