Galerie photo - Wisibility
Galerie photo

Galerie photo

Flash CS3

 27 juin 2008
Jean-Luc Delon
1090720470
Nous allons créer une mini galerie photo en externalisant les images et en les chargeant à l'aide du composant Loader.
Obtenir Adobe Flash Player

51Commentaires

Tony (wisi)  | 2008-06-27 10:12:08

Super JL ;) com dab… avec toi le code m'attire un peu plus que d'habitude…

backy  | 2008-06-28 12:03:38

Merci Jean Luc. Tout comme Tony, ce genre de tuto m'intéresse et me donne vraiment envie d'approfondir mes connaissances flash.

Laurent  | 2008-06-29 19:17:06

Le Flash m'attire de plus en plus avec tes conseils !

L'Action Script que je trouvais jusqu'ici assez compliqué me tente également assez bien avec toi.

Bref, que du bon ;-)

Mick  | 2008-07-01 10:29:35

Merci beaucoup pour ce tuto, ça devient tout de suite beaucoup plus simple et compréhensible.
Vraiment bravo.
Il ne me reste plus qu'a savoir comment mettre ces vignettes dans une sorte d'ascenseur quand il y en à trop pour la taille de l'écran... ça serait top. Peut être un prochain tuto...

Encore Merci...

Romain  | 2008-07-23 23:52:15

Bonsoir , j'ai un petit souci , je vous explique :
Je suis entrain de crée un site internet avec Dreamweaver et Flash Cs3 , j'ai construit un diaporama comme le votre sur la vidéo présenté , le problème est que lorsque je place l'animation flash dans Dreamweaver , et que je fait un aperçu avec Firefox , quand je clik sur les images , l'image centrale (loader) n'apparait pas... Je ne sais que faire .

Merci de bien vouloir m'aider. :(

mallie  | 2008-08-25 13:53:20

Bravo, c'est génial comme tuto....!

petite question : peut on mettre les vignettes dans un ascenseur ?

merci d'avance et merci encore

gaetan  | 2008-08-30 21:51:08

Bonjour merci beaucoup pour ce tuto par contre j'ai un souci . J'ai fait une gallerie avec 3 photos et je l'ai mis sur mon serveur. Lorsque je charge pour la première fois mon animation les 3 images sont en mode "agrandie" superposés les unes sur les autres et lorsque j'actualise la page j'ai aucun souci j'ai les 3 petites photos est ce un bug de IE?

Phillou  | 2008-09-13 01:53:25

