Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

CRÉER RAPIDEMENT ET FACILEMENT UN PETIT DIAPORAMA D'IMAGES EXTERNES (AVEC BARRE DE CHARGEMENT)


Information sur le tutorial

Catégorie :Tutoriaux Date de création : 03/09/2005 02:50:26 Vu : 58 235 fois

Note :
8,61 / 10 - par 18 personnes
8,61 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (68)
Ajouter un commentaire et/ou une note

Description

voici le code (et les objets a faire) pour un petit diaporama assez simple ...

Tutorial

Bonjour voici les étapes pour créer un diaporama d'images externes assez simplement :

Mettre dans un répertoire disons pour l'exemple nommé "images", avec toutes les images nommées img0.jpg, img1
.jpg...imgN.jpg
Dans Flash,
A la racine (sur _root donc pour l'exemple),
Créer un clip vide, avec comme nom d'occurrence : "Image", par exemple, (renommé au passage le calque en "Image"
ca change rien et ne sert a rien dans le code, mais c'est plus lisible :) pour s'y repérer) .
Sur
_root (toujours) créezun nouveau calque, et un nouveau clip en forme de barre horizontale (labarre de chargement), nommez l'occrruence du clip "BarreChargement".
A nouveau, un nouveau calque et nommez le AS (on va y mettre l'action script) :

Premièrement  on ajoute le code suivant pour commencer par cacher la barre de chargement.

BarreChargement._visible = false;

Puis,on va faire 2 variables, une pour l'image en cours, et un eautre pourle nombre d'images total contenu dans le répertoire ...

imageIndex= -1;
maxImages= 10; // pour l'exemple, mais sinon mettre le nombre d'images dans le répertoire


Ensuite, 2 petites fonctions pour 'zapper' les images :

function imageNext(){
    BarreChargement._visible = true;
   onEnterFrame= function(){                                   //l'enterFrame un fonction executé tout letemps
       var pc=Image.getBytesLoaded()*100/_root.getBytesTotal();   //calculedu % de l'image qui est chargé
       
BarreChargement._xscale=pc;                             // on change la taille de la barre de chargement
      if (pc >= 100){                                          // et si tout estchargé
         BarreChargement._visible =false;                       // on recache la barre dechargement
         delete onEnterFrame; // onsuprimel'enterFrame;          // etonsupprime la fonction exécuté en permanace, histoire de pas surgargerleprocesseur pour rien ...
        }
    }
    imageIndex++;
    if (imageIndex > maxImages){
       imageIndex = 0;
    }
    Image.loadMovie("images/img"+imageIndex+".jpg");
}

function imagePrev(){
    onEnterFrame = function(){
        var pc = Image.getBytesLoaded()*100/_root.getBytesTotal();
        if (pc == 100){
           delete onEnterFrame;
        }
    }

    imageIndex--;

    if (imageIndex <= -1){
       imageIndex =
maxImages;
    }
    Image.loadMovie("images/img"+imageIndex+".jpg");
}

sivous souhaitez que la première image soit chargé automatiquement onappel tout de suite imageNext a la suite de la définition des 2fonctions précédentes :

imageNext();

Ilne reste plus qu'a faire 2 boutons, un pour avancer et un pour reculer(de préférence sur un nouveau calque aussi, nommé par exemple boutons)
avec respectivement :

on(release){
   
imageNext();
}

et

on(release){
   
imagePrev();
}

Et voilà c'est fini.


Flash sans Limites
_Benjy
03 septembre 2005 02:58:20 :
petit rien a corriger :)
25 octobre 2005 16:35:37 :
petite correction
signaler à un administrateur
Commentaire de Zlub le 03/09/2005 03:09:41

Merçi pour ce tutorial en flash _benjy ;)
J'ai tout bien compris ... pour que ça marche et pour programmer proprement en Flash... 10/10

Bon coding,

Zlub

signaler à un administrateur
Commentaire de bugmenot le 06/09/2005 12:47:18


var imageIndex:Number = -1;
var maxImages:Number = 5; // pour l'exemple, mais sinon mettre le nombre d'images dans le répertoire


function imageNext(){
    BarreChargement._visible = true;
   onEnterFrame= function(){                                   //l'enterFrame un fonction executé tout letemps
       var pc=Image.getBytesLoaded()*100/_root.getByteTotal();   //calculedu % de l'image qui est chargé
        BarreChargement._xscale=pc;                             // on change la taille de la barre de chargement
      if (pc >= 100){                                          // et si tout estchargé
         BarreChargement._visible =false;                       // on recache la barre dechargement
         delete onEnterFrame; // onsuprimel'enterFrame;          // etonsupprime la fonction exécuté en permanace, histoire de pas surgargerleprocesseur pour rien ...
        }
    }
    imageIndex++;
    if (imageIndex > maxImages){
       imageIndex = 0;
    }
trace(   Image.loadMovie("img1.jpg"));
}
imageNext();

-> undefined

sans arret je cracke helppp

signaler à un administrateur
Commentaire de _benjy le 06/09/2005 13:40:26

qu'est ce que c'est que ce commentaire ??
qu'est ce qu'il t'arrive ??
un loadMovie ne renvois rien, normal d'un trace n'ecrive que undefined !

_benjy

signaler à un administrateur
Commentaire de fmilot le 08/09/2005 10:40:56

Juste une petite question : comment faire pour que les images apparaissent centré lors de l'affichage, car suivant la taille, elles peuvent se retrouver n'importe où sur l'animation ?

signaler à un administrateur
Commentaire de _benjy le 08/09/2005 17:31:09

elle sont charger dans un clip Image, il bouge pas tt seul Image, donc si tu le met a l'emplacement ou tu veux tes images ca ira tt seul
++

signaler à un administrateur
Commentaire de TRiPoLYT le 12/09/2005 18:09:57

pour _BENJY qui répond à FMILOT :
ouai, mais dans ce cas là, elles sont alignées avec le coin en haut à gauche... donc ça les centre pas !

pour tout le monde :
ma question en fait était la suivante... comment je peux ajouter une légende en fonction du numéro de l'image chargée ? j'ai essayé le code écrit plus bas, mais ça marche pas...



