Tuto publié par Dans ce tutoriel de plus d'1h30, nous allons créer un véritable menu coulissant, avec gestion des titres, des liens et des descriptions via un fichier XML externe. Ce menu est codé en ActionScript 3 (AS3) et l'ensemble du script est contenu dans une classe externe.
Pour ce qui est de la transition des boutons, nous utiliserons la classe TweenLite de GreenSock. Je vous rappelle que vous pouvez visionner gratuitement un tutorial vidéo sur l'utilisation de cette fameuse classe
Ce que vous allez apprendre dans cette formation:Création de l'interface:
- Mise en place des boutons coulissants.
- Gestion et récupération des données utilisées dans l'application.
- Explications de la méthode utilisée.
- Mise en place des éléments (titres,définitions et liens)
- Structure de la classe (package, classe document, constructeur).
- Mise en place des variables et constantes du projet
- Initialisation de l'application.
- Gestion des données XML (récupération des éléments textuels du projet).
- Gestion des erreurs de chargements XML (avancé).
- Mise en place de la structure coulissante grâce à l'utilisation de la classe TweenLite.
- Liaison avancé des urls du fichier XML avec l'application.(récupération des id)
Voici ce que vous obtiendrez à la fin de ce tutoriel:
Mettre en place le reflet du menu:
Dans ce tutoriel, je ne vous ai pas proposé la prise en charge du reflet du menu, mais sachez que vous pouvez vous aussi utiliser la classe "Reflect " pour mettre en place le reflet, pour cela, vous devez simplement télécharger la classe proposé par Adobe à cette endroit: Classe Reflect .
Pour la mettre en place, vous devrez regrouper tous les éléments du menu dans un clip que vous nommerez "menu" (en nom d'occurrence) ensuite dans votre classe principale, il vous suffira de faire ceci:
Ajout de l'import:
import com.pixelfumes.reflect.Reflect;
Puis d'ajouter cette ligne dans le constructeur:
var reflet:Reflect = new Reflect({mc:this.menu, alpha:80, ratio:110, distance:0, updateTime:0, reflectionDropoff:1});
Jetez un oeil à ces autres tuto Flash CS4, ActionScript 3
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, ActionScript 3 de 1 heure 33 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
Détourer un personnage (technique avancée)
Dans ce tutorial vidéo nous allons voir comment il est possible de détourer un personnage…
Galerie automatique xml avec gestion du défilement
Dans ce tutoriel, nous allons créer ensemble une galerie automatique dynamique en ActionScript…
Créer un bouton de donation paypal avec flash (as3)
Dans ce tutoriel vidéo, nous allons voir comment il est possible de créer un bouton…
TweenLite et TweenMax Installation et utilisation (AS3)
Dans ce tutoriel vidéo, nous allons apprendre à installer et utiliser la bibliothèque…
Notes attribuées par les utilisateurs (2 votes)
Les avis / Questions des utilisateurs (17)
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 33 minutes a été acheté 62 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 12 mai 2009 par artkabis, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Flash Menu.
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 24008 tuto classés dans nos 201 logiciels ou langages informatiques.
(auteur de ce tuto - 19 août 2010)
" Ok donc tu as bien les deux parties. C'est vrais que le second tuto complète vraiment le premier, le rendu des deux formations permet d'avoir une application plutôt intéressante et puis certains éléments utilisés peuvent être réutilisés sans problème dans d'autre projets.
Voilà alors bon tuto à toi et si tu as un soucis, n'hésites pas à le poster ici. "
(a acheté ce tuto - 19 août 2010)
" c'est bon Art-K, j'ai trouvé.. J'avais mal cherché ; ) "
(auteur de ce tuto - 23 juillet 2010)
" Oui bien sûr, je t'envoie un mail, dès que j'ai envoyé la vidéo en validation.
À bientôt ;) "
(a acheté ce tuto - 23 juillet 2010)
" oui ok pas de soucis:
ps: pourras-tu me prévenir par mail sibuno@gmail.com
merci encore "
(auteur de ce tuto - 23 juillet 2010)
" Re alors le mieux reste de commencer par cette formation (qui est déjà assez longue), puis je te prépare l'add-on dès aujourd'hui, elle sera prête dans quelques jours, comme je te l'ai dis, elle ne dépassera pas 2 crédits, donc tu pourras améliorer la première application facilement puisque tu aura déjà assimilé toute la première partie. Sa te va comme cela ? "
(a acheté ce tuto - 23 juillet 2010)
" salut, oui bien sur, je posais la question justement avant d'acheter pour savoir si cela pouvait rpépondre à mes besoins.
donc je suis ok pour acheter le tuto entier avec modif, dis moi comment je procède, j'achète celui là puis ensuite l'addon? ou tout d'un coup? "
(auteur de ce tuto - 23 juillet 2010)
" je viens de me rendre compte que tu n'as pas encore acheté cette formation, il est donc peut être prématuré de te proposer maintenant cette add-on...
Sorry "
(auteur de ce tuto - 23 juillet 2010)
" Alors je viens de plancher sur la gestion du menu en fonction de la page visité et après pas mal de temps à mettre au point le nouveau code j'ai réussi à faire ceci : http://artkab.free.fr//animation/menu_coulissant_xml/page1.html
Le problème, c'est que vu la quantité de modifications (utilisation de la bibliothèque swfObject et de flashvars, création du fonction gérant l'état over en fonction de la flashvar récupéré et ajout de l'état out pour que le menu se referme sur le bouton lié à la page ouverte), je me vois mal t'écrire un roman de 4 pages, d'une je n'aurais pas le temps de le faire et je ne suis pas sur que ses explications puisse être assez claires pour que tu puisses reproduire cette fonctionnalité sur le menu.
Alors je ne sais pas si ceci t'intéresse, mais je peux te préparer un tuto (une add-on du menu), je pense que c'est plus simple car il y a pas mal de choses qu'il faut modifier et d'autres qu'il m'a fallut ajouter. Alors bien entendu si ce tuto voit le jour le prix ne dépassera pas les 2 crédits "
(a acheté ce tuto - 23 juillet 2010)
" pffff en plus j'ai déjà eu ce pb...... je suis nul
pour ma question sur le positionnement du menu, donc peux tu me confirmer que l'état du menu reste sur la page voulue ou se remet toujours à 1?
merci encore "
(auteur de ce tuto - 23 juillet 2010)
" Re, alors tu parles de la page ou l'exemple de l'application est proposée (dans la description, ce lien: <a href="http://artkab.free.fr//tuto/menu_elastique_xml/menu_elastique_xml.html">Menu_coulissant_xml</a> , si oui, pour moi c'est ok et j'utilise aussi Mozilla, à mon avis tu dois avoir un problème avec la version de ton flash player, ou alors avec le module complémentaire. "
(a acheté ce tuto - 23 juillet 2010)
" exactement, pour que le visiteur sache où il est
il doit y avoir un problème sur ta page de démo, elle est vide....
donc en fait c'est bizarre, je ne vois pas ton menu sous firefox ni sous ie mais sous chrome oui.... "
(auteur de ce tuto - 22 juillet 2010)
" En fait, tu veux savoir si en fonction de la page visité, le menu garde en mémoire le bon bouton ( celui ouvert en fonction de la page visité), c'est bien ça ? "
(a acheté ce tuto - 22 juillet 2010)
" Bonjour Artkabis, j'ai une petite question, est-ce que quand on clic sur le menu 3 par exemple, le menu reste sur la case 3 ou il revient à chaque fois sur le menu 1?
c'est pour savoir si on voit bien où l'on sur le site, merci d'avance "
(auteur de ce tuto - 18 avril 2010)
" Bonjour, pourrais tu donner un peu plus de détail sur ce disfonctionnement, un message d'erreur par exemple. Cordialement, Artkabis "
(a acheté ce tuto - 18 avril 2010)
" Bonjour,
Je n'arrive pas faire fonctionner les pièces jointes merci de me donner une réponse.
Cordialement
AJCQ "
(auteur de ce tuto - 06 avril 2010)
" Bonjour, alors n'étant pas chez moi, je n'ai pas les source du tuto. Cependant, je pense que l'application utilise une classe externe pour fonctionner, alors es-tu bien certain d'avoir relié la classe principale avec l'application depuis le champ "classe de document" du panneau "propriétés" ? En tout cas, ce qui est sûr, c'est que tu as fais un oublie quelque parts, pour moi la liaison du code et de l'application n'a pas été correctement faite. Cordialement, Artkabis. "
(a acheté ce tuto - 04 avril 2010)
" Super tuto !
Cependant arrivé à la fin je fait un petit ctrl+entrée et mon menu apparaît sans aucune animation (mis à part l'icône qui clignote).
Pourtant j'ai tout suivi à la lettre.
J'ai aucune erreur de compilation. Je ne comprends vraiment pas. J'aurais besoin d'un peu d'aide.
merci "