Diaporama defilant avec interaction de la souris

Dernière mise à jour le par nikitaetshiva .

Je donne le code directement.

J'ai mis des commentaires et j'espere que cela sera assez clair.

Je charge les variables directement dans le code, mais elles peuvent etre chargees par un HTLM avec flashvars. Je mets ces lignes en fin de message pour la syntaxe.

Le nom des symbols sont bien sur des exemples, il y en a un du nom de "none.png" qui est une image "vide" au cas ou l'on ne veut pas de symbol sur l'image. Mais ils doivent exister au meme titre que les photos. Cela permet de modifier les symbols sans toucher au code.

Voili, voilou !!!

// Version panorama horizontal.
 // Affichage de x images + textes.
 // Redimentionnement des images.
 // Supperposition d'une image sur une autre.
 // Agrandissement de l'image et arret du diaporama au passage de la souris.
 
// definition des variables fixes
largeurDefinie = 135; // taille definie en largeur
hauteurFixe = 101;   // taille fixe en hauteur
espace = 25;   // espace entre les photos
nbr = 12;     // nombre de photos
page = 0;     // zone de repere pour le sens du defilement
taillescene = 630;   // taille de la scene 630x200
marge = 30;    // eventuelles marges de chaque cote de la scene
leslargeurs = 0;  // Largeur totale
vitesseDef = 10;  // vitesse de defilement
calcul = -(vitesseDef);

// emplacement et nom des images a charger
Chemin_photo = "D:/emplacement de travail/essai-flash/photos/promo"
Chemin_symbol = "D:/emplacement de travail/essai-flash/photos/"

// Chargement en table

var valabaURL1 = "enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html";
 valabaURL = valabaURL1.split(";"); // liens URL
var listeSymbol = "symbol-new;symbol-valentin;symbol-soldes;smily;symbol-new;symbol-valentin;symbol-soldes;smily;symbol-new;symbol-valentin;symbol-soldes;smily";
 affSymbol = listeSymbol.split(";");
var testdes = "Lampe,Lampe enfants,Decoration,Vase,Blanche Perle,Decoration,Decoration ** florale,Orchidees,Sac,Sac,Sac,Chaise";
    desi = testdes.split(","); 
var lesLargeurs = "175;155;185;135;135;135;135;135;135;135;135;135";
 largeur = lesLargeurs.split(";");
var lesHauteurs = "131;116;138;101;101;101;101;101;101;101;101;101";
 hauteur = lesHauteurs.split(";");

// Definition des tables utilisees
photos = new Array(); // pour les photos
useSymbol = new Array(); // pour les symbols
memoDesi = new Array (); // pour les textes
memoDesix = new Array (); // avec sa position
memoscale_x = new Array (); // proportion de la photo

// Creation du diaporama

createEmptyMovieClip("diaporama", 0);// pour les images

==_y = 20;==
==_x = 10;==

// chargement des donnees//for(var i 0; i < nbr; i++) {
 