//--------------------------------------------------------------------
loading_mc._visible = false;

// variables pour le nombre d'images de l'album photo
var imageIndex:Number = 0;
var maxImages:Number = 7;

// fonction pour zapper de photo
function imageNext()
{
loading_mc._visible = true;
onEnterFrame= function()
{
var pc=galerie_image_mc.getBytesLoaded()*100/_root.getByteTotal();
loading_mc._xscale=pc;
if (pc >= 100){loading_mc._visible =false;delete onEnterFrame;}
}

    imageIndex++;
    if (imageIndex > maxImages){imageIndex = 0;}
    galerie_image_mc.loadMovie("galerie/0304xx/"+imageIndex+".jpg");
galerie_legende_mc.load("galerie/0304xx/"+imageIndex+".txt");
}


function imagePrev()
{
onEnterFrame = function()
{
var pc = galerie_image_mc.getBytesLoaded()*100/_root.getByteTotal();
if (pc == 100){delete onEnterFrame;}
}

    imageIndex--;
    if (imageIndex <= -1){imageIndex = maxImages;}
    galerie_image_mc.loadMovie("galerie/0304xx/"+imageIndex+".jpg");
galerie_legende_mc.load("galerie/0304xx/"+imageIndex+".txt");
}

imageNext();
//--------------------------------------------------------------------

signaler à un administrateur
Commentaire de _benjy le 13/09/2005 11:16:59

tripolyt
> elle sont aligné en haut a gauche du clip, tu peux placé ton clip ou tu veux et il bougera pas ...
si l'idée de repositionner centré dans le clip chargé, il faut ajouter dans le onEnterFrame
dans le test de fin :
if (pc >= 100){
    Image._x = -Image._width/2;
    Image._y = -Image._height/2;
}
et elle est centré

>pour ajouter une legende, met un champ text là ou tu veux ta legende, appel le "legende"
une fonction suppélementaire
function setLegende(i){
    if (i == 0) legende.text = ".....";
    else if (i == 1) ....
    ...
}
et appeler setLegende dans imageNext and imagePrev

++

signaler à un administrateur
Commentaire de TRiPoLYT le 13/09/2005 23:50:56

j'te remercie pour la rapidité à laquelle t'as posté la réponse, maaais... j'ai déjà eu un conseil pour les légendes : un fichier externe xml... et d'ailleurs, pour ce que je veux faire, c'est même plus pratique de mettre les liens vers les images dans ce même fichier xml externe... (j'ai à faire plusieurs sous-galeries alors c'est plus pratique comme ça...)



// contenu du fichier fla :
_root :
zone de texte dynamique "titre"
zone de texte dynamique "texte"
bouton "suivant"
_root.image :
cadre noir pour délimiter la taille maxi des images



// contenu des répertoires windows / ftp :

fichier.fla
fichier.swf
images/image1.jpg
images/image2.jpg
images/image3.jpg
xml/xml.xml



// contenu fichier xml :

<?xml version="1.0" encoding="UTF-8"?>
<contenu>
<champs>
<titre>titre 1</titre>
<texte>voici la légende du l'image 1</texte>
<image>images/image1.jpg</image>
</champs>
<champs>
<titre>titre 2</titre>
<texte>voici la légende du l'image 2</texte>
<image>images/image2.jpg</image>
</champs>
<champs>
<titre>titre 3</titre>
<texte>voici la légende du l'image 3</texte>
<image>images/image3.jpg</image>
</champs>
</contenu>



// action script (tout sur le root) :

monXML = new XML();
monXML.ignoreWhite = true;
monXML.load("xml/xml.xml");
tabtitre = new Array();
tabimage = new Array();
tabtexte = new Array();
numero = 0;
monXML.onLoad = function() {
for (i=0; i<4; i++) {
tabtitre[i] = monXML.firstChild.childNodes[i].firstChild.firstChild;
tabtexte[i] = monXML.firstChild.childNodes[i].firstChild.nextSibling.firstChild;
tabimage[i] = monXML.firstChild.childNodes[i].firstChild.nextSibling.nextSibling.firstChild;
}
for (i=0; i<tabimage.length; i++) {
titre.htmlText = tabtitre[i];
texte.htmlText = tabtexte[i];
loadMovie(tabimage[i], "image");
trace(tabtexte[i]);
}
suivant.onRelease = function() {
if (numero == 4) {
numero = 0;
} else {
titre.htmlText = tabtitre[numero];
texte.htmlText = tabtexte[numero];
loadMovie(tabimage[numero], "image");
trace(tabtitre[numero]);
trace(numero);
numero++;
}
};
};



//---------- ---------- ---------- ---------- ----------
//---------- ---------- ---------- ---------- ----------



en revenche, ma barre de progression le fonctionne pas du tout... je sais pas pourquoi... j'm'en suis aperçu en mettant mon site en ligne (chargement des images plus lent, j'ai donc pu voir que la barre s'affichait pas contrairement au chargement instantané en local...) j'ai cherché d'où pouvait venir l'erreur (changement de nom de variable pour l'adapter à mon code et mes habitudes, hierarchie de mes clips... ?) mais j'ai pas trouvé... si tu te sens motivé et que tu penses être une âme charitagle, dis le moi que j'te mail mon code pour essayer de voir directement ce qui peut couiller... sinon, bah tant pis, j'ferais juste un message de texte statique qui pue la merde...

signaler à un administrateur
Commentaire de TRiPoLYT le 13/09/2005 23:55:47

relou que le script php de ce forum garde pas les tabulations ! dans le genre pas pratique, on peut guère faire pire ! hmmm... avec tout le code que j'donne, c'est chaud sans indentation !
bref... c'est pas encore super complexe alors ça passe...

si les admins pensent que ça vaudrait mieux que j'en fasse un tuto, dites le moi... à la relecture, j'me suis aperçu que j'ai mis le code action script pour 4 images au lieu de 3... j'voulais en mettre que 3 dans ce post histoire de pas répeter 36 000 fois la même chose, parce que si ça passepour 3 images, ça devrait le faire pour 10 000 000 d'images. il suffit d'modifier les variables de l'action script et le contenu du xml... et bien entendu de mettre les images dans le répertoire !

