progressbar en forme de remplissage d'objet

Bonjour à tous

Ma question est simple sur le fond, mais compliquée dans la forme. Merci d'avance pour vos réponses qui m'aideront surement.

Voilà. J'aimerais créer une loadbar (ou préloader, ou progressbar, appelez ça comme vous voulez).
Cette loadbar, j'aimerais au final qu'elle représente une image fixe (de source jpg) qui se remplit peu à peu, comme un bocal se remplissant d'eau.

Ayant disposé mon image sur un calque, je place un cache sur un autre calque mais avec un alpha de 60% pour laisser transparaitre l'image initiale juste derrière. Ce cache, j'essaye de le faire déplacer en fonction de l'état de chargement (getBytesLoaded) afin qu'il laisse transparaitre l'image qui est juste derrière, évidemment de bas en haut pour que l'effet de remplissage se voit.

Vous me suivez ?

Alors voici mon code actionscript :
Dans une première frame :

bytes_loaded = Math.round(this.getBytesLoaded());
bytes_total = Math.round(this.getBytesTotal());
getPercent = bytes_loaded/bytes_total;
this.loadBar._y -= getPercent;
this.loadText = Math.round(getPercent*100)+"%";
if (bytes_loaded == bytes_total) {
    this.gotoAndPlay(3);
}

Et dans une seconde frame

this.gotoAndPlay(1);

Mon problème est que je n'arrive pas à régler la vitesse du remplissage (ou de déplacement du cache si vous voulez) sur le chargement de l'animation entière. Il y a toujours un décalage. Soit l'anim est déjà chargée et le remplissage n'est qu'à la moitié. Soit le remplissage est terminé depuis longtemps et l'anim n'est pas encore chargée.

ça fait maintenant 3 jours et trois nuits que je me bats sur ce tout petit rien.

Ah oui au fait, si vous avez un autre code, une autre astuce, une autre solution pour arriver à mes fins, je suis preneur !!

Merci d'avance !

Bonjour


Effectivement, tu dois avoir quelques soucis...

getPercent = bytes_loaded/bytes_total; te donnera toujours un nombre entre 0 et 1
this.loadBar._y -= getPercent; tu diminues a chaque enterframe le _y d'un nombre entre... 0 et 1

Je te propose de légèrement adapté ton script comme ceci :

var loadBarBaseY=loadBar._y // position initiale de ton clip loadBar
var LBScale=100  // mise a l'échelle du déplacement vertical
                             // Ma proposition part sur une base de 100 pixels (1 pixel par %)
                             // si ta loadbar doit monter de 150 pixel, tu mets LBScale=150
getPercent = this.getBytesLoaded()/this.getBytesTotal();
this.loadBar._y = loadBarBaseY-Math.round(getPercent*LBScale);
this.loadText = Math.round(getPercent*100)+"%";
if (bytes_loaded == bytes_total  && bytes_total != 0) {
    this.gotoAndPlay(3);
}


@+

D'abord merci infiniment Girou.

Hélas, j'ai introduit ton code et puis plus rien. L'étape du loader a disparu. L'anim a beau être super alourdie pour pouvoir visionner le loader d'intro, mais cette fois avec le changement de code, plus rien n'apparait et on passe direct à l'anim, sans temps de chargement d'ailleurs (intéressant !).

Pourtant, analysant ton code, je le trouve très pertinent, même si je ne comprends pas encore tout.

Une solution ? Peut être aurais tu oublier quelque chose ?

Hello,

je m'attendais a cette remarque. Il y a bien peut-être une erreur dans mon script mais il y a un autre point :

lorsque tu publie une animation, tous les éléments de la bibliotheque sont exporté sur la première frame...
tans qu'elle n'est pas chargée, l'animation ne démarre pas.

Je te propose de séparer le loader de l'animation principale.

Dans une animation a part (autre swf) tu ne met que les éléments utiles (graphiques et code)  a ton loader, et tu charge ton animation principale via un movieClipLoader

Le code dans ton animation loader

var container:MovieClip = this.createEmptyMovieClip("container", this.getNextHighestDepth());
var mcLoader:MovieClipLoader = newMovieClipLoader();
mcLoader.addListener(this);
mcLoader.loadClip("animationPrincipale.swf", container);
 
