Bon, alors tout d'abord, désolé mais ce tutorial va se faire
avec flash 5 et non pas avec flash MX qui est la version la plus récente.
Ceci à cause de petits problèmes indépendants de ma volonté
:) .
Vous vous retrouvez alors avec 2 scènes, la première
servira à placer le préloader, et la seconde votre animation
principale.
==> allez sur la scène
2 :
Bon ici, vous faîtes votre anim principale, pour ma part,
vu que c'est un exemple de préloader et pas d'animation proprement
dite, il me faut juste mettre du poids à l'anim afin que l'on puisse
attendre le chargement et donc voir le préloader :) .
C'est pourquoi j'ai fait une impression écran du site que j'ai importé
sous photoshop et en enlevant la barre d'état à mon impression
écran, puis en la redimensionnant, cela me donne du 650 par 475 !!
Et là, vous faîtes, ouahhhhhh !!!!, c'est pour cela qu'il demande
de faire une animation de taille 650 par 475 ! ......et wé :), la taille
on s'en fout complètement mais bon fallait bien que je mette quelque
chose ;o) .
==> Alors je fais mon anim principale
(je met mon image :) ), et je met un stop sur la dernière image (bon
moi j'en ai qu'une ok ! et alors ...). clic droit sur l'image clé
==> actions ==> actions de base ==>
stop
==> Vous revenez sur la scène
1, et là les choses sérieuses commencent !
==> Vous créez un clip,
Insertion ==> nouveau symbole ==>
clip (que vous nommez barre)
==> Si vous ne vous trouvez pas
directement dans le clip pour y bosser, allez -y en affichant la bibliothèque
(Ctrl + L) et en doucle-cliquant dessus.
==> Affichez les règles
(Ctrl + Maj + Alt + R) ou affichage ==>
règles , et faîtes un rectangle
(bleu ici) sur le premier calque, que vous nommez masque (le calque):
==> Toujours dans le clip, créez
un nouveau calque (Insertion ==> calque)
en dessous du premier, vous le nommez barre de chargement, et vous
y placez un rectangle 2 fois plus grand que le précédent
de sorte que le premier rectangle ne recouvre que la moitié droite du
deuxième (en rouge). (Si vous ne comprenez pas, reportez-vous à
la ressource téléchargeable en bas de page ) Cela doit vous donnez
cela :
==> on va utilisé un système
de masque qui a déjà
été expliqué auparavant, faîtes donc un clic
droit sur le premier calque, puis cliquez sur Masque. Les
calques changent d'apparence et ressemble à cela :
==> Sortez de ce clip, et créez
en un nouveau du nom de loader avec comme nom du premier calque script.
Sur celui-ci, allez sur la première image-clé, faîtes
F6 pour créer une nouvelle image, clic droit
==> action, et passez en mode expert pour
pouvoir taper le script :
//récupère la largeur du clip barre
largeurBarre = getProperty( barre, _width );
==> Faîtes une seconde image
clé sur le même calque et mettez-y le code suivant
:
total_bytes = _root.getBytesTotal(); //récupère
le poids total de l'animation
loaded_bytes = _root.getBytesLoaded(); //récupère le poids déjà
chargé de l'animation
remaining_bytes = total_bytes-loaded_bytes; //calcul le poids de l'animation
qu'il reste à charger
//pourcentage de chargement
pourcentage = loaded_bytes/total_bytes;
//pourcentage de chargement en entier
percent_done = int(pourcentage*100);
//affecte la nouvelle taille au clip
setProperty( barre, _width ,int(largeurBarre*pourcentage));
//affichage pourcentage chargé
_root.txt_loader = Math.round(percent_done)add '%';
//si la scène 2 est chargée, on y va !
ifFrameLoaded ("Scène 2", 1) {
gotoAndStop ("Scène 2", 1);
}
==> Faîtes une troisième
image clé et toujours dans les actions tapez
:
gotoAndPlay (2);
==> Insérez ensuite
un calque nommé barre et placez-y le clip
barre (que vous avez créé auparavant) sur la première
image-clé en faisant un glisser/déposer de la bibliothèque
sur l'anim.
==> Placez-vous sur la troisième
image-clé de ce même calque et faîtes F6.
Vous devez avoir cela :
==> vous pouvez ressortir du clip,
vous vous trouvez donc sur la scène 1 avec un calque que vous
allez nommer script_barre . Sur celui-ci, allez sur la première
image-clé, faîtes F6 pour créer
une nouvelle image puis placez-y le clip loader
(glisser/déposer de la bibliothèque(Ctrl+L) sur l'anim).
==> Insérez un calque
que vous allez nommer txt_loader, et faîtes un champ
texte grâce à l'outil A dans la palette
d'outils. Sélectionnez-le et dans le cadre Options
de texte à l'onglet Options de texte, sélectionnez texte
dynamique et mettez comme nom de variable txt_loader.
==> vous pouvez ensuite placer
un peu de texte pour illustrer votre barre de chargement :
Pour tester le rendu, cliquez
ici !, la ressource est téléchargeable en bas de page
dans la flèche.
