[Flash Mx] Comment créer une barre de téléchargement (10% ... loading)

Comment créer une barre de téléchargement (10% ... loading) [Flash Mx] - Web design - Graphisme

Marsh Posté le 11-01-2004 à 19:17:37    

:hello: Salut,
 
 
Je suis tjs sur mon site photo.
Comme c'est un site en flash et qu'il est un peu lourd à télécharger, je voudrais créer une barre de téléchargement en fonction de la taille de mon site
 
Par ex, 10% .... la barre avance, 30% ... etc....
 
Comment fait-on ?  
 
 :jap: Merci
 
Mon site
http://franck.redirectme.net/thc/site/Accueil.html


---------------
(¯`·.¸¸.-> ema <-.¸¸.·´¯)
Reply

Marsh Posté le 11-01-2004 à 19:17:37   

Reply

Marsh Posté le 11-01-2004 à 19:57:08    

Je viens de trouver ca au cas ou ca interresse qq'1
 
http://www.flash-france.com/sectio [...] 1&artid=21
 
Introduction  
 
Nous allons voir dans cette leçon comment utiliser les nouvelles fonctions de Flash 5 en rapport avec le chargement des animations. Plus particulièrement, nous allons nous servir des deux fonctions : getBytesTotal() et getBytesLoaded() et les utiliser pour créer une animation évoluée de préchargement. Nous ne reviendrons donc pas sur les notions de bases de création de Clip sous Flash et sur les syntaxes de programmation. Ce que vous allez apprendre ici vous servira certainement dans la majorité de vos sites.
 
 
 
Les fonctions getBytesTotal() et getBytesLoaded()
 
La fonction getBytesLoaded() renvoie le nombre d'octets chargés du Clip associé. Bien sûr vous pouvez utiliser celle-ci pour faire référence à votre animation principale (_level0 ). Ainsi vous pouvez récupérer le nombre d'octets émis de votre animation Flash et la comparer avec le fonction getBytesTotal() , qui elle, donne le nombre total d'images contenues dans un Clip ( ou dans_level0 par exemple ), afin d'établir un pourcentage d'octets chargés. La syntaxe à utiliser est la suivante :
 
un_Clip_quelconque.getBytesLoaded();
 
Si on désire, comme dans cette leçon, connaître le nombre d'octets chargés de notre animation principale on utilise la syntaxe suivante :
 
_level0.getBytesLoaded();
 
De même, pour la fonction getBytesTotal() :  
 
_level0.getBytesTotal()
 
Lorsque nous l'utiliserons réellement , il sera préférable de stocker ces valeurs dans des variables de façon plus claire. Il ne nous reste plus qu'à créer une animation qui va nous permettre de visualiser le taux de chargement.
 
Composants de l'animation Flash
 
Notre animation va se composer des éléments suivants :
 
 
- Un clip de "contrôle" qui va recueillir la valeur de notre taux de chargement , continuer notre animation si le préchargement est fini ou déplacer un Clip ( qui sera le deuxième élément de notre animation ).
 
- Un Clip constitué d'une "barre" de chargement qui va croître en fonction de notre taux. Ce Clip aura donc par exemple 100 images . Chaque image va représenter 1% du chargement total.
 
- Un champ de texte placé à la racine qui affichera la valeur du pourcentage de chargement.
 
Créons à présent chacun des éléments :  
 
- Pour le clip de contrôle, créer un nouveau Clip avec 2 image clés "vides" ( sans aucun élément graphique ). Sur l'une des images nous allons placer des actions et laisser le Clip passer de la première image à la seconde puis revenir à la première et ainsi de suite. La première image va nous permettre de recueillir la valeur de notre taux de chargement , de placer l'autre Clip en fonction ou de continuer à lire notre animation principale. Donc sur l'image 1 placez les actions suivantes :
 
// on définit les variables donnant le nombre total de Bytes ,  
// de Bytes chargées et le rapport entre les deux , de l'animation
_root.bytes_totales = _level0.getBytesTotal();
_root.bytes_chargées = _level0.getBytesLoaded();
// taux de chargement
_root.bytes_rapport = Math.round((_root.bytes_chargées)/(_root.bytes_totales)*100);
// Affichage du pourcentage de Bytes chargés
_root.bytes_chargement_affichage = Math.round(_root.bytes_rapport) add " %";
if (_root.bytes_rapport == 100) {
_root.play();
stop();};
 
tellTarget (_root.barre_chargement_bytes) {
gotoAndPlay (_root.bytes_rapport);
}
 
Sur la seconde image ne mettez aucune action afin de laisser le clip effectuer des lectures en boucle par défaut.
 
Détaillons ces actions : On définit premièrement deux variables sur la racine de l'animation _root.bytes_totales et _root.bytes_chargées qui se chargent de recueillir respectivement le nombre d'octets total du _level0 ( _level0.getBytesTotal() ) et le nombre d'octets chargés ( _level0.getBytesLoaded() ). Une troisième variable établit le rapport entre les deux en arrondissant le résultat à l'entier le plus proche ( _root.bytes_rapport = Math.round((_root.bytes_chargées)/(_root.bytes_totales)*100) ). Ensuite on se charge de donner la valeur du pourcentage obtenu à la variable du champ de texte que nous placerons à la racine de l'animation ( _root.bytes_chargement_affichage= Math.round(_root.bytes_rapport) add " %" ) à laquelle nous concaténons le signe "%" avec l'Action Script "add". La suite du code permet de cibler le Clip contenant la "barre" et de le placer sur l'image correspondant au pourcentage de chargement. Une dernière partie ( if ... ) permet de continuer la lecture de l'animation principale si le chargement est complet. Ici nous arrêtons le préchargement lorsque la totalité de l'animation est chargée mais vous pouvez, bien évidemment, changer cette limite dans vos réalisations.Notre Clip de contrôle est terminé, nous pouvons le placer sur la première image de l'animation principale. Il est inutile de lui donner un nom d'occurrence.
 
- Placez sur un calque de l'animation principale ( _root ) un champ de texte dynamique avec comme nom de variable : bytes_chargement_affichage .
 
 
 
 
 
 
 
- Nous allons créer le dernier Clip. Créez-le donc avec sur sa première image un rectangle assez court ( qui réprésentera un taux de chargement de 1 % ). Placez une image clé sur l'image numéro 100 et modifier le rectangle sur cette image pour lui donner une longueur qui correspondra au taux de chargement maximal ( 100 % ) et une action "stop" sur cette dernière image. Définissez une interpolation de forme ( il existe d'autres moyens... ) entre l'image 1 et l'image 100 . Donnez-lui le nom d'occurrence suivant : barre_chargement_byte placez-le sur la racine de l'animation et sur la première image.
 
- Placez une action "stop" sur la première image de l'animation principale ( où se trouvent tous les précédents éléments ) et les éléments de votre animation sur le images suivantes.
 
Résumons : lorsque l'animation commence, le Clip de contrôle "oscille" entre sa première image et sa seconde définissant ainsi le taux de chargement de l'animation et l'affiche par l'intermédiaire d'une variable placée à la racine. Il place, de la même manière, le clip avec la barre de chargement sur l'image appropriée et continue la lecture de l'animation lorsque le préchargement est terminé.
 
Il ne vous reste plus qu'à dessiner une interface adéquate :-) et à placez les autres éléments de votre animation principale à partir de l'image 2 ( comme ici la photo ).
 
Merci qd meme  :jap:  
 
 :hello:  


---------------
(¯`·.¸¸.-> ema <-.¸¸.·´¯)
Reply

Marsh Posté le 11-01-2004 à 21:51:04    

Merci :)


---------------
GENERATION MOBILES : Imprimantes GSM & logos/sonneries/jeux
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed