Tuto publié par Dans ce tutoriel de plus d'1h30, nous allons créer une galerie plutôt "fun",puisqu'elle présentera nos images de façon totalement dynamique. En effet, chaque image, miniature ou description sera gérée en externe depuis un simple fichier xml. Le chargement sera lui aussi mis en avant avec l'utilisation du composant ProgressBar, qui dévoilera la progression (détaillée avec le nombre de bytes chargés ainsi que le pourcentage total) pour chacune des images de la galerie.
Avec un design épuré, vous pourrez présenter vos créations de façon original et en ayant par la même occasion, la possibilité de modifier le contenu de votre galerie sans avoir à ré-uploder l'ensemble de vos fichiers.
Vous pouvez voir le résultat du tutoriel en suivant ce lien>>>
Voici quelques unes des fonctionnalitées présente dans cette galerie:
- Rotation 3d des images de la galerie
- Transitions dynamique des miniatures
- Filtres dynamiques des miniatures
- Prechargement détaillé de l'ensemble des éléments de la galerie
- Utilisation des composants User Interface
- Gestion xml des images, miniatures et descriptions
- Codage externalisé via une classe as3
L'interface
- Création des différents éléments graphiques de l'application
- Mise en place des éléments textuels pour le regroupement d'informations
- Mise en place de filtres sur nos éléments graphiques
- Importation des composants User Interface dans la bibliothèque
- Création du fichier xml de la galerie
- Rattachement de l'application à la classe Galerie.as
- Mise en place de la structure de classe
- Mise en place des imports et des variables
- Initialisation du projet via le constructeur (mise en place des écouteurs et instanciation des variables du projet)
- Mise en place du chargement et de la récupération xml
- Mise en place des images d'aperçus dans le composant UILoader
- Mise en place des miniatures dynamiquement
- Paramétrage des différents composants UILoader (utilisation de leurs propriétés
- Gestion des événements souris sur les miniatures
Contenu du pack:
- Fichier galerie.swf et galerie.fla
- Dossier fr comprennant la classe Galerie.as
- Dossier xml comprennant le fichier galerie.xml
- Dossier thumbs contenant les miniatures du projet (100X75)
- Dossier big contenant les images du projet (350X300)
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 35 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
Menu à glissière avec apparition de pages dynamiques
Dans cette vidéo, nous créerons un menu glissière avec apparition dynamique,…
Utilisation de swfObject et de l'outils swfGenerator
Dans ce tutoriel, nous allons approfondir l'intégration de vos fichiers .swf avec la…
Un website avec Flash Catalyst (sans une ligne de code)
Dans ce tutoriel, je vais vous présenter le petit nouveau de la gamme Adobe, ce…
Un effet loupe avec inertie
Dans ce tutoriel de plus d'une heure, nous allons créer un véritable effet loupe…
Notes attribuées par les utilisateurs (4 votes)
Les avis / Questions des utilisateurs (25)
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 35 minutes a été acheté 111 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 23 juillet 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 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 24008 tuto classés dans nos 201 logiciels ou langages informatiques.
(auteur de ce tuto - 10 janvier 2012)
" Alors pour pouvoir ajouter une lecture automatique ayant une gestion d'attente sur chaque image, tu devras commencer par modifier le fichier xml en ajoutant un nouveau paramètre sur chaque image, ce qui donne <image big= "large/001.jpg" thumb ="thumbs/001.jpg" comment = "descriptiom Image n°1" time = "3"/>
on vois le time apparaitre avec une valeur numérique 3 (temps en seconde)
Ensuite dans le fichier Galerie.as tu devras importer les classes nouvellement utilisées>>
import flash.utils.setTimeout;
import flash.utils.clearTimeout;
Créer de nouvelles variables à la suite des anciennes
private var _duree :Array=[];
private var _UIThumbsTab :Array=[];
private var _num :int;
private var _inter :*;
Nous allons récupérer 2 éléments indispensable pour gérer le défilement en fonction des données xml.
pour cela tu dois aller dans la fonction chargXmlComplete puis entrer dans la boucle for (pour pouvoir récupérer les données xml pas le choix)
Tu colles donc ceci dans la boucle et avant la fonction chargImage
_UIThumbsTab[i] = _UIThumbs;
_duree[i] = int(_xmlData.image[i].attribute("time"));
Ici on a 1) Récupéré les miniatures qui sont en fait les boutons déclencheur des images standard. 2) Récupéré dans un tableau les donnée des nouveaux paramètres xml (time)
Puis nous allons créer 2 nouvelles fonctions (après la dernière fonction de la classe et donc avant les 2 } de fermeture)
private function autoNavigation():void
{
_UIThumbsTab[_num].dispatchEvent(new MouseEvent(MouseEvent.CLICK));
trace("_num >> "+_num);
clearTimeout(_inter);
_inter = null;
_num++;
if(_num>_UIThumbsTab.length-1){_num=0}else if(_num<0){_num=_UIThumbsTab.length-1}
newInter(_num);
}
private function newInter($num:int)
{
_inter = setTimeout(autoNavigation,int(_duree[$num]* 1000));
}
Dans la première fonction nous allons simuler le click sur l'une des miniatures à chaque fois, nous utiliserons la durée liée à l'image associé puis nous passerons à la suivante. Pour cela nous utilisons la variable num qui évoluera de 0 au nombre d'image total (on ajoute des condition pour créer une boucle)
Pour la dernière fonction, on utilise la précédente fonction qui se verra avec une variable num incrémenté
Voilà il ne reste plus qu'à lancer la fonction au bon endroit et tu auras un défilement lié au time du fichier xml
Tu lances donc la fonction en faisant ceci
autoNavigation();
en la plaçant après la fonction changImage() (elle est situé a la fin de la fonction chargXmlComplet)
Voilà ceci fonctionne nickel, alors évidemment tu as ici une base fonctionnel est pour que ceci soit parfait il serait préférable de bloquer les interactions des miniatures en mode manuel, car ceci posera forcement un problème lors de la lecture auto. "
(auteur de ce tuto - 10 janvier 2012)
" Salut, pour karimelhadj
Est-il possible de gérer le temps d'affichage de chaque image ? En clair, donner un temps d'affichage différent selon l'image ?
Alors ceci serait tout à fait possible, en effet il suffirait de passer le paramètre depuis le fichier xml puis d'ajouter un module dans l'application, je t'avoue qu'en ce moment j'ai très peu de temps pour coder, mais je vais tout de même essayer de me pencher dessus.
Tuto : Pourriez-vous faire un tuto montrant comment on fait un portfolio images+son avec des boutons, play, pause, stop et avec la possibilité de donner à chaque image un temps différent d'affichage ?
Alors l'ensemble des éléments demandés, son présent dans ce tuto + le tutoriel lecteur mp3, ensuite pour la possibilité de définir une durée de pause sur chaque image il faudrait que je me penche dessus comme dis précédemment.
Cordialement, Artkabis. "
(n'a pas acheté ce tuto - 31 octobre 2011)
" " Question + demande de tuto
Est-il possible de gérer le temps d'affichage de chaque image ? En clair, donner un temps d'affichage différent selon l'image ?
Tuto : Pourriez-vous faire un tuto montrant comment on fait un portfolio images+son avec des boutons, play, pause, stop et avec la possibilité de donner à chaque image un temps différent d'affichage ?
Merci à vous " "
(a acheté ce tuto - 28 avril 2011)
" Je n'appelle pas cela un tutoriel mais une démonstration de vos connaissances. Je m'explique : le "prof" enchaine les lignes de code sans autre explication. Dommage. "
(a acheté ce tuto - 26 février 2011)
" j'ai encore des erreurs et pourtant je fais comme le tuto indique et même avec les fichiers sources il y'a des erreurs sans même que j'y touche .. "
(a acheté ce tuto - 29 novembre 2010)
" Merci pour cette formation, pour toutes questions sur un projet dans lequel cette methode est utilisée peut vous poser des questions... Merci "
(a acheté ce tuto - 28 novembre 2010)
" Bonjour,
J'ai un petit soucis avec le code je pense que j'ai du raté quelque chose mais même après 50 relecture je ne trouve pas l'erreur.
Quand je test avec ctrl+entrée aucune de mes images n'apparait et j'ai les erreurs suivante:
Accès à la propriété non définie Back.
Accès à la propriété non définie chargement.
Accès à la propriété non définie finprogression.
Accès à la propriété non définie Back.
Accès à la propriété non définie chargement.
Peux tu m'aider ????
Merci
"
(auteur de ce tuto - 14 mars 2010)
" Alors c'est bizarre, j'avoue que je ne comprend pas car je n'ai jamais eu de problème avec cette boite mail. Sinon, tu peux toujours renvoyer ton message à cette adresse: artkabis@hotmail.fr, là il y a peu de chance que ton message n'arrive pas à destination... "
(a acheté ce tuto - 12 mars 2010)
" Bonsoir
j'ai essaye de t'envoyer un mail a l'adresse indiquée, mais j'ai un retour comme quoi le mail ne peut etre delivre avec le message suivant
Reporting-MTA: dns; orange.fr
X-SMTP-Server-Queue-ID: 3B4C71000AAA
X-SMTP-Server-Sender: rfc822; christian.labaz@orange.fr
Arrival-Date: Fri, 12 Mar 2010 20:26:18 +0100 (CET)
Final-Recipient: rfc822; artkabis@arkabis.net
Action: failed
Status: 5.4.4
Diagnostic-Code: X-SMTP-Server; Host or domain name not found. Name service
error for name=arkabis.net type=A: Host not found
"
(auteur de ce tuto - 12 mars 2010)
" Bonjour je te conseille de continuer notre discutions depuis nos adresses mails persos, ceci évitera d'avoir trop de messages dans la partie commentaires et me permettra de nettoyer cette partie tout en t'aidant. Voici mon adresse: artkabis@artkabis.net "
(a acheté ce tuto - 12 mars 2010)
" Bonjour.En prenant tes exemples en.fla, si je teste ou que j'exporte l'animation, je n'ai que le fond qui apparait, je n'ai ni les miniatures ni les photos. Peux tu m'éclairer
Merci et bonne journée "
(a acheté ce tuto - 11 mars 2010)
" Bonsoir je vois que tu bosses tard
J'ai bien remplacé a la ligne 23 le gs.twenMax, mais c'est pareil
Merci de ton aide "
(auteur de ce tuto - 11 mars 2010)
" Commences par remplacer le gs.TweenMax; par com.greensock.TweenMax; ce chemin étant différent depuis que greensock a mis à jour sa librairie.
Ensuite concernant la mise en place de 25 images, en effet tu devras surement créer un masque et une scrollBar pour pouvoir gérer ceci. Le problème, c'est que ceci modifie énormément la nature de cette application, ce qui implique une assez grande modification de la classe en question "
(a acheté ce tuto - 11 mars 2010)
" Merci de la reponse rapide. Mais si par exemple je veux plus de 25 images, il me sera difficile de creer une banniere aussi grande
De plus quand je teste l'anim j'ai les messages suivants:
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie Back.
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie Back.
1172: La définition gs:TweenMax est introuvable.
1172: La définition gs.easing:Back est introuvable.
Je suis sur flash CS4 10.0.2
Merci d'avance et de plus le tuto est super bien expliqué "
(auteur de ce tuto - 11 mars 2010)
" Normalement il te suffit simplement d'adapter les dimensions de ta galerie en fonction du nombres de vignette. Donc aucune modification majeur du code n'est à prévoir. Si vraiment ceci te pose problème, je apporterais mon aide avec grand plaisir. Cordialement, Artkabis. "
(a acheté ce tuto - 11 mars 2010)
" Comment gérer + de 7 images. Si on met + de 7 images on n'arrive pas a les faire defiler dans la banniere du haut "
(auteur de ce tuto - 12 décembre 2009)
" Le pack est désormais disponible avec le fichier fla pour flash cs3. "
(auteur de ce tuto - 12 décembre 2009)
" Alors je vais remplacer le pack et y ajouter une version ouvrable pour flash cs3, tu pourras la télécharger d'ici une heure.
Cordialement, artkabis. "
(a acheté ce tuto - 12 décembre 2009)
" Bonjour,
j'ai téléchargé les fichier, mais flash n'arrive pas à ouvrir le fichier galerie_xml. il me dit "format de fichier inattendu". je l'ai dézippé avec winzip. pour le reste j'arrive à ouvrir. je suis sous flash cs3. Merci de ton aide. "
(a acheté ce tuto - 18 septembre 2009)
" Bonjour,
j'ai acheté ce tutoriel, mais les fichiers de support ne se décompresses pas. Je suis sur mac. J'ai envoyé un message au service consommateurs, et ils m'ont dit de te contacter.
Merci
Cordialement
matt "
(a acheté ce tuto - 05 août 2009)
" Effectivement, =) . Merci "
(auteur de ce tuto - 05 août 2009)
" Alors ceci n'a rien à voir avec mes fichier sources, mais avec le zip, en effet, si tu essaies de décompresser ceci avec winzip, tu versa que l'ensemble des fichiers sont valides. "
(a acheté ce tuto - 04 août 2009)
" Alors , merci de m'avoir repondu. Cela vient de l'archive, je n'arrive pas a le décompresser, j'ai winrar, j'ai testé sur d'autre archive et tout marche. En ce qui concerne les version j'ai la CS4 .Voici le message d'erreur :
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xml rGalerie.as
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xmlgalerie_xml.fla
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xmllarge.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xmllarge.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xmllarge.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xmllarge.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xmllarge.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xmllarge.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xmllarge.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xmllargeThumbs.db
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xml humbs.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xml humbs.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xml humbs.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xml humbs.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xml humbs.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xml humbs.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xml humbs.jpg
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xml humbsThumbs.db
! F:ShaoShao[crea]Weecastgalerie rotator@3.zip: Méthode inconnue dans galerie_xmlxmlgalerie.xml
Merci =)
"
(auteur de ce tuto - 03 août 2009)
" Alors peux-tu me dire si tu as un message d'erreur, si c'est le cas, qu'elle version de flash utilises-tu, car perso, je travail avec la version cs4. II est donc fort probable que tu as voulu ouvrir les fichiers sources avec une version inférieur à celle que j'ai utilisé.
Donc pour résumer, si tu as un message d'erreur, indiques le dans ton prochain message avec la version du logiciel que tu utilises actuellement (cs3, cs4).
J'aviserais en fonction de ta réponse. "
(a acheté ce tuto - 03 août 2009)
" Bonjour,
j'ai acheté ce tutoriel, mais les fichiers de support ne marchent pas. J'ai envoyé un message au service consommateurs, et ils m'ont dit de te contacter. Pourrais tu mettre a jour tes fichiers?
Merci
Cordialement
Shao "