Bonjour, savez vous si'il existe un tuto pour donner ce type d'effets (www.touslesstickers.com/c... voir au centre de la page ?

Zapirho  | 2008-09-29 20:37:21

WOW, c'est vraiment ce que j'etais entain de chercher sur google. Thx à Wisi.

Jean-Luc  | 2008-09-30 06:08:12

Bonjour,

Merci d'avoir regarder mon petit tutorial.

Voilà quelques explications complémentaires :

Le principe de cette galerie est le suivant :

La particularité de Flash c’est qu’un élément dans la bibliothèque ne pèse qu’une fois sont poids même s’il est utilisé X fois sur la scène.

Nous utilisons ici le composant loader qui pèse environ 30 Ko pour charger des images externes.

Si le total du poids de vos images externes est supérieur au poids du composant loader (30Ko) c’est intéressant d’utiliser le composant loader sinon importer vos images dans la bibliothèque.

Cette galerie vous permet de mettre autant de miniature que vous le souhaitez.

Chaque miniature utilise un composant loader nommé : img0 pour la première img1 pour la seconde img2 pour le troisième etc.

Enfin un composant loader plus grand en taille nommé central chargé d'afficher n'importe laquelle des miniatures en grand.

Le code :
img0.onRelease=function(Void) :Void{
central.contentPath="images/image0.jpg";
} ;
img1.onRelease=function(Void) :Void{
central.contentPath="images/image1.jpg";
} ;
etc…..

Bon courage à toutes et à tous..

seabird63  | 2008-11-04 21:10:03

ta galerie est genial c'est propre bien explique nickel quoi
par contre je rencontre un os quand je teste l'animation
tous marche mais quand importe le fichier swf sur une page web celui-ci ne marche plus es ce que j'aurais oublie quelque chose

Jean-Luc Delon  | 2008-11-12 11:19:40

Bonjour,

Pour répondre à la question de seabird63, il faut mettre en ligne dans le même dossier le fichier swf, les images, le fichier html et le fichier AC_RunActiveContent.js.

Les fichier swf, html et js sont générés par fichier publier.

Bon courage....

Romain  | 2008-11-12 14:29:08

J'aimerai utilisé ce procédé pour un site perso, mais le problème c'est qu'à la place des photos miniature j'aimerai utilisé un bouton déja crée. Ma question est donc comment remplacer les miniatures par mes propres boutons ou savoir s'il est possible de convertir mes boutons en "loader"?

Jean-Luc Delon  | 2008-11-13 12:57:09

Bonjour,

La réponse et non ;-( et oui à la fois LOL

Il est possible d'utiliser des MC comme bouton pour les miniatures en gardant les images externes au fichier swf et aussi d'utiliser un MC pour l'affichage central. Le revers de la médaille c'est qu'il faut faire beaucoup plus de programmation.

En AS2 il faut passer par la programmation d'un objet MovieClipLoader.
En AS3 par un objet Loader et un objet URLRequest.

Bon courage....

gerard  | 2008-12-12 02:30:54

bonjour
est il possible de mettre le swf avec juste les vignettes
et de faire un autre swf avec le central
de facon a mettre dans une pages web les vignettes en haut a gauche par exemple et le central plus bas a droite
je sais pas si je me suis bien expliquer :(

merci

jean-luc delon  | 2008-12-24 10:56:09

Bonjour,

La réponse est oui. Pour cela il faut faire "causer" les fichiers swf entre eux par exemple en utilisant les cookies flash c'est à dire le sharedObject.

Bon courage....

nanonerie  | 2009-01-05 10:46:08

Bonjour à tous
Tout d'abord merci pour ce tuto qui répond à mes attentes.
J'aimerai faire un ascensseur parce que j'ai plein d'images. Pouvez vous me donner le code à ajouter, svp?
Bonne journée et bonne année!

sonik  | 2009-01-20 14:58:43

bonjour
et merci pour ce tutoriel ... je suis débutante sur flash
disons que :-/ j'ai bien compris le tutoriel seul hic je n'arrive pas à mettre les accolades sur cs3
si quelqu'un pouvait me venir en aide ... cela serait bien sympa

Jean-Luc Delon  | 2009-01-25 16:12:24

Bonjour,

Sur Mac les accolades :
alt + parenthèse ouvrante {
alt + parenthèse fermante }
Les crochets
alt+shift + parenthèse ouvrante [
alt+shift + parenthèse fermante ]

Bon courage....

r2lorme  | 2009-02-08 22:11:11

Merci beaucoup pour ce tuto clair, détaillé et précis. Je vais pouvoir me lancer dans la création de ma galerie photo.

Crocro  | 2009-02-19 08:50:09

Merci pour ce tuto simple et efficace.
J'ai rajouté un composant loader central pour les photos horizontales. Le soucis était qu'il y avait superposition et donc que la photo verticale précédente restait visible. J'ai rajouté une ligne pour avoir le loader vertical se charger de "". Il doit y avoir une méthode "moins bricolo", non ?
J'ai aussi beaucoup cherché un moyen de faire un ascenseur (scroll pane) avec les vignettes sans succès. J'ai réussi à mettre une succession de vignettes dans un scrollpane... mais pas avec les actions!
Donc je suis comme mallie, preneur d'infos dans ce domaine...
Merci.

julie  | 2009-02-20 17:47:26

Bonjour jean-luc,
Votre tuto est génial, c'est exactement que je cherchais :-) ....mais j'ai un hic...
Lorsque j'ouvre mon .swf sur le bureau aucun soucis, vignettes et photos sont là mais a partir du moment que je l'incorpore dans ma page dreamweaver et que je lance l'aperçu avec firefox...plus rien...ni vignettes, ni photos... :( ;-(

Crocro  | 2009-02-21 00:40:16

Il faut que le fichier.swf soit à la racine du site... pas dans un dossier...
Du moins c'est ce que j'ai cru comprendre, et en tous cas que j'ai par ailleurs testé !
:-)

julie  | 2009-02-21 19:45:09

ok ok merci beaucoup, ui j'ai moi même testé...et après ça fonctionne!!! ça fait tout joli! hihi :-D

likeme11  | 2009-02-22 15:16:53

Bonjour,

J'ai utilisé ce tuto, c'est génial et simple.
J'ai juste une petite question, comment fait-on pour faire un avant-après lorsqu'on survol la photo qui s'affiche en grand(central.contentPath)?

merci d'avance

julie  | 2009-02-23 20:35:25

Bonjour,
j'ai encore une petite question 8-O :
Sur mon site, j'utilise donc ce tuto pour présenter mes photos pro. Les photos sont elles protégées? Il est bien impossible de les copier (clic droit)?
Merci de me dire.... :-)

Crocro  | 2009-02-23 22:32:00

A partir du moment ou une photo apparait sur le web, une simple capture d'écran et la voilà copiée, certes avec une résolution de 72 dpi... pas terrible pour l'impression mais suffisant pour le web...

julie  | 2009-02-24 11:05:35

ha bah oui...j'avais zapé la copie d'écran.... :( scregnegne
merci quand même pour ta réponse!...

Jean-Luc Delon  | 2009-02-27 07:02:26

Bonjour,

Pour l'avant après comme pour gérer le portrait ou le paysage c'est un peu plus compliqué et il faut ajouter du code ou être malin LOL

Avant Après :

Le composant loader est capable d'afficher des fichiers swf. Donc si je fabrique un swf avec 2 images clés je dois pouvoir gérer le avant après.

Première image clé la photo avant, deuxième image clé la photo après sur un nouveau calque un MovieClip (MC) servant de bouton nommé en occurrence btavantapres

Un dernier calque avec le code ActionScript suivant :

stop()
btavantapres.onRelease=function(Void):Void{
if(_currentframe==1){
gotoAndStop(2)
}else{
gotoAndStop(1)
}
}
Une fois le fichier publié et enregistré il suffit de l'appeler comme une image jpg dans une des miniatures. A l'affichage dans central il devient possible de voir l'image avant après.

Bon courage......

likeme11  | 2009-02-27 09:09:54

Merci

Je vais essayer

zoalia  | 2009-03-06 02:26:10

bonjour Jean-Luc Delon, je vous remercie pour votre démonstration qui m'a beaucoup aider. Avec j'essaye de faire mon portefolio sur flash, j'ai suivit vos instruction à la lettre, et sa fonctionne bien, le problème c'est que souvant l'image charger est couper, elle n'apparait pas en entière, pourtant j'ai bien mis le loader à la taille de l'image,donc si vous pouviez m'aider je vous en serez reconnaissante.

didi  | 2009-03-11 14:50:00

Bonjour,
merci pour le tuto ça marche impecc !!! :-)
cependant comment fait on pour que la premiere image soit statique et apparaisse à l'ouverture de ma page web
merci d'avance

Jean-Luc Delon  | 2009-03-11 17:35:06

Bonjour,

Rien de plus simple. En début de code il faut écrire :
central.contentPath="le nom de la première image"

Bon courage.....

didi  | 2009-03-11 18:15:50

Merci infiniment
:-)

