Tuto publié par Dans ce tuto Flash, vous allez apprendre à créer un menu 3D en utilisant la célèbre bibliothèque Papervision3D.
Ce menu comporte 6 faces que vous pourrez modifier à votre guise, vous pourrez également utiliser vos propres images.
Pour que le menu soit plus sympa, j'y ai ajouté une gestion de la vitesse via l'application d'un Blur (flou) dont l'intensité évoluera en fonction de la vitesse de déplacement du cube. Nous utiliserons aussi la classe ReflectionView de PV3 pour créer un reflet parfait de notre cube
La navigation de ce menu est dynamique, en effet, vous pourrez modifier les url simplement pour que les faces du cube puissent mener à d'autres liens.
Fonctionnalité du menu Cube en 3D :
- Faces du cube modifiables (rapidement)
- Effet de vitesse via l'utilisation de blur (flou)
- Réflexion animée du menu3D
- Navigation en fonction de la face cliquée (url perso)
- Possibilité de modifier les titres dynamiquement
- Mise en place simplifiée (une seule ligne de code)
- Gestion du drag&drop;
- Utilisation de la bibliothèque papervision3D
- Gestion des mouvements via la classe TweenMax
Sommaire de ce tuto Flash et Papervision3D
I°)Création de l'interface (menu3D.fla)
- Création du fichier fla et paramétrage
- Récupération des images des faces dans l'interface
- Création des faces du cube: création de cadres, des reflets et du titre dynamique
- Liaison des éléments pour la récupération des faces dans la future classe
II°)Papervision3D
- Page de téléchargement du projet (zip, swc)
- Explication de l'installation local de la bibliothèque PV3
- Explication de l'installation depuis flash (permanente)
III°)Création de la classe static Menu3D
- Préparation de la classe (package, classe,constructeur)
- Mise en place des imports (flash, pv3d,greensock)
- Mise en place de l'ensemble des constantes et variables du projet
- Mise en place de la méthode static create (récupération des paramètres)
- Initialisation du projet et lancement des fonctions mères
- Initialisation de la partie 3d (camera,scene,viewport,etc)
- Initialisation de la partie liée au reflet
- Récupération et mise en place des textures
- Initialisation du menu et mise en place du reflet
- Mise en place des écouteurs et simulation d'essais du cube3D
- Gestion de l'activation et de la désactivation du menu
- Création de l'animation du cube : déplacement, vitesse, flou, rotation, etc
- Mise en place du render
- Gestion de la navigation en fonction de la face cliqué
IV°)Correction
- Un bref passage par le panneau de sortie et d'erreur de compilation.
- Méthode de débogage
V°)Les fichiers sources:
- Fichier Fla pour flash CS5, CS4
- Fichier swf pour flash CS5, CS4
- Un page d'images pour créer votre menu
- un pack de font (celles utilisées dans le tuto)
- Le framework papervision3D près à être utilisé
Jetez un oeil à ces autres tuto Flash CS4
Gérer un modèle 3D dans…
Dans ce tuto Flash CS4 et ActionScript 3 vous apprendrez à…
Jeu Merlin FLash 3D
Ce tuto ActionScript 3 en vidéo, d'un niveau intermédiaire,…
Champ de vidéos 3D
Dans ce tuto Actionscript 3 en vidéo, vous allez apprendre…
Répertoire téléphonique…
Dans ce tuto Flash en vidéo, vous allez apprendre à développer…
Créez un site flash de type…
Apprenez dans cette formation à réaliser un site complet en…
Website xml avec utilisation…
Dans ce tutoriel, nous allons créer un website dynamique qui…
Créer un website avec gestion…
Dans ce tutoriel nous allons créer ensemble un mini site internet…
Débutez facilement avec Flash…
Cette vidéo de découverte va vous permettre de découvrir…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Flash CS4 de 1 heure 56 minutes est proposée dans une résolution plus grande que l’extrait suivant :
artkabis
, formateur certifié
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.
En savoir plus sur artkabis
Témoignage des clients de artkabis
Merci pour tous tes tutoriels. Ils sont super agréables et bien conçus. Grâce à toi j'ai appris de nouvelles choses.
Très bien permet d'apprendre flash rapidement et efficacement
En un mot...stupéfiant ! Merci beaucoup :)
Supers tuto, plein de bonnes astuces, merci :)
Artkabis, vraiment toi tu déchires grave... J'aime vraiment tes tuto et on voit de suite ta passion pour le flash, j'aimerai vraiment avoir 5% de tes connaissances... Bonne continuation à toi...
Lire les autres témoignages
D'autres tuto de artkabis
Reflet lumineux sur typo
Dans ce tuto Flash, nous allons apprendre à créer des effets lumineux sur une typo,…
Preloader Flash multimédia
Apprenez à réaliser un preloader Flash multimédia, dans ce tuto Flash ActionScript…
Graphique de données dynamiques
Dans ce tuto Flash de plus d'1H30 nous verrons comment créer un graphique de données…
Un drapeau flottant paramètrable en as3
Dans cette formation Flash de plus de 1h40 nous allons apprendre à réaliser un drapeau…
Notes attribuées par les utilisateurs (2 votes)
Les avis / Questions des utilisateurs (3)
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 d’une durée de 1 heure 56 minutes a été acheté 44 fois et a reçu une note moyenne de 4/5.
Ce tuto a été publié le 25 juillet 2010 par artkabis, formateur certifié par Tuto.com, ayant reçu une note moyenne de 3,9/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Flash 3d.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto video 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.
Choisissez parmi 24011 tuto classés dans nos 201 logiciels ou langages informatiques.
(a acheté ce tuto - 06 juin 2011)
" Bonjour,
J'ai suivi le tutoriel et je l'ai trouvé très bien fait, cela ma beaucoup aidé et je l'ai fini sans aucun problème alors que je suis un vrai débutant puisque c'est la première chose que j'ai faite sur flash.
Par contre, je voulais savoir, si cela été possible, pourrait-on par exemple changer la couleur du fond de l'image lorsque l'on clique sur un des coté du cube au lieu que cela nous envoie vers un nouvelle url.
J'espère avoir une réponse rapidement, cela m'aiderais beaucoup.
Merci d'avance.
Dany. "
(auteur de ce tuto - 18 août 2010)
" alors à la base ce problème était itinérant à l'application, mais pour régler ceci, j'ai ajouté une partie (présente dans cette formation), tu peux la retrouver dans la fonction __initListener();
>>>>>>
_stage.dispatchEvent( new MouseEvent('mouseDown'));
import flash.utils.setTimeout;
setTimeout(function(){_stage.dispatchEvent( new MouseEvent('mouseUp'));},150);
Regardes si tu as bien ces éléments dans cette fonction. Sinon tu peux aussi réduire le délai concernant l'activation et l'affichage du cube en modifiant la valeur liée au setTimeout, essaies par exemple 50 au lieu des 150 utilisé dans le projet.
Voilà, personnellement je n'ai pas ce problème, c'est donc pour cette raison que je pense que tu as dû oublié un élément dans ton code, ou alors il y a eu une petite modif que tu n'as pas encore détecté. En tout cas tu as désormais la possibilité de cibler la portion de code qui gère l'affichage du cube dès l'initialisation du projet.
Si vraiment le problème persistait, n'hésites surtout pas à revenir ici, je prendrais le temps de trouver une solution.
Cordialement, Artkabis. "
(a acheté ce tuto - 18 août 2010)
" Bonjour
Le tuto est super comme d'habitude, ce n'est pas le premier d'Artkabis que je prends, mais j'ai un petit soucis: une fois mes modification faites, et mon animation placé sur ma page html, à l'ouverture de cette page, le cube ne s'affiche pas instantanément, il faut faire un click de la souris pour que le cube apparaisse...?
J'aimerais savoir si c'est normal, ou alors aurais-je oublié quelquechose?
Cordialement David "