action sur image chargée

Question

Bonjour tout le monde,

N'étant pas très expérimenté en acitionscript, j'ai du mal à mettre en place ce qui m'est demandé.

J'ai un bouton qui charge une grande image dans un conteneur & deux miniatures à côté.
je souhaite qu'en cliquant sur ces miniatures, l'image correspondante se charge à la place de la grande.

C'est une galerie dynamique quoi.

Quelqu'un aurait une idée SVP ??

cs_Burnside · Answer

Slt,

AS tu deja regardé sur le site et google, je pense que tu y trouveras ton bonheur.

Sinon regarde du coté du xml pour charger tes images.

Bàt,
Burnside.

..:: Enjoy living in hell ::..
http://www.art-line.be

frankycha · Answer

ok merci, j'ai deja regardé du côté du XML mais je vais continuer.
Merci

sep2vigne · Answer

Salut,

Si tu débutes et que tu n'as pas besoin de révolutionner le monde du diaporama, je te propose une méthode simple pour commencer.
L'idée est de créer des couples bouton/image.
En réalité il s'agira de couples bouton/variable faisant réference à l'image.

Les boutons seront les conteneurs qui contiennent les petites images.
Les variables seront de type String et contiendront les adresses des images :




var image1:String = "une_image.jpg";
var image2:String = "dossier/dossier/une_autre_image.jpg";






On charge l'image 1 (par exemple) dans la cible de la grande image. Imaginons que tu ais nommé cette cible "conteneurGrande" :




conteneurGrande.loadMovie( image1 );






A partir d'ici, il faut que tes miniatures représentes les images auxquelles elles font références.
Sur le principe du couple bouton/variable avec un id commun, on va charger les images dans les miniatures.
On garde la possibilité de revenir à l'image 1 en l'associant au bouton 1 :




conteneurMiniature1.loadMovie( image1 );
conteneurMiniature2.loadMovie( image2 );




imaginons maintenant que tu ais à charger 48 images. Tu va donc utiliser 48 miniatures
(je passe le détail de la mise en place des 48 boutons )

conteneurMiniature1.loadMovie(image1);

conteneurMiniature2.loadMovie(image2);

conteneurMiniature3.loadMovie(image3);

conteneurMiniature4loadMovie(image4);




conteneurMi..........STOP !!




L'intéret d'avoir associé des id à chaques couples bouton/variable intervient ici.
On va pourvoir affecter la même action commune aux 48 boutons (le loadMovie) avec les 48 paramètres associés à chacuns.
Pour ce faire on va utiliser une boucle. Le code à l'intérieur va se répéter tant que i sera inférieur ou égal à 48 :

for ( var i=1; i<=48; i++ ){
   image = eval( "image" + i );
   cible = eval( "conteneurMiniature" + i );
   cible.
loadMovie( image);
}






"image" + i

 donnera d'abbord image1, puis image2, puis image3 ... jusqu'à image48.
En entourant "image" + i avec eval(); tu 

demande au code de vérifier si un object possède ce nom.
Si c'est le cas et qu'il s'agit d'une variable, il saura que tu fais réference à la valeure
 que tu y as stockée.
Il en va de même pour les cibles :

eval( "conteneurMiniature" + i );
 est traduit par le code comme étant une référence direct à chacun des boutons de la scène nommés conteneurMiniature1 ... à conteneurMiniature48.

L'idée est d'apporter toujours plus de souplesse à ton code pour d'une part pouvoir le réutiliser dans d'autres projets et d'autre part pouvoir le faire évoluer facilement.





---

Ceci étant dit, parlons de ton principal problème > quand tu cliques sur une miniature, la grande image change.

En utilisant la même méthode décrite précédemment, tu vas pouvoir facilement répeter les mêmes actions sans avoir besoin de connaitre exactement le nom du bouton que tu es en train de cliquer, l'adresse du fichier qu'il doit appeler etc ...


Commencons d'abord par dire au conteneurMiniature1 qu'il est un bouton :




conteneurMiniature1.onRelease = function(){
   ///instruction à executer
}




Lorsque je clique sur le conteurMiniature1, je veux charger l'image 1 dans la grande cible :

conteneurMiniature1.onRelease = function(){

   conteneurGrand.loadMovie(image1);

}




Pour ne pas répeter ces trois lignes à chaque miniatures, nous pouvons déclarer la fonction une fois et l'assigner à chaque bouton.
Nous déclarons donc d'abord la fonction commune à tous les boutons. Celle-ci attendra deux paramètres, le nom du bouton (btn) et l'image qui correspond (img) :

function boutonCharge(btn, img){
   btn.onRelease = function(){
      conteneurGrand.loadMovie(img);
   }
}




Pour associer cette fonction aux boutons on écrit :

boutonCharge( conteneurMiniature1, image1 );
boutonCharge( conteneurMiniature2, image2 );
 ... etc

Comme tout à l'heure, imagines que tu ais ces fameuses 48 images à charger ... on utilise donc une boucle et la méthode eval() :

for (var i:Number=1; i<=48; i++){
   bouton = eval( "conteneurMiniature" + i );

   image = eval( "image" + i );
   boutonCharge( bouton, image );
}




A ce stade, ton code est opérationnel et te permet d'ajouter autant d'images que tu le souhaites en ne changeant que le 48 par le nombre réel d'images.

Dans ton cas actuel, tu n'as que deux images, ton code complet sera donc :

//les adresses de tes fichiers :
var image1:String = "une_image.jpg";