function onLoadInit(mc:MovieClip){
     // effacer les éléments graphiques du loader
}
function onLoadProgress(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void{
var getPercent=bytesLoaded/bytesTotal;
          this.loadBar._y =  loadBarBaseY-Math.round(getPercent*LBScale);
     this.loadText = Math.round(getPercent*100)+"%";
}
var loadBarBaseY=loadBar._y // position initiale de ton clip loadBar
var LBScale=100  // ou plus selon la distance en _y a parcourir
mcLoader.loadClip("animationPrincipale.swf", container); 

@+

Aye....

Je t'avouerai être un peu perdu.

Déjà, j'imagine qu'il faut remplacer le "animationPrincipale.swf" (qui apparait 2 fois). N'y-a-t-il pas un problème de répertoire ou de chemin d'accès à ce second swf ? Genre est-ce qu'il ne faudrait-il pas rajouter juste avant l'adresse de mon serveur sur lequel se trouve ces anim ?

Ensuite, tu me dis "tu charge ton animation principale via un movieClipLoader". Est-ce que cette commande est déjà présente sur ton code ou bien dois-je l'ajouter ? (question très con, j'avoue...)

Et puis, dans tes instructions à l'intérieur du code, je lis : var LBScale=100  // ou plus selon la distance en _y a parcourir .
Dois-je modifier quelque chose sur cette ligne ? Modifier le 100 ?

Je suis désolé, j'aimerais beaucoup être un expert comme toi mais ça prend plus de temps chez certaine personne.... grrrr

Oye !

tu fais une copie (save as...) de ton animation actuelle, telle que tu l'as et tu l'appelles loader.fla
Tu vires TOUT ce qui n'est pas en rapport avec ton loader. En gros il ne doit rester que loadBar et loadText

tu crée un nouveau calque, tu le nomme 'script', tu crée une image clé à la première frame et tu colle le code ci-dessous

var container:MovieClip = this.createEmptyMovieClip("container", this.getNextHighestDepth());
container._lockroot=true
var mcLoader:MovieClipLoader = newMovieClipLoader();
mcLoader.addListener(this);
mcLoader.loadClip("animationPrincipale.swf", container);
 
function onLoadInit(mc:MovieClip){
this.loadBar.removeMovieClip()
  this.loadText.removeTextField()
}
function onLoadProgress(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void{
var getPercent=bytesLoaded/bytesTotal;
          this.loadBar._y =  loadBarBaseY-Math.round(getPercent*LBScale);
     this.loadText = Math.round(getPercent*100)+"%";
}
var loadBarBaseY=loadBar._y // position initiale de ton clip loadBar
var LBScale=100  // ou plus selon la distance en _y a parcourir
mcLoader.loadClip("main.swf", container); 

tu publie le tout sous le nom de loader.swf (html + swf)

tu fais une copie (save as...) de ton animation actuelle, telle que tu l'as et tu l'appelles main.fla
tu vires TOUT ce qui est en rapport avec ton loader et tu publie cette animation sous le nom de main.swf (uniquement swf)

tu place loader.swf et main.swf dans le même répertoire...

et voila...

tout le code est fait de tête... pourrait bien y avoir une erreur ou l'autre

@+

Bon.

J'ai suivi toutes tes instructions à la lettre mais ça ne fonctionne pas.

Sans vouloir te froisser, il y a juste une toute petite erreur dans le script, tu as juste oublié de remplacer animationprincipale.swf par main.swf.
Enfin, voilà, presque rien.....

Sinon, le loader.swf reste figé avec la loadbar affichée en entier, sans effet de remplissage quelconque, ni même de renvoi vers l'autre swf.

J'espère que tu ne t'impatiente pas trop. J'ai l'impression qu'avec toi, j'ai la solution pas loin..... Pourvu que l'on trouve, et surtout pourvu que tu ne perdes pas patience !

a+

heu non...

mcLoader.loadClip("animationPrincipale.swf", container); 

est une ligne a completement retirer !!!

c'est la dernière ligne 
mcLoader.loadClip("main.swf", container); 

qui est la bonne :o)

@+

Ok.

Il y aussi cette ligne qui me parait bizarre :
var mcLoader:MovieClipLoader = newMovieClipLoader();

Il me semble que tu essaye de demander quelque chose avec newMovieClipLoader mais dans flash, cette fonction ne se met pas en bleue....

???

de fait, il faut un espace entre new et MovieClipLoader ( );

var mcLoader:MovieClipLoader = new MovieClipLoader();


@+