Effet d'apparition dans une galerie photo

Question

Bonjour à tous !

Voila, j'avais déjà sollicité votre aide il y a quelques temps pour un projet flash pour lequel j'ai eu un joli 17/20 sans exagérer sur l'aide reçue ^^.
J'ai donc été très satisfait et je me tourne à nouveau vers vous pour m'aider sur un problème qui me bloque depuis plusieurs semaines.

J'ai réalisé une galerie photo, si on peut appeler cela ainsi, qui gère l'affichage de photos provenant d'un fichier XML (donc administrable depuis un outil du site). Ces photos défilent toutes les tant de secondes. Maintenant j'aimerais rendre le truc un peu plus sympathique à l'œil en rajoutant simplement des effets de transition.
J'ai donc essayé dans un premier temps de placer un masque qui ne fonctionnerait pour l'instant que pour la première photo, mais malheureusement il n'en est rien....
J'imagine qu'il y a un problème de niveaux dans mon trucs, fin ptet que le fait d'afficher une image avec actionscript et pas en créant un clip dans la bibliothèque fait que ça ne fonctionne pas. Bref, je suis perdu, à vous de m'éclairer une nouvelle fois ;-)

En vous remerciant toujours autant,
Passez une bonne journée
Ben


Ps: voici tous les éléments de mon projet à cette adresse

BBFUNK01 · Answer

Hello,

regarde du côté des tweens, tu trouveras moultes effets sympas qui te permettront de faire faire de belles transitions d'une photo à une autre.

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

ben54120 · Answer

Je ne connaissais pas cette classe, ma foi fort utile.

Mais petite question :
Jusque là le problème rencontré était que mes images étaient chargées depuis un fichier XML, donc les images n'étaient pas dans la biliothèque ce qui faisait que mes effets étaient invisibles ou inefficaces.
Alors est-ce que cette solution avec les tweens marchera avec mon code. Si tu as le temps, tu peux jeter un oeil dans mon code, je l'ai mis à la fin de mon premier post.

Je te remercie
Bonne soirée !

BBFUNK01 · Answer

Re,

oui ça marchera avec des images stockées en externe, les tweens c'est ... 1 ligne de code, donc ce n'est vraiment pas sorcier, il suffit de cibler le bon objet à la déclaration de la tween pour que l'effet marche.

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

ben54120 · Answer

Ok je teste ça dès que j'ai le temps, et je te tiens au courant.

ben54120 · Answer

Ca marche très bien, mais j'ai un souci :
Les images arrivent les unes sur les autres et parfois ça bugge, celle qui est en dessous n'est pas toujours celle qui était affichée avant...
Je ne sais pas d'où vient le problème, c'est louche...

BBFUNK01 · Answer

Hello,

le problème doit venir de la manière dont tu les affiches : tu ne dois pas à priori effacer l'image précédemment affichée lorsque tu affiches l'image suivante. Pour bien faire il faudrait que tu supprimes l'image "en cours" lorsque tu affiches la suivante (ça évite les effets disgracieux de "superposition). Après si l'image qui est "en dessous" n'est pas forcément celle qui était affichée avant et bien il faut probablement revoir l'ordre d'affichage de tes images par rapport à la gestion de ton Array.

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

ben54120 · Answer

En fait je joue sur les niveaux, au départ j'affiche les 4 images, et je leur affecte un niveau.
Ensuite pour afficher l'image suivante, je fais un swapdepth, l'effet marche bien, mais parfois ça déconne probablement à cause du swapdepth...*

