Tuto Galerie 3d interactive avec Flash avec Flash,Actionscript
 
 
 
 
Dans ce tutorial Flash ActionScript de près d'une heure, nous allons apprendre à créer notre propre galerie 3d. Sachez que pour ce tutoriel, j'ai décidé de simplifier au maximum la partie codage dans le but d'optimiser la qualité de notre application. Alors si vous n'êtes pas encore un as concernant l'utilisation des bibliothèques 3D telles que Papervison, Away3d, etc. Sachez que l'ensemble des transitions 3d sera géré via les classes natives de Flash.
Pour ceux qui auraient déjà visionner mon tutoriel sur la création de cette fameuse galerie 3d et bien vous vous rendrez compte que ce tutoriel propose un rendu bien plus efficace, tout en proposant un codage simplifié.
Au programme de ce tutorial Flash Action Script
- Chargement des images optimisé (image par image)
- Utilisation de la bibliothèque TweenMax
- Utilisation de rotations 3D
- Utilisation de filtres
- Programmation simplifié
Pour les plus curieux d'entre vous, voici un petit apercu de ce que vous arriverez à faire après avoir visionné ce tutoriel: VISITER LA GALERIE3D
Contenu de ce tutorial Flash:
1°) La classe Galerie3D
- Mise en place de la structure (package, classe et constructeur)
- Initialisation du projet (import déclaration des variables et constantes)
- Mise en place des chargement des images (optimisé et image par image)
- Mise en place de la gestion des erreurs (affichage dans l'interface de l'adresse de l'image pouvant poser problème)
- Mise en place de l'album, tout est mis en ordre pour garder un rendu s'approchant d'une interface en 3 dimensions
- Placement des images par lignes et par colonnes
- Mise en place des zoom après clic (gestion du positionnement(x,y,z))
- Mise en place des rotations de l'album (inversé par rapport à la souris)
2°)Les fichiers sources:
- Fichier fla pour flash cs3 et cs4
- Fichier swf(s)
- fichiers html avec détection du flash player
- package contenant la classe Galerie3D
- Dossier d'images (attention les images ne sont pas les mêmes que celles présentés dans le tutoriel (droits d'auteur obligent)
1 acheteur a voté pour ce tuto
Formations vidéo connexes


Tutorial par artkabis
7108 vues , 18 com., 2 votes


Tutorial par artkabis
3866 vues , 3 com., 0 vote
promotion


Tutorial par artkabis
4654 vues , 1 com., 0 vote


