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 2010 : PLEINIèRE DERNIER JOURTECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice
Cette session est la dernière pleinière de ces 3 jours de TechDays Paris 2010. Généralement, cette troisième journée est plus axée sur l'avenir vu par Microsoft. Après un retour sur l'avenir vu par la Science Fiction ou par ...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|