Prechargement avec progressBar 100% dynamique (AS3)

Salut les loulous, voici un autre tutoriel sur le préchargement en as3, pour ce qui se poseraient la question, ce tuto est bien différent de celui que je vous avais présenté il y a peu de temps.

Nous allons donc créer un préchargement, mais cette fois-ci, aucun clip ne sera créé, seul le code sera utilisé, tant pour l'aspect graphique que pour le côté préchargement.

Voici le code utilisé lors du tutoriel:

Code:


var adresse:URLRequest = new URLRequest("image1.png");
var chargeur:Loader = new Loader();
var jauge:Shape = new Shape ();
var pct:TextField = new TextField();


chargeur.load(adresse);
addChild(chargeur);
jauge.graphics.beginFill(0x00FFFF);
jauge.graphics.drawRect(5, 5, 200, 10);
jauge.x = (stage.stageWidth - jauge.width) /2;
jauge.y = (stage.stageHeight - jauge.height) /2;
addChild(jauge);
addChild (pct);
pct.width = 100;
pct.textColor = 0x00FFFF;

chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementValide);
chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progressChargement);

function chargementValide(pEvt:Event) {
   jauge.visible =false;
   pct.visible =false;
   var imgLarg:Number = pEvt.currentTarget.width;
   var imgHaut:Number = pEvt.currentTarget.width;
   chargeur.width = imgLarg;
   chargeur.height = imgHaut;
   chargeur.x = (stage.stageWidth - chargeur.width) /2;
   chargeur.y = (stage.stageHeight - chargeur.height) /2;
   
}

function progressChargement(pEvt:ProgressEvent) {
   var loaded:Number = pEvt.bytesLoaded;
   var total:Number =  pEvt.bytesTotal;
   var pourcent:Number = loaded/total
   jauge.scaleX = pourcent;
   pct.text = Math.floor(pourcent * 100) + "%";
   pct.x = (pourcent* 205)+jauge.x ;
   pct.y =jauge.y ;
}


Voici donc le tutoriel:

Bonjour et merci pour ce tutoriel

Je pose ma première question sur le site :

J'aimerais savoir si il est possible d'afficher une page html a la fin de l'event progress bar, par exemple j'ai le dossier de mon site web dans le dossier prechargement_image, et au lieu d'avoir le lien d'une image, j'aurais aimé avoir un truc genre "./dossiersiteweb/index.html" j'ai essayé mais apparement le .html n'est pas reconnue lors de la prévisualisation.

Merci de votre réponse

Salut alors moi quand je rajoute ceci:

Code:

navigateToURL(new URLRequest('http://artkabis.net'));

Dans la fonction chargementValide, j'ai bien une redirection...

oui mais la ya une redirection après le chargement de l'image, moi j'aurais voulut charger la page html a la place de cette image, à moins que j'ai mal compris

j'ai bien essayé sa au début du script mais sans résultat

Code:

var url: String = 'index.html' ;
var urlRequest:URLRequest = new URLRequest( url ) ;

var chargeur:Loader = new Loader();
var jauge:Shape = new Shape ();
var pct:TextField = new TextField();

chargeur.load(urlrequest);

Tu ne peux pas charger une page html où plus précisément le contenu d'une page html.

Si tu veux faire ceci, il y a le javascript pour ça:
http://www.j0k3r.net/article/html-page-de-chargement

Merci pour la réponse et le lien
Je vais essayer sa dessuite

Salut Artkabis,

Tout d'abord, encore merci pour tous ces tutos !!
Ensuite j'ai bien réussi cet AS3, et je le trouve très joli ! Mais j'aimerais le faire en AS2. Penses-tu que c'est possible ? Et si oui est-ce que le code est très différent de la barre de progression AS2 déjà présente sur le forum?
Merci,
Cordialement

Alors oui en effet, si tu devais recoder ceci en as2, il n'y aurait plus grand chose en commun, car seul la partie du calcule de pourcentage serait similaire.

Bonjour Artkabis,

Merci pour ta réponse.

Au final donc, mieux vaut opter pour une autre barre ? Car vois-tu, mon site est en AS2; y-t-il contradiction avec une barre de chargement AS3 qui lance un site AS2 ?

