Dans cette formation vidéo d'un peu plus d'une heure, vous apprendrez à réaliser un Carrousel flash en utilisant le langage de programmation : ActionScript 3.

Ce module intéractif vous permettre à partir d'un fichier XML de mettre en avant les dernières nouveautés de votre site ou les produits phares de votre boutique e-commerce.

La formation est livrée avec le fichier sources Flash (.fla)

Sommaire :

  • Présentation du module
  • Création des éléments graphiques dans flash
  • Lecture d'un fichier XML distant depuis flash
  • Mise en place de la navigation à partir du XML
  • Mise en place des comportements sur les boutons et de l'affichage des news
  • Ajout d'effet pour rendre le système plus élégant
  • Mise en place d'un défilement automatique des éléments
  • Mise en place d'une redirection lors d'un clic sur un produit
  • Création d'un loader pour le XML
  • Lecture dans une base de donnée
  • Génération d'un fichier XML Automatique à partir de la base de donnée
Le Résultat


Jetez un oeil à ces autres tuto 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…

Texte Flash en 3DTexte Flash en 3D
Nous verrons dans ce tuto Flash / Actionscript 3 comment faire…

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

Preloader Flash multimédiaPreloader Flash multimédia…
Apprenez à réaliser un preloader Flash multimédia, dans ce…

 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…

Galerie 3d interactive avec FlashGalerie 3d interactive avec…
Dans ce tutorial Flash ActionScript de près d'une heure, nous…

Formation ActionScript 3 Formation ActionScript 3
Formation ActionScript en vidéo pour débutants. Près de 7h…

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

Partagez cet extrait

Lien vers cet extrait : Embed code :

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

Je suis Jonathan Boyer, Je suis passionné par le web et le multimédia et j’ai commencé à apprendre le graphisme et le développement Web par moi même il y à 4 ans. J’ai maintenant décidé de passer de l’autre côté de la barrière, et d’aider les personnes qui comme moi, veulent se former sur internet.

La moyenne de ses notes :  

Devenir fan

Voir son profil


 

Tuto du même auteur

Création d'un formulaire de contact en PHPCréation d'un formulaire de contact en PHP
Voici un tutoriel vidéo consacré à la création d'un formulaire de contact utilisant la fonction…

Créer un blog avec cakePHPCréer un blog avec cakePHP
Dans ce tutoriel vous verrez comment utiliser le framework MVC : cakePHP pour créer un blog. L'administration…

Spot HPSpot HP
 Voici un tutoriel vidéo où nous verrons comment intégrer des éléments 2D (textes et images) afin…

Créer un site web : IntégrationCréer un site web : Intégration
Dans ce tutoriel vidéo vous apprendrez à utiliser le xHTML et le CSSpour coder une page Web à partir…

voir tous les tuto de Grafikart

Notes attribuées par les utilisateurs

Note moyenne des utilisateurs :  


 

Les avis / Questions des utilisateurs

Par Grafikart
(auteur de ce tuto)

" Si vous avez des questions ou des problèmes à propos de ce tutoriel n'hésitez pas ;) "

Par gondolfy
(a acheté le tuto)

" Je vous signale que le fichier XML ne correspond pas au code : dans xml l'élément s'appelle "item" et dans le code "tutoriels"

Salutations "

Par elstefano
(a acheté le tuto)

" Peux-tu être plus précis STP, ? C'est que dans mon cas le XML ne marche pas non plus :( "

Par elstefano
(a acheté le tuto)

" Bonjour,
Sans m'occuper du fichier.fla également fourni, je réssaye à nouveau, je suis votre tuto à la lettre mais ça ne marche pas... en nombre d'éléments tutoriels dans l'arbre XML, j'ai 0 au lieu de 5 quand je fais le test avec Trace....
Je comprend pas, j'ai eu moins de problèmes à mettre ne place le carrousel d'Artkabis, pourtant pas facile à créer aussi quand on est novice...
Merci de m'apporter votre aide SVP, j'ai besoin de ce carousel Flash en AS3 également. "

Par philippebiaut
(a acheté le tuto)

" où trouve t-on les fichier sources? une fois la formation acheter? "