lili  | 2009-03-14 21:39:15

Bonjour,

Le tutoriel a l'air vraiment facile mais je n'arrive pas à dépasser la premiere étape! J'ai toujours les messages d'erreurs, même après l'enregistrement. Koi faire?
merci d'avance

lili  | 2009-03-14 21:59:59

C bon,
g compris finalement LOL
merci bcp

didi  | 2009-03-16 13:34:15

Bonjour,

J'aurai une autre question : comment ajouter des descriptions qui s'affichent en même temps que les photos de ma galerie ?

Peut on utiliser loader et le même script ????

Merci d'avance.

muchalucha  | 2009-03-18 09:31:01

Bonjour,
J'aimerai que les photos apparaissent au survol de la souris, je remplace "img0.release = function()" par "img00.rollOver = function()" mais cela de fonctionne pas. Pouvez-vous m'aider, merci.

julie  | 2009-03-18 17:43:46

Bonjour,
j'ai voulu mettre mon site en ligne et soucis, lorsqu'il est en ligne, au cours du premier chargement des pages, les vignettes sont plus grande que le loader et au second chargement de la page et bien les vignettes sont a la bonne taille 8-O ....est ce parce que je ne les ai pas assez diminué? :-/

Crocro  | 2009-03-18 22:34:46

Pour ma part j'ai créé des vignettes spécifiques de 75 pixels. Toutes les vignettes se chargent en même temps, contrairement au loader central... c'est donc mieux que cela soit des petites vignettes de quelques Ko...
Je ne suis pas un spécialiste, juste un adepte du tatonnement expérimental.
Courage. :-/

