Aide - Recherche - Membres - Calendrier
Version complète : Ajouter un texte sous une image
Centre de Formation Flash - Forums Adobe Flash > Adobe Flash > Programmation Actionscript > Actionscript 2
toutdebutant
Bonjour a tous,

Je suis un tout débutant sur flash et en action script.

Je veux réaliser pour mon site une page contenant un certain nombre de photos et y mettre en dessous un texte de description.

J'ai pris comme base de départ l'exemple fourni appellé "gallery_tween".

J'ai donc créé un fichier xml qui comprend le chemin des images et les textes de description.

J'ai créé 2 tableaux qui contiennent les listes.
J'arrive à lire le tout sans soucis, mais je ne trouve pas la méthode qui me permet d'afficher les descriptions sous chacune des images !

Pour les images tout est ok

Un petit coup de main serait le bienvenu.

Je vous remercie par avance !
icon_biggrin.gif
lilive
Bonjour,
Pour afficher du texte ça passe par un TextField (champ de texte).
Il y a deux façon de placer un TextField sur la scène:

1 - Soit le créer sur la scène avec l'outil "Texte" de flash ide. Dans les propriétés choisir "Texte dynamique", et donner un nom au champ texte, par exemple "monTexte"

2 - Soit le créer avec action script avec la méthode de MovieClip createTextField (regarde l'aide de la classe MovieClip dans la Référence du langage action script 2 > Classes > MovieClip ). Par exemple:

Action Script


unClip.createTextField("monTexte", 1, 10, 20, 300, 50);

va créer un TextField dans le movieclip unClip, à la profondeur 1, aux coordonnées (10,20), de largeur 300 et de hauteur 50.

Une fois le Textfield créé par l'une de ces 2 méthodes, tu peux y mettre ce que tu veux dedans en modifiant sa propriété text :

Action Script


monTexte.text = "Description de l'image";


tu peux regarder l'aide de la classe TextField dans la Référence du langage, et aussi "Utilisation de texte" dans "utilisation de flash". Tu auras là tout ce qu'il faut pour comprendre comment créer et formater du texte.

toutdebutant
Bonjour,

Merci pour cette réponse, c'est en effet ce que j'essayais de faire, mais je ne devais pas m'y prendre corrcetment !

J'avais du zapper certaines choses !
J'ai bien maintenant sous chaque image le texfield, mais le texte ne s'affiche que sous la première et en mettant le texte de la dernière !

Action Script

function displayGallery(gallery_array:Array,gallery_txt:Array) {
var galleryLength:Number = gallery_array.length;
// loop through each of the images in the gallery_array.
for (var i = 0; i<galleryLength; i++) {
/* create a movie clip instance which holds the image. We'll also set a variable,
thisMC, which is an alias to the movie clip instance. */
var thisMC:MovieClip = this.createEmptyMovieClip("image"+i+"_mc", i);
//var decri =gallery_txt[i];
//thisMC.txt_comme =gallery_txt[i];
var decrip:MovieClip =this.createTextField("decri",this.getNextHighestDepth(),10,20,250,40);
decrip.wordWrap = true;
decrip.multiline = true;
decrip.border = true;
decrip.textColor = 0x000000;
decrip.background = true;
decri.text=(gallery_txt[i]);
mcLoader_mcl.loadClip(gallery_array[i].src, thisMC);
mcLoader_mc2.loadClip(decri,decrip);

En ce qui concerne le formatage du texte, je m'y pencherais plus particulièrement quand le reste sera au point !

Qu'est-ce qui peut clocher dans ce code ?

Merci
icon_wink.gif
Leograph
Bonjour,

Tout d'abord je pense que tu vas rencontrer un problème quant à la gestion de profondeur de tes images et textes. En effet, j'ai peur que les deux lignes suivantes se nuisent notamment avec le "getNextHighestDepth" :

Action Script

var thisMC:MovieClip = this.createEmptyMovieClip("image"+i+"_mc", i); 
var decrip:MovieClip =this.createTextField("decri",this.getNextHighestDepth(),10,20,250,40);

Pourquoi pas ne pas créer un clip "conteneur" pour chaque binôme image/description dans lequel tu donnerais une profondeur fixe à chacun des deux.

Ensuite concernant ton problème, lors de la création des champs de texte, le nom d'instance "decri" est fixe et non dépendant de l'indice "i" comme pour les images. Pour Flash, tout tes textes auront donc le même nom et quand bien même ils ont été créés et existent sur ta scène, seul le dernier créé va pouvoir être ciblé par le nom d'instance "decri" : Flash ne sait plus ou il en est et ne considère donc que le dernier créé.

Enfin, en ligne 16 de ton code tu fais appel à un champ de texte "decri" alors que dans les lignes précédentes il se nomme "decrip". Néanmoins, voyant "decrip" et "decri" cote-à-cote en ligne 18, je ne sais pas s'il s'agit d'une erreur ?!

A suivre.
toutdebutant
Bonsoir tout le monde,

Voilà le problème résolu avec le code suivant :

Action Script

function displayGallery(gallery_array:Array,gallery_txt: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);
var decrip:MovieClip=createTextField("decri",this.getNextHighestDepth(),10,20,250,40);
decrip.wordWrap = true;
decrip.multiline = true;
decrip.border = true;
decrip.textColor = 0x000000;
decrip.background = true;
decrip.text=(gallery_txt[i]);
//trace(decrip);
mcLoader_mc2.loadClip(decri,decrip);


J'ai toutes mes images affichées et toutes les descriptions au bons endroits !
Maintenant, je vais m'atteller à la présentation correcte du tout.

Merci pour votre aide.
icon_smile.gif gourou.gif
toutdebutant
Bonsoir tout le monde,

Je reviens vers vous pour quelques explications complémentaires si vous le voulez bien !

J'ai donc essayé de créer un rectangle arrondi qui doit servir ce contener à mes photo + la description.
Le problème qui se pose est le suivant :

Seul le premier rectangle s'affiche derrière la première image, mais pas derrière les autres.
J'ai essayé pas mal de trucs mais rien n'y fait.
voici le code :

Action Script

function displayGallery(gallery_array:Array,gallery_txt:Array) {
var galleryLength:Number = gallery_array.length;
var galleryTextLenght:Number = galleryLength*2;
var galleryRectangle:Number = galleryLength*3;
for (var i = 0; i<galleryLength; i++) {
//rectangle arrondi qui doit servir de contener
var thisMC:MovieClip = this.createEmptyMovieClip("rectangle_arrondi"+i,i);
rectArrondi((rectangle_arrondi+i), 320, 230, 20, 2, 1, 0x000000, 0xFFCD98B, 100, 100);
//image qui entre dans le contener
rectangle_arrondi+i.createEmptyMovieClip("image"+i+"_mc", (i+25));
//texte qui entre aussi dans le contener
var my_fmt:TextFormat = new TextFormat();
my_fmt.bold = true;
my_fmt.font = "Vernada";
my_fmt.size = 12;
my_fmt.color = 0x6709F7;
my._fmt.border = true;
var decrip =this.createTextField("decri",(i+50),10,20,250,40);
decrip.setNewTextFormat(my_fmt);
decrip.wordWrap = true;
decrip.multiline = true;
decrip.backgroundColor = 0xFFCD98B;
decrip.background = true;
//chargement des textes
decrip.text=(gallery_txt[i]);
//chargement des images
mcLoader_mcl.loadClip(gallery_array[i].src, thisMC);

//trace(decrip);
//mcLoader_mc2.loadClip(decri,decrip);
preloaderMC = this.attachMovie("preloader_mc", "preloader"+i+"_mc", 5000+i);



preloaderMC.bar_mc._xscale = 0;
preloaderMC.progress_txt.text = "0%";

// position des clips
thisMC._x = _global.thisX;
thisMC._y = _global.thisY;
decrip._x = _global.thisXC;
decrip._y = _global.thisYC;
rectangle_arrondi._x = _global.thisXCa;
rectangle_arrondi._y = _global.thisYCa;
// set the position of the image preloader.
preloaderMC._x = _global.thisX;
preloaderMC._y = _global.thisY+20;

// nouvelles positions pour avoir 2 colonnes
if ((i+1)%2 == 0) {
// reset the X and Y positions
_global.thisX = 30;
_global.thisY += 218;
_global.thisXC = 25;
_global.thisYC +=218;
_global.thisXCa = 5;
_global.thisYCa += 218;
} else {
_global.thisX += 420;
_global.thisXC += 420;
_global.thisXCa += 320;

}

}
}


bien sur la fonction qui va créer le rectangle est en place.
Il y a 25 photos à afficher d'ou les(i+25) et (i+50) pour les clips des images et des textes !

Une bonne âme serait elle de passage pour m'expliquer là ou le bas blesse ?

un grand merci anticipé

icon_smile.gif
lilive
Salut,
Alors en premier lieu: Tu ne peux pas écrire :

Action Script


rectangle_arrondi+i.createEmptyMovieClip("image"+i+"_mc", (i+25));

Car ça ne va pas marcher.

Il faut plutôt faire quelque chose comme:

Action Script


this["rectangle_arrondi"+i].createEmptyMovieClip("image"+i+"_mc", (i+25));
// ou
leMovieClipQuiContientTousLesRectangles["rectangle_arrondi"+i].createEmptyMovieClip("image"+i+"_mc", (i+25));


Quelques pistes pour comprendre cela dans un tuto du wiki:
http://wiki.mediabox.fr/tutoriaux/flash/di...s_explications1
http://wiki.mediabox.fr/tutoriaux/flash/di...n_des_variables
http://wiki.mediabox.fr/tutoriaux/flash/di...ements_sur_this

Et un endroit du même tuto qui se rapproche de tes préocupations:
http://wiki.mediabox.fr/tutoriaux/flash/di..._aux_miniatures
toutdebutant
bonsoir,

Merci lilive, j'avais déjà parcouru tous ces tutoriaux, mais cela ne me donnais pas la solution adéquate pour mon truc.

Je vais reprendre le tout à zéro, en m'y inspirant un maximum et vois si j'arrive à faire ce que je veux !

encore merci.
icon_smile.gif
lilive
Tu peux également lire cette page de l'aide de flash pour apprendre les histoires de unClip["unNomDeClip" + unIndice].
Je t'ai mis des liens plutôt que des explications car ce n'est pas évident à expliquer rapidement.
Dès que tu auras fait des essais à ce niveau, reviens peut-être nous tenir au courant.
toutdebutant
Bonsoir,

oui ne t'inquiète pas lilive, je viendrais régulièrement vous informer des mes progrès !

Merci beaucoup de ton aide qui me sera précieuse

icon_smile.gif
toutdebutant
Bonjour tout le monde,

Comme promis je vous donne des nouvelles de mon travail !

Après avoir beaucoup peiné pour régler et afficher le tout, je suis presque arrivé au bout de mes peines !
Il ne me reste plus qu'à centrer mes images dans chacun des rectangles arrondis de fond et de mettre en place le preloader, mais là je pense qu'il est prévu par l'ide et je cherche à le mettre en place.
Je ne suis pas l'auteur de tout le code, je m'appuie sur un exemple fourni avec flash.

voici le code tel qu'il est actuellement :

Action Script

import mx.transitions.*;
import flash.geom.*;
_global.thisX = 30;
_global.thisY = 25;
_global.thisXC = 30;
_global.thisYC = 185;
_global.thisXCa = 5;
_global.thisYCa = 0;

_global.stageWidth = 750;
_global.stageHeight = 2880;
//creation du rectangle de fond
function rectArrondi (cible:MovieClip, largeur:Number, hauteur:Number, rayon:Number, offset:Number, epaisseur:Number, couleur1:Number, couleur2:Number, alpha1:Number, alpha2:Number)
{
with (cible) {
lineStyle (epaisseur, couleur1, 100, true);
beginFill (couleur2, alpha2);
moveTo (rayon, 0);
lineTo (largeur - rayon, thisXCa);
//Haut Droite
curveTo (largeur - offset, offset, largeur, rayon);
lineTo (largeur, hauteur - rayon);
//Bas Droite
curveTo (largeur - offset, hauteur - offset, largeur - rayon, hauteur);
lineTo (rayon, hauteur);
//Bas Gauche
curveTo (offset, hauteur - offset, 0, hauteur - rayon);
lineTo (0, rayon);
//Haut Gauche
curveTo (offset, offset, rayon, 0);
endFill ();
}
}
//dupliquer le rectangle en les plaçant sur 2 colonnes
function duplicate(nbrimages) {
MC = new Array();
for (var i = 1; i <nbrimages; i++) {
duplicateMovieClip("miniatures","miniatures"+i,1000+i);
MC[i] = this["miniatures"+i];
MC[i]._x = _global.thisXCa;
MC[i]._y = _global.thisYCa;
if ((i+1)%2 == 0){
_global.thisXCa = 5;
_global.thisYCa += 221;
}
else
{
_global.thisXCa += 420;
}
}
};
// Create and configure the XML instance which is used to load the list of gallery images on the fly.
var gallery_xml:XML = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function(success:Boolean) {
try {
/* if you are able to successfully load and parse the gallery from a remote XML file,
parse out the image names and add them to an array. */
if (success) {
var images:Array = this.firstChild.childNodes[0].childNodes;
//trace(images);
var comment:Array = this.firstChild.childNodes[1].childNodes;
//trace (comment);
var nbcomment= comment.length;
//trace ("nbr comment " + nbcomment);
var flechehaut= this.firstChild.childNodes[2].childNodes;
//trace (flechehaut);
var gallery_txt:Array = new Array();
var gallery_array:Array = new Array();
for (var i = 0; i<images.length; i++) {
gallery_array.push({src:images[i].firstChild.nodeValue});
gallery_txt.push(comment[i].firstChild.nodeValue);
}
displayGallery(gallery_array,gallery_txt);
} else {
throw new Error("Unable to parse XML");
}
} catch (e_err:Error) {
trace(e_err.message);
} finally {
delete this;
}
};

//chargement du fichier XML
gallery_xml.load("retro2.xml");

//creation des movie clip qui vont recevoir photo et texte descriptif

function displayGallery(gallery_array:Array,gallery_txt:Array) {
var galleryLength:Number = gallery_array.length;

var miniaturesMC:MovieClip = this.createEmptyMovieClip("miniatures",1000);
rectArrondi(miniatures,320,220,20,2,1,0x000000,0xFFCD98B,100,100);
miniatures._x = _global.thisXCa;
miniatures._y = _global.thisYCa;
_global.thisXCa += 420;
duplicate(galleryLength);

var thisMC:Array = new Array()
for (var i = 0; i<galleryLength; i++) {
thisMC[i] = this.createEmptyMovieClip("rectan"+i,(2000+i));

//texte descriptif de chaque photo
var my_fmt:TextFormat = new TextFormat();
my_fmt.bold = true;
my_fmt.font = "Vernada";
my_fmt.size = 12;
my_fmt.color = 0x6709F7;
my._fmt.border = true;
var decrip = this.createTextField("decrip",(3000+i),10,20,250,35);
decrip.setNewTextFormat(my_fmt);
decrip.wordWrap = true;
decrip.multiline = true;
decrip.backgroundColor = 0xFFCD98B;
decrip.background = true;
//chargement des textes
decrip.text=(gallery_txt[i]);
//chargement des images
mcLoader_mcl.loadClip(gallery_array[i].src,thisMC[i]);

preloaderMC = this.attachMovie("preloader_mc", "preloader"+i+"_mc", 5000+i);

// and set a default value in the progress bars text field.
preloaderMC.bar_mc._xscale = 0;
preloaderMC.progress_txt.text = "0%";

// position des clips
thisMC[i]._x = _global.thisX;
thisMC[i]._y = _global.thisY;
decrip._x = _global.thisXC;
decrip._y = _global.thisYC;
// set the position of the image preloader.
preloaderMC._x = _global.thisX;
preloaderMC._y = _global.thisY+20;

// nouvelles positions pour avoir 2 colonnes
if ((i+1)%2 == 0) {

_global.thisX = 30;
_global.thisY += 221;
_global.thisXC = 25;
_global.thisYC +=220.5;

} else {
_global.thisX += 420;
_global.thisXC += 420;


}

}
}

// définir le moviecliploader
var mcLoader_mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();
mclListener.onLoadStart = function() {
};

// while the content is preloading, modify the width of the progress bar.
mclListener.onLoadProgress = function(target_mc, loadedBytes, totalBytes) {
var pctLoaded:Number = Math.round(loadedBytes/totalBytes*100);
// create a shortcut for the path to the preloader movie clip.
var preloaderMC = target_mc._parent["preloader"+target_mc.getDepth()+"_mc"];
preloaderMC.bar_mc._xscale = pctLoaded;
preloaderMC.progress_txt.text = pctLoaded+"%";
};
mclListener.onLoadComplete = function(evt:MovieClip):Void { };
// when the onLoadInit event is thrown, you're free to position the instances
mclListener.onLoadInit = function(evt:MovieClip) {

evt._parent["preloader"+evt.getDepth()+"_mc"].removeMovieClip();
/* set local variables for the target movie clip's width and height,
and the desired settings for the image stroke and border. */
var thisWidth:Number = evt._width;
var thisHeight:Number = evt._height;
var borderWidth:Number = 4;
var marginWidth:Number = 12;
evt.scale = 38;
// draw a white rectangle with a black stroke around the images.
evt.lineStyle(borderWidth, 0x000000, 100);
evt.beginFill(0x9C9CF3, 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();

/* scale the target movie clip so it appears as a thumbnail.
This allows users to quickly view a full image without downloading it every time,
but unfortunaltey also causes a large initial download. */
evt._xscale = evt.scale;
evt._yscale = evt.scale;
// rotate the current image (and borders) anywyhere from -5 degrees to +5 degrees.
//evt._rotation = Math.round(Math.random()*-10)+5;
/* when the target_mc movie clip instance is pressed, begin to drag the current movie clip
and set some temporary variables so once you are finished rescaling and positioning
the full image, you can return the instance to its original position. */
evt.onPress = function() {
// start dragging the current clip.
this.startDrag();
/* set the _xscale and _yscale properties back to 100% so the image appears full sized.
You're also storing the original X and Y coordinates so you can return the image where you found it. */
this._xscale = 100;
this._yscale = 100;
this.origX = this._x;
this.origY = this._y;
// find the depth of the current movie clip, and store it within the movie clip.
this.origDepth = this.getDepth();
/* :TRICKY: swap the depth of the current movie clip, with the next highest movie clip of the _parent.
Effectively this makes the current movie clip the top of the "stack". */
this.swapDepths(this._parent.getNextHighestDepth()+1);
// try and center the current movie clip on the Stage.
this._x = (_global.stageWidth-evt._width+30)/2;
//this._y = (_global.stageHeight-evt._height+30)/2;
// apply a transition to the movie clip which makes the movie clip flicker for a split second.
mx.transitions.TransitionManager.start(this, {type:mx.transitions.Photo, direction:0, duration:1, easing:mx.transitions.easing.Strong.easeOut, param1:empty, param2:empty});
};
/* when the movie clip instance is released, stop dragging the movie clip.
Reset the _xscale and _yscale properties as well as the _x and _y coordinates. */
evt.onRelease = function() {
this.stopDrag();
this._xscale = this.scale;
this._yscale = this.scale;
this._x = this.origX;
this._y = this.origY;
};
// if the mouse cursor was released outside of the movie clip, call the onRelease handler.
evt.onReleaseOutside = evt.onRelease;
};
mclListener.onLoadError = function(evt:MovieClip, code:String):Void { trace("erreur"); }

mcLoader_mcl.addListener(mclListener);


Toute la partie onloadprogress et onloadinit n'est pas de moi !
Je joins le fichier fla et le fichier xml pour plus de facilité de lecture pour des aides éventuelles !

Merci !
icon_smile.gif
toutdebutant
Re bonjur,
J'ai voulu reprendre le message précédent, mais j'ai pas trouvé comment faire !

Vous pouvez avoir un aperçu de ce que cela donne en cliquant Ici

icon_smile.gif
toutdebutant
Bonjour tout le monde,

La seule solution que j'ai trouvé pour bien centrer mes images dans le rectangle de fond a été de mettre les dimensions originales de chacunes des photos dans le fichier xml.

Puis avec le code suivant j'ai pu les afficher correctement.

Action Script

		var largmin:Number = gallery_larg[i];
//récupère la dimension originale de la photo
var largmin1:Number = Math.round(((largmin*38)/100)/2);
//applique le poucentage du scale
var largmin2:Number = (largrect/2)-largmin1;
//détermine la position exacte dee la photo dans le rectangle (largrect est la largeur du rectangle)
trace(largmin2);


Ce n'est peut-être pas la meilleure façon de faire, mais c'est la seule que j'ai trouvé !

Si vous en avez une autre qui me dispenserait de mettre les dimensions dans le fichier xml, je suis preneur !

Merci

icon_smile.gif
toutdebutant
Bonjour tout le monde,

Encore une petite question si ce n'est pas trop abuser de votre temps
Dans les pages de mon site, il y a un certain nombre de photos qui sont donc rangées sur 2 colonnes.
Je voudrais pouvoir, lorsque le nombre de photo à afficher est impair que la dernière ne se retrouve pas en bas à gauche, mais soit centrée.

Avez-vous une idée sur la façon de procéder ?

Je précise que mon site comporte beaucoup de pages et que chaque page comporte un nombre de photo différent.

Merci

icon_smile.gif
toutdebutant
Bonjour,

Personne a une petite idée pour résoudre mon petit problème d'affichage de mon dernier clip lorsque le nombre de clip est impair ?

icon_question.gif
toutdebutant
Bonsoir tout le monde,

Comme promis, je vous donne des mes nouvelles !
Voilà je suis arrivé à faire presque tout ce que je voulais (sauf centrer le dernier clip quand le nombre est impair sur une page )!

Le résultat n'est pas trop mauvais je pense

Si vous voulez voir le résultat, je vous propose une petite viste de mon site en cliquant ici

Je vous mets un des fla qui pourrait intéréssé quelques uns !

Merci de toute l'aide que vous m'avez apporté et qui m'a été fort utile.

gourou.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2009 Invision Power Services, Inc.