Par nicolasà voté :
(Membre de l'équipe)

" Philippe>il suffit d'aller sur ton compte, dans la rubrique "vidéos achetées" et de chercher ce tutoriel dans la liste. Un petit clic sur télécharger et là tu accèderas aux fichiers sources et à la vidéo bien entendu. Bonne formation! "

Par Creamasterà voté :
(a acheté le tuto)

" Bravo pour ce new tuto je te suit depuis pas mal de temps je ne suis jamais déçus, Avis a tous ce tuto vaut vraiment le coup Soutenez grafikart .... "

Par Creamasterà voté :
(a acheté le tuto)

" Par contre je relance la question...
où trouve t-on les fichier sources? une fois la formation acheter? quand je télécharge je n'accede qu'a la vidéo et non le dossier sources "

Par Grafikart
(auteur de ce tuto)

" >>Mon Compte

Sur la droite dans Mes vidéo achetées
>>Toutes les vidéos
>>Télécharger sur le lien de ce tutoriel
>>En bas tu as la vidéo mais aussi les sources
"

Par Xavier83
(a acheté le tuto)

" J'ai réussi à télécharger les fichier, mais mon logiciel flash CS3 ne veut pas les ouvrir "Format de fichier inattendu"... "

Par Grafikart
(auteur de ce tuto)

" Normalement dans mon zip il y a 2 version du .fla dont une pour CS3. C'est celle de CS3 qui bug ? "

Par cha4cha
(a acheté le tuto)

" Bonjour, j'ai le même problème que Xavier : j'ai voulu ouvrir le fla version CSS3 mais il ne s'ouvre pas, j'ai également "format de fichier non attendu"...
Merci de me tenir au courant le plus rapidement possible! !
Car c'est assez urgent!!! "

Par Grafikart
(auteur de ce tuto)

" Le problème a été réglé et j'ai modifié les fichiers fournis, normalement cela devrait aussi marcher pour Xavier83 "

Par wiloo
(Membre de l'équipe)

" sympa le tuto ;) "

Par benjhug
(a acheté le tuto)

" Bonsoir Je viens de télécharger ce tuto fort sympa, mais je rencontre le même problème que Xavier83 et xha4cha... A savoir que quand je lance le le fla nommé "carousel" ou même "carousel CS3" il me dit "format de fichier non attendu" ...

Merci d'avance. "

Par Grafikart
(auteur de ce tuto)

" Vous utilisez quelle version de flash ?
Car les fichiers ont été changé pour justement fonctionner sur la CS3. "

Par cerise
(a acheté le tuto)

" Bonjour
Un tout beau tuto bien expliqué et très PRO
Jamais déçus avec toi Grafickart
Un énorme tankiouuuu
cerise
"

Par Darkwing
(a acheté le tuto)

" Aller, je me laisse bercer par la vague.
C'est le deuxieme tutoriel que je te prends Grafikart.

Le premier était parfait (Formulaire de contact PHP).
Je pense que celui ci sera aussi à la hauteur :).

Bonne continuation à toi. "

Par rlk44à voté :
(a acheté le tuto)

" salut, merci beaucoup pour tes tutos, je voulais savoir, j'apprend la programmation web tout seul avec le net et ton site est vraiment super c'est pour cela j'ai acheter ton tuto , tu fait du super boulot mais moi et la programmation objet j'ai un peu de mal si tu pourrai publier un tuto pour les debutant en poo ... tu aurais déjà un acheteur :D Aller merci encore et si tu as le courage pour un tuto pour les bases de la poo je pensse que sa marcherai bien ! :) merci encore a toi et beau travail. "

Par thom
(a acheté le tuto)

" Superbe tutorials merci beaucoup, tres pro, tres bien explique.

Encore bravo a toi "

Par alone92
(a acheté le tuto)

" J'ai un petit souci, je m'explique :
Mon fichier un fois realisé, j'ai voulu realiser une sorte de bordure en .png de la taille de mon animation, avec un contenu vide. Le probleme est maintenant, que l'interieur de mon animation n'est plus cliquable, du a ce fichier png venant ce placer par dessus l'ensemble.

Auriez vous une solution? "

Par Grafikart
(auteur de ce tuto)

" Si ce n'est pas déja fait met ton PNG dans un clip que tu va nommer comme tu veux. Ensuite on va désactiver le clic sur le PNG :

ton_clip_png.mouseEnabled = false;
ton_clip_png.mouseChildren = false; "

Par alone92
(a acheté le tuto)

" Super, sa marche nikel!

Seconde question, surment un pe plus compliqué
Comment faire en sorte q'une image, devienne un masque sur l'ensemble de l'animation,

Autrement dit, commen faire en sorte qu'une image devienne transparente, et entraine tout les element se trouvant dessous a l'etre aussi

exemple : une page html de fond noir, dans l'animation un calque blanc, et au centre, un cercle qui sert de cache afin d'afficher le fond noir du html. "

Par Grafikart
(auteur de ce tuto)

" Tu parle d'un mettre un cache sur toute l'animation ?
Si c'est le cas il faudrait mettre la totalité des éléments du carrousel dans un clip que tu cache avec le système de masque.

Au lieu de rajouter à la scène tu rajoute dans le clip
mon_clip.addChild(...)

J'espère que ça te permettra de faire ce que tu veux :) "

Par alone92
(a acheté le tuto)

" Cette technique fonctionne parfaitement :-) "

Par alone92
(a acheté le tuto)

" J'ai juste un dernier petit soucis, j'utilise la methode swfobject pr importer mon animation dans ma page, cependant, le wmode="transparent" ne veut pas fonctionner, alors qu'en l'utilisant sur un "embed" elle fonctionne parfaitement, auriez vous une solution? "

Par Grafikart
(auteur de ce tuto)

" Je te donne ma façon de faire je pense que tu saura comprendre facilement :

var flashvars = {};
var params = {};
params.wmode = "transparent";
params.allowScriptAccess = "always";
swfobject.embedSWF("/flash/portfolio/portfolio.swf", "portfolio", "100%", "100%", "10.0.0", "/js/swfobject/expressInstall.swf",flashvars,params);

Adapte ça a tes besoins :) "

