Affichage d'image en AS3

Question

Bonjour à Vous,

Je continue gaillardement à essayer de programmer une petite présentation de photos pour une soirée, organisée dans le cadre d'une petite association s'intéressant à la nature et dont je suis l'un des membres.
Vous m?avez déjà permis de résoudre un certain nombre de problèmes (voir résumé des épisodes précédents, mes anciens messages).

Je me permets de vous rappeler mon projet :

La présentation doit comporter 4 rubriques.
Chaque rubrique doit ouvrir un page
Chaque page doit afficher à gauche un ensemble de vignettes
Le clique d'une vignette doit permettre d'afficher la même image en gros à droite.

L'état des travaux :

Je peux afficher les rubriques, les pages et les vignettes.

La difficulté (sujet de mon message):

Afficher la grande photo.

Quelques précisions :

Pour réaliser ce qui est déjà fait, j'utilise deux tableaux principaux.

Le premier est un tableau de rubrique avec 4 éléments contenant le nom de mes rubriques.

Du style : rubrique :Array = {"rubrique1", "rubrique2", "rubrique3", "rubrique4"} ;
Il me permet d'afficher mes rubrique mais aussi de récupérer mes photos

Le second tableau est un tableau contenant le nombre de photos par rubrique

Du style nombre :Array = {12,20,30,40} ;

Ces deux tableaux me permettent de récupérer mes photos car les sous dossiers porte le même nom que la rubrique et les photos sont du type vignette + nombre.

L'appel est donc :
aCharger.load(new URLRequest("../"+rubrique+"/"+"vignette"+nombre+".jpg"));

Grace à une boucle et une mise à l'échelle pour réduire mes photos, je peux afficher mes vignettes.

 Il me reste à faire afficher la photo en grand et là, je cale (je me suis lancer dans l'AS3 que depuis un petit mois, alors soyez indulgent SVP). 

Je pense qu'il me faut utiliser une instruction
var cible:Sprite  = e.currentTarget  as Sprite;

Mais comment, ensuite, faire en sorte que la cible renvoie la photo qui lui correspond ?
Il faut en effet que le programme puisse savoir à quelle rubrique (et donc le sous-répertoire) appartient la vignette et quel est son numéro.

C'est ce problème qui me fait solliciter votre aide éclairée.

Amitiés.



Un petit novice venu de l'Est.

Orange73 · Answer

Hello,

Fait nous voir un peu plus ton code (chargement des images, evenement clic...).

A+

-- Orange73 --

"L'homme n'est pas fait pour travailler, la preuve c'est que cela le fatigue" (Voltaire)

verarl · Answer

Bonjour et merci beaucoup,

J'ai un sprite qui sert de conteneur à mes image placée dans des sous dossiers.

Je charge mes images en vignette par le code suivant :

function positionneVignette(type:String,nelt:Number,nx:Number, ny:Number):Sprite {
var tmp =  new Sprite();
var ecartInterPhoto:uint = 5;
var compteurPhoto:uint=0;
var laVignette:PhotoClp;
var aCharger:Loader;
var posX:uint = 0;
var posY:uint = 0;
for (var i:uint = 0; i< nelt; i++) {
aCharger = new Loader() ;
laVignette = new PhotoClp();
aCharger.load(new URLRequest("../"+type+"/"+"vignette"+i+".jpg"));
laVignette.scaleX = 0.02;
laVignette.scaleY = 0.02;
laVignette.x =(laVignette.width + ecartInterPhoto)*posX + (nx-10);
laVignette.y = (laVignette.height + ecartInterPhoto)*posY + (ny-20);
laVignette.type = type;
laVignette.addChild(aCharger);
posY++;
if (laVignette.y  > hauteurPage+70) {
posY=0;
posX++;
}
laVignette.addChild(aCharger);
tmp.addChild(laVignette);
laVignette.addEventListener(MouseEvent.MOUSE_OVER, surOver);
laVignette.addEventListener(MouseEvent.MOUSE_OUT, surOut);
laVignette.addEventListener (MouseEvent.MOUSE_DOWN, affichePhoto);
}
return tmp;
}

Mes vignette se chage à gauche les une sous les uatres et ensuite les une à côté des autres.
celà fonctionne


L'action sur la souris renvoie la fonction suivante (j'ai un peu avancé...)


function affichePhoto (e:MouseEvent):void {
var cible:Sprite = e.currentTarget  as Sprite;
cible.alpha =1;
cible.scaleX =0.35;
cible.scaleY = 0.35;
cible.x = largeurScene - cible.width;
cible.y = hauteurScene - cible.height;
addChild(cible);
}

Cette fonction me permet d'afficher une image plus grande sur la gauche de l'écran mais elle génère deux dommages collateraux :

1 - Lorsque je clique sur une vingette, la photo s'affiche mais la vignette disparaît
En fait c'est comme si la photo se dépaçait de la vignette vers la grande image alors que j'aimerais la dupliquer 

2 - Lorsque'ne grande photo est affichée, elle ne disparaît que lorsque j'en affiche une autre. Autrement dit une grande photo reste toujours visible.
Il me faut donc trouver une astuce qui me permette :
Soit de mette l'alpha à 0 ou visible à false
Soit dde étruire la photo de la liste d'achiffage
Soit de la placer dans cette liste en dessous des autres éléments.^

je me doute qu'il est difficile de répondre sans avoir tout le code de mon animation.
Comme il prend un peu de place, j'aimerais, si vous me le permettez, vous l'envoyer en privé.


Un petit novice venu de l'Est.

verarl · Answer

Help, je ne m'en sors plus !


Un petit novice venu de l'Est.

verarl · Answer

Bonsoir,

Tout d'abord, je demanderai aux administrateurs de bien vouloir m'excuser pour la longueur de mon message.

Je pense que mes explications étaient trop fragmentaires ,et de ce fait, qu'il était impossible de m'aider, c'est pourquoi je vous livre avec beaucoup de gêne, l'ensemble de mon code.
Je me permets pour ma défense, de vous rappelez que je suis totalement débutant en AS3 et que j'essaie d'adapter des notions apprises dans les livres à mon ptojet, un projection sur la nature.
Pour l'instant les rubriques les pages et l'affichage des vignettes fonctionnent. Mais je n'arrive pas à afficher les images en grands depuis les vignettes. J'ai mis deux indications trace, la première fonctionne la seconde renvoie null.
Je peux vous donner des explications supplémentaires

/*
#  Association Mycologique de Baume-les-Dames
#  25110 Baume-les-Dames
#  Soirée de février 2010
#  Séjour à Pralognan.
#  Eté 2009
#
*/

// Creer rectangle de type MovieClip 
function creerUneForme(num:uint, nx:Number, ny:Number, nl:Number, nh:Number, nc:uint, na:Number):MovieClip {
var tmp = new MovieClip();
tmp.x = nx;
tmp.y =ny;
tmp.graphics.beginFill(nc);
tmp.graphics.drawRect(0, 0, nl, nh);
tmp.graphics.endFill();
tmp.alpha = na;
tmp.numero = num;
return tmp;
}

// variables utiles
function initialiserUneForme(forme:MovieClip, nx:Number, ny:Number, nl:Number, nh:Number):void {
forme.x = nx;
forme.y = ny;
forme.width = nl;
forme.height = nh;
forme.alpha = 0;
forme.visible = true;
}

// Ctréer un texte vertical en Arial

