Centrer une image

Question

Bonjour à tous,

J'ai passé la journée d'hier sur le site de flashkod, j'ai eu pas mal de réponse en cherchant dans le forum et dans le code, mais je ne sais pas comment appliquer ces choses, car je ne m'y connais pas et que j'ai bcoup de mal à comprendre le code car ma logique coté programmation est casi nul.

On m'a demander de réaliser une galerie photo dynamique, chose que j'ai fait avec les connaissance que j'ai acquis depuis que je connais flashkod, hors hier la personne pour qui je fais cette galerie m'a demandé de centrer est d'ajuster les images, il faut savoir que c'est image vienne de l'extérieur et que la taille n'est pas fixe, elles peuventt êttre en paysage comme en portrait, le problème c'est que je n'avais pas prévu ça.

Si une bonne âme pouvait m'aider ou m'expliquer comment faire, ce serait génial.

Merci d'avance.

cs_Girou · Answer

Bonjour,


il s'agit uniquement de mathématique, assez simple en plus.


Disons que tu charge une image dont tu ne connais pas la taille.
Tu sais qu'elle doit avoir maximum 600 de longueur et 500 de hauteur (=  redimensionnement), ensuite elle doit être centrée sur un point connu.



 une fois ton image chargée dans un movieClip (pas avant) , tu sais connaitre ses dimensions. 



// redimensionner l'image chargée
var longueur  = monImageChargée._width;
var hauteur = monImageChargée._height;
var facteurLongueur = longueur/600;
var facteurHauteur = hauteur/500;



if (facteurLongueur > facteurHauteur){
  facteur=facteurLongueur;
}else{
  facteur=facteurHauteur;
}
// Attention, ce script va aggrandir les petites images
// Si on veux éviter cela, enlever le commantaire pour la ligne ci-dessous

// if (facteur<1){facteur=1}

//On redimensionne l'image
monImageChargée._width=monImageChargée._width/facteur
monImageChargée._height=monImageChargée._height/facteur



// Centrer l'image
centreX=350 // Position x du CENTRE de l'image
centreY=300 // Position y du CENTRE de l'image
origineX=centreX-monImageChargée._width/2
origineY=centreY-monImageChargée._height/2
monImageChargée._x=origineX
monImageChargée._y=origineY




J'ai volontairement 'chargé' le calcul pour qu'il paraisse plus simple a comprendre, 
mais on pourrait ecrire cela de manière plus compacte

@+

massdell · Answer

Je te remercie Girou pour ta réponse,  je vais essayer et je te dis quoi..

Merci.

++

massdell · Answer

Re Girou, ma question va sûrement te paraître bête mais j'ai créé une varaible pour l'image importé mas celle-ci ne fonctionne pas, vois la variable en question var monImageChargée=(_root.path+ _root.name+"1.jpg" +_root.tstamp); Le _root.path est une variable pour le chemin d'accès, le _root.name est le nom de l'image et le _root.tstamp est utilisé pour le tampon.

Et j'appel l'image avec loadMovie(monImageChargée,"0"); et c'est là que je vois que ça ne fonctionne pas car rien n'apparaît.

Peux-tu me dire si la sintaxe que j'utilise est correct?

++

cs_Girou · Answer

on reprend calmement :o)


loadMovie(monImageChargée,"0") Là, tu utilises la syntaxe de loadMovieNum()


crée d'abord un clip vide sur la scene
var Container=this.createEmptyMovieClip("Container",this.getNextHighestDepth())


var monImageChargée=(_root.path+ _root.name+"1.jpg" +_root.tstamp)
C'est ma faute, mais il est interdit de mettre des accents dans un nom de variable. Donc:


 monImageChargee=_root.path+ _root.name+"1.jpg" +_root.tstamp;
Attention à la formulation de _root.tstamp. De plus, je suis pas sur que cela fonctionne de mettre un 'stamp' derrière une image jpg


// on charge l'image
Container.loadMovie(monImageChargée)


Bon, maintenant, on va mixer les deux scripts proposé en un seul... Avec emploi d'un movieClipLoader() car je sens déjà venir la question suivante... comment savoir quand le clip est bien chargé !

// création du clip vide qui va contenir l'image à charger
  this.createEmptyMovieClip("Container", this.getNextHighestDepth());
  // on crée l'objet écouteur qui va réagir lorsque le chargement est terminé
  var mclListener:Object = new Object();
  // la fonction exécutée lorsque le chargement est fini
  mclListener.onLoadInit = function(target_mc:MovieClip) {
    
  // redimensionner l'image chargée
  var longueur = target_mc._width;
  var hauteur = target_mc._height;
  var facteurLongueur = longueur/600;
  var facteurHauteur = hauteur/500; 



  if (facteurLongueur > facteurHauteur){
    facteur=facteurLongueur;
  }else{
    facteur=facteurHauteur;
  }
  // Attention, ce script va aggrandir les petites images
  // Si on veux éviter cela, enlever le commantaire pour la ligne ci-dessous



  // if (facteur<1){facteur=1}



  //On redimensionne l'image
  target_mc._width=target_mc._width/facteur
  target_mc._height=target_mc._height/facteur 



  // Centrer l'image
  centreX=350 // Position x du CENTRE de l'image
  centreY=300 // Position y du CENTRE de l'image
  origineX=centreX-target_mc._width/2
  origineY=centreY-target_mc._height/2
  target_mc._x=origineX
  target_mc._y=origineY 
  };
  // on crée le movieClipLoader
  var image_mcl:MovieClipLoader = new MovieClipLoader();
  image_mcl.addListener(mclListener);
  var monImageChargee=(_root.path+ _root.name+"1.jpg")
  image_mcl.loadClip(monImageChargee, this.Container);







@+

massdell · Answer

Re Girou,

Tous d'abord chapeau, merci pour ta patience, je suis très fort dans le domaine du design mais coté programmation c'est autre chose, j'ai appliquer ton code, ça fonctionne l'image apparaît bien, le seul hic c'est que j'ai mis comme dimension pour l'image 149/125 mais elle reste à sa taille initiale donc trop grande, je t'ai mis un lien qui te permetrra de voir ce que je suis en train de faire http://www.mddesign.be/ClickToWeb/galerie.html 

J'ai bcoup avancé sur ce projet, car je connais un peu l'actionScript et que j'ai pu me débrouillé seul, mais là met connaissance ne m'aide pas.

J'ai mis ton code pour l'image en bas à gauche, on ne voit qu'une partie de l'image, d'ailleur c'est l'image qui apparaît en grand en haut de l'anim.

Merci encore pour ton aide.

++

cs_Girou · Answer

Hello, 

donne moi le code exacte que tu as utilisé pour ton image...

@+

massdell · Answer

Yop,

Voilà le code :

// création du clip vide qui va contenir l'image à charger
  this.createEmptyMovieClip("Container", this.getNextHighestDepth());
  // on crée l'objet écouteur qui va réagir lorsque le chargement est terminé
  var mclListener:Object = new Object();
  // la fonction exécutée lorsque le chargement est fini
  mclListener.onLoadInit = function(target_mc:MovieClip) { 
  // redimensionner l'image chargée
  var longueur = target_mc._width;
  var hauteur = target_mc._height;
  var facteurLongueur = longueur/149;
  var facteurHauteur = hauteur/125; 


  if (facteurLongueur > facteurHauteur){
    facteur=facteurLongueur;
  }else{
    facteur=facteurHauteur;
  }
  // Attention, ce script va aggrandir les petites images
  // Si on veux éviter cela, enlever le commantaire pour la ligne ci-dessous 


  //if (facteur<1){facteur=1} 


  //On redimensionne l'image
  target_mc._width=target_mc._width/facteur
  target_mc._height=target_mc._height/facteur 


  // Centrer l'image
  centreX=75 // Position x du CENTRE de l'image
  centreY=62.5 // Position y du CENTRE de l'image
  origineX=centreX-target_mc._width/2
  origineY=centreY-target_mc._height/2
  target_mc._x=origineX
  target_mc._y=origineY 
  };
  // on crée le movieClipLoader
  var image_mcl:MovieClipLoader = new MovieClipLoader();
  image_mcl.addListener(mclListener);
  var monImageChargee=(_root.path+ _root.name+"1.jpg"+_root.tstamp)
  image_mcl.loadClip(monImageChargee, this.Container);
  Container.loadMovie(monImageChargee)

cs_Girou · Answer

Hello,

retire la dernière ligne du code, il y a redoublement de commande.

 image_mcl.loadClip(monImageChargee, this.Container);
C'est cette ligne là qui commande le chargement de l'image
 
Container.loadMovie(monImageChargee)   
La tu relances une seconde fois le chargement... supprime cette ligne.

@+

massdell · Answer

Re,

Le problème est que si j'éfface cette ligne de code l'image n'apparaît plus, si tu veux je peux t'envoyer le fla pour voir si ça peut t'aider à comprendre d'où peut provenir le problème.

Si je t'en demande de trop n'hésite pas à me le dire, c'est déjà très sympa tout ce que tu as fait.

++

Centrer une image

9 réponses

Votre réponse

Discussions similaires