Par Dearth
(a acheté le tuto)

" j'ai une petite question

-est ce que dans ton tutoriel complet tu reprend depuis le début ? cet à dire depuis le debut de ce tutoriel ?
-et sur weecast si je l'achete je pourrai le revoir autant de fois que je veux ?

voilà j'attend une réponce merci beaucoup :D "

Par Grafikart
(auteur de ce tuto)

" Salut,

- Ce tutoriel contient la totalité de la création du carrousel, de l'ouverture de flash à la finalisation

- Sur Weecast tu peux voir la vidéo un nombre infinie de fois. Seul contrainte : Le lien pour télécharger la vidéo n'est valable qu'un certain temps, mais une fois la vidéo télécharger tu peux voir sans limite.

Si tu as d'autres question n'hésite pas "

Par Dearth
(a acheté le tuto)

" Merci beaucoup je vais acheter de ce pas la video :) "

Par Dearth
(a acheté le tuto)

" J'ai une petite question : dans le zip il y a plusieur Carousel.flv
Carousel , Carousel 2 , Carousel cs3 mais quel différence ont ils
"

Par Grafikart
(auteur de ce tuto)

" Carousel.fla est le fichier source classique,
Carousel CS3.fla est le fichier source pour flash CS3

Les autres fichiers j'en ai pas souvenir... Donc tu peux t'en passer. "

Par Dearth
(a acheté le tuto)

" ok merci beaucoup :) "

Par alone92
(a acheté le tuto)

" Hello! j'ai acheté ce tutoriel, et m'en suis servi a bon escient,
je voulais donc vous faire partager a tous mon nouveau magasine web que j'inaugure dans très peu de temps (vous etes donc des visiteurs VIP lol)

http://www.cyclonesmag.fr/

Je vous invite a aller y faire un tour, et puis me dire ce que vous en avez pensé, tant au niveau du carrousel que de son integration au sein de site.
merci "

Par fabienc1
(a acheté le tuto)

" Bonjour,
Merci pour ce tuto! Je l'ai visionné en entier avant de commencer.

Alors deux choses.

a) Je suis bloqué au tout début du tuto, où la fonction trace ne remonte rien du tout!!

b) L'url du xml de démo ne dispose plus des mêmes balises. Dans le tuto, nous faisons appelle à la balise <tutoriel>, alors que le xml se trouvant à l'adresse http://grafikart.com/tutoriels/xml renvoi une balise <elem>

Je suis bien en AS3, mais je n'arrive même pas à remonter mon fichier xml dans l'élément sortie de FLASH CS3.

Quelqu'un aurait-il une idée pour m'aider à avancer.

Cordialement,

Fabien "

Par fabienc1
(a acheté le tuto)

" j'ai trouvé, en relisant le code 10 fois je me suis rendu compte que j'avais mis un : au lieu du .
Chui trop naze
+ "