Bonjour monsieurlibouban normalement si je ne me trompe ces pas compatible parce que l'action script 2 ne s'aurra pas interprété l'action script 3 mais bon je ne suis pas asser connaisseur en la matiére pour te dire exactement la bonne réponce donc je laisse la réponce a plus adepte que moi sur l'action script 3

monsieurlibouban a écrit:Bonjour Artkabis,

Merci pour ta réponse.

Au final donc, mieux vaut opter pour une autre barre ? Car vois-tu, mon site est en AS2; y-t-il contradiction avec une barre de chargement AS3 qui lance un site AS2 ?

Non
Tu peux crée une barre en AS2 et charger dynamiquement le swf qui en AS3

Bonjour Valbuena72,

Merci de ta réponse. Lorsque tu dis "charger dynamiquement" ça veux dire quoi exactement ? Merci encore et bonne fin de journée

j'ai réalisé le tutoriel sans problème, dans flash cs3 je fait
Control-Test Movie puis dans la fenêtre qui s'ouvre je fait
View-Simulate download jusque la pas de soucis.
Mais quand j'ouvre le swf directement je ne vois pas la simulation du chargement, je visualise seulement l'image final.
Ai-je fait une mauvaise manipulation ? est-ce normal? que dois je faire pour résoudre ce problème ?
merci

Ceci est tout à fait normal, car comme tu es en local, le fichier n'as pas besoin d'être chargé, le seul moyen de voir la progression, c'est d'ouvrir le fichier depuis une page web situé sur l'un de tes serveur. là tu verras le chargement puisque ton fichier ne sera pas encore présent dans le cache.

super ce site, je demarre l'as3 en decouvrant tes tutoriaux

par contre :
remplacer :

var imgHaut:Number = pEvt.currentTarget.width;

par

var imgHaut:Number = pEvt.currentTarget.height;

pour un meilleur centrage ;-)

Est ce le meme principe pour charger une musique ?

Alors oui pour le chargement d'un fichier audio, tu peux utiliser cette méthode, mais tu devras quand même adapter certains points.

Bonsoir!
je vais peut être être casse pieds, mais je voudrais être sure d'avoir bien "traduit" ton super tuto, et de plus éclairer certains points.

Code:


    //URLRequest est la définition d'un chemin extérieur
var adresse:URLRequest = new URLRequest("image1.png");
    //Loader est un chargeur
var chargeur:Loader = new Loader();
    //Shape??
var jauge:Shape = new Shape ();
    //TextField est du texte??
var pct:TextField = new TextField();

    //La propriété de chargement de "chargeur" s'applique à la variable adresse
chargeur.load(adresse);
    //Affichage du "chargeur"
addChild(chargeur);
    //Propriété couleur de la jauge
jauge.graphics.beginFill(0x00FFFF);
    //Propriété de dessin de la jauge, 200 et 10 correspondent à la taille, mais à quoi correspondent 5 et 5?
jauge.graphics.drawRect(5, 5, 200, 10);
    //Propriété de placement de la jauge sur la scène
jauge.x = (stage.stageWidth - jauge.width) /2;
jauge.y = (stage.stageHeight - jauge.height) /2;
    //Affichage de la jauge
addChild(jauge);
    //Affichage du texte (pourquoi l'affichage s'effectue t 'il avant les propriétés?)
addChild (pct);
    //A quoi correspond "width" pour du texte? Son emplacement horizontal ou sa taille?
pct.width = 100;
    // Propriété "couleur" du texte
pct.textColor = 0x00FFFF;
    //addEventListener : écouteurs / A quoi correspond "contentLoaderInfo" et à quels éléments peut-il s'appliquer?
    //Event:évènement / COMPLETE : propriété de l'évènement
    //ProgressEvent : évènement progressif? PROGRESS?
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementValide);
chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progressChargement);

    // Fonction de fin de chargement : je ne connais pas "pEvt" à quoi correspond il?
    //à quels éléments est ce qu'il peut s'appliquer?
function chargementValide(pEvt:Event) {
    //Disparition de la jauge et du texte
  jauge.visible =false;
  pct.visible =false;
    //Mise en place des dimensions du chargeur? ou de leur emplacement? à quoi correspond
    //"pEvt.currentTarget.width" et son copain de dessous?
  var imgLarg:Number = pEvt.currentTarget.width;
  var imgHaut:Number = pEvt.currentTarget.width;
  chargeur.width = imgLarg;
  chargeur.height = imgHaut;
  chargeur.x = (stage.stageWidth - chargeur.width) /2;
  chargeur.y = (stage.stageHeight - chargeur.height) /2;
 
}

    //Fonction qui animele chargeur
function progressChargement(pEvt:ProgressEvent) {
    //Mise en place des variables qui changent la taille du chargeur et la position du texte ainsi que son contenu
    //"pEvt" est toujours aussi obscur / "bytesLoaded" est une propriété qui sait toutes seule où en est le
    //téléchargement? / "bytesTotal"?
  var loaded:Number = pEvt.bytesLoaded;
  var total:Number =  pEvt.bytesTotal;
  var pourcent:Number = loaded/total
  jauge.scaleX = pourcent;
    // Attention là ça parle de math danger! "Math.floor" = "le plancher des maths"? / Pourquoi "pourcent * 100"?
    //"%" affiche juste le symbole
  pct.text = Math.floor(pourcent * 100) + "%";
    //Le petit coquin de "pourcent" aime bien se faire multiplier... pourquoi par 205?
  pct.x = (pourcent* 205)+jauge.x ;
  pct.y =jauge.y ;
}


Bon.....
Un peu comme à l'école, et je remercie par avance la personne qui me "corrigera"^^
En revanche j'ai peur de mal m'y prendre avec l'apprentissage d'AS3, j'ai tendance à tout traduire littéralement pour bien comprendre...
Est-ce que c'est comme les langues vivantes du temps ou on était à l'école? Quand tu traduit littéralement ça donne des choses du genre "il pleut des chiens et des chats"?
Ou vaut il mieux apprendre des bouts de codes sans les traduire mais juste pour leur effet? Si c'est le cas je pense que je serais incapable de programmer un jour^^, j'aime bien TOUT comprendre


Mais merci encore pour ce tuto, je m'y attèlerais dès que mon flash sera opérationnel. Parce que même s'il n'y a que de l'action script: pas de timeline = pas d'image clef = pas de code

Bonne nuit les amis!

En fait après quand tu connais bien le langage tu n'as plus besoin de traduire tu code en même temps que tu penses par ex tu penseras je dois charger l'image et tu écriras : "chargeur.load(new URLRequest("adresseImage));" cela se fera automatiquement tu n'utiliseras les commentaires que pour différencier les différentes parties ou fonctionnalités de ton code.

En revanche j'ai peur de mal m'y prendre avec l'apprentissage d'AS3,
j'ai tendance à tout traduire littéralement pour bien comprendre...

Personnellement je pense que c'est la base de comprendre ce que l'on écrit et c'est la voie pour devenir de plus en plus indépendant. Celui qui ne fait que recopier des bouts de codes sans essayé de comprendre ne progressera jamais vraiment. Bon je m'égare désolé je vais essayer de compléter tes commentaires:

Code:


    //URLRequest est la définition d'un chemin extérieur
var adresse:URLRequest = new URLRequest("image1.png");
    //Loader est un chargeur
var chargeur:Loader = new Loader();
    //Le Shape est un objet graphique sur lequel on va pouvoir dessiner les 3 principaux sont la classe Shape la classe Sprite et la classe MovieClip
var jauge:Shape = new Shape ();
    //TextField est un objet texte qui contiendra du texte donc
var pct:TextField = new TextField();

    //La fonction load() est une méthode de la classe Loader qui permet le chargement d'un objet grace a son Url
chargeur.load(adresse);
    //Affichage du "chargeur"
addChild(chargeur);
    //Propriété couleur de la jauge --> signifie le début du remplissage et la couleur du remplissage
jauge.graphics.beginFill(0x00FFFF);
    //On dessine un rectangle de 200px sur 100px et dont l'origine sur le sprite a pour coordonnées (5,5) le point d'origine étant le point haut gauche du rectangle dessiné
jauge.graphics.drawRect(5, 5, 200, 10);
    //Propriété de placement de la jauge sur la scène
jauge.x = (stage.stageWidth - jauge.width) /2;
jauge.y = (stage.stageHeight - jauge.height) /2;
    //Affichage de la jauge
addChild(jauge);
    //Affichage du texte (pourquoi l'affichage s'effectue t 'il avant les propriétés?)
addChild (pct);
    //A quoi correspond "width" pour du texte? Son emplacement horizontal ou sa taille?--> c'est sa proprité largeur donc on définit sa largeur
pct.width = 100;
    // Propriété "couleur" du texte
pct.textColor = 0x00FFFF;
    //addEventListener : écouteurs / A quoi correspond "contentLoaderInfo" et à quels éléments peut-il s'appliquer?--> contentLoaderInfo cible l'élément qui est chargé
    //Event:évènement / COMPLETE : propriété de l'évènement--> distribué lorsque l'element est entierement chargé.
    //ProgressEvent : évènement progressif? PROGRESS?--> Evenement distribué tout au long du chargement
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementValide);
chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progressChargement);
    // Fonction de fin de chargement : je ne connais pas "pEvt" à quoi correspond il? la fonction est déclenchée par un écouteur elle se déclare donc de la facon suivante :
    // function nomFonction( un parametre qui est du type de l'évenement ecouté pour déclencher la fonction){}
    //pEvt est juste un nom que l'on a donné à se parametre pour pouvoir y faire appel on aurait pu l'appeler n'importe comment
function chargementValide(pEvt:Event) {
    //Disparition de la jauge et du texte
  jauge.visible =false;
  pct.visible =false;
    //Mise en place des dimensions du chargeur? ou de leur emplacement? à quoi correspond
    //"pEvt.currentTarget.width" et son copain de dessous?--> pEvt.currentTarget est en fait la cible du pEvt donc la cible de l'écouteur dans notre cas le contenu du chargeur
    //donc pEvt.currentTarget.width = la largeur du chargeur du contenu du chargeur
  var imgLarg:Number = pEvt.currentTarget.width;
  var imgHaut:Number = pEvt.currentTarget.width;
  chargeur.width = imgLarg;
  chargeur.height = imgHaut;
  chargeur.x = (stage.stageWidth - chargeur.width) /2;
  chargeur.y = (stage.stageHeight - chargeur.height) /2;
 
}

    //Fonction qui animele chargeur
function progressChargement(pEvt:ProgressEvent) {
    //Mise en place des variables qui changent la taille du chargeur et la position du texte ainsi que son contenu
  var loaded:Number = pEvt.bytesLoaded;//--> nbre de bits du contenu du chargeur chargés
  var total:Number =  pEvt.bytesTotal;//--> nbre total de bits du contenu du chargeur
  var pourcent:Number = loaded/total//-->rapport bitsChargés/bitsTotal --> de 0 à 1
  jauge.scaleX = pourcent;//evolution du scale horizontal de la jauge de 0 à 1
    // Attention là ça parle de math danger! "Math.floor" = "le plancher des maths"? / Pourquoi "pourcent * 100"?
    //pourcent évolue de 0 à 1 donc poucent*100 évolue de 0 à 100
    http://Math.floor() est juste une méthode qui permet de supprimer les décimale donc Math.floor(25.35) = 25
    //"%" affiche juste le symbole
  pct.text = Math.floor(pourcent * 100) + "%";
    //Le petit coquin de "pourcent" aime bien se faire multiplier... pourquoi par 205?--> la position en x du texte évolue au fil du chargement le texte se trouve collé à la fin de la barre donc à 0*205 si pourcent = 0 et à 1*205 si pourvent = 1 vu que la largeur de la barre est 200px et qu'elle est décalé de 5px par rapport au 0
  pct.x = (pourcent* 205)+jauge.x ;
  pct.y =jauge.y ;
}


PfioUUUU.......

Le fait est que te traduire tous le code c'est avéré tres fastudieux donc je ne ferais pas ça a chaque fois par contre je pense que dans ton cas pour combler tes attentes tu devrais te pencher sur la doc (raccourci F1 dans flash) qui te fourniras toutes les explications que tu désire. Bon courage...!!!

Juste une chose, certaine chose peut être traduit littéralement, comme:

Code:

n1 = (n1<n2)? 99 : 10;

ou

Code:


if(n1<n2)
{
      n1=99;
}else{n1=10;


que l'on peut tout deux traduire par:

si n1 et plus petit que n2 alors n1 vaut 99 sinon n1 vaut 99

On peut donc traduire certain élément littéralement alors qu'au premier abord il semble n'avoir que peu de sens.

Waaah, merci pour ta patience!
J'ai déjà plus ou moins esayé d'utiliser l'aide de flash mais j'accroche pas trop....
J'apprends avec deux bouquins mais je fais au fur et à mesure c'est pour ça que je ne comprends pas encore tout^^

Merci ecore!
pour le tuto et pour la traduc' !

Edit : bon, j'ai essayé ton tuto sur un autre ordi^^
Alors j'ai plus ou moins deux problèmes:
-d'abord, je n'ai pas chargé une image mais un .swf, cela fonctionne super, mis à part que ce dernier est légèrement étiré verticalement, alors que je n'ai fait que recopier ton code, qui me semble-t-il ne modifie pas les dimensions de l'image d'origine.
-ledit .swf est ma signature et ma scène est de dimension 300*100 je crois. cette dimension n'est pas "sauvegardé" et dans l'anime du préchargement, on voit donc tout ce qui se passe en dehors de ma feuille de travail initiale (le nom "plumaillon" entre d'un coté et sort de l'autre sur ma sign, et sur le préchargement il défile bien mais fait comme si les dimensions initiale c'étaient adaptées à ma nouvelle scène).


voilà, merci encore^^

Edit: après re étude du code, je veux savoir si par soucis de flexibilité, il ne serait pas mieux de remplacer

Code:

pct.x = (pourcent* 205)+jauge.x ;

par

Code:

pct.x = (pourcent*(jauge.width+5))+jauge.x;

Super Tuto, vraiment, merci Artkabis.

J'ai cependant une question, malgré l'effet sympa de ce preloader, j'aimerai savoir s'il est possible de faire la même chose mais avec une barre circulaire, j'avoue être débutant en AS3 et de fait j'ai eu beau chercher sur internet, je n'ai rien trouvé me permettant de faire un preloader circulaire en AS3 de manière dynamique.

Si tu as une solution peux-tu me l'indiquer.

Encore une fois j'ai pris le temps de chercher sur le net (peut-être mal) avant de venir poster ici...

Encore un grand merci pour ce site.

tiens tu regarder ici, il y a ce que tu cherche
par contre le tuto est en anglais et la source ne fonctionne pas correctement, donc tu devra essayer de comprendre

Merci Tekken, j'ai réglé le problème à ma façon lol, bon je l'avoue je me suis aidé de différents Tutos trouvés sur le net, mais comme tu dis dès que tu essaie de comprendre au final même si ce n'est pas forcément le top tu finis pas faire ce que tu veux lol...

Enfin encore merci pour ce forum, et juste à titre d'information, peux-être que ça pourra aider d'autre personne, et peut-être aussi trouverez-vous des erreurs à corriger, donc voici ce que j'ai fais comme code...je me doute que tout n'est pas parfait mais bon ça fonctionne...

Code:

stop ();

import flash.display.Loader;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.net.URLRequest;
import flash.events.Event;

var preloader:Prechargement;
var chargeur:Loader;

preloader = new Prechargement();
chargeur = new Loader();

preloader.x = Math.round ( 320 );
preloader.y = Math.round ( 195 );

chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, chargementProgress );
chargeur.contentLoaderInfo.addEventListener( Event.COMPLETE, chargementValide );
chargeur.contentLoaderInfo.addEventListener( IOErrorEvent.IO_ERROR, siIOError );
chargeur.load( new URLRequest( "http://www.****.com" ) );
          
function chargementProgress( pEvt:ProgressEvent ):void
{
   addChild ( preloader );
}

function chargementValide( pEvt:Event ):void
{
   preloader.visible = false;
   addChild ( chargeur );
}

function siIOError( pEvt:IOErrorEvent ):void
{
   trace( pEvt );
}


"Prechargement" étant ici le nom donné à mon animation.

Voilà si ça peut aider certains, ou surtout si vous avez des suggestions niveau codage, je suis près à vous écouter...

le principal c'est que ça fonctionne