- Qualité des formations
- Commande sécurisée
- Téléchargement immédiat
- Lecture illimitée et HD
- Support à votre écoute
- Achat écologique
Plus d'infos sur nos garanties
Désolé, vote impossible !
Pour pouvoir évaluer un tutoriel, vous devez :
› être avec vos identifiants
› avoir acheté le tutoriel
Désolé, impossible de suivre ce formateur!
Pour pouvoir suivre ce formateur, vous devez être connecté avec vos identifiants
ACHETER CETTE FORMATION
Pour visionner cette formation vidéo vous devez posséder des crédits. 1 crédit = 1 € TTC. Découvrez tous nos forfaits!
Déjà membre ?
Vos commentaires (23)
lesingea3tetes a dit le 27 décembre 2009 à 23:01
Bonjour, bravo pour ce super tuto, je suis impressionné de la simplicité du code (je débute vraiment niveau AS pourtant j'ai a peu près tout compris). par contre j'ai une petite question, car je n'arrive pas à résoudre ce problème. Est il possible de remplacer les images par de la vidéo? Encore merci pour ce super tuto.
artkabis a dit le 28 décembre 2009 à 00:13
Alors il est bien sûr possible de remplacer les images par des lecteurs vidéos, mais l'application serait assez différente de celle qui est proposé ici. En effet, la gestion vidéo est géré différemment des images , ce qui est aussi le cas des chargements et de la mise en place des lecteurs qui n'existent pas dans mon tuto. Voilà, alors malheureusement je ne peu pas te donner de solution toute faite (en quelques phrases). Il faudrait un autre tutoriel pour expliquer ceci et celui-ci serait d'ailleurs plus complexe que celui que j'ai proposé ici même. Il faut savoir que les rotations 3D liées aux formats vidéos reste assez complexe à gérer. Cordialement, artkabis.
artkabis a dit le 28 décembre 2009 à 02:19
Re, alors pour ne pas te laisser comme ça, saches qu'il existe un galerie 3d gérant les vidéos, les images et même les fichiers swf. Cette galerie est open Source et il est donc possible d'accéder aux fichiers fla et aux classes pour comprendre le développement de cette application. Voici le résultat: http://www.kalou.ch/download/Magma/ ainsi que les fichiers sources. http://www.kalou.ch/download/Magma.zip Le développeur qui propose ceci se prénomme KALOU et il propose d'autres projets open source sur son site : http://www.kalou.ch/fr/
lesingea3tetes a dit le 28 décembre 2009 à 20:43
Merci beaucoup artkabis, je vais zieuter tout ça. Sinon j'ai regardé quelques extraits de tes autres tutos je pense que je vais m'en fendre de quelques uns. Continue comme ça et encore merci.
artkabis a dit le 29 décembre 2009 à 00:10
Et bien c'est avec plaisir, j'espère que ceci t'aidera, normalement tu verras que cette application open source est vraiment complète (du vrai pain bénis). Voilà sinon merci pour la suite de ton message ;)
MoFu a dit le 14 janvier 2010 à 05:07
Salut Artkabis! Voici mon problème: ReferenceError: Error #1056: Impossible de créer la propriété z sur flash.display.Sprite. at fr::Galerie3D/::creationAlbum() at fr::Galerie3D/::initImages() Je comprend pas comment régler ce problème! J'ai revu plusieurs fois la vidéo et tout est correct comme tu l'as fait et pourtant toujours cette erreur. Je suis sur Flash CS3 mais je pense pas que cela change quelque chose. Merci pour ta réponse.
artkabis a dit le 14 janvier 2010 à 13:02
Bonjour MoFu, alors malheureusement la version utilisé de Flash est lié à ton problème, en effet c'est d'ailleurs pour cette raison que la version du logiciel et du langage est indiqué sous le titre du tutoriel : "tuto Flash CS4 , tuto ActionScript 3". En effet, Flash CS3 ne gère pas l'axe z, ni les rotation 3D, soit rotationX, Y et Z. Ce que je peux te conseiller pour ce tutoriel, c'est de télécharger une demo de Flash CS4 pour pouvoir compiler ton projet sans erreur de compilation. Tu peux bien entendu contourné la propriété de l'axe z de l'album en utilisant le scaleX et scaleY, mais il restera toujours le problème des rotations 3D. Il te reste tout de même une solution qui te permettra de contourner l'ensemble des problèmes, cette solution consiste à utiliser la bibliothèque Five3D et à remplacer le type du movieClip album par un Sprite3D. Voilà alors si tu n'arrive pas à régler ce problème, n'hésites pas à me recontacter.
MoFu a dit le 14 janvier 2010 à 15:54
Merci beaucoup pour ta réponse. Je vais essayer avec la biblithèque Five3D sinon je prendrai la version d'essai de Flash CS4. Merci encore de ta réponse. Et j'aime beaucoup tes tuto.
MoFu a dit le 14 janvier 2010 à 17:57
Désolé c'est encore moi mais je n'y arrive pas. Donc avec Flash CS4 il me met la même erreur alors j'ai essayé avec la bibliothèque Five3D et après plusieurs essai aucune erreur, le chargement commence et après qu'il est chargé toutes les images il me laisse le fond et rien d'autre. Je débute c'est ma première fois sur flash mais merci pour ton tuto on comprend vraiment bien!
artkabis a dit le 14 janvier 2010 à 18:46
Alors, je peux t'aider si tu m'envoies ton projet via http://dl.free.fr récupères le code fournis et envoies le moi ici même !!!
MoFu a dit le 14 janvier 2010 à 19:09
Voila le lien:CS3: http://dl.free.fr/oyiXRtBf1 CS4: http://dl.free.fr/o2nHIwtBF Je suis vraiment désolé de t'embêter mais la je comprend plus! Je t'envoie le fichier CS3 et CS4. Merci vraiment de m'aider. Les images seront plus grandes dans la version final.
artkabis a dit le 15 janvier 2010 à 10:53
Bonjour, alors je viens de regarder ta version pour Flash CS4 et tu as quelques erreurs à corriger, tout d'abord vers la ligne 95, dans ta boucle tu as indiqué lenght au lieu de length, ensuite une ligne plus bas, tu as indiqué ceci : new Bitmap(image[i] il faut ajouter un "s" à image. Voilà alors il te reste une dernière chose à régler, il faut que tu ailles dans les paramètres de publication, puis que tu modifies la version du flash player, toi tu as utilisé la version 9, hors seul la 10 gère la 3D. Une fois toutes ces corrections faites, ton application fonctionnera. Par contre comme je l'avais dit dans ce tutoriel, le choix qu'en à la taille des images à une importance capital concernant le rendu final et comme tu as choisie des images de dimensions différentes, j'avoue que le résultat est peu esthétique. Enfin voilà de quoi terminer tranquillement cette formation, encore une fois, si tu as encore un problème, n'hésites pas à le déposer ici. Cordialement, Artkabis.
MoFu a dit le 15 janvier 2010 à 14:17
Merci beaucoup les images se chargent nickel! Pardon je fais des erreurs de débutant mais en même temps j'en suis un donc! Y'a encore 2-3 petits truc qui ne fonctionnent pas comme le clic ou l'effet de mouvement mais je vais regarder sa! Merci encore!
artkabis a dit le 15 janvier 2010 à 15:47
Ok, alors il faut que tu modifie le fichier du dossier CS4 que tu m'a envoyé et n'oublies pas de modifier la version du flash player de 9 à 10. Normalement tu ne devrais plus avoir de problème.
MoFu a dit le 15 janvier 2010 à 16:05
Je l'ais fait mais je comprend pas les images ne bougent pas et quand je clic dessus rien ne se passe...
MoFu a dit le 15 janvier 2010 à 16:21
Je viens de vérifier et sa ne fonctionne pas avec ton fichier exemple non plus. Je dois avoir un truc pas à jour je pense!
artkabis a dit le 15 janvier 2010 à 16:21
Alors voici ton projet corrigé >> http://dl.free.fr/cBBSTLPJa
MoFu a dit le 15 janvier 2010 à 17:10
Merci mais le mouvement de l'album et le clic fonctionnent toujours pas mais je vais trouver. Merci encore d'avoir pris du temps pour mon problème!
artkabis a dit le 16 janvier 2010 à 15:19
Ok, en tout cas n'hésites pas à me contacter si le problème persiste.
elodie31300 a dit le 26 janvier 2010 à 22:26
Bonsoir,
Je suis débutante je viens de suivre de près votre exercice (video) en m' appuyant sur le support que j' ai eu avec (pack_galerie3D) et je dois avouer que je n' ai pas tt compris puisque, quand je lance l' animation ça ne marche il y a uniquement le fond qui s'affiche (bois-noir) et 6 erreurs me sont signalées...
J'attends votre aide avec impatience.
MERCI
artkabis a dit le 29 janvier 2010 à 11:13
Bonjour, pourrais-tu m'indiquer les erreurs que le panneau de d'erreurs de compilation te renvoie ?
Alanusubaqua a dit le 01 mars 2010 à 17:21
Salut, Tes tutos sont vraiment super et facile à mettre en place. Alos moi, ce que j'aimerai bien, c'est de coupler deux de tes tutos : le mini portfolio et celui-ci. J'ai un peu chipoter mais à chaque, Flash m'annonce un problème de classe. Ne peut-on pas imbriquer les classes les unes dans les autres? Encore bravo, Alan
artkabis a dit le 02 mars 2010 à 01:53
Alors ce que tu peux faire, c'est contenir les deux projets dans des MovieClips, puis les relier avec leurs classes d'origines (dans liaison via la classe), comme cela tu devrais pouvoir faire cohabiter ces deux éléments sans trop grande difficultés !!! Si tu galères un peu, n'hésites pas à repasser ici, j'essayerais de te donner un coup de main, mais saches tout de même que la solution est plutôt accessible... Cordialement, Artkabis
Vous souhaitez commenter ce tutoriel vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous