progressbar en forme de remplissage d'objet

Question

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 !

cs_Girou · Answer

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);
}

@+

cs_tristan2b · Answer

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 ?

cs_Girou · Answer

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);

@+

cs_tristan2b · Answer

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 [../c.aspx?u=aHR0cDovL3dpa2kubWVkaWFib3guZnIvZG9jdW1lbnRhdGlvbi9mbGFzaC9tb3ZpZWNsaXBsb2FkZXI6bG9hZENsaXA= 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

cs_Girou · Answer

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

@+

cs_tristan2b · Answer

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+

cs_Girou · Answer

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)

@+

cs_tristan2b · Answer

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....

???

cs_Girou · Answer

de fait, il faut un espace entre new et 






MovieClipLoader
(
);







var mcLoader:MovieClipLoader = new MovieClipLoader();




@+

cs_tristan2b · Answer

Ok.
Ton code fonctionne maintenant.

Mais quelques problèmes....

Déjà, l'effet de remplissage est saccadé. Bon, j'imagine qu'il n'y a pas de solution. Donc, on peut zapper ce problème, c'est supportable....

Ensuite, le mouvement de remplissage se poursuit indéfiniment..... et le second swf ne se charge donc jamais.

hum....hum.....(désolé !)

cs_Girou · Answer

"Déjà, l'effet de remplissage est saccadé. Bon, j'imagine qu'il n'y a
pas de solution. Donc, on peut zapper ce problème, c'est supportable...."

Si, il y a une solution,  par l'utilisation de Tween.

"Ensuite, le mouvement de remplissage se poursuit indéfiniment....."

Hiiii, mais le mouvement est régit en fonction du téléchargement ??? comment est-ce possible ca 

place un stop(); tout a la fin du script de préchargement

@+

cs_tristan2b · Answer

Oulalalala....

Alors là pour le coup, le loader n'a pas fini de se charger, que le 2e swf se charge par dessus !! Les 2 swf sont visibles !

Sinon, Tween ? what is it ? où est-ce que je le met ? (dans mon c... ?)

Progressbar en forme de remplissage d'objet

12 réponses

Votre réponse

Discussions similaires