|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
CONTROL DU CHARGEMENT DE SITE & DU CHARGEMENT DE CLIP
 Description
Ah force de répondre toujours a cette mm question : comment on fai un chargement pour machin ou pour machin
j'me suis dis que j'allais faire un tuto une bonne fois pour toute pour tous les types de chargement (préload site et load de fichier externe)
donc voilà
Tutorial
C'est parti
Chargement de site (chargement de l'animation principale) :
1/ Préparation
Vous avez votre site dans flash, on dira que le site commence à la scéquence "Site" pour l'exemple, a vous d'adapter
Créer une nouvelle scéquence (Fenètres > Autres panneaux > Séquences, et appuillez sur le +)
Nommez là "Chargement" (en double cliquant sur le nom)
Déplacez là dans la liste (glisser déposer) de sorte qu'elle soit en première place (tout en haut).
Vous pouvez fermer la fenetre des Scéquences.
2/ Les éléments graphiques
Vous vous retrouvez mainenant face a une scéquence vide, avec un calque vide
Nommez ce calque "Eléments", et créez en un autre au dessus, nommé "Chargement" ou "Actions"
Sur le calque "Eléments", créer un clip rectengulaire (la futur barrede chargement), et nommez son occurence (dans le panneau de propriété)"Barre".
Sur ce même calque créez un champ texte dynamique de nom d'occurence "Pourcentage".
Les élements graphiques sont prés, si je récapitule, nous somme sur lascéquence "Chargement" contenant 2 calques, un nommé "Actions", l'autre"Eléments", sur ce dernier, nous avons un clip nommé "Barre" et unchamp texte dynamique nommé "Pourcentage".
3/ Le code ActionScript
Séléctionnez le calque "Actions", la premiere image (d'ailleur il n'yen a qu'une) et ouvrez le panneau d'ActionScript (F9), il doit y avoirécrit en haut dans le titre de la fenetre "Actions - Image", sinonc'est que vous n'avez pas selectionné l'image sur le calque "Actions".
et il nous faut noté ceci :
Premierement, on type les élements graphique pour l'aide a la saisie du code ActionScript :
var Barre:MovieClip;
var Pourcentage:TextField;
Ensuite, nous passons le champ texte dynamique en html, histoire que ce soit plus jolie :
Pourcentage.html = true;
Puis nous allons définir une fonction onEnterFrame qui va nous permettre de savoir ou nous en somme du chargement
Une fonction onEnterFrame, est une fonction récurente, c'est à direexecuté en permanance tant que l'on ne l'arrete pas (la supprime pas),sur une animation cadencé a 12 images par secondes (valeur par défaut)le code contenu dans la fonction onEnterFrame sera éxécuté 12 fois parseconde.
function onEnterFrame(){
// calcul du pourcentage chargé
var pc = _root.getBytesLoaded()*100/_root.getBytesTotal();
// on redimentionne la barre de progression du chargement.
Barre._xscale = pc;
// on met a jour le champ text
Pourcentage.htmlText = "Chargement : <b>"+Math.round(pc)+"%</b> effectué";
// on vérifie si le chargement est complet
if (pc >= 100){
// si oui
// on supprime la fonction onEnterFrame qui ne sert plus.
delete onEnterFrame;
// on va à la scéquence suivante, le site.
play();
}
}
et enfin il ne faut pas oublier de mettre un stop(); pour ne pas passé directement à la séquence "Site".
stop();
Récapitulation du code :
var Barre:MovieClip;
var Pourcentage:TextField;
Pourcentage.html = true;
// on défini une fonction onEnterFrame, éxécuté en permanace pour controler le chargement
function onEnterFrame(){
// calcul du pourcentage chargé
var pc = _root.getBytesLoaded()*100/_root.getBytesTotal();
// on redimentionne la barre de progression du chargement.
Barre._xscale = pc;
// on met a jour le champ text
Pourcentage.htmlText = "Chargement : <b>"+Math.round(pc)+"%</b> effectué";
// on vérifie si le chargement est complet
if (pc >= 100){
// si oui
// on supprime la fonction onEnterFrame qui ne sert plus.
delete onEnterFrame;
// on va à la scéquence suivante, le site.
play();
}
}
stop();
Et voilà le préchargement pour votre site est fini.
Vous pouvez mantenant imagine ce que vous voulez comme animation de chargement...
N'oublier de mettre un stop a la fin de votre séquence "Site" (ou a lapremiere image s'il y en a qu'une) pour ne pas revenir en boucle auchargement.
Pour tester votrechargement dans Flash, vous devez compilez votre animation une premierefois (CTRL+ENTRER) et refaire CTRL+ENTRER une seconde fois, sans avoirrefermer la fenetre.
Voici un FLA d'exemple.
Chargement de fichier externe :
Nous allons commencer avec le chargement de clip externe, une image jpg fera parfaitement l'affaire
Donc copiez vous une image jpg dans votre dossier de travail, et nommez là "image.jpg".
Le model de fonctionnement est le même que pour le chargement del'animation principale. Nous allons utilise un onEnterFrame pourvérifier le chargement de l'image dans le clip
Un clip (img/jpg et png/gif en plus pour Flash8) se charge soit sur unniveau (loadMovieNum) , soit dans un movieclip préexistant(clip.loadMovie).
Nous allons nous voir comment faire le chargement et le controler dans un clip (je préferes personnellement cette méthode)
1/ Les éléments graphiques
Donc vous devez créez un clip vide soit via la bibliothèque(cliquez sur le nenu de la bibliothèque > nouveau symbole) et placéle sur la scéquence
Soit en desinant un forme, la selectionnant, appuyez sur F8 pour créer un symbole. Et suprrimer le dessin dans ce symbole
Vous avez donc un clip posé sur la scéquence.
Nommez ce clip "Image".
Nous allons ajouter aussi un bouton qui lancera le chargement, et nommez son occurence : "ChargerImage"
Faites un nouveau calque et nommez le "Actions".
2/ le code ActionScipt
Séléctionnez le calque "Actions" et ouvrez le panneau d'actions.
On va créer un fonction charger(nomImage) qui créera la fonctiononEnterFrame (pour ne l'avoir que quand c'est nécessaire) et lancera lechargement de l'image.
On commence par typé les élements graphiques pour l'aide a la saissie :
var Image:MovieClip;
var Barre:MovieClip;
Puis on cache la barre de chargement par default.
Barre._visible = false;
On créer la fonction charger :
function charger(url){
// on affiche la barre de chargement
Barre._visible = true;
Barre._xscale = 0;
// création dela fonction récurente de control de chargement
onEnterFrame = function(){
// calcul du pourcentage chargé
var pc = Image.getBytesLoaded()*100/Image.getBytesTotal();
// ajustement de la taille de la barre de chargement
Barre._xscale = pc;
if (pc >= 100){
// si c'est charger on stop (supprime) le control
delete onEnterFrame;
// et on recache la barre de chargement
Barre._visible = false;
}
}
// ici on lance le chargement de l'image dans le clip
Image.loadMovie(url);
}
Il ne reste plus qu'a mettre l'appel de la fonction de charement sur le bouton :
on(release){
charger("image.jpg");
}
Vous pouvez modifier ce script pour charger des sons MP3, ou encore desfichiers XML ou les données LoadVars (seulement de fichier brut txt caravec un scipt serveur genre php ca ne marche pas, le texte ecritn'ayant pas de taille prédéfini a l'avance)
Pour les sons,
Créez un objet Sound, charger un MP3, en non streaming et controler son chargement avec getBytesLoaded()
var son:Sound = new Sound()
son.loadSound("audio.mp3",false);
le onEnterFrame et le mm, en ciblant le son et nom le clip bien sur.
Il en est de mm avec les XML et LoadVars, référez vous a l'aide plus plus de détails.
Récapitulation du code :
Sur Image dans le scénario
var Image:MovieClip;
var Barre:MovieClip;
Barre._visible = false;
function charger(url){
// on affiche la barre de chargement
Barre._visible = true;
Barre._xscale = 0;
// création dela fonction récurente de control de chargement
onEnterFrame = function(){
// calcul du pourcentage chargé
var pc = Image.getBytesLoaded()*100/Image.getBytesTotal();
// ajustement de la taille de la barre de chargement
Barre._xscale = pc;
if (pc >= 100){
// si c'est charger on stop (supprime) le control
delete onEnterFrame;
// et on recache la barre de chargement
Barre._visible = false;
}
}
// ici on lance le chargement de l'image dans le clip
Image.loadMovie(url);
}
et sur le bouton
on(release){
charger("image.jpg");
}
Voici le FLA d'exemple.
FIN
_Benjy chez kOlapsis
Merci de penser a noté ce tutorial...
 Commentaires
|
Comparez les prix Nouvelle version
|