Problème dans une gallerie

Question

Bonsoir, 

j'essaye de faire une galerie avec des tutos mais le tuto que j'utilise qui me convient le mieux à plusieurs points que je souhaite changer. J'ai réussis à obtenir ce que je voulais pour la plupart des choses qui ne me convenaient pas mais il y en a un particulièrement gênant qui me pose de gros problèmes. 
En effet lorsque l'on clique sur une image dans la galerie pour l'agrandir il faut maintenir le clic pour que l'image sois en grande taille, et lorsqu'on lâche l'image redevient plus petite et reprend sa place dans la galerie (je précise que lorsque cette image est en pleine taille on peut la balader partout sur l'écran, ce qui n'a pas grand intérêt pour moi). Le problème c'est que j'aimerais que l'image s'agrandisse seulement quand on clique dessus, et reprenne sa petite taille et position dans la galerie sois lorsqu'on re-clique dessus, sois lorsque l'on clique sur une autre image de la galerie. J'ai essayer de bidouiller pas mal ce code mais impossible de trouver la solution...

Quelqu'un pourrait-il, s'il vous plaît m'aider?

BBFUNK01 · Answer

Hello,

d'après tes explications on peut imaginer que lorsque tu fais un "onPress" sur une des miniatures de ta galerie ça agrandit l'image en question, et lors du "onRelease" l'image reprend sa taille miniature. Pour bien faire il faudrait que tu fasses un "LoadMovie()" sur chaque image miniature, ce qui inclut le fait, dans l'idéal, de stocker la liste de tes images dans un xml.
Mets dans ton post le code que tu utilises pour afficher en grand tes images, ça permettra à ceux qui consultent ton post d'avoir les détails pour t'aider :).

A plus,

BBFUNK01

cs_Irokwa · Answer

Bonsoir,

tout d'abord merci pour cette réponse je n'y croyait plus. ^^
Je ne sais pas si je peux faire de l'image par image, car en fait j'ai juste copier coller le code du tuto, corrigé les valeurs pour les adaptées à mon site, et sinon tout s'affiche tout seul, je n'ai qu'a entré le nom de l'image dans un XML, et sur mon clip je n'ai qu'une image clé avec le code qui suit, aucun autre élément. Je n'ai commencé Flash qu'en février en cours donc je galère un peu.

Je récapitule donc, le code marche parfaitement, j'aimerais seulement n'avoir qu'à cliquer une fois sur l'image pour qu'elle s'affiche, et cliquer de nouveau pour qu'elle redevienne miniature. Si c'est possible j'aimerais aussi supprimer le genre de clignotement de l'image lorsqu'on l'ouvre.
J'ai cherché à modifier pas mal de lignes de ce code mais sans succès, il à vraiment l'air compliqué.

Voici le code:


import mx.transitions.*;


_global.thisX = -350;
_global.thisY = -200;


_global.stageWidth = -350;
_global.stageHeight = -200;


var gallery_xml:XML = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function(success:Boolean) {
try {

if (success) {
var images:Array = this.firstChild.childNodes;
var gallery_array:Array = new Array();
for (var i = 0; i<images.length; i++) {
gallery_array.push({src:images[i].firstChild.nodeValue});
}

displayGallery(gallery_array);
} else {
throw new Error("Unable to parse XML");
}
} catch (e_err:Error) {
trace(e_err.message);
} finally {
delete this;
}
};


gallery_xml.load("GallerieInfo.xml");


function displayGallery(gallery_array:Array) {
var galleryLength:Number = gallery_array.length;

for (var i = 0; i<galleryLength; i++) {

var thisMC:MovieClip = this.createEmptyMovieClip("image"+i+"_mc", i);

mcLoader_mcl.loadClip(gallery_array[i].src, thisMC);

preloaderMC = this.attachMovie("preloader_mc", "preloader"+i+"_mc", 5000+i);


preloaderMC.bar_mc._xscale = 0;
preloaderMC.progress_txt.text = "0%";


thisMC._x = _global.thisX;
thisMC._y = _global.thisY;


preloaderMC._x = _global.thisX;
preloaderMC._y = _global.thisY+20;


if ((i+1)%5 == 0) {

_global.thisX = -350;
_global.thisY += 150;
} else {
_global.thisX += 90+10;
}
}
}

var mcLoader_mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();
mclListener.onLoadStart = function() {
};

mclListener.onLoadProgress = function(target_mc, loadedBytes, totalBytes) {
var pctLoaded:Number = Math.round(loadedBytes/totalBytes*100);

var preloaderMC = target_mc._parent["preloader"+target_mc.getDepth()+"_mc"];
preloaderMC.bar_mc._xscale = pctLoaded;
preloaderMC.progress_txt.text = pctLoaded+"%";
};