Par carmi
(a acheté le tuto)

" Bonjour,

Bravo pour ce tuto qui m'initie au flash! Un peu compliqué pour un premier mais j'ai saisis le principal.
Pouvez vous m'expliquer comment placer mon bloc de numéro (la pagination) a droite, de façon dynamique, c'est a dire que si mon projet change de taille, ma pagination est toujours a droite.

Merci! "

Par albus2010
(a acheté le tuto)

" Bonjour,
J'ai acheté cette vidéo pensant avoir une formation expliquant le fonctionnement d'un carrousel Flash... c'est très intéressant, mais aucun carrousel dans cette formation :-(( J'apprécie beaucoup le travail de l'auteur, mais le titre induit à l'erreur. Ce n'est pas un carrousel mais un système de mise à jour de contenu dynamique via un XML. J'aurai souhaité une formation présentant des vignettes tournant autour d'un axe, commandées par le mouvement de la souris et permettant au clic, d'afficher une fiche détaillée présentant la vignette zoomée et divers infos... (utilisant le même système de chargement dynamique via XML...).
Bref, si vous avez à votre connaissance un tuto pour flash CS3, je serai très intéressé. C'est urgent !!! ;-)
Merci "

Par nicolas67
(a acheté le tuto)

" Bonjour,
je n'ai aucune connaissance en CS3 et me lance dans ce tuto en suivant à la lettre les indications. Pour créer le bouton pas de problème, par contre quand je commence l'actionscript et que je compile à la première étape j'ai déjà ce message d'erreur 1084: Erreur de syntaxe : identifier est attendu devant leftparen. "

Par Neomcdnà voté :
(a acheté le tuto)

" Bonjour Nicolas,

Tu as du te trompé avec { [ ou (.
Vérifies tes ouvertures et tes fermetures : une erreur s'est glissée.

Merci à toi Grafikart : j'ai rêvé de ce tuto, tu l'as fait. Je codais un peu en AS2. Le passage en AS3 me paraissait insurmontable pour faire cet élément; c'est chose faite merci beaucoup...

Attention, par rapport au tuto le nom de la balise principale du XML a changé <elem> au lieu de <tutoriel>.

merci encore!
"

Par shedskin
(a acheté le tuto)

" , "

Par elstefano
(a acheté le tuto)

" Bizarre ce tuto :
A peine acheté (c'est mon premier), je crée un nouveau doc flash et message d'erreur au niveau du XML quand on teste l'animation...
Du coup, je décide de prendre les fichiers sources.fla histoire de voir ce qu'il se passe au final, je teste l'animation et voilà ce qu'il m'indique, DES MESSAGES D'ERREUR :
TypeError: Error #1010: Un terme n'est pas défini et n'a pas de propriété.
at carouselCS3_fla::MainTimeline/XMLLoaded()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

Pour des fichiers sources, j'ai connu mieux (on peut pas vraiment parler de fichiers natifs) et surtout d'autres fichiers.fla déjà téléchargés et complets, eux, vu que là on est sur un service payant quand-même...

Je pense qu'il aurait été utiles de joindre des images, même factices histoire de voir vraiment une animation grâce à vos fichiers sources, parce que là, on ne voit rien... !!!

Je sais que je débute en AS3 aussi, mais bon, à ce moment-là, précisez que ce tuto s'adresse à des utilisateurs confirmés, et non juste à des initiés comme moi :(

Voilà, merci quand même mais je pense que cette animation super utile pourtant risque d'avoir bien du mal à voir le jour sur mon site .....
A MOINS QU'UNE MAJ SE FASSE PROCHAINEMENT, SVP ??

"

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

" salut j'ai suivi le tuto mais j'ai un problème...
j'ai loadé le swf obtenu dans le fla de mon site mais l'animation est beaucoup plus lente sur le swf du site qui intègre le swf du carrousel et lorsque je bouge ma souris en continu sur mon site les numero défilent mais les photos ne sont pas visibles

constatez http://noel.laporta.free.fr/siteCS4.html page bains ou bureaux

alors que l'animation swf toute seule marche très bien http://noel.laporta.free.fr/bainsdiapoboutonrond.swf "

 

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

50 pourcent

Ce tuto en résumé ...

Ce tuto ActionScript 3 d’une durée de 1 heure 4 minutes a été acheté plus de 250 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié par Grafikart, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,5/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 !