Dans ce tutoriel, nous allons créer ensemble une galerie automatique dynamique en ActionScript 3. Il faut savoir que cette galerie est paramétrable depuis un simple fichier XML où sont regroupés le chemin des images ainsi que la description de chacune d'entre elles. Donc, si vous souhaitez ajouter, supprimer, modifier des images et des commentaires par la même occasion, vous pourrez le faire sans pour autant réouvrir où recompiler les fichiers sources.
Le petit plus de cette application, c'est la possibilité de contrôler la durée de défilement entre chaque image tout en gardant une interface sobre et dynamique. Le menu se déploie dynamiquement via l'utilisation de la classe TweenMax .
Récapitulatif du tutoriel:Création de l'interface
Création de la partie information pour:
- La description de l'image en cours.
- Le nombres total d'image (+ n° de l'image en cours)
- Le pourcentage de chargement en cours
Création du menu dynamique:
- création de la structure
- création des états des boutons de réglage (lent, normal, rapide)
Création du fichier xml:
- Gestion du chargement des images via xml.
- Gestion des descriptions des images via xml.
Création de la classe principale:
- Création des appels XML
- Mise en place du codage lié au menu (élastique)
- Codage des actions sur les boutons interne du menu.
- Utilisation de la classe TweenMax (mise en place des images et du menu)
Tester l'application finale:
Voici un aperçu de la galerie automatique
Jettez 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…
Débutez facilement avec Flash…
Cette vidéo de découverte va vous permettre de découvrir…
Créer un website avec gestion…
Dans ce tutoriel nous allons créer ensemble un mini site internet…
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 39 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
![]()
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...
![]()
Merci beaucoup pour ce tuto vraiment bien réalisé !
![]()
Super formateur et des tuto très bien expliqués !
Lire les autres témoignages
D'autres tuto de artkabis
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…
Créer un website avec gestion xml en as3
Dans ce tutoriel nous allons créer ensemble un mini site internet en ActionScript 3.…
Un vrai effet Matrix (AS3)
Dans ce tutoriel, nous allons nous amuser à créer un effet à la Matrix, pour ce faire,…
Notes attribuées par les utilisateurs (3 votes)
Les avis / Questions des utilisateurs (18)
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 39 minutes a été acheté 37 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 10 mai 2009 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 Application.
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.