signaler à un administrateur
Commentaire de _benjy le 14/09/2005 00:00:24

alors premierement tu devrai pas mettre le fla en ligne ca prend bcp de place et sert a rien ...
secundo, dans
for (i=0; i<tabimage.length; i++) {
    titre.htmlText = tabtitre[i];
    texte.htmlText = tabtexte[i];
    loadMovie(tabimage[i], "image");
    trace(tabtexte[i]);
}
tu charges d'un coup tte tes images dans 'image', donc seul la derniere sera chargé, car le for est instané, il attend pas qu'une image soit chargé avant de passé a la boucle suivante.
tercio, nul par tu ne fait appel a la barre de chargment donc normal que tu la vois pas
reregarde bien le tutoriel, en mm temps que je charge une image, je défini un onEnterFrame qui controle le chargement et met a jour la barre de chargement
et enfin, il serait sympa de pas poster tt ton code comme ca et de niké mes commentaire de tut, ouvre un post pour tes problemes ...
++

signaler à un administrateur
Commentaire de TRiPoLYT le 14/09/2005 00:08:18

réponse primo :
j'ai juste mis le .fla histoire de voir comment il était fait... que d'éventuels intéressés puissent le refaire ?

réponse seconde :
le code n'est pas de moi, maaais... est ce que ça joue beaucoup sur le temps d'attente de chargement une fois en ligne ? (j'ai testé qu'en local, alors j'me rends pas compte)

réponse tertio :
j'ai laissé tomber la barre de progression dans le code avec le xml car l'objectif de ce code était simplement l'association image + légende (et titre) celà dit, il suffit de faire un bouton "précédent" et "suivant" avec ton code pour la barre...


tiens, histoire de pas trop parler théorie et de plus se rendre compte, voilà
le site concerné : www.pouetes.fr.tc
mon msn : tripolyt@hotmail.com

à tout de suite si t'es motivé et toujours là...

signaler à un administrateur
Commentaire de estitpab le 17/10/2005 12:15:21

Ce tutorial est vraiment utile et bien expliqué, cependant j'ai un petit problème:

Mes images ne s'affichent pas lorsque j'utilise ce code sur un fichier swf chargé sur un niveau supérieur avec la fonction "loadMovieNum("fichier.swf",10)".

Ya t-il une solution pour que mes images s'affichent ou est-ce que cette méthode ne fonctionne que sur une animation de niveau 0 ?

Merci d'avance pour votre aide !

signaler à un administrateur
Commentaire de _benjy le 17/10/2005 12:29:41

théoriquement nan ca devrait pas posser de probleme
mais j'aurai du mal a t'en dire plus car je n'utilise jamais loadMovieNum (qui es déprécié), il faut mieux charger des clip dans une cible (cible.loadMovie() car ca respecte la methodologie objet)...
mais vu que tt les codes sont en relatif, il devrait pas y avoir de prob
donc si ca marche pas le prob vient sans doute d'autre par ...
ciao

signaler à un administrateur
Commentaire de blomito le 01/12/2005 22:17:33

Super, avec un peu de perceverance le principe de ton tut fait  comprendre des fonctionnalites essentielles (je debute). J'imagine que c'est le meme principe pour des swg. En tout cas merci a toi encore une fois.

signaler à un administrateur
Commentaire de frankieflamme le 08/12/2005 19:00:54

Bonjour et merci _benjy pour tes explications claires.
Ton application tourne à merveille.
Existe t'il un moyen pour forcer les images chargées dans le clip cible a prendre, à l'intérieur même du clip cible, une largeur et une hauteur voulues ?
Les images sont souvent de tailles différentes.
Mon souhait serait de pouvoir adapter la taille du clip cible à la taille des images (ou inversement).
Merci pour ton commentaire à venir.

signaler à un administrateur
Commentaire de _benjy le 09/12/2005 14:29:34

t'as pas bcp cherché
http://www.flashkod.com/code.aspx?ID=30119
++

signaler à un administrateur
Commentaire de Dkabal le 08/01/2006 16:37:42

bonjour,

désolé de faire tache parmis tous ces commentaires positifs mais malgré toute ma volonté et mes multiples essais, rien ne fonctionne...
pourtant j'ai suivi a la lettre le tutorial, et je ne suis pas néophyte en informatique (même si ma dernière utilisation de flash était flash3).
C'est dommage car j'aimerai vraiment comprendre le fonctionnement de la technologie flash...

signaler à un administrateur
Commentaire de _benjy le 08/01/2006 17:01:15

ben si tu le fait avec une version inférieur a MX 2004 sur ca marchera pas, mais sinon c forcement que t'as mal suivi le deroulement du tuto...
donc pecise ce qui marche pas / ou tu bloque et donne ta version de Flash utilisé
++

signaler à un administrateur
Commentaire de kikoute le 12/01/2006 23:44:44

Bonsoir tout le monde !
Je débarque sur flashkod et suis novice sur flash, mais ça vient doucement. Merci Benjy pour cet excellent tutorial ! Malheureusement quelque chose m'échappe pour utiliser la fonction setLegende, j'essaie sans cesse, rien à faire. Je ne comprends certainement pas comment on doit l'appeler dans imageNext et imagePrev. Quelle est la formulation, et comment se place-t-elle ??? Sinon, j'ai bien nommé toutes mes legendes dans "function", etc. Voilà, je suis un peu pressée et dans la m...! Alors si quelqu'un connait la réponse...
Merci d'avance !

signaler à un administrateur
Commentaire de kikoute le 17/01/2006 09:26:13

Bonjour !
J'ai résolu mon problème de légendes en utilisant ceci :
loadVariables("titres/titre"+imageIndex+".txt",_root.clip_titre);
et j'appelle ainsi mes fichiers titre1.txt, titre2.txt, etc... qui contiennent mes légendes une par une dans un dossier "titres".
Ça fonctionne très bien.

Par contre j'ai utilisé comme _benjy, tu l'indiques ci-dessus:
if (pc >= 100){
    Image._x = -Image._width/2;
    Image._y = -Image._height/2;
}
Mais ça ne centre pas les images comme il faut, alors j'ai essayé ça qui fonctionne très bien chez moi...

onEnterFrame = function(){
cible._x = (Stage.width/2) - (cible._width/2);
cible._y = (Stage.height/2) - (cible._height/2);
delete onEnterFrame;
}

Le problème est qu'en ligne, le calcul ne se fait pas tout de suite. Avec IExplorer ç'est centré seulement au deuxième passage des images (hum ! hum !) et avec Mozilla, c'est jamais centré !
C'est désespérant tout ça !

Alors je ne sais pas, si quelqu'un a la réponse miracle pour caler au poil les images quelque soit leur taille et leur sens de lecture, j'ai vu qu'on était très nombreux à chercher sur les forums une réponse à ce problème, mais le peu de réponses ne sont pas concluantes... _benjy, si tu es par là, je pense que tu serais d'un grand secours à plus d'un ! Et encore merci pour ton tutorial.

signaler à un administrateur
Commentaire de _benjy le 17/01/2006 15:46:32

pour le rediementionnement
le pc >= 100 ne suffit pas, il faut vérifier aussi que l'image ai une taille.
comme ceci :
if (pc >= 100 and Image._width > 0 and Image._height > 0){
   ...
}
pour cette histoire de légende, encore une fois, cela ne fait pas parti du tuto, et j'ai proposer ce nom de fonction en réponse a un gazier c tout, donc faut arretté d'essayer d'appelé setLegende car si l'on regarde le code on vois bien qu'il n'y a pas de fonction setLegende....
Enfin et pour finir, arretté d'utiliser loadVariables, il y a depuis Flash MX2004 un obj spécifique pour les echange de données : "LoadVars" (voir aide de flash)

++

signaler à un administrateur
Commentaire de elcapazdon le 18/01/2006 08:58:30

Bonjour à tous, j'ai moi même testé ce super tuto, et voilà le résultat...merci encore!!

http://cazenave.paul.free.fr

signaler à un administrateur
Commentaire de _benjy le 18/01/2006 13:55:40

Sympa, belle interface, dit moi cette adresse reste valide longtemps ?
car si oui et si ca te dérange pas je met le lien dans le tuto en exemple ...
++

signaler à un administrateur
Commentaire de elcapazdon le 18/01/2006 16:46:33

a priori l'adresse reste valide, masi le contenu changera car en fait c'est juste une partie d'un site plus gd...

masi je vias essayer de te le mettre de coté et de te filer une URL propre si tu veux...

par contre jai un soucis avec le chargement...plutot avec la barre de chargement, pas moyen d'en augmenter la taille en fonction du chargemtn, masi il ft que je passe encore un peu de tps dessus...
ce soir, je te passe l'adresse definitive a inclure ds ton tuto! :)

signaler à un administrateur
Commentaire de gianff le 17/02/2006 23:34:33

bonsoir, je suis un débutant dans Flash et étant à la recherche de tutoriaux j'ai trouvé celui de _Benjy qui correspond juste à ce qu'il me faut pour débuter mais je n'arrive pas à finir l'animation....
pourriez-vous me dire comment je dois procéder sous Flash pour réussir le diaporama (car j'ai mis tous les codes comme c'est indiqué dans le tutorial de _Benji et quand je lance un aperçu de l'animation il me met qu'il y a des erreurs au niveau des boutons....)

merci d'avance ;)

signaler à un administrateur
Commentaire de rokzan le 20/02/2006 11:55:51

bonjour, je suis un débutant dans Flash et étant à la recherche de tutoriaux j'ai trouvé celui de _Benjy qui correspond juste à ce qu'il me faut pour débuter mais je n'arrive pas à finir l'animation....
Par contre, les images (photos) ne s'affichent pas.
Je les ai nommées img01, img02, img03, img04.
Je ne sais pas ce qui cloche.
Céline

signaler à un administrateur
Commentaire de elcapazdon le 20/02/2006 15:26:39

il ft faire attention a bien nommer les images, genre img01.jpg et non pas img01.JPG, ou inversement.

De plus, attention losque tu nommes tes occurences en AS, genre j'avias l'erreur d'appeler mon calque image "image" et non pas "Image"...

signaler à un administrateur
Commentaire de samort le 21/02/2006 14:35:50

Bonjour, tout d'abord merci pour ce tutorial, mais moi aussi j'ai un problème : lorsque je lance mon animation mes images ne s'affichent pas et aucun message d'erreur n'apparait... :( que dois-je faire? est ce qu'il faut mettre les images dans la bibliothèque ou l'animation va les chercher toute seule... désolée mais je débute... merci d'avance.

signaler à un administrateur
Commentaire de samort le 21/02/2006 14:37:02

Bonjour, tout d'abord merci pour ce tutorial, mais moi aussi j'ai un problème : lorsque je lance mon animation mes images ne s'affichent pas et aucun message d'erreur n'apparait... :( que dois-je faire? est ce qu'il faut mettre les images dans la bibliothèque ou l'animation va les chercher toute seule... désolée mais je débute... merci d'avance.

signaler à un administrateur
Commentaire de tortu2121 le 08/03/2006 12:28:18

Salut à tous! J'utilise Flash depuis un moment mais je suis graphiste pas programmeur... J'arrive au meme genre de résultat final mais sans code, donc avec plus de poids et une mise à jour plus contraignante.
Alors je suis ravi quand je découvre ce genre de code qui me rend vraiment service! Merci à toi _Benji et aux autres qui font me avancer !

signaler à un administrateur
Commentaire de Gollum69 le 18/03/2006 01:23:40

slt à tous, merci pour ce genre de tuto bien sympa et bien expliqué.
Cependant je crois avoir le même souci que samort...
J'ai aucun souci quand je fais ma visualisation en offline (en ayant suivi le tuto) mais en ligne j'ai juste mon anim qui s'affiche sans possibilités de voir les images alors que je les ai uploadées avec le repertoire comme sur mon disque...
Auriez vous une idée de localisation du bug...
Merci.
Gollum

signaler à un administrateur
Commentaire de _benjy le 18/03/2006 10:05:01

faudrait arretter d croire tous que c un BUG, si ca marche en local e pas en ligne c bien que vous avez fait une faille lors de la mise en ligne ou appel de image (prob de chemin ss doute) car sini j'utilise cette techinque depuis 2 ans pour charger les imgs et ca a tjs marché...
ciao

signaler à un administrateur
Commentaire de OminiuS le 13/04/2006 11:32:41

bonjour,
ce tuto m'a l'air pas mal, mais j'aimerais l'adapter dans un chargement xml ou toutes les images sont prechargées dans un movieclip conteneur(un movieclip qui contient d'autres movieclip qui contiennent chacun une image cargée par xml), tout cela dans une boucle FOR

for (var i = 0; i<maxImages; i++) {
//recupére le nom et le lien du fichier
var image = this.firstChild.childNodes[i].attributes.laUrl;
nom[i] = this.firstChild.childNodes[i].attributes.nom;
if(this.firstChild.childNodes[i].attributes.link){
lien[i] = this.firstChild.childNodes[i].attributes.link;
}
// Création d'un clip vide:
diaporama.createEmptyMovieClip("image"+i, 10 + i);
diaporama["image"+i].loadMovie(image);//charge le jpeg
diaporama["image"+i]._alpha = 0;//cache le clip
}

j'ai essayer de l'integrer dedans mais ça n'a pas marché
peux tu me montrer commet je peux le mettre dedans, merci

pour plus d'infos sur mon code
http://www.flashkod.com/forum.v2.aspx?ID=712159&post=ok

voila merci

signaler à un administrateur
Commentaire de OminiuS le 13/04/2006 11:33:14

bonjour,
ce tuto m'a l'air pas mal, mais j'aimerais l'adapter dans un chargement xml ou toutes les images sont prechargées dans un movieclip conteneur(un movieclip qui contient d'autres movieclip qui contiennent chacun une image cargée par xml), tout cela dans une boucle FOR

for (var i = 0; i<maxImages; i++) {
//recupére le nom et le lien du fichier
var image = this.firstChild.childNodes[i].attributes.laUrl;
nom[i] = this.firstChild.childNodes[i].attributes.nom;
if(this.firstChild.childNodes[i].attributes.link){
lien[i] = this.firstChild.childNodes[i].attributes.link;
}
// Création d'un clip vide:
diaporama.createEmptyMovieClip("image"+i, 10 + i);
diaporama["image"+i].loadMovie(image);//charge le jpeg
diaporama["image"+i]._alpha = 0;//cache le clip
}

j'ai essayer de l'integrer dedans mais ça n'a pas marché
peux tu me montrer commet je peux le mettre dedans, merci

pour plus d'infos sur mon code
http://www.flashkod.com/forum.v2.aspx?ID=712159&post=ok

voila merci

signaler à un administrateur
Commentaire de OminiuS le 13/04/2006 11:34:01

oups, j'ai eu une erreur lors du 1er post je pensais pas qu'il l'avait afficher :s

signaler à un administrateur
Commentaire de _benjy le 13/04/2006 13:50:07

yop
ben il fau atribuer un loader (onEnterFrame) a chaque clip :
diaporama.createEmptyMovieClip("image"+i, 10 + i);
diaporama["image"+i].loadMovie(image);//charge le jpeg
diaporama["image"+i].onEnterFrame = function(){
    var pc = this.getBytesLoaded()*100/this.getBytesTotal();
    if (isNaN(pc)) pc = 0;
    if (pc >= 100){
        delete this.onEnterFrame;
        this._alpha = 100;
    }
}
diaporama["image"+i]._alpha = 0;//cache le clip

signaler à un administrateur
Commentaire de proffy le 26/08/2006 13:29:35

tres bon tuto, si je peux me permettre un petit rajout completement optionnel mais neamoins tres efficace pour certaines situations:

il s'agit de mettre en relation ce code avec un fichier PHP qui liste automatiquement le nombre de fichiers dans un dossier et les noms de ceux-ci.

dans ton code, la variable "maximages" est fixe, donc si tu veux rajouter une image de temps en temps, tu dois changer la source (pas tres pratique si tu ne l'as pas a portée de main, dans le cas d'une maintenance de diaporama online par exemple).

je propose donc, avec la fonction "lodavariables" de faire appel a ce document php, qui renverrais le nombre maximum de fichier, et les noms de tous les fichiers du dossier (il n'est donc plus necessaire non plus de renommer tous les fichiers en img1.jpg,...imgN.jpg).

je propose cette variantes car je suis webmaster d'un site ou j'ai eu a faire face a ce probleme de maintenance d'une gallerie photo...

pour ceux que ca interesse, si vous voulez les fichiers php correspondants et les sources: bkuperberg@hotmail.com

signaler à un administrateur
Commentaire de baillezon le 02/03/2007 16:27:29

Effectivement, un bon petit tuto, bien clair !
La proposition de Proffy est egalement bonne si vous souhaitez améliorer l'usage de ce diaporama par la suite.

signaler à un administrateur
Commentaire de _benjy le 03/03/2007 16:54:03

Salut a tous
et d'abord sorry de pas passer très souvent sur le site en ce moment, mais pas assez de temps...
Pour ta proposition Proffy, bien sur que c une bonne idée, et c d'ailleur ce que je fait perso. Mais n'oublions pas le sujet du tuto, qui n'est pas un tuto php, car si je l'avais ajouter j'aurais aussi du expliquer le code php et pour ca on a phpcs.
Par contre je te conseil quand mm d'utiliser l'objet LoadVars, plutot que MovieClip.loadVaraible qui ce dernier est déprécié depuis la version 7 de flash.
Perso je passe par xml, car ca permet d'utiliser le mm php pour plein de chose apres, par exemple le lié a une doc xml pour affiché le contenu.
Bonne continuation a tous

Benjy

signaler à un administrateur
Commentaire de la_chourave le 08/04/2007 21:55:38

Bonsoir,

Je suis novice en programmation, ton code semble clair, seulement j'ai moi aussi un problème d'affichage des images. Sûrement la fatigue qui doit être impliquée dans ce problème...

J'ai bien nommé tout mes calques, mes fichiers, et même les occurences (dans propriétés) comme tu l'indiquais (avec respect des majuscules et de l'orthographe). Rien n'y fait.

Sorry, mais j'ai une question qui va peut-être te sembler bête à te poser : qu'entends-tu par racine du répertoire lorsque tu nomme un dossier "images"? Est-ce à l'intérieur du fla dans la librairie, ou bien à la racine de ton répertoire de disque dur où tu as enregistré ton fla ?

J'ai testé les deux possibilités, la seconde m'affiche le message d'erreur suivant :

Error opening URL "file:///F|/multimédia/flash/diaporama/images/img0.jpg"  

Je reste confus de te poser ce genre de question, mais je te remercie d'avance si tu peux me dépanner.

Bien à toi,

El Chouros

signaler à un administrateur
Commentaire de _benjy le 08/04/2007 22:33:10

LOL c'est vrai que la fatigue nous fait souvent faire des bétises :)
Sinon, pour répondre a ta question, je parle bien de l'arborescence sur la DD, si ton flash est dans ton dossier diaporama (et donc le swf que tu compile), la racine dont je parle est bien ton dossier diaporama, et l'url pour charger le fichier est donc movie.loadMovie("images/img0.jpg");
Quand à ton message d'erreur, pas de doute, c'est un problème de chemin dans le loadMovie... donc vérifie encore un coup...
++

signaler à un administrateur
Commentaire de la_chourave le 09/04/2007 20:00:47

Simple, net, rapide et efficace...un grand merci tes explications m'ont permis de réussir le fichier prototype. J'avais juste fait aussi une erreur lorsque j'avais renommé mes fichiers : j'avais écrit ".jpg" alors que c'étaient déjà des images de ce type. D'où le message d'erreur.

Voilà qui est corrigé. Maintenant je m'occupe de refaire une interface digne de ce nom, de l'intégrer à mon site, et j'enverrai l'adresse histoire de t'en faire profiter ainsi que les visiteurs de ce forum.

Cordialement,

El Chouros

signaler à un administrateur
Commentaire de _benjy le 09/04/2007 22:11:38

;) no prob, avec plaisir quand les gents sont agréables comme ca.
et yep met le lien, ca le fera tjs
++

signaler à un administrateur
Commentaire de la_chourave le 10/04/2007 22:22:02

Merci, je te renvois la politesse.

En revanche, j'ai un problème avec le clip de ma barre de chargement. Lorsque je teste cell-ci, elle apparaît à la fois excentrée, complètement déformée, et jamais à la même place.

J'ai essayé différents types d'animations, même statiques (du texte, lol !), rien n'y fait. Sûrement existe-t-il un script pour locker les dimensions d'un clip...j'ai là encore le sentiment d'être victime malgré moi d'une erreur de débutant, grrrrrrrr.

Quelqu'un aurait-il une piste à me fournir ?

En vous remerciant,

El Chouros

signaler à un administrateur
Commentaire de _benjy le 11/04/2007 14:23:57

Ben alors là je vois pas trop ce que t'as pus faire, la seule idée qui me viens c'est que tu aurai mis ta barre de chargement dans le conteneur (clip dans lequel tu charges les imgs)...
send ton fla (et bien sur images, php, base mysql, etc... qui peut servir, le mieux étant de me préparer ta source a par que j'ai pas a chercher ou regarder...) sur kolapsis@gmail.com, j'essairais d'y jeuter un coup d'oeil quand j'aurais le temps... (ce sera p'etre pas aussi rapide qu'une réponse sur le forum par contre...)
++ & bon courage

signaler à un administrateur
Commentaire de jeungob le 09/06/2007 01:11:20

merci pour ce tuto c'est pile pwal ce que je voulais savoir ^^

signaler à un administrateur
Commentaire de aeonflux le 06/07/2007 08:19:27

Heu.... je constate que tout les tutos sur les sites web de codes il n'y a AUCUNS exemples !!!???? rien ! pas d'images ! ni de SWF... c'est bien dommage messieurs à quoi bon faire des tutos si il n'y  pas d'exemples ou bien d'images

signaler à un administrateur
Commentaire de hopak le 17/09/2007 17:37:47

ce tuto est génial... pas de chargement a ralonge pas de prise totale du proc...

je pense qu'il n'y a pas du tout besoin d'image ou d'exemple tellement l'explication de ben est claire et précise...

rien qu'a lire le tuto on vois l'exemple dans nos tete.
bravo et un 10

signaler à un administrateur
Commentaire de compin le 23/09/2007 15:38:08

Bonjour à tous,
Merci _Benjy pour ce Tuto.

Depuis ce principe, peut-on faire succèder les images sans ruptures?

...Pour qu'une image ne disparaisse qu'au moment où la suivante fait son entrée...

Si vous avez une piste...
Merci

signaler à un administrateur
Commentaire de gonimus le 11/10/2007 15:40:22

salut et merci _Benjy
C'est un excellent tuto, et c'est pile ce que je cherche a faire... Sans y arriver.
L'enfer, j'ai retourné ces quelques lignes de code dans tous les sens et je me retrouve toujours sans images, avec la barre de chargement complete (et qui reste immobile).
J'ai testé les images sans et avec l'extension .jpg, mais rien n'y fait.
...
Si vous avez des pistes je suis à l'écoute
Merci

signaler à un administrateur
Commentaire de _benjy le 11/10/2007 16:36:08

Salut,

Comme ca sans détails il est impossible pour moi de t'aider.
Le plus simple est que tu poste ta source (ou au moins ton script [fct & variable]) sur le forum (pas dans mon tuto please) puis tu me préviens par message privé en me donnant l'url de ton poste, et là si j'ai une solution, je te la donnerais.

Mais sinon si tu gardes le code que je fourni dans ce tuto et des images JPG dans un dossier nommé "images" (les image s'appelant "img0.jpg","img1.jpg",...) ca marche a tout les coups...

++
et @bientot sur ton post

_benjy

signaler à un administrateur
Commentaire de gonimus le 11/10/2007 20:40:14

Salut et merci de la rapidité de ta réponse,

J'ai essayé de détaillé la situation ici : http://www.flashkod.com/infomsg_PRB-DIAPORAMA_1020893.aspx#1
mais il y a comme un souci de casse et je doute que tout cela soit trés lisible, sinon je t'ai envoyé une capture d'écran (tout y tiens) à l'adresse que tu a déjà posté sur ce forum.

Merci encore
Ciao
GIOM

signaler à un administrateur
Commentaire de _benjy le 12/10/2007 10:27:43

OUPS ERRATUM
grace au problème de gonimus, je viens de m'appercevoir qu'il y a une coquille qui c'est glissé dans mon code, et malheureusement je n'arrive pas a modifier le tuto (p'tit problème avec le nouveau flashkod je pense, je vais le signaler a Nix).
Dans le fonction "imageNext" & "imagePrev", le control du chargement (calcul de pc) est erroné :
var pc=Image.getBytesLoaded()*100/_root.getBytesTotal();
en effet c'est la au poid total de l'anim que l'on souhaite compare le poid de l'image en cours de chargement, donc :
var pc=Image.getBytesLoaded()*100/Image.getBytesTotal();
Désolé pour ce qui ne l'avait pas vu et a qui ca a posé des problèmes.

_benjy

signaler à un administrateur
Commentaire de jumbatisht le 11/12/2007 20:02:55

Salut à tous, et surtout à toi O _BENJY, je suis débutant en flash, sans grande prétentions, je m'amuse un peu, mais j'ai l'impression que ce truc peut te piquer assez violemment.

Bref, Flash c'est génial et sans trop comprendre le pq du comment, avec ces tutos en copier/coller, ça marche. Merci _BENJY.

Mais _BENJY, c'est un peu léger le passage d'une image à l'autre sans fade out, par exemple. Est ce que tu pourrais me dire comment je pourrais faire ça, mettre un effet de transition entre chaque images.

D'avance merci et joyeux Noêl à vous autes.

signaler à un administrateur
Commentaire de justinientrib le 19/12/2007 16:20:30

Moi aussi je suis novice, et j'ai beau m'acharner je n'y comprends pas grand chose, malgré le copier/coller, flash m'indique tout un tas d'erreurs.

signaler à un administrateur
Commentaire de TRiPoLYT le 19/12/2007 16:35:02

faire un copier/coller sans réfléchir avant à ce qu'on fait n'a jamais aidé à comprendre !
de plus, ce code avait été fait sur flash mx (actionscript 1) si j'me plante pas, or, aujourd'hui, on en est à flash 8 (et l'actionscript 3 pointe son nez) donc des incompatibilitées doivent naitre, c'est sur !

essaies de comprendre le code d'origine, savoir le rôle de chaque portion de code.. ça va t'aider, d'une part à progresser par toi même au lieu de recopier bêtement, et d'autre part à apprendre à débugguer un code, ce qui t'aidera dans tous tes projets futurs.

si après cette étape t'as toujours des soucis, on va se pencher sur la chose plus en détail.

signaler à un administrateur
Commentaire de _benjy le 19/12/2007 17:10:26

salut tous
bon juste quelques rectifications :
1/ Je suis completement OK avec Tripolyt, copier/coller ca sert a rien faut d'abord essayer de comprendre les méchanismes en jeu.
2/ mon code est en AS2 (et non AS3) il fut fait avec Flash MX 2004
3/ Aujourd'hui on est en Flash CS3, et non en Flash 8 (d'ailleur avis aux interressé, j'ai une licence Flash 8 a vendre...)

Ensuite, ce qui est sur c'est que si tu suis les instructions, mon code marche (je m'amuse pas a poser des fake).
Si en effet tu es novice, j'imagine que tu as recupérer Flash CS3 en démo chez Adobe, donc lorsque tu créer un nouveau document Flash, tu sélectionne bien "Action Script 2" (c'est AS3 par defaut donc faut faire gaffe), et là après en suivant les étapes ca marche !

++
_benjy, el flasheur loco

signaler à un administrateur
Commentaire de TRiPoLYT le 19/12/2007 18:16:07

oups, pour la version de flash, j'me suis un poil ramassé : comme j'suis passé de mx 2004 à cs3, j'ai pas fait gaffe que cs3 était le 9 et pas le 8 comme j'ai écrit plus haut. mille excuses.
(maaais t'es certain que mx2004 était en as2 par défaut ?)

concernant le code, comme tu peux voir dans les premiers comms, ça marche très bien. j'avais même ajouté un commentaire pour les photos..

signaler à un administrateur
Commentaire de _benjy le 19/12/2007 18:48:26

sur et certain (voir mm plus) que MX2004 = AS2 ;)

signaler à un administrateur
Commentaire de flashdanse le 15/02/2008 13:26:36

bonjour


je vient de tester le tuto

et jais un problème rien ne s'affiche


es-que quelqu'un pourrais m'aider


voici la source du tuto avec mes images

http://www.megaupload.com/fr/?d=1ZCFCLS0

merci d'avance flashdanse

signaler à un administrateur
Commentaire de _benjy le 16/02/2008 18:54:09

se serait quand mm pas mal de lire le tuto av de dire : "ca marche pas quelqu'un peut m'aider" ...
t'as mm pas lu la première ligne : "Mettre dans un répertoire disons pour l'exemple nommé "images", avec toutes les images nommées img0.jpg, img1.jpg...imgN.jpg"
tes images a toi sont nommées différemment "image1.jpg,image1.jpg.jpg,image2.jpg,image2.jpg.jpg" ...
donc forcement flash va avoir du mal a trouver les images !

je te conseil donc de lire et suivre les explication du tuto et tu verras ça marche nikel

ciao
_benjy

signaler à un administrateur
Commentaire de bacchanales le 11/04/2008 11:46:17

Bonjour,

Première chose, pour éviter de voir la barre apparaitre et disparaitre en un éclair à l'appel de la fonction ImageNext, il faut passer la ligne Barre._visible = true, qui inaugure la function ImageNext dans le code proposé à l'intérieur de la fonction onEnterFrame.

Soit:

BarreChargement._visible = false
imageIndex= -1;
maxImage= 4;
function imageNext(){
onEnterFrame= function(){
BarreChargement._visible = true;
var pc=Image.getBytesLoaded()*100/Image.getBytesTotal();
BarreChargement._xscale=pc;
if (pc >= 100){
BarreChargement._visible = false;
delete onEnterFrame;
}
}

au lieu de:

BarreChargement._visible = false
imageIndex= -1;
maxImage= 4;
function imageNext(){
BarreChargement._visible = true;
onEnterFrame= function(){
var pc=Image.getBytesLoaded()*100/Image.getBytesTotal();
BarreChargement._xscale=pc;
if (pc >= 100){
BarreChargement._visible = false;
delete onEnterFrame;
}
}


Moi, amateur débile, très fier avoir trouvé ça ce matin...


PAR CONTRE:

ça fonctionne nickel sous IE7

ça fonctionne pas du tout dans Firefox 2.0.0.13: les images passent, mais de barre de chargement, point... Nib, que dalle!

Pourquoi? Je croyais que le plugin flash était plus ou moins le même...

Moi amateur débile aimerait bien un coup de main...

signaler à un administrateur
Commentaire de _benjy le 11/04/2008 14:34:53

Salut
Alors, laisser le Barre_mc._visible = true; dans le onEnterFrame, n'apporte rien est en plus ajoute une action inutile dans le onEnterFrame (executé en permanance je le rappel)...
Ensuite pour Firefox, vérifie que tu ai bien la mm version que dans IE, car certe ce sont les mm (en ce sens que la machine virtuel est la même), mais l'un est un activeX (ie) l'autre un plugin (firefox) ce ne sont donc pas les mm distribution, et il se peux donc que l'un des 2 soit pas à jour...
Perso avec Firefox 2.0.0.13, pas de prob chargement et affichage d'image nikel !
Bon courage et ++

Benjamin

signaler à un administrateur
Commentaire de toyboyzi le 19/05/2008 18:26:29

Bonjour, j'ai essayer de suivre attentivement ton tuto à la lettre mais la barre de progression marche mais aucune images se load, voici mon code, d'où peut venir le problème? j ai pourtant bien mis mes images dans un dossier "images" dans le dossier ou se trouve mon .fla :

BarreChargement_mc._visible = false;
imageIndex= -1;
maxImages= 34;

function imageNext(){
    BarreChargement_mc._visible = true;
   onEnterFrame= function(){                                   //l'enterFrame un fonction executé tout letemps
       var pc=Image.getBytesLoaded()*100/_root.getBytesTotal();   //calculedu % de l'image qui est chargé
        BarreChargement_mc._xscale=pc;                             // on change la taille de la barre de chargement
      if (pc >= 100){                                          // et si tout estchargé
         BarreChargement_mc._visible =false;                       // on recache la barre dechargement
         delete onEnterFrame; // onsuprimel'enterFrame;          // etonsupprime la fonction exécuté en permanace, histoire de pas surgargerleprocesseur pour rien ...
        }
    }
    imageIndex++;
    if (imageIndex > maxImages){
       imageIndex = 0;
    }
    Image.loadMovie("images/img"+imageIndex+".jpg");
}

function imagePrev(){
    onEnterFrame = function(){
        var pc = Image.getBytesLoaded()*100/_root.getBytesTotal();
        if (pc == 100){
           delete onEnterFrame;
        }
    }
    imageIndex--;
    if (imageIndex <= -1){
       imageIndex = maxImages;
    }
    Image.loadMovie("images/img"+imageIndex+".jpg");
}

signaler à un administrateur
Commentaire de unstatic le 16/10/2008 11:16:19

Bonjour, et merci pour ce tuto qui m'a beaucoup aidé.
Mais moi aussi j'ai un petit souci, la barre de chargement ne disparait pas de l'écran, enfin, pas tout le temps ou pas entièrement.
Voici le lien pour voir le résultat:
http://daviza.free.fr/za2/works.html

D'où peut venir mon problème?

Merci

signaler à un administrateur
Commentaire de _benjy le 16/10/2008 12:50:49

salut
la fonction imagePrev de ToyBoyzi n'est pas bonne il suffit de comparer avec la imageNext du dessus; manque dans imagePrev l'affichage initiale de la barre, le test doit etre sur un >= et non == il faut desafficher la barre quand c'est chargé.
ensuite si la barre disparait pas une fois le chargement fini c'est forcement qu'il y a une erreur de frappe, de nom d'occurence ou du genre dans ton script car j'ai utilisé cette méthode pdt des années avant de passer à l'as3 et j'ai jamais eu de prob sans quand mes doigts tapé pas ce qu'il fallait :D
allé ++ et bon courage pour le debug

_benjy

signaler à un administrateur
Commentaire de djbeck le 16/03/2009 06:55:53

bonjours tous le monde ...
j'ai un souci .. je suis debutant de chez debutant ...
et voila j'ai reussi a crée un looper sans souci ...
mes basic ...
la je suis entrain dans crée un autre sur le quel j'ai rajouter grace a tous vos forum , des bouton stop play et pause , jusqu'ici tous va bien ... sa marche nikel ...
mes j'aimerai bien metre un fader pour le style ...
grace au forum j'ai trouver ou il se cacher dans flash 8 j'ai donc mie un fader ( gain ) sur mon nouveau looper ...
mes comment on fait pour qu'il controle le ou les volume du looper ... ses quoi l'operation a faire svp soyer simple j'ai passer la nuit a tournee sur les forum sans rien trouver ...
je l'aisse une addresse mail au qu'a ou dj.beck@hotmail.fr

signaler à un administrateur
Commentaire de trustin le 08/05/2009 14:36:28

Très bon tuto du tonnerre de la mort qui tue :)

Cependant j'ai une petite question, Est-il possible de charger plusieurs images depuis le dossier "images" et qu'elles s'affichent les unes à coté des autres où est-on obligé de refaire un movie clip à chaque fois ?

Un grand merci d'avance et encore bravo pour ce tuto.

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,094 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.