galerie 3D avec gestion des commentaire par Xml (niveau Expert)

Salut à tous, comme j'ai très peu de temps pour moi en ce moment, il est vrai que je poste moins de tutoriel depuis quelques temps, alors pour me faire pardonner, je vous est préparé un (plutôt complet) sur la création d'une galerie 3D avec gestion des commentaires via un fichier xml. Je peux vous dire que j'ai passé pas mal d'heure sur cette application et après pas mal de modifications, j'ai fini par arriver à un résultat plutôt sympa.

Voici votre récompense aprés avoir fait ce tutoriel:
Aperçût_galerie

Le tutoriel:

Comme dailymotion met légèrement trop de temps à valider ma vidéo, j'ai décidé de vous faire ce tutoriel par écrit, bon je sais qu'il y en a qui préfèrent les tutos vidéos, mais là je n'ai pas trop le choix. Donc c'est parti !!!!


Avant toute chose, sachez que ce tutoriel demande un niveau plutôt avancé en actionscript3, donc si vous pensez que votre niveau n'est pas encore à la hauteur, je vous conseille de faire quelques tutos (ou cours) pour vous entrainer avant de faire celui-ci. Après c'est à vous de voir, mais sans aucune connaissance en as3, vous risquez de ne pas comprendre grand-chose à ce qui va suivre.






La première étape consistera à préparer notre projet.

Il va falloir commencer par créer les différents dossiers qui contiendront les éléments liés à l'interface.

•Le premier se nommera "XML" et il contiendra nos commentaires dans un fichier xml.

•Le second se nommera "photos" et il contiendra nos 12 images. Attention, il est important de respecter le nombre d'image total, car pour diminuer ou augmenter celui-ci, vous serez obligé de modifier certain paramètre dans le script.

Les dimensions sont elles aussi importantes. Pour ce projet, j'ai redimensionné toutes mes photos par 450X338. Il vous suffit de les glisser dans photoshop (ou un autre logiciel de retouche d'images) puis de faire "image">>taille de l'image. Choisissez 450 pixels en largeur, sans oublier de cocher "conserver les proportions".
Pour les noms de vos photos, là encore vous devrez respecter un ordre bien précis, qui va de photo1 à photo12. Sans ça, vous aurez quelques problèmes pour la suite du tutoriel.

•Le dernier dossier se nommera "com" et il contiendra un autre dossier nommé "galerie", il sera utilisé pour contenir notre classe "Galerie.as".

Une fois que vous avez préparé votre projet, il va nous falloir préparer notre fichier xml, là encore, il faudra faire attention à l'ordre de vos photos, car les commentaires seront liés à celles-ci.

Voici ce que contient le fichier "com.xml"

Code:


<?xml version="1.0" encoding="iso-8859-1"?>
<commentaires>
   <commentaire nom="categorie_1">
      <photo>commentaire par defaut</photo>
      <photo>commentaire image1</photo>
      <photo>commentaire image2</photo>
      <photo>commentaire image3</photo>
      <photo>commentaire image4</photo>
      <photo>commentaire image5</photo>
      <photo>commentaire image6</photo>
      <photo>commentaire image7</photo>
      <photo>commentaire image8</photo>
      <photo>commentaire image9</photo>
      <photo>commentaire image10</photo>
      <photo>commentaire image11</photo>
      <photo>commentaire image12</photo>
   </commentaire>
</commentaires>


Nous pouvons nous apercevoir que la hiérachie de nos noeuds se présente ainsi: commentaires>>commentaire>>photo

On peut aussi se rendre compte que pour le second noeud, un identifiant a été ajouté, je les ai créés pour que vous puissiez par la suite, ajouter plusieurs catégories pour modifier facilement les commentaires de la galerie. On peut aussi s'apercevoir que le premier commentaire est en fait un "commentaire par défaut", en effet il faut savoir que lors de l'appel à ce fichier, la première entrée vos 0. Il est donc impératif de combler cette entrée en l'utilisant intelligemment, donc on utilisera l'entrée 0 pour les possible erreurs d'affichages.

Enregistrez ce fichier dans le dossier XML sous le nom de "com.xml".

Voilà, maintenant il va falloir ouvrir le logiciel Flash:

La première chose à faire, est de créer un nouveau fichier (.fla:AS3), Voici comment vous devrez paramétrer celui-ci:

Enregistrer le à la racine de votre projet sous le nom de "album".

Maintenant, nous allons avoir besoin d'une nouvelle classe actionscript3, pour cela faites nouveau>>fichier actionscript

Maintenant nous allons l'enregistrer dans le bon dossier, comme nous l'avons dit plus haut, ce fichier sera situé, dans le dossier "galerie" du dossier "com". Enregistrez le sous le nom de "Galerie" avec une majuscule puisque c'est une classe.

