[FLASH MX] Créer un slider d'images dynamiques

Version imprimable

31/05/2006, 14h33
Miles Raymond

[FLASH MX] Créer un slider d'images dynamiques

Bonjour,

J'ai décider, pour une sorte de portfolio, de créer un slider d'images. Ces images serait récupérer depuis une base de donnée (enfin, leur lien quoi) de cette manière j'aurais un portfolio dynamique et superbissime !

Oui c'est bien beau tout ça mais en pratique c'est pas si sublimissime du tout. Voilà ma stratégie, j'aimerais bien savoir ce que vous en pensez, et d'autres petites choses :

Je crée une base de donnée avec toutes les infos que j'afficherai dans mon portfolio (le lien de l'image, une description, etc.).
Je crée un fichier ref.php dans lequel j'affiche tout les résultats de ma base sous la forme :
&image0=image.jpg&description0=description&image1=image.jpg&description1=description...etc....
...ou "0","1",etc. sont en fait la variable $i (basique quoi).
Ensuite dans flash, je récupère les variables présentes en faisant une boucle et j'envois toutes mes images dans un movieclip, chaque images à une position x différente pour qu'elle soit parfaitement alignés les unes à la suite des autres.

Voilà, c'est déjà un bon début, pour le moment j'aimerais être capable de faire ça, je reviendrai pour la suite.
Question : avec LoadMovie() j'arrive à charger l'image, seulement comment faire pour donner la position de l'image, et ne pas écraser l'image précédente en faisant un nouveau LoadMovie ? Faut-il utilisé LoadMovieClip ? Est-ce que ça fonctionne avec MX 2002 (6) ? J'ai des doutes...

Ensuite en fait il faudrait pouvoir faire de ces images des boutons. Comment faire ça en ActionScript ?

Je suis pas au bout de mes peines :lol:

Merci !
01/06/2006, 08h05
dom_dev
bonjour,
avec du retard, car je vois que personne n'a relevé le defi...
Le plus dur pour moi sera de dire si ton projet est faisable avec MX2004 par rapport à F8 ?
Cependant un premier conseil, c'est bien la méthode LoadMovie() qu'il faut utiliser mais attention cette méthode s'utilise de la sorte :
Code:

1 2 mon_clip.LoadMovie("picture.jpg");
sachant que si tu renouveles l'opération avec picture2 par exemple tu écrases picture. Donc il te faudra créer autant de clip que d'image à visionner pour cela tourne toi vers les méthodes :
Code:

1 2 3 4 createEmptyMovieClip(name:String, depth:Number) //attention c'est une méthode donc elle s'utilise de la sorte : mon_clip.createEmptyMovieClip(name:String, depth:Number)
Tu peux aussi t'interesser à la méthode
Code:

1 2 attachMovie()
grâce à ces méthodes tu pourras créer dynamiquement autant de clips que nécessaires.
Voilà c'est pas encore la solution à ton projet mais fait éventuellement quelques tests et n'hésite pas à revenir nous voir,
bon courage.
01/06/2006, 09h19
Miles Raymond

Merci beaucoup :D

Alors voilà, déjà j'arrive à créer des clips. Ensuite, pour le boutons, je créer d'autres clips de la même taille que mes images et je les superposes sur ces dernière en leur donnant les attributs Rollover, rollout, release, que je veux (apparament j'ai pas trouvé de moyen de donner ces attribus à un clip chargeant une image :? ).

Maintenant, pour récupérer les liens de mes images, plutôt que de me fatiguer avec des variables php, j'ai opté pour la génération d'un document prenant la structure d'un XML dans mon php (donc la source que flash lira aura la gueule d'un XML, pas besoin pour ça que l'extension soit .xml je crois...). J'ai générer le fichier, maintenant je m'informe sur l'utilisation de xml dans flash. J'avance bien je suis content :)

Hum :?

Quel *#!%& ce XML mes aïeux... Voilà donc le fichier XML que je génère en php (pour le travail en local j'ai écris, dans un fichier xml.php, en dur, les données récupérée, donc ce meme fichier xml) :
Code:

1 2 3 4 5 6 7 <?xml version="1.0" encoding="iso-8859-1" ?> <references> <div style="margin-left:40px"><ref idRef="0"></div> <div style="margin-left:40px"> <div style="margin-left:40px"><site>Siegrist Centre Orval</site></div> <div style="margin-left:40px"><lien>http://www.centre-orval.ch</lien></div> <div style="margin-left:40px"><description>Blablabla</description></div> <div style="margin-left:40px"><type>XHTML 1.0, CSS 2.0</type></div> <div style="margin-left:40px"><image>siegrist.jpg</image></div></div> <div style="margin-left:40px"></ref></div> <div style="margin-left:40px"><ref idRef="1"></div> <div style="margin-left:40px"> <div style="margin-left:40px"><site>sarubin</site></div> <div style="margin-left:40px"><lien>http://www.sarubin.ch</lien></div> <div style="margin-left:40px"><description>blablabla</description></div> <div style="margin-left:40px"><type>type</type></div> <div style="margin-left:40px"><image>sarubin.jpg</image></div></div> <div style="margin-left:40px"></ref></div> <div style="margin-left:40px"><ref idRef="2"></div> <div style="margin-left:40px"> <div style="margin-left:40px"><site>vaudan</site></div> <div style="margin-left:40px"><lien>http://www.vaudansa.ch</lien></div> <div style="margin-left:40px"><description>blablabla</description></div> <div style="margin-left:40px"><type>type</type></div> <div style="margin-left:40px"><image>vaudan.jpg</image></div></div> <div style="margin-left:40px"></ref></div> <div style="margin-left:40px"><ref_nb nb="3" /></div> </references>
Ensuite j'ai fais des tests en local. Voilà mon chtit code flash :
Code:

1 2 3 4 5 6 7 myXML = new XML(); myXML.ignoreWhite = true; myXML.load("xml.php"); myXML.onLoad = function () { trace(myXML.firstChild); }
Dans ce cas il n'affiche pas que le premier enfant, mais tout le texte XML(sans la déclaration <?xml?> cela dit). J'ai aussi essayé lastChild, j'ai essayé de récupérer l'attribut idRef de <ref>, j'ai essayé de mettre tout ça dans un tableau (myArray = myXML.childNodes). Mais à chaque fois, soit il me dit "undefined" (pour un attribut par ex.), soit il m'affiche tout le fichier XML. Comme si mon document XML était mal codé (alors qu'en l'ouvrant dans IE, ça marche très bien).

Une idée ? (je n'ouvre pas de nouveau topic, ça reste dans mon projet, c'était évident que j'allais cumulé les problèmes :mrgreen: )

Merci.

EDIT:
Oké oké oké
Bon je me suis découragé un peu vite je comprends mieux le fonctionnement (en faisant un nodname j'ai remarqué que le childnode était en fait le tout premier noeud, ce qui fais de moi un immense idiot :lol: :oops: ). Bon là j'attaque sérieux, ça va chier des braises !

01/06/2006, 11h29
dom_dev

bonjour,
même si une nouvelle question fait parti de ton projet global, n'hésite quand même pas à ouvrir un nouveau "topic" spécifique" c'est plus facile à lire pour les autres contributeurs du forum. Par exemple un "expert" XML ne répondra peut être pas à ta question parce qu'elle ne sera pas clairement affichée comme telle dans le titre du topic...
Personnellement je n'utilise pas XML comme toi, exemple :

Citation:

references>
<ref idRef="0">
<site>Siegrist Centre Orval</site>
<lien>http://www.centre-orval.ch</lien>
<description>Blablabla</description>
<type>XHTML 1.0, CSS 2.0</type>
<image>siegrist.jpg</image></ref>

je préféres :

Citation:

<reference idRef="0" site="balala" lien="ww.blabla" descr="..."/>
<reference idRef="1" site="balalabab" lien="ww.blabla2" descr="..."/>
...

cela fait un fichier bien plus léger, et plus facile à parcourir...
;)
01/06/2006, 13h13
Miles Raymond

Citation:

Envoyé par dom_dev

cela fait un fichier bien plus léger, et plus facile à parcourir...
;)

En fait j'avais créer ce gros fichier sur la base d'un exemple que j'avais vu sur le net. Mais comme j'ai plus de problème niveau manipulation des données et comme je suis parvenu à générer dynamiquement mes images depuis leur lien de la base de données (ouf), j'ai retoucher tout ça en utilisant justement ces attributs. Donc : c'est plus léger, c'est plus rapide (à ce que j'ai lu) et le pire c'est que c'est encore plus simple a utiliser (j'ai pu virer 5-6 lignes avec ça :D ). Encore un excellent conseil, merci dom ;)

Bon j'ai encore du boulot moi ! :)

Bon j'affiche les images et j'aimerais pouvoir scroller le tout, d'accord, donc jusque là, ok. Je créer déjà un scroll (avec des targetY et une vitesse donnée pour donnée un mouvement de freinage à mon anim,et tout et tout), pas de fleche up, down, juste une grosse barre de scroll que je drag dans un espace définis.

Le gros soucis de cette IMMENSE saloperie (hum :lol: ) c'est que malgré mes calculs : la barre change sa position initial suivant sa taille (puisque le nb d'images est dynamique), lorsque je bouge celle-ci les images avance mais dès que j'en ai trop, en descendans la barre elle n'affiche pas la moitié de mes images une fois au fond. Un peu de code tiens :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 //position de départ de mon clip contenant les images _parent.img.targetY = img._y+100; //récupération du nombre d'image multiplier par la taille de //ces dernières pour avoir la taille total du schmilblick var len = (int(ref.length))*90; //Dans cette fonction je gère le mouvement tout en douceur de mon clip //un des problème doit venir de là déjà, je divise par 3, mais suivant //la valeur que je donne, je peux scroller plus bas... J'ai choper //ça sur un site celà-dit _parent.img.onEnterFrame = function() { var speed = 3; this._y += (this.targetY - (this._y)/3) / speed; } //je vérifie que la taille de mon clip est supérieur à 387.1, //càd la taille disponible sur l'animation, pour mon clip, //si c'est le cas j'arrange ma barre de scroll if (len>387.1) { //une petite variable pour avoir le rapport entre la taille des images //et la taille dispo var lenRap = 387.1 / len; //la je donne la taille de ma barre, j'ai modifié suivant un exemple que //j'avais trouvé sur le net, mais j'avais une ancienne version qui fonctionnais //je crois que c'est un des coeurs du problème _parent.slide._height = 387.1 - (12 * (int(ref.length) - 3)); //- ((387.1/(int(ref.length)*80))*10) ; //je redonne la position à ma barre après l'avoir redimensionné, ce qui ne sert à rien... _parent.slide._y = 0; _parent.slide.onPress = function(){ //le startDrag dans un espace définis qui est la aussi plutôt foiré et aléatoire... this.startDrag(false,114.9,0,114.9,387.1-this._height); } _parent.slide.onRelease = function(){ this.stopDrag(); } } else { //je cache tout, comme un fourbe, si le scroll n'a pas lieu d'être ! _parent.slide._visible = false; _parent.bgBarre._visible = false; }
Pour le reste, ce qui ne concerne pas cette saleté d'affichage : les images sont créer, les boutons aussi, plus qu'à gérer la réaction lorsqu'on clique sur ces derniers (affichage de la description, etc...). Ce qui ne doit pas être bien difficile ma foi.