Tuto publié par Dans ce tuto, nous allons créer une galerie défilante (ou slider) avec gestion du défilement via deux boutons, l'ensemble du chargement est géré depuis un fichier xml, le tout en Flash et ActionScript 3.
Pour optimiser l'affichage de nos images, nous utiliserons le composant UILoader, celui-ci nous permettra de gagner au niveau de la simplicité du codage.
Vous pouvez tester le SLIDER à cette adresse: http://artkabis.com/artkabis/flash/weecast/slider/
Voici ce que comportera notre application:
- Chargement des images optimisés
- Gestion de la vitesse du défilement optimisé
- Design sobre
- Gestion du chargement des images via un fichier xml
- Externalisation du code via une classe as3
- Vitesse bridé pour le défilement maxi et mini
- Modification ultérieur simplifié
Voici ce que nous passerons en revu dans ce tutoriel
I) L'interface:
- Mise en place du design (barre de titre et cadre)
- Création des boutons avec gestion des roll (over et out)
- Mise en place du conteneur des image ainsi que de leur masque
- Pré-importation du composant UILoader
- Création du fichier
- Explication des balises d'encodage
- Explication des balises d'importations (id et src)
- Structuration de la classe Slider
- Importation des classes nécessaires
- Mise en place des variable du projet
- Mise en place du constructeur, initialisation, mise en place des écouteurs
- Gestion du chargement des images (composant, xml)
- Positionnement de l'ensemble des éléments
- Gestion optimisé des erreurs (récupération dynamique d path)
- Gestion du déplacement du slider avec récupération auto des écarts
- Mise en place des actions liés aux boutons optimisés (regroupent des événements et des objets dans une seule et même fonction)
- • Le fichier index.html avec détection du flash player de l'utilisateur
- • Le fichier slider.fla (il comporte le code en procédural fonctionnant sans la classe externe)
- • Le fichier slider.swf (l'application principale compilé)
- • L'image d'aperçu
- • Le dossier contenant l'ensemble des images d'exemple (attention ces image ne sont pas de moi, alors gardes les pour toi)
- • Le dossier XML(il contient l'ensemble des éléments à charger)
- • Le dossier fr (il contient la classe principale de l'application)
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 10 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
Vos contenus adaptés pour l'international (detection auto)
Bonjour à tous, aujourd'hui je vous propose un tutoriel sur la création d'une…
Un curseur personnalisé comme preloader
Dans ce tutoriel, nous allons créer un preloader qui fera office de curseur…
Lecteur de news dynamique
Dans ce tutoriel d'à peu prêt 2 heures, nous allons créer un lecteur de news…
Galerie rotator ( gestion xml des images et descriptions)
Dans ce tutoriel de plus d'1h30, nous allons créer une galerie plutôt "fun",puisqu'elle…
Notes attribuées par les utilisateurs (1 vote)
Les avis / Questions des utilisateurs (19)
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 10 minutes a été acheté 29 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 11 septembre 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.
Choisissez parmi 19892 tuto classés dans nos 192 logiciels ou langages informatiques.
(a acheté ce tuto - 27 décembre 2009)
" cette fois-ci posté sur ta boite :) . Merci :) "
(auteur de ce tuto - 26 décembre 2009)
" Bonjour gabi, où m'as-tu envoyé tes fichiers ? car pour le moment je n'ai reçu aucun message de ta part. "
(a acheté ce tuto - 26 décembre 2009)
" Bonsoir et joyeux noël !
Je t'ai envoyé le dossier de mon projet : fla/xml/images et la page à laquelle j'essaie d'intégrer le fameux slider.
Merci de ton aide, j'ai encore essayé de faire fonctionner l'intégration à la page sans résultat !
Merci d'avance.:)
"
(auteur de ce tuto - 20 décembre 2009)
" Bonjour, alors je peux t'aider, mais pour cela il faudrait que tu m'envoies tes fichiers via http://dl.free.fr
Sinon pour ce qui est de la classe tweenMax, tu peux retrouver mon dernier tuto sur cette bibliothèque, il explique comment il est possible d'utiliser et d'installer la nouvelle version.
Le tuto est bien sûr gratuit et tu peux le visionner depuis cette page: http://www.weecast.fr/flash/installation-tweenmax-et-tweenlite-v2-flash,6486.html "
(a acheté ce tuto - 20 décembre 2009)
" Bonjour,
Lorsque j'intègre l'animation sur une page html, les photos ne sont pas dans l'animation (écran noir ), pourtant mon animation marche très bien et même si je tape l'adresse du swf directement sur mon hébergement cela fonctionne aussi , il n'y as que l'integration à la page html qui pose problème ....
Pourrait-tu m'aider ?
PS : Sur un autre de tes tutos j'ai eu une galère avec les classes Tweenmax etc, en effet, ils ont modifié les fichier .as et les classes se trouve dans un dossier qui se nomme désormais greensock et plus GS comme tu l'indique sur le tuto et dans tout tes tutos qui ont pour utilisation ces classes... A force de bidouille j'ai réussi à faire fonctionner les classes en changeant les adresses de chaque classes... Voilà au cas où tu ne serais pas au courant.
MErci d'avance :) "
(auteur de ce tuto - 29 septembre 2009)
" Alors ne le prend surtout pas mal, j'ai juste était surpris par les erreurs qui auraient put être corrigés via le panneau des erreurs, après on est tous passé par là, moi y compris. Donc aucune sorte de leçon de vie dans mes derniers messages. "
(a acheté ce tuto - 29 septembre 2009)
" Bonjour Artkabis !
Au vu de ta réponse, je ne la comprends que trop bien. A ta place, je n'aurai pas été aussi exhaustif dans la réponse. C'est vrai que j'ai fauter par fainéantise, et la relecture na vriament pas été faite. Aussi pourquoi, tu viens de me donner une nouvelle leçon dans ma vie de nouveau programmeur.
Certe, il n'est pas simple de s'y mettre, mais ce n'est pas une excuse. Ta réponse reste tout à ton honneur, car tu as tout de même pris le temps de corriger ce brouillon. Bref, ceci est à l'image de la semaine passée, qui ne se reproduira pas.
Je reste ton obligé pour ce temps passé.
Bien à toi.
Romuhica "
(auteur de ce tuto - 25 septembre 2009)
" Alors je viens de regarder ton fichier et surtout ta classe et je dois dire que j'ai été surpris par le nombre d'erreurs:
Les voici:
1°)Ta classe se nomme Slider.as.as, enlèves un '.as'
2°)Dans ta classe Slider tu as déclaré ton UILoder comme ceci: 'UIL' hors il est ensuite appelé comme ceci 'uil'
3°)Ligne 51, 54, tu as ceci 'iul' au lieu de 'uil'
4°)Ligne 53, 54; tu n'as pas suivi le tuto, car tu dois
avoir le i converti int(i).
5°)Ta fonction actionsBt doit comporter un s, tu l'as oublié.
6°)Ligne 90, tu as oublié le > dans ta condition.
Voilà, tu aurais dû corriger ton script avant de me l'envoyer, car toutes ces erreurs auraient put être corrigés par toi. Autre choses, le panneau des erreurs de compilations précise toute ces erreurs en indiquant la ligne et la raison du bug, alors utilises le à bon escient.
Je sais que ce n'est pas simple de s'y mettre mais toutes les erreurs que je t'ai corrigés sont liés à des fautes d'inattention, bon ça veut aussi dire que le codes est compris, mais qu'il faut aussi que tu fasses attention à ce que tu écris. Une bonne astuce consiste à relire 2X chaque ligne que tu coderas "
(a acheté ce tuto - 25 septembre 2009)
" autant pour moi !
http://dl.free.fr/q1eTtn8MR
désolé ! "
(auteur de ce tuto - 25 septembre 2009)
" Tu as oublié de mettre le fichier fla dans ton zip, sans lui je ne peut pas vérifier ton projet... "
(a acheté ce tuto - 25 septembre 2009)
" Bonjour Artkabis,
je viens vers toi pour un petit problème sur celui-ci. Voici le lien dl :
http://dl.free.fr/qo9WISywm
En clair, lors du test d'animation, le slider ne s'ouvre pas. Flash me précise lors de l'importation de la classe fr.Slider qu'il ne peut pas générer la classe et qu'il va en créer une automatiquement. J'ai sûrement fait une erreur d'étourderie, mais je ne sais pas laquelle.
Si tu peux m'apporter tes lumières, je t'en serai indéfiniment reconnaissant.
Bien à toi.
Romuhica "
(auteur de ce tuto - 21 septembre 2009)
" Oui bien sûr, pour cela, il te suffit de modifier la valeur des variables largeurImg et hauteurImg situés dans la classe Slider en précisant les nouvelles dimentions. "
(a acheté ce tuto - 21 septembre 2009)
" Bonjour, j'aimerai savoir s'il est possible, avec ce type de slider, d'avoir une taille d'image plus grande par ex 640/480?
Merci d'avance pr ta réponse. "
(auteur de ce tuto - 18 septembre 2009)
" Malheureusement, il n'y a pas de solution miracle, en effet le slider a été créé à la base à la demande d'un membre de weecast et cette demande faisait référence à une galerie slider avec un simple défilement des images et une gestion de la vitesse, alors pour ajouter de nouvelles fonctionnalités à cette application il faut forcement recoder certaines parties. Voili voilou, à part faire ce que je tes dis précédemment je ne vois pas comment tu pourras faire autrement. Si tu débutes avec le langage as3, c'est bien normal que tu es des difficultés à trouver toi-même des solutions et je ne peux que te conseiller d'apprendre les bases pour être plus alaise avec ce langage, celui-ci comme d'autres demande du temps pour être assimilé et si tu veux t'en sortir, il va falloir que tu t'intéresses de plus prêt aux règles de bases. Tu as d'ailleurs un excellent pdf qui pourra surement t'aider dans ton apprentissage, le voici:
http://pratiqueactionscript3.bytearray.org/?page_id=4 "
(n'a pas acheté ce tuto - 18 septembre 2009)
" Merci pour ces explications, mais comme je débute en AS, c'est trop compliqué pour mon niveau ! Aurais-tu une solution plus facile ? "
(auteur de ce tuto - 18 septembre 2009)
" Alors tu peux modifier le défilement du slider, mais il faudra pour cela modifier quelques paramètres dans la classe Slider. Pour la mise en place de requêtes sur les images là c'est un peu plus compliqué car les images sont contenu dans un UILoader et elles ne sont pas diffusé dans des MovieClips, il est donc impossible de leurs attribuer des actions temps quelles ne seront pas reliés à ces symboles, donc pour pouvoir mettre en place une navigation sur les images, il faudra que celles-ci soit contenus dans des movieClips bien distinct. Ensuite il suffira de récupérer le nom des movieClip en question pour leurs définir une navigation bien précise. "
(n'a pas acheté ce tuto - 18 septembre 2009)
" Est-il possible d'adapter ce slider avec un lien sur chaque image et changer le sens de défilement à tout moment ?
Ce serait merveilleux !!! "
(auteur de ce tuto - 13 septembre 2009)
" Sympa pour le commentaire, ça fait plaisir de voir que le tuto t'est plu. "
(n'a pas acheté ce tuto - 13 septembre 2009)
" Super Tuto Artkabis merci pour ton aide---> [ ;-) ] "