1) Ouvrir flash.
2) Importer dans la bibliothèque l'image désirée (prenez une image assez volumineuse)
3) Nous allons créer un nouveau movieclip (F11 ensuite en haut à droite de la bibliothèque ds la liste box, cliquez sur nouveau symbol)
4) Nommez le : progressBar
5) une fois dans le clip, créé trois calques
- Image
- Aiguille
- Guide
ils doivent se trouver dans cette ordre :
Guide
Aiguille
Image
6) Importez l'image de votre compteur dans la bibliothèque ou dessinez l'image sur le calque IMAGE
7) Importez l'image de votre aiguille dans la bibliothèque ou dessinez l'image sur le calque AIGUILLE
8) Créé un nouveau moviclip qui contient l'image de votre aguille (ou sélectionner votre aiguille et faite F8)
9) Maintenant nous allons crée le guide pour l'aiguille, placé vous sur le calque guide et dessiné un arc de cercle qui va du 0 à 100
10) Faite un clic droit sur le calque guide et choisissez guide, ensuite cliquez sur le calque aiguille et déposé le sur le calque guide afin qui le petit marteau devienne une ligne rouge avec un point bleu
11) En frame 1 votre aiguille est en zéro et en frame 100 elle est positionnée sur 100
12) Maintenant revenez sur la scène principale et déposer le MovieClip : progressBar
13) Cliquez dessus et donner lui comme nom d'instance : progressBar
14) Cliquez sur le movieclip : progressBar et placer le code suivant dessus dans le panneau action
Les commentaires sont dans le code :
onClipEvent (load) // L'action commence dès que le clip s'affiche dans le scénario
{ // La variable total est égal au poids total de l'animation
total = _root.getBytesTotal(); // Renvoie le nombre total d'octets à télécharger
}
onClipEvent (enterFrame) // L'action est déclenchée de façon continue
{ // La variable loaded est égal au poids déjà chargé de l'animation
loaded = _root.getBytesLoaded(); // Renvoie le nombre d'octets téléchargés
percent = Math.round(loaded / total * 100); // arrondit la variable percent (pourcentage)
_root.text = "" + percent + " %"; // Indique le pourcentage dans le clip
gotoAndStop(percent); // vas jusqu'à la valeur percent
if (loaded == total) // si le chargement est égal au total
{
_root.gotoAndPlay(2); // vas à l'image 2 pour lancer l'animation
} // fin du chargement
}
15) Sur la scène principale, dessinez une zone de texte dynamique et donnez comme nom de variable : text
16) En frame 2, sur un nouveau calque placé votre image et ajouté dans action un stop();
17) Faite ctrl+enter afin de tester
C'est fini...
Démo : ICI
Source : ICI
Burnside.