Voilà, nous avons maintenant tous les éléments pour pouvoir commencer à travailler tranquillement. Avant toutes choses, il va falloir relier notre classe avec le fichier "album.fla". Pour faire ceci, repassez sur le fichier "album.fla", puis cliquez en dehors de la scène, ouvrez ensuite le panneau des propriétés, puis dans la partie classe, indiquez comme suit:



Pour vous donner quelques explications sur cette liaison, il faut savoir que notre fichier fla est à la racine du projet, donc pour qu'il puisse communiquer avec le fichier Galerie.as, il faudra lui préciser le bon chemin, donc: il doit entrer dans le dossier "com", puis le dossier "galerie" et enfin il devra cibler le fichier "Galerie" (attention il ne faut pas indiquer le type d'extention:".as").

Maintenant, il faut savoir que nous ne toucherons plus une seule foi au fichier fla, tout se jouera par l'intermédiaire du fichier "Galerie.as". Donc repasser sur le fichier "Galerie.as" et commencez par indiquer le bon package, ce qui donne:

Code:


package com.galerie 
{

}


Maintenant nous allons importer toutes les classes nécessaires au bon fonctionnement de notre application, il faut savoir que nous allons utiliser deux classes distantes qui ne sont pas intégrées à l'origine dans flash, c'est pourquoi je vous invite à télécharger la bibliothèque TwennLite et five3D attention téléchargez bien les versions as3.

Si vous avez des erreurs liées à l'import, vous pouvez retrouver ma bibliothèque five3D ICI.

Maintenant placez vous entre les deux accolades ( {} )du package et collez les différents imports:

Code:

//display
   import flash.display.StageScaleMode;
   import flash.display.StageAlign;
   import flash.display.Sprite;
   import flash.display.Bitmap;
   import flash.display.BitmapData;
   import flash.display.Loader;
   
   //events
   import flash.events.Event;
   import flash.events.IOErrorEvent;
   import flash.events.MouseEvent;
   
   //net
   import flash.net.URLRequest;
   import flash.net.URLLoader;

   //text
   import flash.text.TextField;
   import flash.text.TextFormat;
   import flash.text.TextFieldAutoSize;
   
   //five3D et geom
   import five3D.display.Scene3D;
   import five3D.display.Bitmap3D;
   import five3D.display.Sprite3D;
   import flash.geom.ColorTransform;
   
   //TweenLite et easing
   import gs.TweenLite;
   import fl.motion.easing.Sine;


Maintenant que tous les imports ont été fait, il va falloir créer notre classe de document, celle-ci doit porter le même nom que votre fichier actionscript, dans notre cas notre classe de document étendra la classe native "Sprite". Donc à la suite des imports et avant la dernière accolade, collez ceci:

Code:


            //classe de document
   public class Galerie extends Sprite
            {

            }

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Maintenant, il vous faut vous placer entre les accolades de la classe pour créer les différentes variables qui seront utilisées dans notre projet:

Voici ces variables et constantes:

Code:


                        //initialisation des constantes
      private const maxImg:int = 12;
      private const ecart:Number = 60;
      private const maxZoomZ:Number = 2500;
      //initialisation des variables
      private var cheminImg:String = "photos/photo";
      private var extensionImg:String = ".jpg";
      private var chargementIndex:int = 1;
      private var infoChargement:TextField = new TextField();
      private var infoImg:TextField = new TextField();
      private var images:Array = new Array();
      private var loaderImage:Loader;
      private var comment:Array = new Array();
      private var scene:Scene3D;
      private var album:Sprite3D;
      private var ombre:ColorTransform = new ColorTransform(.5, .5, .5, 1, 0, 0, 0, 0);
      private var lumiere:ColorTransform = new ColorTransform(1, 1, 1, 1, 0, 0, 0, 0);
      private var modeZoom:Boolean = false;
      private var imageZoom:Sprite3D;
      private var image3d:Array = new Array();
      private var ArrayComm:Array = new Array();
      private var chargementXML:URLLoader = new URLLoader();
      private var XMLfichier:URLRequest = new URLRequest("XML/com.xml");


Passons en revu les éléments les plus importants:

Code:

private const maxImg

Nous avons à faire à une constante, à l'inverse d'une variable, celle-ci nous permet de garder une valeur fixe, comme son nom l'indique une constante reste toujours constante.
maxImg contient donc le nombre maximum d'images que contiendra la galerie.

Code:

private const ecart

Cette constante garde en mémoire l'écart entre les images.

Code:

private const maxZoomZ

Cette constante sera utilisée pour le zoom après clic.

Code:

private var chargementIndex

Cette variable est trés importante, car elle contiendra l'index des images (de 1 à 12).

Code:

private var infoChargement

Cette variable sera utilisée pour afficher le chargement des images

Code:

private var images

Ce tableau contiendra le nom des images

Code:

private var comment

Ce tableau contiendra tous les commentaires

Code:

private var scene

La scene3D

Code:

private var album

Ici on aurra l'album, qui contiendra les images classées et bien disposés.

Code:


private var ombre
private var lumiere


Seront utilisés pour le rollOver et rollOut

Code:

private var modeZoom

Sera utilisé pour détecter s'il y a zoom ou non.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


Voilà, une fois ces variables instanciés, il va nous falloir créer notre constructeur.
Un constructeur est une fonction qui sera automatiquement jouée, elle nous servira donc à initialiser notre application et à préparer la lecture des autres fonctions grâce aux écouteurs. Elle doit toujours être publiques est aussi porté le même nom que votre classe (fichier as).

Toujours dans la continuité de notre code (après les variables) collez ceci: Attention, car à ce stade, vous devez avoir deux accolades en bas de votre code et ceci jusqu'à la fin du tutoriel.

Code:


//__________________________○○○--Constructeur--○○○________________________\\
      public function Galerie() {
         stage.scaleMode = StageScaleMode.NO_SCALE;
         stage.align = StageAlign.TOP_LEFT;
         chargementXML.addEventListener( Event.COMPLETE, chargeComplete );
         chargementXML.load(XMLfichier);
         infoChargement.defaultTextFormat = new TextFormat("Verdana", 10, 0xffffff);
         infoImg.defaultTextFormat = new TextFormat("Verdana", 10, 0xffffff);
         infoChargement.autoSize = TextFieldAutoSize.LEFT;
         infoImg.autoSize = TextFieldAutoSize.CENTER;
         infoImg.width = 250;
         infoChargement.text = "Chargement des images: " + chargementIndex + "/" + maxImg;
         infoChargement.x = (stage.stageWidth - infoChargement.textWidth)/2;
         infoChargement.y = (stage.stageHeight - infoChargement.textHeight)/2;
         infoImg.x = (stage.stageWidth - infoImg.textWidth)/2;
         infoImg.y = stage.stageHeight-50;
         
         addChild(infoChargement);
         
         ChargImage();
      }


Dans cette fonction, nous mettons en place le textField qui affichera le chargement de chacune des images nous gérons aussi l'écoute du chargement xml, quand celui-ci est complètement chargé, il nous renvoie sur la fonction "chargeComplete". Une autre fonction est aussi appelée, c'est la fonction "ChargImage()" que nous allons maintenant créer, encore une fois faites attention que le la prochaine fonction soit situé avant les deux dernières accolades:
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Code:


private function ChargImage() {
         loaderImage = new Loader();
         loaderImage.contentLoaderInfo.addEventListener(Event.COMPLETE, initImage);
         loaderImage.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, erreur);
         loaderImage.load(new URLRequest(cheminImg + chargementIndex + extensionImg));
         chargementIndex++;
      }


Etudions cette nouvelle fonction:
Tout d'abord, nous préparons le nouveau loader (loaderImage). Nous écoutons deux événements sur celui-ci: Event.COMPLETE et IOErrorEvent.IO_ERROR. Puis nous implémentons la variable "chargementIndex" pour quelle corresponde au nombre d'images chargées (12).
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


Nous devons ensuite créer la fonction InitImage qui survient après l'événement COMPLETE du loaderImage: (attention vous devez toujours avoir en tête que les deux dernières accolade soit en bas de votre code et ceci jusqu'à la fin du tutoriel):

Code:


private function initImage(pEvt:Event):void {
         var image:BitmapData = (pEvt.target.content as Bitmap).bitmapData;
         images.push(image);
         if (chargementIndex <= maxImg) {
            infoChargement.text = "Chargement des images " + chargementIndex + "/" + maxImg;
            ChargImage();
         } else {
            removeChild(infoChargement);
            creationAlbum();
         }
      }


Voyons ensemble ce que contient cette fonction:
Tout d'abord, nous récupérons, nos images dans une variable locale qui se nomme 'image", puis nous ajoutons (grâce au "push") toutes les images dans le tableau "images". On peut aussi se rendre compte que nous utilisons une condition pour vérifier si toutes les images ont bien été chargés, si elles ne l'ont pas été, alors nous réafichons le texte infoChargement et nous rejouons la fonction "chargeImage", si tous c'est bien passé et que les images ont toutes été chargés, alors nous supprimons de la liste d'affichage le textField "infoChargement" et nous jouons la fonction "créationAlbum".

Une fois que vous avez placé la fonction initImage, il va falloir créer la fonction chargComplet, n'oubliez pas de la coller à la suite en laissant les deux accolades en dessous de cette nouvelle fonction:

Code:


private function chargeComplete(pEvt:Event):void {
         var xmlComm:XML = new XML(pEvt.target.data);
         var commsList:XMLList = xmlComm..commentaire;
         for (var i:int = 0; i < commsList.length(); i++) {
            var photosList:XMLList = commsList[i]..photo;
            var photosArray:Array = new Array();
            for (var j:int = 0; j < photosList.length(); j++) {
               photosArray.push(photosList[j].text());
            }       
            ArrayComm[commsList[i].@nom] = photosArray;   
         }
         ajouteComm("categorie_1");
      }


Regardons de plus prêt à quoi peu bien servir cette fonction:

Ici nous allons préparer l'extraction des données liées au fichier xml, ici ce qui nous intéresse, c'est de récupérer les noeuds liés aux commentaires des photos, on peut aussi se rendre compte, que nous ciblons l'identifiant "categorie_1". En ciblant cette identifiant, il est maintenant possible d'ajouter différentes catégories, imaginez maintenant que vous souhaitez, changer vos images par de nouvelles. Dans ce cas il vous suffira de modifier cette ligne:

ajouteComm("categorie_1");

En précisent le nouveau nom de la catégorie créé dans le fichier xml. celle-ci devra comporter les commentaires liés aux photos de la nouvelle galerie. Donc il faut savoir que la gestion des commentaires est tout à fait flexible, puisque vous pouvez attribuer différentes catégories en fonction de vos images et ceci en modifiant un seul mots, plutôt pratique, non?

Maintenant que nous avons récupéré les bonnes données, il va falloir les stocker dans un tableau prévu à cet effet (comment:Array), pour cela, nous allons créer une autre fonction qui nous permettra de faire ceci assez simplement:

Code:


private function ajouteComm(commentaire:String):void  {
         for (var i:int = 0; i < ArrayComm[commentaire].length; i++) {
            comment.push(ArrayComm[commentaire][i]);
         }
      }


Dans cette fonction, nous récupérons l'ensemble des commentaires (13), puis nous les ajoutons dans le tableau nommé "comment".

C'est bien beau tout ça, mais il va falloir créer ce fameux album !!! Nous allons donc passer à la partie la plus périlleuse. En effet, nous allons mettre en place tous les éléments pour que notre galerie fonctionne correctement. Placez-vous donc à la suite de la dernière fonction (avant les deux dernières accolades) et collez ceci:

Code:


private function creationAlbum():void {
         scene = new Scene3D();
         scene.x = Math.round(stage.stageWidth/2);
         scene.y = Math.round(stage.stageHeight / 2);
         addChild(scene);
         album = new Sprite3D();
         
         for (var i:int = 0;  i < images.length; i++) {
           var id:Number=(i+1);
           var bitmap3d:Bitmap3D = new Bitmap3D(images[i] as BitmapData);
           var image3d:Sprite3D = new Sprite3D();

           bitmap3d.x = bitmap3d.bitmapData.width / -2;
           bitmap3d.y = bitmap3d.bitmapData.height / -2;   
           image3d.addChild(bitmap3d);

           var lignes:Number = Math.floor(i / 3) - 1.5;
           var colones:Number = i % 3 -1 ;
           var imgW:Number = bitmap3d.bitmapData.width + ecart;
           var imgH:Number = bitmap3d.bitmapData.height + ecart;
           image3d.x = lignes * imgW;
           image3d.y = colones * imgH;

           image3d.transform.colorTransform = ombre;
           image3d.buttonMode = true;
           album.addChild(image3d);
           image3d.name = "image" + id;
         }
         
         album.z = maxZoomZ;
         scene.addChild(album);
            
         // 3
         album.addEventListener(MouseEvent.ROLL_OVER, over, true);
         album.addEventListener(MouseEvent.ROLL_OUT, out, true);
         stage.addEventListener(Event.RESIZE, resiz);
         stage.addEventListener(MouseEvent.MOUSE_MOVE, mouvementAlbum);
         stage.addEventListener(MouseEvent.CLICK, clic);
      }


Comme vous pouvez le voir, nous avons là une fonction plutôt complexe, elle nous permettra de disposer correctement toutes les images. Nous allons donc passer en revu les points les plus importants:

Partie1:

Code:

                            scene = new Scene3D();
         scene.x = Math.round(stage.stageWidth/2);
         scene.y = Math.round(stage.stageHeight / 2);
         addChild(scene);


Nous préparons l'affichage de notre scène en l'instancian, puis nous la disposons au centre de la scène et enfin nous l'ajoutons à la liste d'affichage (addChild(scène)).

Partie2:

Code:

                              album = new Sprite3D();
         
         for (var i:int = 0;  i < images.length; i++) {
           var id:Number=(i+1);
           var bitmap3d:Bitmap3D = new Bitmap3D(images[i] as BitmapData);
           var image3d:Sprite3D = new Sprite3D();

           bitmap3d.x = bitmap3d.bitmapData.width / -2;
           bitmap3d.y = bitmap3d.bitmapData.height / -2;   
           image3d.addChild(bitmap3d);

           var lignes:Number = Math.floor(i / 3) - 1.5;
           var colones:Number = i % 3 -1 ;
           var imgW:Number = bitmap3d.bitmapData.width + ecart;
           var imgH:Number = bitmap3d.bitmapData.height + ecart;
           image3d.x = lignes * imgW;
           image3d.y = colones * imgH;

           image3d.transform.colorTransform = ombre;
           image3d.buttonMode = true;
           album.addChild(image3d);
           image3d.name = "image" + id;
         }


Nous commençons par instancier, notre variable album. Nous créons ensuite une boucle pour générer les identifiants des images, puis nous regroupons ensuite les images dans le bitmap3d. Une fois que ceci a été fait, il nous faut créer une variable locale (image3D) qui nous servira de conteneur pour le bitmap3D. Nous avons donc regroupé toutes les images dans le sprite3D nommé "image3D". Maintenant il est possible de préparer la disposition de ces fameuses images en fonction des lignes et colonnes créés pour cet effet. Une fois correctement disposés, nous pouvons activer le mode bouton, l'ombrage et l'ajout dans notre sprite3D nommé "album", pour résumer, nous avons contenu les images dans des Bitmap3D, puis nous avons placé ceux-ci dans des sprite3D qui sont eux même contenu dans un autre sprite3D qui se nomme album.

Il ne faut pas oublier, que chacune des image3d serons nommés respectivement: image1, image2, image3, ..., image12.

Nous pouvons passer à la suite de l'explication pour la 3éme partie de la fonction "creationAlbum". Attention, ici je ne fais qu'expliquer le contenue de cette fonction, alors ne recopier pas deux fois les mêmes actions...

Partie3:

Code:

                            album.z = maxZoomZ;
         scene.addChild(album);
            
         // 3
         album.addEventListener(MouseEvent.ROLL_OVER, over, true);
         album.addEventListener(MouseEvent.ROLL_OUT, out, true);
         stage.addEventListener(Event.RESIZE, resiz);
         stage.addEventListener(MouseEvent.MOUSE_MOVE, mouvementAlbum);
         stage.addEventListener(MouseEvent.CLICK, clic);
      }


Dans cette dernière partie, nous définissons la profondeur de notre album grâce à la variable maxZoomZ qui comprend une valeur de 2500. Ensuite nous plaçons notre album dans la scène qui a été précédemment créée(scene.addChild(album)).

Maintenant que tous les éléments sont correctement instanciés, nous pouvons gérer les différentes actions liées à l'interactivité, ce qui signifie que nous allons pouvoir gérer les actions liées à la souris (rollOver, rollOut, clic, etc). Pour ce faire, nous allons créer deux écouteurs pour l'album. Un pour le rollover et l'autre pour le rollOut.
Pour tous les événements liés à la scène, nous précisons "stage" avant l'écouteur, nous avons donc trois événements liés à l'écoute de cette scène (stage):

Le "RESIZE" : pour gérer le redimensionnement global.
Le "MOUSE_MOVE" : pour la gestion des mouvements avec la souris.
Et le "CLICK" : qui nous permettra de gérer le zoom des images.

Nous pouvons désormais passer à la suite de notre tutoriel en nous occupant d'une nouvelle fonction, qui se nomme "over". Comme vous l'aurez sans doute compris, cette partie nous permettra de gérer le rollOver sur les images:

Code:


private function over(pEvt:MouseEvent):void {
         var imageId = pEvt.target.name;
         var index:int = imageId.substr(5,6);
         infoImg.text = ""+ comment[index];
         if (!modeZoom)addChild(infoImg);
         if (pEvt.target is Sprite3D && !modeZoom) {
            (pEvt.target as Sprite3D).transform.colorTransform = lumiere;
         }
      }


Voyons ce que contient cette fonction:
Nous commençons par récupérer le nom de nos images (pEvt.target.name). Ensuite il a fallu extraire l'identifiant lié à celles-ci. Je peux d'ailleurs vous dire que j'ai passé pas mal de temps sur cette fonction, car il n'était pas simple d'extraire la bonne partie du nom des images. Bref ce qui nous intéresse ici, c'est de récupérer non pas le nom des images (image1, image2, ...), mais leurs index (1,2,3,...). J'ai donc décidé d'utiliser un "substr" pour parvenir à mes fins. Voici comment fonctionne ceci: var index:int = imageId.substr(5,6);