mclListener.onLoadInit = function(evt:MovieClip) {
evt._parent["preloader"+evt.getDepth()+"_mc"].removeMovieClip();

var thisWidth:Number = evt._width;
var thisHeight:Number = evt._height;
var borderWidth:Number = 2;
var marginWidth:Number = 8;
evt.scale = 20;

evt.lineStyle(borderWidth, 0x000000, 100);
evt.beginFill(0xFFFFFF, 100);
evt.moveTo(-borderWidth-marginWidth, -borderWidth-marginWidth);
evt.lineTo(thisWidth+borderWidth+marginWidth, -borderWidth-marginWidth);
evt.lineTo(thisWidth+borderWidth+marginWidth, thisHeight+borderWidth+marginWidth);
evt.lineTo(-borderWidth-marginWidth, thisHeight+borderWidth+marginWidth);
evt.lineTo(-borderWidth-marginWidth, -borderWidth-marginWidth);
evt.endFill();


evt._xscale = evt.scale;
evt._yscale = evt.scale;

evt._rotation = 0;

evt.onPress = function() {

this.startDrag();
this._xscale = 100;
this._yscale = 100;
this.origX = this._x;
this.origY = this._y;

this.origDepth = this.getDepth();

this.swapDepths(this._parent.getNextHighestDepth());

this._x = (_global.stageWidth-evt._width+30)/2;
this._y = (_global.stageHeight-evt._height+30)/2;
mx.transitions.TransitionManager.start(this, {type:mx.transitions.Photo, direction:0, duration:1, easing:mx.transitions.easing.Strong.easeOut, param1:empty, param2:empty});
};

evt.onRelease = function() {
this.stopDrag();
this._xscale = this.scale;
this._yscale = this.scale;
this._x = this.origX;
this._y = this.origY;
};

evt.onReleaseOutside = evt.onRelease;
};
mcLoader_mcl.addListener(mclListener);

BBFUNK01 · Answer

Re,

bon et bien effectivement c'est ce que je pensais : c'est sur ton "onPress" et "onRelease" qu'il faut faire des modifications.
A la rigueur, tu peux même te passer du "onPress" et mettre toute la fonction pour charger l'image dans ton "onRelease".
Le tout après c'est de définir si tu charges en "grand" la même image qui est chargée en "petit" (en miniature quoi), car le mieux por un diaporama pas trop lourd, c'est de charger de petites images pour les miniatures, du genre des images de 80x80 pixels, et d'avoir des images plus grandes pour charger les images en "plein écran", du genre des images de 600x600 pixels. Bref, le mieux c'est de dissocier les 2, tu gagneras en légèreté pour ton animation.

Donc c'est sur cette fonction qu'il faut que tu fasses des modifications :
evt.onRelease = function(){
...fonction...
}

et la solution à ton problème je l'ai trouvé il y a peu :
Centrer une image avec MovieClipLoader

jettes-y un oeil et fais le test, ça devrait te convenir. Par contre supprime ta fonction "evt.onPress()", elle ne contient que des paramètres permettant de dragger ton image et de l'afficher plus grand.

A plus,

BBFUNK01

martinearth · Answer

Salut Irowka, Bon je me lance 1th time! je cherche moi aussi à apprendre l'action Script mais je parts avec un gros handicap je suis graphiste dessinateur de formation et une fille de surcroit; bref j'ai un peu de mal, pourrais tu donner l'adresse de ton tuto. Ca fait un semaine que je suis dessus, j'ai trouvé des galerie déjà faite sur le site et qui sont très bien; mais question explications je capte Z. J'ai essayée de bidouiller un truc mais il me renvoie une erreur si quelqu'un pouvait me dire ce qui cloches se serait sympa.Il renvoie cette info en sortie quand on clique sur la thumb. Merci de votre attention et patience avec une novice. TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul. at test_fla::MainTimeline/resizeHandler() import fl.controls.TileList; import fl.data.DataProvider; import fl.controls.ScrollBarDirection; import fl.events.ComponentEvent; import fl.containers.UILoader; import fl.controls.Button; var dossierImage:String = 'images/'; var dossierImageMini:String = 'images/min/'; var monXML:XML = ; var dp:DataProvider = new DataProvider(monXML); var myTileList:TileList = new TileList(); myTileList.dataProvider = dp; myTileList.labelFunction = myLabelFunction; myTileList.addEventListener(MouseEvent.MOUSE_DOWN,resizeHandler); myTileList.sourceField = "src"; myTileList.columnWidth = 100; myTileList.rowHeight = 67; myTileList.columnCount = 3; myTileList.rowCount = 6; myTileList.move(10, 10); addChild(myTileList); function myLabelFunction(item:Object):String { var fileName:String = item.src; var filePath:Array = fileName.split("/"); return filePath.pop(); } function resizeHandler(event:MouseEvent): void { var myImg:UILoader = event.currentTarget as UILoader; myImg.source = dossierImage+monXML.image[1].attribute("src"); var newX:uint = (stage.stageWidth - myImg.width) / 2; var newY:uint = (stage.stageHeight - myImg.height) / 2; myImg.move(newX, newY); }

cs_Irokwa · Answer

Bonsoir, 

merci à toi BBFUNK01 pour m'avoir apporté ton aide j'ai finalement réussit par m'en sortir.

martinearth: Yep, alors le tuto viens de ce site même, et le voici le lien:
http://www.flashkod.com/codes/PHOTOTHEQUE-MOZAIQUE-TWEEN_43413.aspx

Problème dans une gallerie

5 réponses

Votre réponse

Discussions similaires