function creerTexteVertical(nt:String, nx:Number, ny:Number, nc:uint, taille:uint):Sprite {
var format:TextFormat = new TextFormat("Arial", 36);
format.color=nc;
format.align = TextFormatAlign.CENTER;
format.leading  = -8;
var tmp =  new TextField();
tmp.defaultTextFormat = format;
tmp.selectable = false;
tmp.height = tmp.textHeight;
tmp.autoSize = TextFieldAutoSize.CENTER;
tmp.embedFonts  = true;
var leTexte:Array =new Array();
for (var i:Number=0; i < nt.length; i++) {
leTexte[i] = nt.charAt(i);
}
var textVertical :String = leTexte.join("
");
tmp.text = textVertical;
tmp.x = nx;
tmp.y = ny;
tmp.filters = [new DropShadowFilter(0, 45,0X000000,1,5,5,1.64,3)];
var boite:Sprite = new Sprite();
var fond:Sprite = new Sprite();
fond.graphics.beginFill(0xFFFFFF);
fond.graphics.drawRect(0, 0,  tmp.textWidth-100,tmp.textHeight);
fond.graphics.endFill();
fond.x = nx ;
fond.y = ny;
fond.alpha=0;
addChild(fond);
boite.addChild(tmp);
boite.addChild(fond);
return boite;
}

// Mise en place des vignettes
function positionneVignette(type,nelt:Number,nx:Number, ny:Number):Sprite {
var tmp =  new Sprite();
var ecartInterPhoto:uint = 5;
var compteurPhoto:uint=0;
var laVignette:PhotoClp;
var aCharger:Loader;
var posX:uint = 0;
var posY:uint = 0;
for (var i:uint = 0; i< nelt; i++) {
aCharger = new Loader() ;
laVignette = new PhotoClp();
aCharger.load(new URLRequest("../"+type+"/"+"vignette"+i+".jpg"));
laVignette.scaleX = 0.02;
laVignette.scaleY = 0.02;
laVignette.x =(laVignette.width + ecartInterPhoto)*posX + (nx-10);
laVignette.y = (laVignette.height + ecartInterPhoto)*posY + (ny-20);
laVignette.type = type;
trace(type);
laVignette.addChild(aCharger);
posY++;
if (laVignette.y  > hauteurPage+70) {
posY=0;
posX++;
}
laVignette.addChild(aCharger);
tmp.addChildAt(laVignette,0);
tmp.addChildAt(laVignette,0);
laVignette.addEventListener(MouseEvent.MOUSE_DOWN, surDown);
laVignette.addEventListener(MouseEvent.MOUSE_UP, surUp);
laVignette.addEventListener(MouseEvent.MOUSE_OVER, surOver);
laVignette.addEventListener(MouseEvent.MOUSE_OUT, surOut);
}
return tmp;
}

// Chargement des grosses photos (non testé)
function chargerPhoto(url:String,nx:Number,ny:Number, fx:Number,fy:Number):void {
if (grandFormat != null) {

removeChild(grandFormat);
}
var aCharger:Loader=new Loader;
aCharger.load(new URLRequest(url));
grandFormat=new MovieClip()  ;
grandFormat.addChild(aCharger);

grandFormat.x=nx - 32 ;
grandFormat.y=ny - 47;
grandFormat.scaleX=0.3;
grandFormat.scaleY=0.3;

grandFormat.finalY=fy;
grandFormat.finalX=fx;
grandFormat.alpha=0;
addChild(grandFormat);
grandFormat.addEventListener(Event.ENTER_FRAME,seDeplacerVers);
}

// Effacement du conteneur
function effacer(cible:Sprite):Sprite {
if (cible != null) {
removeChild(cible);
}
return null;
}

// éléments généraux au programme

// variables
var largeurScene:uint = stage.stageWidth;
var hauteurScene:uint = stage.stageHeight;
var ecartDuBord:uint = 100;
var bande:uint = stage.stageHeight/5;
var i:uint;
var type: String;

var grandFormat:MovieClip;

// titre
var titreSite:TitreClp = new TitreClp();
titreSite.x = 20;
titreSite.y  =100 ;
addChild(titreSite);
titreSite.addEventListener(MouseEvent.MOUSE_OVER, surOver);
titreSite.addEventListener(MouseEvent.MOUSE_OUT, surOut);
titreSite.addEventListener(MouseEvent.MOUSE_UP, clicSurTitre);

// tableaux 
var listeCouleurs:Array =  [ 0x016087, 0x660066, 0xCC0033, 0xFF9900];
var listeNoms:Array = [ "Annecy", "Pralognan", "Papillons", "Fleurs"];
var nbElt:Array  = [1, 1, 1, 1];
var listeRubriques:Array = new  Array(4);
var listePages:Array = new  Array(4);
var listeMinis:Array = new  Array(4);
var listeTitreRubrique:Array = new Array(4);
var titrePage:Sprite;
var boiteAvignettes :Sprite;

// Création des pages
var largeurPage:uint = largeurScene;
var hauteurPage:uint = hauteurScene - bande;
var finalXPage:uint = 0;
var finalYPage:uint = bande;
for (i = 0; i < listePages.length; i++) {
listePages[i] = new MovieClip();
listePages[i]  = creerUneForme(i, largeurScene/2, hauteurScene/2, largeurPage/100, hauteurPage/100, listeCouleurs[i], 0);
addChild(listePages[i]);
listePages[i].addEventListener(Event.COMPLETE,afficherLesMinis);
}


// Création des rubriques
var largeurRubrique:uint = largeurScene/4;
var hauteurRubrique:uint = hauteurScene - bande;
for (i = 0; i < listeRubriques.length; i++) {
listeRubriques[i] = new MovieClip();
var posX:Number = Math.random()*(largeurScene+ 2*largeurRubrique) - largeurRubrique;
var posY:Number = Math.random()*(hauteurScene + 2*hauteurRubrique) - hauteurRubrique;
listeRubriques[i]  = creerUneForme(i,posX, posY, largeurRubrique, hauteurRubrique, listeCouleurs[i], 0);
addChild(listeRubriques[i]);
// Création du titre
listeTitreRubrique[i] = creerTexteVertical(listeNoms[i], largeurRubrique -50, 20, listeCouleurs[i],55);
listeRubriques[i].addChild(listeTitreRubrique[i]);
listeRubriques[i].addEventListener(Event.ENTER_FRAME, seDeplacerVers);
}
// Création des minis rubriques
var largeurMini:uint = 20;
var hauteurMini:uint = 35;
var finalYMini:uint = 75;
var finalXMini:uint = largeurScene - ecartDuBord;

for (i = 0; i < listeMinis.length; i++) {
listeMinis[i] = new MovieClip();
listeMinis[i]  = creerUneForme(i, i*largeurMini +finalXMini, finalYMini, largeurMini, hauteurMini,  listeCouleurs[i],1);
listeMinis[i].visible = false;
addChild(listeMinis[i]);
listeMinis[i].addEventListener(MouseEvent.MOUSE_OVER, surOver);
listeMinis[i].addEventListener(MouseEvent.MOUSE_OUT, surOut);
listeMinis[i].addEventListener(MouseEvent.MOUSE_UP, clicSurRubrique);
}


// Action souris

function surOver(e:MouseEvent):void {
var cible:Sprite = e.currentTarget  as Sprite;
cible.alpha = 0.4;
cible.buttonMode = true;
}

function surOut(e:MouseEvent):void {
var cible:Sprite = e.currentTarget  as Sprite;
cible.alpha = 1;
}


function surDown(e:MouseEvent):void {
var cible:MovieClip=e.currentTarget  as  MovieClip;
cible.x++;
cible.y++;
}

function surUp(e:MouseEvent):void {
var cible:MovieClip=e.currentTarget  as  MovieClip;
cible.x--;
cible.y--;
var url:String;
trace(type)
switch (type) {
case "Annecy" :
// Si c'est une photo, la charger en la déplaçant depuis la position courante de la souris jusqu'à la partie droite de la page
url="../" + type + "/" + type + cible.numero + ".jpg";
chargerPhoto(url,parent.mouseX ,parent.mouseY ,largeurPage / 2 , finalYPage );
break;
case "Pralognan" :
url="../" + type + "/" + type + cible.numero + ".jpg";
chargerPhoto(url,parent.mouseX ,parent.mouseY ,largeurPage / 2 , finalYPage );
break;
case "Papillons" :
// Si c'est une vidéo, la charger en la déplaçant depuis la position courante de la souris jusqu'à la partie droite de la page
url="../" + type + "/" + type + cible.numero + ".jpg";
chargerPhoto(url,parent.mouseX ,parent.mouseY ,largeurPage / 2 , finalYPage );
break;
case "Fleurs" :
// Si c'est une vidéo, la charger en la déplaçant depuis la position courante de la souris jusqu'à la partie droite de la page
url="../" + type + "/" + type + cible.numero + ".jpg";
chargerPhoto(url,parent.mouseX ,parent.mouseY ,largeurPage / 2 , finalYPage );
break;

}
}

// Retour à l'aspect initial

function clicSurTitre(e:MouseEvent):void {
boiteAvignettes  = effacer(boiteAvignettes );
titrePage = effacer(titrePage);


// Placement des rubriques
for (var i:uint = 0; i < listeRubriques.length; i++) {
listeRubriques[i].visible = true;
var posX:Number = Math.random()*(largeurScene+ 2*largeurRubrique) - largeurRubrique;
var posY:Number = Math.random()*(hauteurScene + 2*hauteurRubrique) - hauteurRubrique;
initialiserUneForme(listeRubriques[i],  posX,posY,largeurRubrique,hauteurRubrique);
listeRubriques[i].removeEventListener(MouseEvent.MOUSE_OVER, surOver);
listeRubriques[i].removeEventListener(MouseEvent.MOUSE_OUT, surOut);
listeRubriques[i].removeEventListener(MouseEvent.MOUSE_UP, clicSurRubrique);
listeRubriques[i].addEventListener(Event.ENTER_FRAME, seDeplacerVers);
// Initialisation des pages
initialiserUneForme(listePages[i],  largeurScene/2,hauteurScene/2,largeurPage/100,hauteurPage/100);
// Effacement des minis rubriques
listeMinis[i].visible = false;
}
}

// Réaffichage des rubriques
function clicSurRubrique(e:MouseEvent):void {
var cible:MovieClip = e.currentTarget  as MovieClip;
//Les vignettes sont effacées
boiteAvignettes  = effacer(boiteAvignettes );
// Titre de page effacé
titrePage= effacer(titrePage);

// Les pages sont centrées et mises à l'échelle
for (var i:uint = 0; i < listeRubriques.length; i++) {
// Les rubriques deviennent invisibles
listeRubriques[i].visible = false;
// Réinitialiser les pages
initialiserUneForme(listePages[i],  largeurScene/2,hauteurScene/2,largeurPage/100,hauteurPage/100);
}
listePages[cible.numero].addEventListener(Event.ENTER_FRAME, agrandirPageEnX);
}
// Fonctions d'affichage des éléments graphiques

function seDeplacerVers(e:Event):void {
var cible:MovieClip = e.currentTarget  as MovieClip;
var positionCouranteX, positionCouranteY;
var ecartX, ecartY;
var deplacementX, deplacementY;
positionCouranteX = cible.x;
positionCouranteY = cible.y;
ecartX =  cible.numero*largeurRubrique - positionCouranteX;
deplacementX= ecartX / 6;
cible.x= positionCouranteX + deplacementX;
ecartY = finalYPage - positionCouranteY;
deplacementY= ecartY / 6;
cible.y= positionCouranteY + deplacementY;
cible.alpha+=0.02;
if (Math.abs(deplacementY ) < 0.4 &&  Math.abs(deplacementX) < 0.4) {
cible.addEventListener(MouseEvent.MOUSE_OVER, surOver);
cible.addEventListener(MouseEvent.MOUSE_OUT, surOut);
cible.addEventListener(MouseEvent.MOUSE_UP, clicSurRubrique);
cible.alpha=1;
cible.x = cible.numero*largeurRubrique ;
cible.y =finalYPage;
cible.removeEventListener(Event.ENTER_FRAME, seDeplacerVers);

}
}


function agrandirPageEnX(e:Event):void {
var cible:MovieClip = e.currentTarget  as MovieClip;
var ecartX:Number;
var positionCouranteX:Number;
var deplacementX:Number;

positionCouranteX = cible. x;
ecartX = finalXPage - positionCouranteX;
deplacementX= ecartX / 6;
cible.x= positionCouranteX + deplacementX;
cible.width+=40;
cible.alpha+=0.05;
if (Math.abs(deplacementX)  < 0.4) {
cible.removeEventListener(Event.ENTER_FRAME, agrandirPageEnX);
cible.addEventListener(Event.ENTER_FRAME, agrandirPageEnY);
cible.alpha = 1;
cible.width=largeurPage;
}
}

function agrandirPageEnY(e:Event):void {
var cible:MovieClip = e.currentTarget  as MovieClip;
var ecartY:Number;
var positionCouranteY:Number;
var deplacementY:Number;
cible.height+=25;
positionCouranteY = cible. y;
ecartY = finalYPage - positionCouranteY;
deplacementY= ecartY / 6;
cible.y= positionCouranteY + deplacementY;

if (Math.abs(deplacementY)  < 0.4) {
cible.removeEventListener(Event.ENTER_FRAME, agrandirPageEnY);
cible.height = hauteurPage;
cible.x =finalXPage;
cible.y =finalYPage;
cible.alpha = 15;
// ---------------------------------------  Le titre d'une page est créé par la fonction creerTexteVertical() ----------------------------
titrePage=creerTexteVertical(listeNoms[cible.numero], largeurPage-80, finalYPage+10, listeCouleurs[cible.numero],70);
addChild(titrePage);
// --------------------------------------  Les vignettes sont placées sur la page
boiteAvignettes = positionneVignette(listeNoms[cible.numero],nbElt [cible.numero],30,  finalYPage+30);
addChild(boiteAvignettes );
cible.dispatchEvent(new Event(Event.COMPLETE));
}
}

// affichage des minis rubriques
function afficherLesMinis(e:Event):void {
var cible:MovieClip = e.currentTarget  as MovieClip;
for (var i:uint = 0; i < listeMinis.length; i++) {
listeMinis[i].visible = true;
}
listeMinis[cible.numero].visible = false;
}

verarl · Answer

Je ne me suis pas rendu compte que mon message était aussi long.
Je vous présente encore mes excuses.
Les administrateurs peuvent le supprimer s'ils le jugent nécessaire...



Un petit novice venu de l'Est.

Affichage d'image en AS3

5 réponses

Votre réponse

Discussions similaires