la variable "index" va récupérer le nom de l'image (image1, image2,...) puis grâce au substr, nous pouvons isoler la partie située entre la 5eme et 6eme lettres. Si vous comptez le nombre de lettre, vous vous rendrez compte que seule la partie située après "image" est gardée (donc 1,2,3...).

Voilà, maintenant nous pouvons récupérer le bon commentaire en fonction de l'image sélectionné et surtout l'afficher dans le champ de texte prévu à cet effet: infoImg.text = ""+ comment[index];

Concernant les deux conditions:
La première est utilisée pour vérifier que le zoom n'est pas activé avant d'afficher le commentaire.
La seconde, nous permet d'activer le mode lumière quand nous passons sur les images.

Passons maintenant à la suite de notre tutoriel, comme nous avons défini la fonction au rollOver, il nous faudra aussi gérer le rollOut. Collez donc cette nouvelle fonction à la suite de la précédente:

Code:


private function out(pEvt:MouseEvent):void {
         infoImg.text="";
         if (pEvt.target is Sprite3D && !modeZoom) {
            (pEvt.target as Sprite3D).transform.colorTransform = ombre;
         }
      }


Dans cette fonction, rien de bien méchant, en effet nous activons simplement l'ombre au rollOut si le zoom est bien désactivé et vidons le texte contenant les commentaires.

Nous pouvons donc continuer notre chemin, pour créer la fonction liée au redimensionnement de l'interface. Collez donc cette partie à la suite de la précédente fonction:

Code:

private function resiz(pEvt:Event):void {
         scene.x = Math.round(stage.stageWidth/2);
         scene.y = Math.round(stage.stageHeight / 2);
      }


Ici aussi, rien de bien méchant, car nous plaçons simplement notre scene3D au milieu de la scène (stage).

Nous pouvons donc passer à la suite, pour commencer à gérer le mouvement global de notre album. Pour ce faire, nous allons créer une fonction qui se nomme "mouvementAlbum" (plus explicite tu meurs !!!). Collez cette fonction à la suite de la précedente:

Code:


private function mouvementAlbum(me:MouseEvent):void {
         if (modeZoom) return;
         var mouseXPos:Number = (me.stageX - stage.stageWidth/2) / (stage.stageWidth / 2);
         var mouseYPos:Number = (me.stageY - stage.stageHeight/2) / (stage.stageHeight / 2);
         
         TweenLite.killTweensOf(album);
         
         var props:Object = new Object();
         props.rotationY = 45 * mouseXPos;
         props.rotationX = -15 * mouseYPos;
         props.x = 400 * mouseXPos;
         props.y = 300 * mouseYPos;
         props.ease = Sine.easeOut;
         TweenLite.to(album, .3, props);
      }


Cette fonction est très importante, puisqu'elle nous permet de donner ce fameux effet "3D". Bref voyons ce que contient la bête !!!

La première condition, nous permet de renvoyer l'état du mode zoom (true ou false).
Ensuite, nous devons créer deux variables locales (mouseXPos, mouseYPos) qui contiendront le calcul pour le mouvement général de l'album.
Pour le reste, nous préparons tous les paramètres de la Tween pour que le déplacement vertical et horizontal soit inversé.

Nous pouvons désormais, nous occuper de l'événement lier au clic. Collez à nouveau cette fonction à la suite de la précédente:

Code:


private function clic(pEvt:MouseEvent):void {
         var props:Object;
         if (!modeZoom)removeChild(infoImg);
         if (pEvt.target is Sprite3D && !modeZoom) {
            imageZoom = pEvt.target as Sprite3D;
            
            TweenLite.killTweensOf(album);
            props = new Object();
            props.z = 0;
            props.rotationX = 0;
            props.rotationY = 0;
            props.x = 0 - pEvt.target.x;
            props.y = 0 - pEvt.target.y;
            props.ease = Sine.easeInOut;
            TweenLite.to(album, .6, props);
            modeZoom = true;
         } else if (modeZoom) {
            imageZoom.transform.colorTransform = ombre;
            
            TweenLite.killTweensOf(album);
            props = new Object();
            props.z = maxZoomZ;
            props.x = 0;
            props.y = 0;
            props.ease = Sine.easeOut;
            props.onComplete = RetourPleinZoom;
            TweenLite.to(album, .3, props);
         }
      }


Comme vous pouvez le voir, on a à faire à une fonction plutôt volumineuse, je vais donc la séparer en plusieurs parties pour mieu la commenter.

Commençons, par la première partie:
PARTIE1:

Code:

                              var props:Object;
         if (!modeZoom)removeChild(infoImg);