As-tu regardé mon code ? (il n'est pas à jour au niveau des Tweens, mais il fonctionne pour le reste.

ben54120 · Answer

Re-bonjour,

J'ai changé de système de fonctionnement.
Au lieu de jouer sur les niveaux, j'ai 2 conteneurs, 1 avec l'image du dessous et l'autre avec l'image du dessus sur lequel on fait agir la tween.
Je change donc le contenu des MovieClipLoader.
Cette démarche fonctionne bien mais je rencontre un problème :
En effet, lors du changement d'image, il y a comme une coupure, logique puisqu'on recharge une image dans le conteneur de fond. Ca fait vraiment pas beau, mais j'ai pas le choix.
Alors ma question est : Comment résoudre ce problème de coupure ? Peut-on "pré-loader" des images dans action script afin qu'elles ne soient pas chargé à chaque fois qu'on fait appel à elles ? C'est pour ça que ma technique de niveau était finalement pas mal, mais elle déconnait.

Encore Merci

BBFUNK01 · Answer

Re,

tu te casses le train pour rien , voici comment tu devrais procéder :
- tu crées un clip conteneur que tu configures pour être appelé en attachMovie (donc tu ne lui mets pas de nom d'occurrence mais tu coches dans ses propriétés à sa création "exporter pour actionscript").
- ensuite tu laisses ce clip dans la bibliothèque (il sera appelé lorsque besoin sera).
- ensuite tu crées une fonction avec MovieClipLoader() qui te servira à charger chaque image (avec preloader et tout le toutim).
- Dans cette fonction pour charger chaque image tu spécifies au début qu'il faut enlever le clip conteneur (qui lors du chargement de la 1ère image est dans la bibliothèque et non sur la scène, mais qui une fois la 1ère image chargée sera sur la scène... d'où la nécessité de spécifier dans la fonction qu'il faut le supprimer), ça donnerait un truc tout bête :
removeMovieClip("toto");
this.attachMovieClip("toto", "toto", 0, 0); // "0, 0" ce sont les coordonnées auxquelles tu voudras afficher le clip
_ puis enfin tu exécutes ton MovieClipLoader qui chargera ton image dans "toto".

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

ben54120 · Answer

Oui mais dans ce cas je ne comprends pas comment je pourrai conserver mon effet de superposition des images.
Là les images vont se changer, ok, mais une par une, moi j'ai besoin d'en avoir toujours 2 qui se superposent, et qui changent au fur et à mesure.
Mais mon problème peut peut-être se résoudre avec cette histoire de preloader ?

ben54120 · Answer

Salut

Mon problème est réglé.
J'ai bien réfléchis sur ce que tu as dit, que une fois encore je cherche le difficile alors qu'on peut faire plus simple.
Et je me suis dit qu'au lieu de jouer sur les niveaux, il fallait jouer sur la propriété alpha pour afficher / cacher mes images, ajouter les tweens et ainsi avoir un effet d'empilement des images parfait (pas de coupures, pas d'incohérences).
Alors je te remercie beaucoup
Passe une bonne fin de week end !

ben54120 · Answer

Je retire ce que j'ai dis, il y a un bug, mais ça par contre je crains qu'on ne pourra rien y faire.

Si je lance ma page web avec mon appli flash, ensuite je change d'onglet quelques temps, lorsque je reviens sur l'onglet de ma page web, alors j'ai tous les tweens qui s'affiche, en une sorte d'accordéon, ce qui crée un assez gros bug lol.

Peut-on y faire quelque chose ou non ? Au pire ce n'est pas bien grave...

BBFUNK01 · Answer

Hello,

dans la construction d'une animation dans Flash il faut penser à TOUT, c'est plus facile à dire qu'à faire, mais tu as déjà identifié le problème, et surtout d'où il venait : lorsque tu reviens sur ta page toutes les tweens s'enchaînent et forment une espèce d'accordéon. Moralité : il faut que trouves comment réinitialiser tes images au retour sur la page, bref : remettre ton animation à zéro.

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

ben54120 · Answer

J'ai réfléchis un peu plus et j'ai peut-être pensé à un évènement de type enterFrame ou ce genre de chose ? Mais ils sont applicables sur des clips, et moi je voudrais l'appliquer sur la scène...J'avoue être un peu perdu.

ben54120 · Answer

Un peu d'aide pour ce problème ?
Merci ;-)

BBFUNK01 · Answer

Hello,

tu peux cibler la scène avec "this" :
this.onEnterFrame = function(){
tatatitatata...
}

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

ben54120 · Answer

Ah ok je n'avais pas la bonne syntaxe, en tout cas maintenant ça déconne à mort : au départ il n'y a aucune image puis après on en voit de temps en temps un dixième de seconde....lol Je mets mon code au cas où : import mx.transitions.Tween; import mx.transitions.easing.*; _root.onEnterFrame = function() { var Fichier_XML = new XML(); var url_image = new Array(); var imageCourrante; var maTween:Tween; Fichier_XML.ignoreWhite = true; Fichier_XML.onLoad = function(success:Boolean) { if(success) { i=0; while(Fichier_XML.firstChild.childNodes[i]) { url_image[i] = Fichier_XML.firstChild.childNodes[i].attributes.url; i++; } nbImages = url_image.length; _root.createEmptyMovieClip("image_mc_tmp", _root.getNextHighestDepth()); var mclListener2:Object = new Object(); mclListener2.onLoadInit = function(target_mc:MovieClip) { target_mc._x = Stage.width/2-target_mc._width/2; target_mc._y = Stage.height/2-target_mc._width/2; var w:Number = target_mc._width; var h:Number = target_mc._height; target_mc._width = 300; target_mc._height = 225; target_mc._x = 0; target_mc._y = 0; target_mc._alpha = 0; }; var image_mcl2:MovieClipLoader = new MovieClipLoader(); image_mcl2.addListener(mclListener2); image_mcl2.loadClip(url_image[nbImages-1],_root["image_mc_tmp"]); j=0; while(j 1) intId = setInterval(_root,"changePicture",5000); } }; Fichier_XML.load("photos.xml"); } function changePicture() { if(imageCourrante == 0) { i=0; while(_root["image_mc"+i]) { _root["image_mc"+i]._alpha = 0; i++; } _root["image_mc_tmp"]._alpha = 100; _root["image_mc"+imageCourrante]._alpha = 100; imageCourrante++; }else if(imageCourrante<(nbImages-1) && imageCourrante>0) { i=0; while(_root["image_mc"+i]) { _root["image_mc"+i]._alpha = 0; i++; } _root["image_mc"+(imageCourrante-1)]._alpha = 100; _root["image_mc"+imageCourrante]._alpha = 100; imageCourrante++; }else{ i=0; while(_root["image_mc"+i]) { _root["image_mc"+i]._alpha = 0; i++; } _root["image_mc"+(imageCourrante-1)]._alpha = 100; _root["image_mc"+imageCourrante]._alpha = 100; imageCourrante = 0; } if(imageCourrante > 0) maTween = new Tween(_root["image_mc"+(imageCourrante-1)], "_x", Regular.easeIn, 300, 0, 30, false ); else maTween = new Tween(_root["image_mc"+(nbImages-1)], "_x", Regular.easeIn, 300, 0, 30, false ); if(imageCourrante 2) _root["image_mc_tmp"]._alpha 0; }

Effet d'apparition dans une galerie photo

17 réponses

Votre réponse

Discussions similaires