// calcul de redimention de l'image
pourcenthauteur = hauteurFixe/parseInt(hauteur[i * ) * 100;
largeur[i * = parseInt(largeur[i]) * pourcenthauteur / 100;

// chargement des imagesvar mc diaporama.createEmptyMovieClip("photo"+i, i);_x = espace + leslargeurs;==
leslargeurs += largeur[i * + espace;

mc.createEmptyMovieClip("conteneur", 1);

conteneur.loadMovie(Chemin_photo + i + ".jpg");

mc.conteneur._yscale pourcenthauteur;conteneur._xscale = pourcenthauteur;==

// memorisation en table
photos[i * = mc.conteneur;
memoscale_x[i * = mc.conteneur._xscale; 

// chargement des symbols

createEmptyMovieClip("symbol", 3);

==symbol._alpha = 0;==

symbol.loadMovie(Chemin_symbol  + affSymbol[i * + ".png");

// memorisation en table
useSymbol[i * = mc.symbol; 
==nombre = i;==

// chargement des textes
tailleText = desi[i * ;tayetext tailleText.length * 16; // On determine la taille du textecreateTextField("txtCommentaire",  100, 0, hauteurFixe, tayetext, 80);==
==txtCommentaire.text = (desi[i * );==
mep_bloc = new TextFormat();
 mep_bloc.color = 0x234567;
 mep_bloc.font ="Arial";
 mep_bloc.size = 15;
 mep_bloc.align = "left";
 mep_bloc.bold=true;
 mep_bloc.embedFonts = true;
 mc.txtCommentaire.selectable = false;
 mc.txtCommentaire.setTextFormat(mep_bloc);
 
// memorisation en table
memoDesi[i * = mc.txtCommentaire; 
memoDesix[i * = mc.txtCommentaire_x;

// Action//// Click de la souris, l'image est agrandie, on la remet normale avant le getURLonPress = function (){==
 commeavant(this.nombre);
 getURL( valabaURL[this.nombre * , "_blank" ); }

// Passage de la souris => agrandissement de l'image et du texte + apparition du symbol + arret du diaporama
==onRollOver = function() {==
 agrandissement (this.nombre);
 delete onEnterFrame;
}
// Apres le passage de la souris => reaffichage des images non agrandies + remise en marche du defilement
==onRollOut = function () {==
 onEnterFrame = faittourner;
 commeavant(this.nombre);
}
}
// Action du defilememt
onEnterFrame = function() {
 faittourner ();
}
// si on bouge la souris
onMouseMove = function() {  if (_xmouse < (marge * 5)) {page 0;  calcul -(vitesseDef);} if (_xmouse > (taillescene -(marge * 5))) {page 1;  calcul vitesseDef;}
}

// Les fonctions
commeavant = function (lenombre) {
 
 // on remet comme avant, texte, photo et symbol
 mc.txtCommentaire = memoDesi[lenombre * ;
 mc.txtCommentaire.text = desi[lenombre * ;
 mep_bloc.size = 15;
 mc.txtCommentaire.setTextFormat(mep_bloc);
 mc.txtCommentaire._x = memoDesix[lenombre * ;
 mc.txtCommentaire._y = hauteurFixe;
  
 photos[lenombre * ._x = posLar;
 photos[lenombre * ._y = posHaut;
 photos[lenombre * ._xscale = parseInt(memoscale_x[lenombre]);
 photos[lenombre * ._yscale = parseInt(memoscale_x[lenombre]);
 
 useSymbol[lenombre * ._alpha = 0;
 useSymbol[lenombre * ._x = posLar2;
 useSymbol[lenombre * ._y = posHaut2;
}

agrandissement = function (lenombre) {
 // on met a blanc le texte en petit et on memorise sa position
 mc.txtCommentaire = memoDesi[lenombre * ;
 mc.txtCommentaire.text = "";
 mc.txtCommentaire._x = memoDesix[lenombre * ;
 mc.txtCommentaire._y = hauteurFixe;
 // on le recharge pour l'agrandir
 mep_bloc.size = 21;
 mc.txtCommentaire.text = desi[lenombre * ;
 mc.txtCommentaire.selectable = false;
 mc.txtCommentaire._x = memoDesix[lenombre * -10;
 mc.txtCommentaire._y = hauteurFixe+10;
 mc.txtCommentaire.setTextFormat(mep_bloc);
 
 // agrandissement de la photo
 posLar = photos[lenombre * ._x;
 posHaut = photos[lenombre * ._y; 
 photos[lenombre * ._x = posLar - 10;
 photos[lenombre * ._y = posHaut - 10;
 photos[lenombre * ._xscale = memoscale_x[lenombre] * 1.2;
 photos[lenombre * ._yscale = memoscale_x[lenombre] * 1.2;
  
 // apparition du symbol
 posLar2 = useSymbol[lenombre * ._x;
 posHaut2 = useSymbol[lenombre * ._y; 
 useSymbol[lenombre * ._alpha = 100;
 useSymbol[lenombre * ._x = posLar2 - 20;
 useSymbol[lenombre * ._y = posHaut2 - 20;
}

faittourner = function () {
  if (diaporama._x < (-(leslargeurs-(taillescene -(marge * 2))))) {page = 1;} if (page 1) { calcul vitesseDef; }
 else {
  if (diaporama._x < (-(leslargeurs-(taillescene -(marge * 2))))) {page = 1;}//on definit le sens
  else {page = 0;}
 } if (diaporama._x > marge) { page 0;  calcul -(vitesseDef);  }//on definit le sens
 diaporama._x  += calcul;
 diaporama2._x  += calcul;
}

==========================================================

J'espere que cela est clair.

Pour le flashvars :

Dans le HTML :

<!-- gestion animation Flash avec swfobject -->
  <script type="text/javascript" src="scriptjs/swfobject.js"></script>
  <script type="text/javascript">
   var flashvars = {};
   flashvars.liensurl ="enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html;enchainement-photo-essai.html";
   flashvars.hauteurs = "131;116;138;101;101;101;101;101;101;101;101;101";
   flashvars.largeurs = "175;155;185;135;135;135;135;135;135;135;135;135";
   flashvars.listesymbol = "symbol-new.png;symbol-valentin.png;symbol-soldes.png;none.png;symbol-new.png;symbol-valentin.png;symbol-soldes.png;smily.png;none.png;symbol-valentin.png;symbol-soldes.png;symbol-soldes.png";
   flashvars.chemin = "D:/emplacement de travail/essai-flash/photos/";
   flashvars.pictures = "promo0.jpg;promo1.jpg;promo2.jpg;promo3.jpg;promo4.jpg;promo5.jpg;promo6.jpg;promo7.jpg;promo8.jpg;promo9.jpg;promo10.jpg;promo11.jpg";
     flashvars.comments = "comment 1...;comment 2;comment 3;comment 4;comment 5;comment 6;comment 7;comment 8;comment 9;comment 10;comment 11;comment 12;";
   var params = {};
   params.bgcolor="#999999";
   var attributes = {};
   swfobject.embedSWF("panorama-horizontal.swf", "myAlternativeContent", "630", "200", "6.0.0", "expressInstall.swf", flashvars, params, attributes);
  </script>
<!-- FIN gestion animation Flash -->

Dans Action Script :

//chargement des variables externes provenant du HTML
valabaURL1 = _level0.liensurl;
 valabaURL = valabaURL1.split(";"); // liens URL
largeurss = _level0.largeurs;
 largeur = largeurss.split(";"); // largeur des photos
hauteurss = _level0.hauteurs;
 hauteur = hauteurss.split(";"); // hauteur des photos
chemin_image = _level0.chemin; // chemin image
picture = _level0.pictures;
 name_photo = picture.split(";"); // nom photo
testdes = _level0.comments;
 desi = testdes.split(";"); // designasion
affSymbolre = _level0.listesymbol; // symbol
 affSymbol = affSymbolre.split(";");

Voila !

Si des choses ne sont pas clair, n'hesitez pas a poser des questions, j'essayerai de repondre, dans la mesure de mes capacites ... qui ne sont pas enorme en Action Script !!!

Merci a vous !

Adresse d'origine

Ce document intitulé « Diaporama defilant avec interaction de la souris » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Utilisation de swfobject
Bouger un personnage avec les fleches!!!
Rejoignez-nous