Nous créons une variable local qui contiendra les paramètres de la Tween. Ensuite nous vérifions que nous ne somme pas en mode zoom, si ce n'est pas le cas, alors nous supprimons le texte qui contient les commentaires.

PARTIE2:

Code:


                                                  if (pEvt.target is Sprite3D && !modeZoom) {
            imageZoom = pEvt.target as Sprite3D;
            
            TweenLite.killTweensOf(album);
            props = new Object();
            props.z = 0;
            props.rotationX = 0;
            props.rotationY = 0;
            props.x = 0 - pEvt.target.x;
            props.y = 0 - pEvt.target.y;
            props.ease = Sine.easeInOut;
            TweenLite.to(album, .6, props);
            modeZoom = true;
         }


Dans cette condition, nous verifions que nous avons bien à faire à des Sprite3D, mais aussi si le zoom n'a pas été activé. Si c'est le cas, alors:
imageZoom équivaut à nos Sprite3D (donc on zoom sur l'image cliquée).
Puis nous redéfinissons les paramètres de la Tween pour que notre fameuse image cliquée soit zoomé.
Pour finir, nous mettons notre variable Boolean (modeZoom) sur true.

PARTIE3:

Code:


else if (modeZoom) {
            imageZoom.transform.colorTransform = ombre;
            
            TweenLite.killTweensOf(album);
            props = new Object();
            props.z = maxZoomZ;
            props.x = 0;
            props.y = 0;
            props.ease = Sine.easeOut;
            props.onComplete = RetourPleinZoom;
            TweenLite.to(album, .3, props);
         }
      }


Dans cette dernière partie, qui est d'ailleurs liée à la précédente, nous vérifions que le clic a bien lieu quand le zoom n'est pas activé. Si c'est le cas, L'image est alors dezoomée (grâce à la Tween) et l'ombre réappliquée.

Nous pouvons maintenant passer aux deux dernières fonctions concernant le retour plein zoom et la gestion des erreurs. Pour la dernière fois, vous devrez coller ces deux fonctions à la suite de la précédente. Attention, car à ce stade, vous devez toujours avoir les deux dernières accolades situé en bas de votre script.

Collez ceci:

Code:


                        private function RetourPleinZoom():void {
         modeZoom = false;
      }
      private function erreur(pEvt:IOErrorEvent):void{
         trace ("Erreur chargement: " + pEvt);
      }


Nous voici à la fin de notre tutoriel, comme vous pouvez le voir, ces deux fonctions sont plutôt basiques. En effet la première nous permet de gérer le retour du mode plein écran en remettant la variable "modeZoom" sur false. Quant à la dernière, celle-ci nous permet de gérer les possibles erreurs liées au chargement du fichier xml. Si une erreur devait survenir, alors un message en panneau de sortie apparaîtra avec toutes les informations nécessaires à la correction.

Pour finir, vous devez avoir les deux dernières accolades( }} ) à la suite de la fonction "erreur".

Ce tutoriel est maintenant terminé, pour que tous soit bien clair, voici à quoi doit ressembler la racine de votre projet:

Spoiler:

Concernant les fichiers sources, je pense que vous comprendrais qu'il est important que vous constuisier vous même votre application, en effet je vous propose un tutoriel et non partage de fichiers, mais bon pour les plus feignants d'entre vous, il suffit de copier le code finale, le fichier xml et de construire votre dossier de photos pour que votre galerie fonctionne correctement.

Voilà, en tout cas j'espère que ce tutoriel vous a plu
Si vous avez des questions ou même des corrections à apporter, n'hésitez surtout pas à le faire à la suite de ce tutoriel.

Pas de quoi, j'avoue que ça m'a pris énormément de temps, mais en même temps, vu le nombres d'heures à mettre au point ce projet, je ne voulais pas que le tuto ne soit pas à la hauteur

je vais souffrir mais tant pis je m'y attèle demain. Merci

oulala, jolie tutoriel.
Franchement je sais que je vais m'amuser ^^

Je dois encore approfondir le tuto pour tout comprendre, mais j'ai réussi à le faire fonctionner en comprenant son déroulement. J'ai même trouvé le piège .
Il m'a permis de découvrir des instructions que je ne connaissais pas.
Encore merci de partager tes connaissances avec nous.

Et bien si tu as réussi à comprendre les différents éléments du tutoriel, tu peux déjà te dire que la suite de ton apprentissage as3 sera moins douloureux.

Oh ça fait un petit bout de temps que je cherche un tuto de se genre

ça va énormément m'aider un grand MERCI

Merci pour ce tuto si complet ^^ Je suis en plein dedans et je ne cache pas que je morfle un peut pour comprendre a quoi servent toutes ses fonctions ! en espérant que j'arriverai jusqu'au bout..

Hm je ne sait pas pourquoi mais j'ai suivi le tuto a la lettre et j'ai 10 erreurs "1042: overriding a function that is not marked for override" pour Sprite3D.as ...
aurai-je une mauvaise bibliothèque Five3D ? ( j'ai telechargé la version2.1.920 )
Merci d'avance pour votre aide..

Peux tu m'envoyer ton fichier fla, histoire que je puisse tester ta version avec ma propre bibliothèque five3D

Tu peux l'héberger via http://dl.free.fr

Oui pas de problème, merci de ton aide ^^
Il y avait des petits problemes sur free j'ai mis mon fichier fla sur ce lien megaupload :

http://www.megaupload.com/?d=B0QTOWQL

merci pour ce tuto, qui ressemble à ce que je cherche ...

et j'ai ce message qui apparait :

1013 l'attribut private ne peut etre utilisé que dans des définitions de propriétés de classe

étrange .... :-s

Pour lezardgraphik :
cette erreur apparait lorsque la syntaxe lié à une classe a été utiliser directement dans un fichier fla, alors es-tu bien certain d'avoir placé ton code dans un document .as ?

Pour Browninja :
Ce que tu m'as envoyé n'a rien avoir avec la galerie 3d, mais avec le carrousel. Donc dans ton projet il n'y a aucun rapport avec five3D et tout fonctionne normalement. À mon avis tu tes trompé lorsque tu as envoyé ton projet sur megaupload...

artkabis a écrit:Pour lezardgraphik :
cette erreur apparait lorsque la syntaxe lié à une classe a été utiliser directement dans un fichier fla, alors es-tu bien certain d'avoir placé ton code dans un document .as ?

Pour Browninja :
Ce que tu m'as envoyé n'a rien avoir avec la galerie 3d, mais avec le carrousel. Donc dans ton projet il n'y a aucun rapport avec five3D et tout fonctionne normalement. À mon avis tu tes trompé lorsque tu as envoyé ton projet sur megaupload...

oui je te le confirme mon code est dans un fichier .as (Galerie.as)

Bizarre, alors peux tu m'envoyer l'ensemble de ton projet via http://dl.free.fr en le zippant ?

Malheureusement je bouge en soirée d'ici 5 minutes, alors je ne pourrais m'occuper de ton projet qu'à partir de demain...

artkabis a écrit:Bizarre, alors peux tu m'envoyer l'ensemble de ton projet via http://dl.free.fr en le zippant ?

Malheureusement je bouge en soirée d'ici 5 minutes, alors je ne pourrais m'occuper de ton projet qu'à partir de demain...

merci à toi ... je te le fais parvenir demain ...bonne soiiree

À demain

hm donc j'aurai envoyé le mauvais *.fla ??? mais c'est bizard, je n'ai suivi aucun tutos pr le carrousel pour le moment, a moins d'avoir une double personnalité cachée...
si besoin voila mon fichier actionscript..

http://www.megaupload.com/?d=HAAEUNKD

( ps : je pense avoir le meme probleme que lezardgraphik

1024:
Overriding a function that is not marked for override. )

Si cela peut aider...
J'avais eu le même soucis que toi.
Et en ajoutant "override" sur chaque fonction de la classe Five3D mentionné en erreur, j'ai réussi à faire fonctionner la classe.

merci je vais essayer ca en attendant ^^

J'ai essayé de télécharger ton dernier fichier et j'ai malheureusement ce message:

Ce fichier n'est présentement pas disponible.

Tu n'as décidément pas de chance avec l'envoie de tes fichiers, sinon essaies la technique de Benchi et si vraiment celle-ci ne fonctionne pas, nous essayerons de trouver une autre solution.

artkabis a écrit:J'ai essayé de télécharger ton dernier fichier et j'ai malheureusement ce message:

Ce fichier n'est présentement pas disponible.

Tu n'as décidément pas de chance avec l'envoie de tes fichiers, sinon essaies la technique de Benchi et si vraiment celle-ci ne fonctionne pas, nous essayerons de trouver une autre solution.

salut as tu reçu mes fichiers ?

Justement il est impossible de récupérer tes fichiers, mais ça tu le sais déjà puisque tu l'as indiqué au début de ton message, je te conseille donc de renvoyer ton dossier zippé via http://dl.free.fr au moins là il n'y aura plus de problème ...

artkabis a écrit:Justement il est impossible de récupérer tes fichiers, mais ça tu le sais déjà puisque tu l'as indiqué au début de ton message, je te conseille donc de renvoyer ton dossier zippé via http://dl.free.fr au moins là il n'y aura plus de problème ...

voici le lien :


http://dl.free.fr/bx6KkTr2h