(auteur de ce tuto - 27 janvier 2010)
" Bon et bien je vais t'envoyer ceci via un autre moyen. "
(a acheté ce tuto - 26 janvier 2010)
" toujours aucune trace de ton mail, désolé je te fournis une autre adresse mail au cas ou ça vienne de moi : roure.yves@numericable.fr "
(auteur de ce tuto - 26 janvier 2010)
" Bizarre, je l'ai pourtant envoyé il y a quelques jours, je te renvoie ceci une seconde fois, c'est peut être mon logiciel qui bug... "
(a acheté ce tuto - 26 janvier 2010)
" Désolé d'encore te déranger je voulais savoir si tu m'avais envoyé le fichier .as pour les boutons de la galeriecar si c'est le cas je n'ai rien reçue.
Cordialement "
(a acheté ce tuto - 22 janvier 2010)
" yvoulefou@msn.com Merci encore pour tes tuto et ton aide. Maintenant je passe au lecteur mp3. "
(auteur de ce tuto - 22 janvier 2010)
" Je vais t'envoyer mon projet avec la nouvelle version, je pense que c'est plus simple ainsi : peux-tu me donner ton adresse mail ?
"
(a acheté ce tuto - 21 janvier 2010)
" Je te fais parvenir le lien http://dl.free.fr/obtKarYYx. Encore Merci !!!! "
(auteur de ce tuto - 21 janvier 2010)
" Bonjour comme tel, je ne peux pas vraiment t'aider, envoies donc ton fichier via http:/dl.free.fr, je pense que ceci sera plus simple pour moi. J'ai actuellement pas mal de boulot alors si je peux gagner du temps c'est cool. "
(a acheté ce tuto - 21 janvier 2010)
" les boutons ne marche pas j'obtiens une erreur rightbrace est attendu devant navigationImages. Je te fais parvenir mon code pour que tu me dise si tout est ok. 1) private const TEMPS_A:int = 1;
private var contActuel:MovieClip;
private var imageActuelle:int = -1;
private var nbImages:int;
private var timerGalerie:Timer;
public var attente:Number;
private var conteneur1:MovieClip;
private var conteneur2:MovieClip;
private var loaderGalerie:Loader;
private var urlXML:String = "XML/galerie.xml";
private var xmlLoader:URLLoader;
private var xml:XML;
private var comptV:uint=0;
private var sens:String = "S";
2)vitesse.onglet.buttonMode = true;
addEventListener("mouseDown",clicVitesse);
addEventListener("mouseOver",overVitesse);
addEventListener("mouseOut",outVitesse);
btSuivant.addEventListener('click', navSuivante);
btPrecedent.addEventListener('click', navPrecedente);
3)private function navigationImages(e:Event):void {
if(timerGalerie.running)timerGalerie.stop();
if(imageActuelle + 1 < nbImages)imageActuelle++;
else imageActuelle = 0;
if(contActuel == conteneur2)contActuel = conteneur1;
else contActuel = conteneur2;
if(sens === "S");
else if(timerGalerie.running)timerGalerie.stop();
if (imageActuelle > 0)imageActuelle--;
else imageActuelle = nbImages;
if(contActuel == conteneur2)contActuel = conteneur1;
else contActuel = conteneur2;
4)private function navSuivante(me:MouseEvent):void {
sens = 'S' navigationImages(null);
}
private function navPrecedente(me:MouseEvent):void {
sens = 'P' navigationImages(null);
}
Voila si tu peux éclairer ma lanterne. Merci d'avance "
(a acheté ce tuto - 21 janvier 2010)
" c'est bon tout est rentré dans l'ordre merci quand même j'ai réussi à me dépatouillé tout seul, pour les autres erreur il s'agissait de simple faute de frappe. Je vais maintenant essayé d'intégrer les boutons suivant et précèdent. Cependant j'aurais vioulu savoir comment faire pour intégrer deux galerie dans un seul site, c'est surtout au niveaux de la classe que je sais pas trop comment faire car je voudrais deux galerie mais avec des transitions différentes et des images différentes, pour les images il me suffira de rajouter un autre fichier XML mais pour la suite je ne sais pas trop. Si éventuellement tu peux m'aider, merci à toi. "
(auteur de ce tuto - 21 janvier 2010)
" Salut, alors pour la classe TweenMax, la seule différence se situe au niveau de l'import, pour l'utilisation rien n'a changé !!!
Sinon pour tes autres erreurs, tu peux toujours envoyer ton fichier via http://dl.free.fr et m'envoyer le lien vers ton fichier. Ensuite j'essayerais de t'aider pour la correction. "
(a acheté ce tuto - 20 janvier 2010)
" salut, j'ai eu pas mal de problèmes du au classe tweenmax qui sont redéfini sur com.greensock pour l'import. d'autre part j'ai pas mal d'erreur et je n'arrive pas a faire fonctionner la galerie l'onglet d'avance rapide clignote et c'est tout.
Cordialemen "
(a acheté ce tuto - 13 janvier 2010)
" Un grand merci pour ta réactivité, je m'occupe de tout cela dans la semaine et je te tiendrais au courant de l'évolution de ma programmation, étant débutant en flash je pense tout de même m'en sortir. Encore merci. A bientôt "
(auteur de ce tuto - 12 janvier 2010)
" Re,
Alors comme promis, je reviens avec l'amélioration.
Donc pour mettre en place cette navigation, commence par créer deux nouveau boutons dans ton fichier fla. Le premier sera utilisé pour le retour à l'image précédente et il portera le nom d'occurrence "btPrecedent", le second qu'en à lui portera le nom d'occurrence "btSuivant". Une fois ceci mis en place, ouvre la classe de cette galerie et suis les étapes indiqués ci-dessous:
I°) Créais un nouvelle variable après celle nommé "comptV", comme ceci: var sens:String = "S";
II°)Maintenant il va falloir créer les deux écouteurs de ces deux boutons ainsi que leurs fonctions respectives. Pour les écouteurs, tu devras les placer dans le constructeur (après ceux déclarés pour les boutons de vitesse: clicVitesse, outVitesse, overVitesse), voici donc les deux nouveaux écouteurs à mettre en place:
btSuivant.addEventListener('click', navSuivante);
btPrecedent.addEventListener('click', navPrecedente);
III°) Avant de créer les fonctions reliées à nos écouteurs, il faudra modifier le contenu de notre fonction "navigationImages", en effet il va falloir mettre en place une navigation normale et une autre inversé, pour cela il nous faut délimité les cinq conditions de cette fonction dans une nouvelle condition. place donc les trois if et les deux else dans cette condition : if(sens === "S"){}. Cette condition nous permettra de vérifier le sens de défilement. Maintenant il nous faut gérer le sens inversé, pour cela créais un else à la suite de notre nouveau if et colles y les cinq conditions précédentes, il va bien sûr falloir les modifier pour que le défilement soit inversé. Suis donc ces étapes:
a) pour la première condition, ne modifies rien.
b) pour la seconde condition, modifies les éléments avec ceci : if (imageActuelle > 0)imageActuelle--;
c) pour la troisième condition (le else), imageActuelle doit être égale à nbImages et non à 0.
d) les deux dernières conditions restent similaire aux originaux.
IV°)Voilà alors on peux finaliser l'amélioration en mettant en place les deux fonctions des écouteurs créaient à l'étape II, places toi après la fonction "navigationImages" et mets en place la fonction navSuivante et navPrecedente. Pour la première fonction tu dois avoir ceci :
private function navSuivante(me:MouseEvent):void{
sens = 'S'
navigationImages(null)
}
Pour la seconde fonction ceci :
private function navPrecedente(me:MouseEvent):void{
sens = 'P'
navigationImages(null)
}
Voilà, tu as désormais la possibilité de naviguer entre les images de la galerie et ceci dans les deux sens.
PS: Il est impossible de mettre des sauts de lignes depuis la partie commentaire, je sais que ceci complique la compréhension, mais je n'ai malheureusement pas la possibilité de contourner ce problème. Si vraiment ceci t'empêche de mettre en place l'amélioration, n'hésites pas à en faire part aux staff de weecast, peut être qu'ils pourront résoudre ce problème.
"
(auteur de ce tuto - 12 janvier 2010)
" Bonsoir, alors ceci doit être tout à fait faisable, je vais étudier ça de mon côté et je reviens rapidement vers toi pour te donner les indications qui te permettrons de mettre en place cette nouvelle navigation.
Cordialement, Artkabis "
(a acheté ce tuto - 12 janvier 2010)
" Salut j'ai acheté ton tuto et j'aurais voulu savoir si il était compliqué de rajouter des boutons permettant de revenir sur la photo précédente ou la photo suivante. Encore merci. "
(auteur de ce tuto - 22 mai 2009)
" Et bien, si ce tuto t'a plu, alors c'est le principal. Cela reste le but premier de mes vidéos, donc ça fait toujours plaisir d'avoir de tels commentaires. Bonne continuation !!!
"
(a acheté ce tuto - 22 mai 2009)
" Un tuto bien complet, bien réalisé, même avec des commentaires d'encouragements ! :D
Grâce à toi, j'arrive à faire ma galerie(enfin en partie car je ne fais pas la même mais j'applique ce que tu m'apprends)
Ce qui a été pour moi un peu plus "chaud" était l'approche du XML mais c'est une question de réflexion.
Merci beaucoup pour ce tuto ! "