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)

Jetez un oeil à ces autres tuto Flash CS4, ActionScript 3

Une date limite de validité pour vos projets FlashUne date limite de validité…
Dans ce tuto Flash Actionscript, nous allons créer une application…

Menu coulissant élastique Xml (suite)Menu coulissant élastique…
Dans ce tuto Flash ActionScript, nous allons voir comment il…

Menu 3D avec Papervision3DMenu 3D avec Papervision3D
Dans ce tuto Flash, vous allez apprendre à créer un menu 3D…

Formation ActionScript : coder un site full flashFormation ActionScript : coder…
Apprenez à développer un site full flash grâce à la programmation…

 Website xml avec utilisation de SWFAddress et SWFObjectWebsite xml avec utilisation…
Dans ce tutoriel, nous allons créer un website dynamique qui…

Créer un website avec gestion xml en as3Créer un website avec gestion…
Dans ce tutoriel nous allons créer ensemble un mini site internet…

Débutez facilement avec Flash CS4Débutez facilement avec Flash…
Cette vidéo de découverte va vous permettre de découvrir…

Créez un site flash de type PortfolioCréez un site flash de type…
Apprenez dans cette formation à réaliser un site complet en…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Flash CS4, ActionScript 3 de 1 heure 0 minute est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

artkabis
a vendu plus de 1.500 tutos, formateur certifié par Tuto.com.

Passionné par le webdesign, j'aime acquérir de nouvelles connaissances en ratissant la toile. Au fil du temps j'ai su mettre à profit mes compétences de webdesigner pour mélanger interactivité, design et animation. Curieux, j'aime être au courant des dernières nouveautés en matière d'applications internet riches (RIA). Autodidacte, je sais m'adapter aux différents outils de création web. J'utilise au quotidien une multitude de logiciels pour parfaire ma soif de création.

La moyenne de ses notes :  

Devenir fan

Voir son profil


Témoignage de ses clients

odst51 dit Excellent, très bon travail, perso j adore.

 

 

Tuto du même auteur

Mini Portfolio en FlashMini Portfolio en Flash
Dans ce tutoriel Flash / ActionScript de près de deux heures, nous allons créer une application regroupant…

Installation TweenMax et TweenLite v2Installation TweenMax et TweenLite v2
Voici une mise à jour de mon premier tutoriel TweenLite et TweenMax, Installation et utilisation (as3).…

Optimisation de vos framework (comme adobe)Optimisation de vos framework (comme adobe)
Dans ce tuto Flash ActionScript, nous allons voir comment il est possible de mettre en place vos classes…

Une texture métallique alvéolée avec flash cs4Une texture métallique alvéolée avec flash cs4
Dans ce tuto Flash nous allons mettre à profit les outils de dessin de flash pour créer notre propre…

voir tous les tuto de artkabis

Notes attribuées par les utilisateurs

Note moyenne des utilisateurs :  


 

Les avis / Questions des utilisateurs

Par lesingea3tetes
(n'a pas acheté le tuto)

" 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. "

Par artkabis
(auteur de ce tuto)

" 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. "

Par artkabis
(auteur de ce tuto)

" 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/ "

Par lesingea3tetes
(n'a pas acheté le tuto)

" 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. "

Par artkabis
(auteur de ce tuto)

" 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 ;) "

Par MoFu
(a acheté le tuto)

" 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. "

Par artkabis
(auteur de ce tuto)

" 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. "

Par MoFu
(a acheté le tuto)

" 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. "

Par MoFu
(a acheté le tuto)

" 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! "

Par artkabis
(auteur de ce tuto)

" 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 !!! "

Par MoFu
(a acheté le tuto)

" 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. "

Par artkabis
(auteur de ce tuto)

" 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. "

Par MoFu
(a acheté le tuto)

" 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! "

Par artkabis
(auteur de ce tuto)

" 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. "

Par MoFu
(a acheté le tuto)

" Je l'ais fait mais je comprend pas les images ne bougent pas et quand je clic dessus rien ne se passe... "

Par MoFu
(a acheté le tuto)

" 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! "

Par artkabis
(auteur de ce tuto)

" Alors voici ton projet corrigé >> http://dl.free.fr/cBBSTLPJa "

Par MoFu
(a acheté le tuto)

" 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! "

Par artkabis
(auteur de ce tuto)

" Ok, en tout cas n'hésites pas à me contacter si le problème persiste. "

Par elodie31300
(a acheté le tuto)

" 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

"

Par artkabis
(auteur de ce tuto)

" Bonjour, pourrais-tu m'indiquer les erreurs que le panneau de d'erreurs de compilation te renvoie ? "

Par Alanusubaqua
(a acheté le tuto)

" 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 "

Par artkabis
(auteur de ce tuto)

" 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 "

Par snab
(a acheté le tuto)

" Excellent tuto, très clair, très pro .. merci "

Par artkabis
(auteur de ce tuto)

" Merci pour ton com, snab !!! "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto Flash CS4, ActionScript 3 d’une durée de 1 heure 0 minute a été acheté plus de 100 fois et a reçu une note moyenne de 4/5.

Ce tuto a été publié par artkabis, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,1/5 pour l’ensemble de ses vidéos.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto qui se présente sous la forme d’une vidéo, vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

Besoin d'aide ? Contactez le support !