var image2:String = "dossier/dossier/une_autre_image.jpg";

//ta fonction de chargement
function boutonCharge( btn, img ){

   btn.onRelease = function(){

      conteneurGrand.loadMovie( img );

   }

}

//l'initialisation des tes conteneurs en tant que boutons
for ( var i:Number=1; i<=2; i++ ){

   bouton = eval( "conteneurMiniature" + i );


   image = eval( "image" + i );

   boutonCharge( bouton, image );

}






Par la suite, il est préférable de remplacer les variables par du xml. Cela te permet de séparer les informations qui peuvent changer fréquemment du code proprement dit qui lui rèste le même. Tu peux également ajouter une variable qui indique le nombre d'images à charger. Cette variable vaudra "48" dans les exemples précédents ou "2" dans ton cas actuel.
Les outils de lecture d'xml te permettent de connaitre le nombre d'images qui y sont référencées. La variable dans ton code récupère cette info et en avant la musique.

De même, et dans l'idéal, tu ne places pas tes clips sur la scène en les faisant glisser avec ta souris. En effet tu ne vas pas t'amuser à nommer 48 clips. Si deux jours après on te demande d'en rajouter 20 il va falloir revenir et recommencer. De la même facon qu'on a ici parlé aux clips en utilisant les id, les boucles, l'eval.. etc tu dois orienter tes recherches vers les attachMovie, duplicateMovieClip etc .. ces fonctions placées dans des boucles semblables à celles développées dans cet exemple te permettront de placer dynamiquement les clips sur la scène, de les nommer en utilisant les id etc..

Bon j'arrette là,
En éspérant que tout cela soit plus clair,

sep

frankycha · Answer

Bonjour Sep et merci beaucoup pour ce tuto, c'est sympa. Je vais voir tout celà aujourd'hui en details.
Encore merci!!!

FrankyC

frankycha · Answer

Pour l'instant, j'utilise la source d'une galerie dynamique faisant appel à du xml;
N'ayant pas les bases de la programmation Actionsrcipt. J'avance sur celui-ci à petit pas mais je rencontre un problème.

J'ai un code actionscript qui crée dynamiquement un champ de texte. Celui-ci appel du texte contenu dans un fichier XML. Par contre mon texte, c'est du Russe !!

Seul les quelques mots français apparaissent. Le Russe n'apparait pas, pas de caractères bizarres non plus.

- J'ai mis la balise UTF 8 sur mon XML
- Mon mac est correctement paramétré car avec un appel simple d'un texte Russe en .txt, cela fonctionne.

Merci pour vos réponses

P:S : Mon fichier est en actionscript 2.

sep2vigne · Answer

Si tu as acces au fla, voici une solution que tu peux tester : > trouver et installer une police qui contienne les caractères russes. > dans le fla créer un champ de texte dynamique hors de la zone d'affichage, lui assigner cette police et l'intégrer (bouton "intégrer" de la barre des propriétés en bas). > dans le xml où dans le code, entourer le texte à afficher des balises exemple : du texte en russe du texte en russe et du texte en russe Cette méthode marche à la condition suivante : > dans le code tu remplis ton champ de texte crée dynamiquement (pas celui dont je te parle plus haut mais celui dont tu nous parles dans ton message) en lui disantchampDeTexte.htmlText = ... ton contenu ... Je pense à un truc; si tu peux voir les caractères russes sur ton pc avec le bloc note ou autre, cela doit signifier que tu as déjà cette police d'installer sur ton pc (ton mac plutôt en l'occurence). Bref, essaye de voir si tu la trouve là. Quelqu'un avait déjà posé une question similaire >>> ici <<< bon courage, Seb

frankycha · Answer

Voilà comment est appelé le texte dans la zone crée dynamiquement. 

function afficheBoutons() {
monTexte = _parent.photos_xml.childNodes[0].childNodes[i].attributes.titre;

C'est cet attribu titre qui ne s'affiche pas en Russe.
Pourtant, un autre attribu est appelé dans un champ de texte dynamique (lui present sur la scène) et cela fonctionne en Russe.

La police est instalée.

La condition pour que sa marche comme tu dis est remplie je pense dans cette ligne :
txt.htmlText = monTexte.toUpperCase();      ?????

sep2vigne · Answer

Deux choses :



> monTexte = _parent.photos_xml.childNodes[0].childNodes[i].attributes.titre;

.attributes.titre; s'écrit
._attributes.titre;
Vérifie en trouvant la ligne qui remplie l'autre champ de texte, celui qui fonctionne. D'autant plus que si ce deuxième champ peut afficher du russe, ton soucis doit venir d'une croute dans le code. Vérifie également dans ton fichier xml qu'au noeud[0].[i]  il existe bien des infos à récupérer (

je ne sais pas à quoi correspond i dans ce cas, ton code se trouve dans une boucle ?). Essaye de tracer la valeur de monTexte > trace(monTexte); après lui avoir donné la valeure
 _parent.photos_xml.childNodes[0].childNodes[i]._attributes.titre;





>

txt.htmlText = monTexte.toUpperCase(); signifie qu'il convertit ton texte pour l'afficher tout en MAJUSCULES.


Certaines typos spéciales ne possèdent pas ces caractères. 


Peut-être est-ce le cas pour la typo que tu utilises.
Est ce que le champ de texte opérationnel affiche des majuscules ? 


A+
Seb

Action sur image chargée

8 réponses

Votre réponse

Discussions similaires