JBR14  | 2009-04-08 15:08:47

bonjour,
j'aimerai savoir si il était possible de rajouter une progressbar aux loader, vu que mes images sont lourde, elle mettent du tps a charger.
si cela est possible, comment?
merci de m'aider.

olivier  | 2009-08-14 21:04:05

Bonjour,

Merci pour le tuto mais j'ai un probleme url !!!! Quand je fais contrôle enter le chemin ne fonctionne pas !!! Pourtant j'ai enregistré mes images et les pages flash dans le meme dossier ???? merci pou votre aide

olivier  | 2009-08-14 21:04:57

Bonjour,

Merci pour le tuto mais j'ai un probleme url !!!! Quand je fais contrôle enter le chemin ne fonctionne pas !!! Pourtant j'ai enregistré mes images et les pages flash dans le meme dossier ???? merci pou votre aide

thierry  | 2009-09-04 20:28:09

Bonjour, super tuto BRAVO...
voila j'ai une question, comment on fait pour que le loader du centre reste sns rien quand on lache l'image j'ai remplace onrelease par onrollover donc il m'affiche l'image juste par survole de la souris mais je veux que l'image senlève quand je retire ma souris?

merci

sonia  | 2009-09-17 18:23:51

Bonjour et merci ... la galerie marche merveilleusement bien ! !

Petite question néanmoins : peut on créer des liens sur les vignettes ?

Merci

sonia  | 2009-10-15 19:15:12

Bonjour,

La galerie marche bien cependant quand je fais une preview sous iexplorer, on me demande si je veux débloquer les activex alors que avec firefox ça marche très bien.
Est il possible de remedier au problème à la base, c'est à dire dans dreamweaver cs3 ?
Merci pour votre réponse

Okjola  | 2009-11-10 17:56:59

Bonjour,est ce qu'il y aurait un moyen simple pour avoir une baisse de l'opacité lorsqu'on survole une miniature?
J'ai essayé avec la fonction on (rollover mais apparemment je m'y prends mal(je débute dans flash).
Merci

marion  | 2010-09-06 14:22:04

Bonjour jean-Luc,
Merci pour ce tuto très clair et très utile.

Après avoir réalisé cette galerie sans encombre, j'ai deux souhaits :

-faire apparaître un graphique swf sur les vignettes quand on a cliqué pour que l'internaute se repère.

-caler sur le bord gauche du grand central mes images qui ont des largeurs différentes

Pouvez-vous m'aider ?

Cordialement

timessa  | 2011-02-14 10:55:37

Bonjour, nickel le tuto, cependant j'aimerais savoir si il est possible d'insérer un ascenseur car je suis en train de créer un site pour un projet à l'école et j'ai une 50aine d'images à afficher

Merci d'avance...

Patcrea  | 2011-10-05 22:34:04

Bonsoir Jean-Luc,
Un énorme merci pour votre tuto, super méga top! j'ai un peu galéré au début mais j'y suis arrivée!
J'ai une question, comment avez-vous fait pour intégrer l'image de fond, superbe?
Cordialement,

mojo  | 2012-04-23 20:21:53

tres bon tuto, merci, cependant j'ai une petite question, vous n'auriez pas un frère qui s'appelle Alain ?

 Vous aussi, commentez l'article

  • Autres tutoriels du formateur
  • Tombe la neige

    Tombe la neige

    Jean-Luc Delon  |
    22 409

    Flash CS4

  • Animation parallaxe

    Animation parallaxe

    Jean-Luc Delon  |
    26 152

    Flash CS3

  • Animation en boucle

    Animation en boucle

    Jean-Luc Delon  |
    26 780

    Flash CS3

  • Interface, Gestion 3D, Kinematic inverse

    Interface, Gestion 3D, Kinematic inver…

    Jean-Luc Delon  |
    40 147

    Flash CS4

  • Cookie Flash

    Cookie Flash

    Jean-Luc Delon  |
    2 854

    Flash CS4


  • Remonter en haut du tutoriel

    Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
    Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
    Contact - Wisibility est une marque déposée

    Blog - Tutoriels - Wisi TV - Forum