Bonjour tout le monde,
Je viens à vous pour une petite question,
Je suis entrain de faire un générateur d'avatar:
http://hanser.perso.neuf.fr/Amaury/generateur_avatar/
Grâce à plusieurs d'entre vous il y a déjà une partie de fonctionnelle. (reste à ajouter du contenu, et à créer un bouton qui permettrait d'enregistrer en local une image, enfin bref)
Le soucis est qu'en faisant défiler les différentes parties de l'image, l'image scintille.
En effet, il y a un temps entre le moment où l'on clique, puis le moment où l'image est chargé et apparaît.
Ma question est comment peut-on supprimer ce scintillement ?
J'imagine qu'il faut programmer de telle sorte que l'image n'apparait que quand elle est chargée, seulement je ne sais pas faire.
Petite précision, dans mon document flash, je charge un xml et je crée un tableau dans lequel chaque case contiendra l'url d'une image (récupérée dans le xml), les images ne sont donc pas directement dans mon document flash.
Je vous joins mon code actionscript3 et mon fichier xml.
Code ActionScript :
stop();
// J'importe des composants (est-ce que c'est le bon terme ? peut-être est-ce des packages) de flash
import fl.containers.UILoader;
// J'importe le package global.as où qui me permettra d'avoir des variables globales
import variable.*;
// Je crée les tableaux qui vont contenir les liens vers les images composants l'avatar
var tableau_yeux_homme:Array = new Array();
var tableau_yeux_femme:Array = new Array();
var tableau_cheveux_homme:Array = new Array();
var tableau_cheveux_femme:Array = new Array();
var tableau_bouche_homme:Array = new Array();
var tableau_bouche_femme:Array = new Array();
var tableau_tenue_homme:Array = new Array();
var tableau_tenue_femme:Array = new Array();
var tableau_fond_homme:Array = new Array();
var tableau_fond_femme:Array = new Array();
// Je crée mes UILoader:
// Pour les fonds
var Loader_fond:UILoader = new UILoader();
Loader_fond.scaleContent = false;
addChild(Loader_fond);
Loader_fond.autoLoad = true;
Loader_fond.x = 577;
Loader_fond.y = 147;
// Pour les peaux
var Loader_peau:UILoader = new UILoader();
Loader_peau.scaleContent = false;
addChild(Loader_peau);
Loader_peau.autoLoad = true;
Loader_peau.x = 577;
Loader_peau.y = 147;
Loader_peau.source = "images/homme_peau.png";
// Pour les tenues
var Loader_tenue:UILoader = new UILoader();
Loader_tenue.scaleContent = false;
addChild(Loader_tenue);
Loader_tenue.autoLoad = true;
Loader_tenue.x = 577;
Loader_tenue.y = 147;
// Pour les bouche
var Loader_bouche:UILoader = new UILoader();
Loader_bouche.scaleContent = false;
addChild(Loader_bouche);
Loader_bouche.autoLoad = true;
Loader_bouche.x = 577;
Loader_bouche.y = 147;
// Pour les yeux
var Loader_yeux:UILoader = new UILoader();
Loader_yeux.scaleContent = false;
addChild(Loader_yeux);
Loader_yeux.autoLoad = true;
Loader_yeux.x = 577;
Loader_yeux.y = 147;
// Pour les cheveux
var Loader_cheveux:UILoader = new UILoader();
Loader_cheveux.scaleContent = false;
addChild(Loader_cheveux);
Loader_cheveux.autoLoad = true;
Loader_cheveux.x = 577;
Loader_cheveux.y = 147;
// Je crée une variable pour savoir si l'avatar est féminin ou masculin
var sexe_homme:Boolean = true;
// J'importe mon fichier xml - code trouvé sur snoupix.com
var chargementXML:URLLoader = new URLLoader();// objet de chargement
var fichier:URLRequest = new URLRequest("galerie.xml");// url du fichier chargé
chargementXML.addEventListener( Event.COMPLETE, chargementComplet );
chargementXML.load(fichier);
// chargement terminé du fichier xml
function chargementComplet(pEvt:Event):void {
var xml:XML=new XML(chargementXML.data);
for each (var img:XML in xml.personne.(@sexe=="M").yeux.image) {
tableau_yeux_homme.push(img.@src);
Loader_yeux.source = tableau_yeux_homme[0];
}
for each (var img2:XML in xml.personne.(@sexe=="F").yeux.image) {
tableau_yeux_femme.push(img2.@src);
}
for each (var img3:XML in xml.personne.(@sexe=="M").cheveux.image) {
tableau_cheveux_homme.push(img3.@src);
Loader_cheveux.source = tableau_cheveux_homme[0];
}
for each (var img4:XML in xml.personne.(@sexe=="F").cheveux.image) {
tableau_cheveux_femme.push(img4.@src);
}
for each (var img5:XML in xml.personne.(@sexe=="M").bouche.image) {
tableau_bouche_homme.push(img5.@src);
Loader_bouche.source = tableau_bouche_homme[0];
}
for each (var img6:XML in xml.personne.(@sexe=="F").bouche.image) {
tableau_bouche_femme.push(img6.@src);
}
for each (var img7:XML in xml.fond.image) {
tableau_fond_homme.push(img7.@src);
Loader_fond.source = tableau_fond_homme[0];
}
for each (var img8:XML in xml.fond.image) {
tableau_fond_femme.push(img8.@src);
}
for each (var img9:XML in xml.personne.(@sexe=="M").tenue.image) {
tableau_tenue_homme.push(img9.@src);
Loader_tenue.source = tableau_tenue_homme[0];
}
for each (var img10:XML in xml.personne.(@sexe=="F").tenue.image) {
tableau_tenue_femme.push(img10.@src);
}
}
// Je crée un évènement, exemple
// Quand je click sur btn_yeux_gauche, j'appelle la fonction relacherYeuxGauche
btn_yeux_gauche.addEventListener(MouseEvent.CLICK, relacherYeuxGauche);
btn_cheveux_gauche.addEventListener(MouseEvent.CLICK, relacherCheveuxGauche);
btn_bouche_gauche.addEventListener(MouseEvent.CLICK, relacherBoucheGauche);
btn_fond_gauche.addEventListener(MouseEvent.CLICK, relacherFondGauche);
btn_tenue_gauche.addEventListener(MouseEvent.CLICK, relacherTenueGauche);
btn_yeux_droite.addEventListener(MouseEvent.CLICK, relacherYeuxDroite);
btn_cheveux_droite.addEventListener(MouseEvent.CLICK, relacherCheveuxDroite);
btn_bouche_droite.addEventListener(MouseEvent.CLICK, relacherBoucheDroite);
btn_fond_droite.addEventListener(MouseEvent.CLICK, relacherFondDroite);
btn_tenue_droite.addEventListener(MouseEvent.CLICK, relacherTenueDroite);
btn_yeux_random.addEventListener(MouseEvent.CLICK, relacherYeuxRandom);
btn_cheveux_random.addEventListener(MouseEvent.CLICK, relacherCheveuxRandom);
btn_bouche_random.addEventListener(MouseEvent.CLICK, relacherBoucheRandom);
btn_fond_random.addEventListener(MouseEvent.CLICK, relacherFondRandom);
btn_tenue_random.addEventListener(MouseEvent.CLICK, relacherTenueRandom);
btn_sexe_homme.addEventListener(MouseEvent.CLICK, relacherSexeHomme);
btn_sexe_femme.addEventListener(MouseEvent.CLICK, relacherSexeFemme);
btn_avatar_aleatoire.addEventListener(MouseEvent.CLICK, relacherAvatarAleatoire);
// Je crée une fonction "gauche", que je réutiliserai pour tout mes boutons gauches (précédent)
var i:int;
i = 0;
function gauche(Loader_source:UILoader, tableau:Array, tableau2:Array):void {
var tableauAffecte = tableau;
var tableauAffecte2 = tableau2;
var Loader_sourceAffecte = Loader_source;
var max = tableauAffecte.length;
var max2 = tableauAffecte2.length;
if(sexe_homme == true){
if (i>0) {
i--
Loader_sourceAffecte.source = tableauAffecte[i];
}
else {
i=max-1;
Loader_sourceAffecte.source = tableauAffecte[i];
}
}
else{
if (i>0) {
i--
Loader_sourceAffecte.source = tableauAffecte2[i];
}
else {
i=max2-1;
Loader_sourceAffecte.source = tableauAffecte2[i];
}
}
}
// Je crée une fonction "droite", que je réutiliserai pour tout mes boutons droites (suivant)
function droite(Loader_source:UILoader, tableau:Array, tableau2:Array):void {
var tableauAffecte = tableau;
var tableauAffecte2 = tableau2;
var Loader_sourceAffecte = Loader_source;
var max = tableauAffecte.length;
var max2 = tableauAffecte2.length;
if (sexe_homme == true){
if (i<max-1) {
i++
Loader_sourceAffecte.source = tableauAffecte[i];
}
else {
i=0;
Loader_sourceAffecte.source = tableauAffecte[i];
}
}
else {
if (i<max2-1) {
i++
Loader_sourceAffecte.source = tableauAffecte2[i];
}
else {
i=0;
Loader_sourceAffecte.source = tableauAffecte2[i];
}
}
}
// Je crée une fonction random que je réutiliserai pour tout mes boutons random
function aleatoire(Loader_source:UILoader, tableau:Array, tableau2:Array):void {
var tableauAffecte = tableau;
var tableauAffecte2 = tableau2;
var Loader_sourceAffecte = Loader_source;
var max = tableauAffecte.length;
var max2 = tableauAffecte2.length;
if (sexe_homme == true){
Loader_sourceAffecte.source = tableauAffecte[(Math.floor(Math.random()*(max)))];
}
else {
Loader_sourceAffecte.source = tableauAffecte2[(Math.floor(Math.random()*(max2)))];
}
}
// Je crée mes fonctions relacherGauche
// Pour les bouches
function relacherBoucheGauche (pEvt:Event):void{
gauche(Loader_bouche, tableau_bouche_homme, tableau_bouche_femme);
}
// Pour les yeux
function relacherYeuxGauche (pEvt:Event):void{
gauche(Loader_yeux, tableau_yeux_homme, tableau_yeux_femme);
}
// Pour les cheveux
function relacherCheveuxGauche (pEvt:Event):void{
gauche(Loader_cheveux, tableau_cheveux_homme, tableau_cheveux_femme);
}
// Pour les tenues
function relacherTenueGauche (pEvt:Event):void{
gauche(Loader_tenue, tableau_tenue_homme, tableau_tenue_femme);
}
// Pour les fonds
function relacherFondGauche (pEvt:Event):void{
gauche(Loader_fond, tableau_fond_homme, tableau_fond_femme);
}
// Je crée mes fonctions relacherDroite
// Pour les bouches
function relacherBoucheDroite (pEvt:Event):void{
droite(Loader_bouche, tableau_bouche_homme, tableau_bouche_femme);
}
// Pour les yeux
function relacherYeuxDroite (pEvt:Event):void{
droite(Loader_yeux, tableau_yeux_homme, tableau_yeux_femme);
}
// Pour les cheveux
function relacherCheveuxDroite (pEvt:Event):void{
droite(Loader_cheveux, tableau_cheveux_homme, tableau_cheveux_femme);
}
// Pour les tenues
function relacherTenueDroite (pEvt:Event):void{
droite(Loader_tenue, tableau_tenue_homme, tableau_tenue_femme);
}
// Pour les fonds
function relacherFondDroite (pEvt:Event):void{
droite(Loader_fond, tableau_fond_homme, tableau_fond_femme);
}
// Je crée mes fonctions aleatoire
// Pour les bouches
function relacherBoucheRandom (pEvt:Event):void{
aleatoire(Loader_bouche, tableau_bouche_homme, tableau_bouche_femme);
}
// Pour les yeux
function relacherYeuxRandom (pEvt:Event):void{
aleatoire(Loader_yeux, tableau_yeux_homme, tableau_yeux_femme);
}
// Pour les cheveux
function relacherCheveuxRandom (pEvt:Event):void{
aleatoire(Loader_cheveux, tableau_cheveux_homme, tableau_cheveux_femme);
}
// Pour les tenues
function relacherTenueRandom (pEvt:Event):void{
aleatoire(Loader_tenue, tableau_tenue_homme, tableau_tenue_femme);
}
// Pour les fonds
function relacherFondRandom (pEvt:Event):void{
aleatoire(Loader_fond, tableau_fond_homme, tableau_fond_femme);
}
// Je crée ma fonction Avatar Aléatoire
function relacherAvatarAleatoire (pEvt:Event):void{
aleatoire(Loader_bouche, tableau_bouche_homme, tableau_bouche_femme);
aleatoire(Loader_yeux, tableau_yeux_homme, tableau_yeux_femme);
aleatoire(Loader_cheveux, tableau_cheveux_homme, tableau_cheveux_femme);
aleatoire(Loader_tenue, tableau_tenue_homme, tableau_tenue_femme);
aleatoire(Loader_fond, tableau_fond_homme, tableau_fond_femme);
}
// Je crée les boutons pour le choix du sexe
function relacherSexeHomme(pEvt:Event):void{
if (sexe_homme == false){
global_variable.iCheveux_femme = Loader_cheveux.source;
global_variable.iYeux_femme = Loader_yeux.source;
global_variable.iBouche_femme = Loader_bouche.source;
global_variable.iTenue_femme = Loader_tenue.source;
global_variable.iFond_femme = Loader_fond.source;
Loader_cheveux.source = global_variable.iCheveux_homme;
Loader_yeux.source = global_variable.iYeux_homme;
Loader_bouche.source = global_variable.iBouche_homme;
Loader_tenue.source = global_variable.iTenue_homme;
Loader_peau.source = "images/homme_peau.png";
Loader_fond.source = global_variable.iFond_homme;
}
sexe_homme= true;
}
function relacherSexeFemme(pEvt:Event):void{
if (sexe_homme == true){
if (global_variable.premiere_fois == true){
global_variable.iCheveux_homme = Loader_cheveux.source;
global_variable.iYeux_homme = Loader_yeux.source;
global_variable.iBouche_homme = Loader_bouche.source;
global_variable.iTenue_homme = Loader_tenue.source;
global_variable.iFond_homme = Loader_fond.source;
Loader_cheveux.source = tableau_cheveux_femme[0];
Loader_yeux.source = tableau_yeux_femme[0];
Loader_bouche.source = tableau_bouche_femme[0];
Loader_tenue.source = tableau_tenue_femme[0];
Loader_peau.source = "images/femme_peau.png";
Loader_fond.source = tableau_fond_femme[0];
global_variable.premiere_fois = false;
}
else {
global_variable.iCheveux_homme = Loader_cheveux.source;
global_variable.iYeux_homme = Loader_yeux.source;
global_variable.iBouche_homme = Loader_bouche.source;
global_variable.iTenue_homme = Loader_tenue.source;
global_variable.iFond_homme = Loader_fond.source;
Loader_cheveux.source = global_variable.iCheveux_femme;
Loader_yeux.source = global_variable.iYeux_femme;
Loader_bouche.source = global_variable.iBouche_femme;
Loader_tenue.source = global_variable.iTenue_femme;
Loader_peau.source = "images/femme_peau.png";
Loader_fond.source = global_variable.iFond_femme;
}
}
sexe_homme= false;
}Code XML :
<?xml version="1.0" encoding="iso-8859-1"?>
<avatar>
<personne sexe="M">
<cheveux>
<image src="images/homme_cheveux_bouclette_01.png" ></image>
<image src="images/homme_cheveux_bouclette_02.png" ></image>
<image src="images/homme_cheveux_bouclette_03.png" ></image>
<image src="images/homme_cheveux_bouclette_04.png" ></image>
</cheveux>
<yeux>
<image src="images/homme_yeux_happy_01.png" ></image>
<image src="images/homme_yeux_happy_02.png" ></image>
<image src="images/homme_yeux_happy_03.png" ></image>
<image src="images/homme_yeux_happy_04.png" ></image>
<image src="images/homme_yeux_happy_05.png" ></image>
<image src="images/homme_yeux_happy_06.png" ></image>
</yeux>
<bouche>
<image src="images/homme_bouche_biais.png" ></image>
<image src="images/homme_bouche_happy.png" ></image>
<image src="images/homme_bouche_hmmm.png" ></image>
<image src="images/homme_bouche_rrr.png" ></image>
<image src="images/homme_bouche_triste.png" ></image>
<image src="images/homme_bouche_vampire.png" ></image>
</bouche>
<tenue>
<image src="images/homme_tenue_impair.png" ></image>
<image src="images/homme_tenue_militaire.png" ></image>
<image src="images/homme_tenue_spacemarine.png" ></image>
<image src="images/homme_tenue_tshirtgris.png" ></image>
</tenue>
</personne>
<personne sexe="F">
<cheveux>
<image src="images/femme_cheveux_chignon_01.png" ></image>
<image src="images/femme_cheveux_chignon_02.png" ></image>
<image src="images/femme_cheveux_chignon_03.png" ></image>
<image src="images/femme_cheveux_chignon_04.png" ></image>
<image src="images/femme_cheveux_chignon_05.png" ></image>
</cheveux>
<yeux>
<image src="images/femme_yeux_melancolique_01.png" ></image>
<image src="images/femme_yeux_melancolique_02.png" ></image>
<image src="images/femme_yeux_melancolique_03.png" ></image>
<image src="images/femme_yeux_melancolique_04.png" ></image>
<image src="images/femme_yeux_melancolique_05.png" ></image>
</yeux>
<bouche>
</bouche>
<tenue>
</tenue>
</personne>
<fond>
<image src="images/fond_01.jpg" ></image>
<image src="images/fond_02.jpg" ></image>
<image src="images/fond_03.jpg" ></image>
</fond>
</avatar>
J'ai aussi un fichier global_variable.as qui me permet de définir quelques variables supplémentaires, mais je ne pense pas que vous en ayez besoin, mais si c'était le cas, il suffit de me le demander.
J'ai posté dans ce forum car j'imagine que la programmation va se faire dans l'actionscript, mais s'il elle se passe en javascript ou en xml, n'hésitez pas à me rediriger.
Par avance, je vous remercie !
Un petit Kangourou qui aimerait bien finir son projet ^_^