Accueil > > > CONTROL DU CHARGEMENT DE SITE & DU CHARGEMENT DE CLIP
CONTROL DU CHARGEMENT DE SITE & DU CHARGEMENT DE CLIP
Information sur le tutoriel
Note :
9,38 / 10
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
|
Derniers Blogs
TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko [FRAMEWORK 4] LES TASKS ET LE THREAD UI[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi
Je viens de passer quelques temps au TechDay's et j'ai pu voir pas mal de session intéressante. Par contre une chose m'a un peu étonné lors de certaines de ces sessions qui abordaient les améliorations du framework .NET (donc le 4.5) : en gros, bea...
Cliquez pour lire la suite de l'article par fathi WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBEWORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson
Depuis déjà un an, je conseille vivement les utilisateurs de Workflow Foundation 3 à migrer vers la version 4. L'information qui va suivre ne devrait donc pas trop prendre au dépourvu les personnes qui m'ont suivi. Je profite de ce poste, pour faire le re...
Cliquez pour lire la suite de l'article par JeremyJeanson TECHDAYS PARIS 2012 : NOUVELLES TENDANCES DU POSTE DE TRAVAIL - BRING YOUR OWN PCTECHDAYS PARIS 2012 : NOUVELLES TENDANCES DU POSTE DE TRAVAIL - BRING YOUR OWN PC par ROMELARD Fabrice
Speakers: Thierry Rapatout, Antoine Petit et Xavier Trebbia Cette session entre dans le cadre des RDV Décideurs des TechDays 2012, elle est liée à la consumérisation de l'IT et la mise en place du "DeskTop as a Service" dans de plus en ...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|